DNA

Progressive Web Components.

Use in Node.js

DNA is a component library based on the Document Object Model. In order to work in Node.js it uses the jsdom library to create a DOM environment.

$ npm i @chialab/dna jsdom
$ yarn add @chialab/dna jsdom

Sample:

import { Component, customElements, html, render } from '@chialab/dna';

class HelloWorld extends Component {
    render() {
        return html`&lt;h1>Hello world!&lt;/h1>`;
    }
}

customElements.define('hello-world', HelloWorld);

const card = render(html`&lt;${HelloWorld} />`);

console.log(card.outerHTML);
// -> "&lt;hello-world>&lt;h1>Hello world!&lt;/h1>&lt;/hello-world>"

The card reference in the example above is a Node instance, so you can use any HTMLElement.prototype methods or update a property and get the re-render result with .outerHTML.