electrum-compiler

This is a run-time compiler for Electrum-enabled React components, based on Babel. It is relying on babel-standalone for the real work and provides additional logic to build live React components directly from source code.

The Compiler class

Transform JavaScript to ES5

To transform JavaScript to ES5, use:

• transform(input) → produces ES5 output based on the JavaScript source.

let input = 'const greet = x => `Hello ${x}.`;';
let compiler = new Compiler ();
let source = compiler.transform (input);
// ES5 compatible source

Build Electrum-enabled React component

To build an Electrum-enabled React component, use:

• build(name, input) → produces a component description; the name of the compoment will be name and its source code defined by input, which must be a source containing a class definition.
• build(name, input, locals) → same as above, but inject the key/value pairs found in locals into the compilation context.
• build(name, input, locals, more) → same as above, more represents additional source code which will be provided to Electrum.wrap() as the more argument (it can be used to bind the component with styles).

let input = 'class extends React.Component { render() { return <div>Hi.</div>; } }';
let compiler = new Compiler ();
let output = compiler.build ('Foo', input);
// Component in output.component

If the source code needs to reference external symbols (for instance other components), they must be registered before calling build():

let input = `
class extends React.Component {
  render() {
    return <Button>{text}</Button>;
  }
}`;
 
let compiler = new Compiler ();
 
compiler.register (Button);
compiler.register ('text', 'Hello')
 
let output = compiler.build ('Foo', input);
// Component in output.component

The output of build() is an object with following properties:

• name → name of the component.
• code → source code used to produce the component.
• component → the component.
• error → the error (if there was an error).

Properties code and component are only present if the call to build() was successful. Otherwise, the error message is stored in error.

Note that the position in the error message will be offset by one line, as build() prepends some code to the given input source.

Accessing the catalog

Items registered on the compiler with register() are stored in a catalog. The catalog can be retrieved through the catalog getter:

let compiler = new Compiler ();
 
compiler.register ('x', {a: 1});
compiler.register ('y', {b: 2});
 
expect (compiler.catalog.x).to.have.property ('a', 1);
expect (compiler.catalog.y).to.have.property ('b', 2);

Evaluating an expression

The compiler also includes an ES6/JSX compatible version of eval() which can be used to evaluate expressions:

let compiler = new Compiler ();
 
expect (compiler.eval ('2 + 3')).to.equal (5);
expect (compiler.eval ('<div></div>')).to.equalJSX (<div />);