electrum-compiler

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

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

Build Electrum-enabled React component

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);