idomizer

An HTML template compiler providing an incremental-dom render factory.

Installation

$ npm install idomizer

<script src="path/to/incremental-dom"></script>
<script src="path/to/idomizer.js"></script>
<script>
    var factory = idomizer.compile('<h1>Hello!</h1>');
    var render = factory(IncrementalDOM);
    IncrementalDOM.patch(document.body, render);
</script>

Babel

A babel's plugin is available to compile an idomizer template into an incremental-dom render factory.

See plugins to get more information about plugins in babel.

{
    plugins: ['idomizers/src/plugins/babel-idomizer.js']
}

Presently the plugin only support ES6 templates tagged with idomizer. Further more the template can not contain expressions like ${anExpression}.

For instance,

let template = idomizer`<h1 class="{{data.h1Class}}">Hello</h1>`;

will be compiled into:

var template = function template(i, h) {
  var o = i.elementOpen,
      c = i.elementClose,
      v = i.elementVoid,
      t = i.text,
      ph = i.elementPlaceholder;
  return function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('h1', null, null, 'class', data.h1Class);
    t('Hello');
    c('h1');
  };
};

Webpack

A webpack's loader is available to compile an idomizer file into an incremental-dom render factory.

See module.loaders to get more information about loaders in webpack.

module.loaders: [
    {test: /\.idomizer$/, loader: 'idomizer/lib/plugins/idomizer-loader'}
];

Browserify

A browserify's transform module is available to compile an idomizer file into an incremental-dom render factory.

See transforms to get more information about the transform system in browserify.

browserify -t idomizer/lib/plugins/idomizerify main.js > bundle.js

var browserify = require('browserify');
var idomizerify = require('idomizer/lib/plugins/idomizerify');
var bundle = browserify();
bundle.transform({ extension: 'html' }, idomizerify);

Systemjs

A SystemJS' plugin is available to compile an idomizer file into an incremental-dom render factory.

See plugin-loaders to get more information about the plugin system in SystemJS.

System.import('./template.idomizer!idomizer/lib/plugins/systemjs-plugin-idomizer.js').then(function (factory) {
    System.import('incremental-dom').then(function (IncrementalDOM) {
        var options = {};
        var data = {};
        var render = tpl(IncrementalDOM, options);
        IncrementalDOM.patch(document.body, render, data);
    });
});

API

idomizer.compile transforms an HTML template into a factory method.

// idomizer.compile('<h1 class="main">Hello</h1>') will return:
function factory(i, h) {
    var o = i.elementOpen,
        c = i.elementClose,
        v = i.elementVoid,
        t = i.text,
        ph = i.elementPlaceholder;
    return function(_data_) {
        var helpers = h || {},
            data = _data_ || {};
        // generated javascript
        // ...
    };
}

The factory method requires the incremental-dom library and an optional map of helpers. The factory returns the incremental-dom's render method.

Syntax

Static attributes

From

idomizer.compile(`<h1 class="main">Hello</h1>`)(IncrementalDOM);

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('h1', null, ['class', 'main'], null);
        t('Hello');
    c('h1');
}

Dynamic attributes

From

idomizer.compile(`<h1 class="{{data.h1Class}}">Hello</h1>`)(IncrementalDOM)

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('h1', null, null, 'class', (data.h1Class));
        t('Hello');
    c('h1');
}

Self closing elements

From

idomizer.compile(`<input type="text" value="{{data.value}}">`)(IncrementalDOM)

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    v('input', null, ['type', 'text'], 'value', (data.value));
}

Dynamic text nodes

From

idomizer.compile(`<strong><tpl-text value="data.value"/></strong>`)(IncrementalDOM)

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('strong', null, null, null);
        t(data.value);
    c('strong');
}

Iteration with the tag each

From

idomizer.compile(`
    <tpl-each items="data.items">
        <strong tpl-key="{{index}}">
            <tpl-text value="index"/>-<tpl-text value="item"/>
        </strong>
    </tpl-each>
`)(IncrementalDOM);

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    (data.items || []).forEach(function (item, index) {
        o('strong', (index), null, null);
            t(index);
            t('-');
            t(item);
        c('strong');
    });
}

Iteration with inline javascript

From

idomizer.compile(`
    {{ data.items.forEach(function (item, i) { }}
        <strong tpl-key="{{i}}">
            <tpl-text value="i"/>-<tpl-text value="item"/>
        </strong>
    {{ }); }}
`)(IncrementalDOM);

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    data.items.forEach(function (item, i) {
        o('strong', (i), null, null);
            t(i);
            t('-');
            t(item);
        c('strong');
    });
}

Custom tags

From

idomizer.compile(`<strong>strong text</strong><x-test></x-test><strong>strong text</strong>`, {
     tags: {
        'x-test': {
            onopentag(name, attrs, key, statics, varArgs, options) {
                return `t('${name} element');`;
            }
        }
    }
})(IncrementalDOM);

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('strong', null, null, null);
        t('strong text');
    c('strong');
    t('x-test element');
    o('strong', null, null, null);
        t('strong text');
    c('strong');
}

Custom helpers

From

let subRender = compile(`helper content`)(IncrementalDOM);
idomizer.compile(`
    <strong>strong text</strong>
    <tpl-call name="subRender" />
    <strong>strong text</strong>
`)(IncrementalDOM, {subRender});

To

function (_data_) {
    var helpers = h || {},
        data = _data_ || {};
    o('strong', null, null, null);
        t('strong text');
    c('strong');
    helpers.subRender(data);
    o('strong', null, null, null);
        t('strong text');
    c('strong');
}