@dnajs/idom

Evolution-based components with IncrementalDOM templates.

Documentation | Issue tracker | Project home page | Author home page

Install

$ npm i @dnajs/idom --save

Usage

Defining a template using IDOM.h

IDOM.h is a wrapper for IncrementalDOM api:

// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return () => IDOM.h('span', 'Hello!');
    }
}

it will look like:

<my-component>
    <span>Hello!</span>
</my-component>

With JSX!

JSX support is provided too, passing IDOM.h as pragma.

$ npm install babel-plugin-transform-react-jsx -D

// .babelrc
...
    "plugins": [
        ...,
        ["transform-react-jsx", { "pragma": "IDOM.h" }],
        ...
    ]
...

// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return <span>Hello!</span>;
    }
}