@evg656e/requirify

requirify

Node-style require for browser-like and QML JavaScript environments.

Why?

Super fast (in terms of setup) prototyping. No need to build assets, no need to rebuild QML apps. When ready, fallback to Webpack (or whatever tool) builds.

Install

npm install @evg656e/requirify --save-dev

Usage

You can find some code examples in https://github.com/evg656e/broadcast-example and this project test folder.

Browsers with local files

Enable local file support:

• Chrome: run chrome --allow-file-access-from-files
• Firefox: go to about:config, set security.fileuri.strict_origin_policy to false (you will probably want to create separate profile for this)

Add link to requirify to HTML page:

<!--  Change paths appropriate to your project structure. -->
<script src="./node_modules/@evg656e/requirify/dist/require.js"></script>

Now you can access Node-like modules within your page:

var Button = require('./lib/button');

var btn = new Button('Go!');
btn.on('clicked', function(target) {
    console.log('Button clicked:', target.text);
});
btn.click();

Where lib/button.js is:

var Widget = require('./widget');

function Button(text, parent) {
    Widget.call(this, parent);
    this.text = text;
}

Button.prototype = Object.create(Widget.prototype);
Button.prototype.constructor = Button;

Button.prototype.click = function() {
    this.emit('clicked', this);
};

module.exports = Button;

And lib/widget.js is:

var EventEmitter = require('events'); // https://www.npmjs.com/package/events 

function Widget(parent) {
    EventEmitter.call(this);
    this.parent = parent;
    this.visible = false;
}

Widget.prototype = Object.create(EventEmitter.prototype);
Widget.prototype.constructor = Widget;

Widget.prototype.show = function() {
    if (!this.visible) {
        this.visible = !this.visible;
        this.emit('visibilityChanged', this);
    }
};

module.exports = Widget;

QML with qmlscene

Install Qt.

Open Qt Creator, choose New Project -> Qt Quick UI Prototype.

In Projects tree Add New... -> Qt -> JS File:

Qt.include('./node_modules/@evg656e/requirify/dist/require.js'); // change paths to appropriate for you project structure

var Button = require('./lib/button');

In QML file:

import QtQuick 2.8
import QtQuick.Window 2.2
import './lib.js' as Lib // <-- import JS resource, see http://doc.qt.io/qt-5/qtqml-javascript-imports.html

Window {
    id: window
    // ...
    Component.onCompleted: {
        var btn = new Lib.Button('Go!');
        btn.on('clicked', function(target) {
            console.log('Button clicked:', target.text);
        });
        btn.click();
        // you can access QML items from JS, e.g.:
        var btn2 = new Lib.Button('Click me', window); // <-- you can use QML Window properties and methods within JS code
    }
}

Node.js HTTP server

To make work require with server-side generated HTML pages, handle require-path header in your HTTP server:

const http = require('http');
const url = require('url');
const fs = require('fs');

http.createServer(function(req, res) {
    // add this block (don't use this in production!)
    const requirePath = req.headers['require-path'];
    if (requirePath) {
        res.writeHead(200);
        fs.createReadStream(requirePath).on('error', () => {
            res.writeHead(404)
            res.end()
        }).pipe(res);
    }
    // ...
}).listen(8080);

Now JS-files will be send from HTTP server (including modules from node_modules like events). See https://github.com/evg656e/broadcast-example for details.

ES6 and Babel

You can prototype with ES6 modules, using babel-standalone for Browsers and QML, and babel-register for Node.js.

Enable ES6 in HTML JS:

var Babel = require('./node_modules/babel-standalone');
require.extensions['.js'] = function(content) {
    return Babel.transform(content, { presets: ['es2015'] }).code;
};
var Foo = require('./lib/foo').default; // <- foo contains ES6 code and uses ES6 modules (import/export)

Enable ES6 in QML JS:

Qt.include('./node_modules/@evg656e/requirify/dist/require.js');
var Babel = require('./node_modules/@evg656e/requirify/dist/babel.qml'); // <- use patched version of babel-standalone from requirify, standard version won't work because of QML JS engine bugs
require.extensions['.js'] = function(content) {
   return Babel.transform(content, { presets: ['es2015'] }).code;
};
var Foo = require('./lib/foo').default;

Enable ES6 in Node:

require('babel-register');
const Foo = require('./lib/foo').default;

See https://babeljs.io/docs/usage/babel-register/ for details.