dna-poster

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

Sample:

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

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

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

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

console.log(card.outerHTML);
// -> "<hello-world><h1>Hello world!</h1></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.