@chialab/dna

DNA • Progressive Web Components

---

DNA is a component library which aims to provide a temporary interface to define declarative Web Components until browsers support is complete. Instead of requiring heavy polyfills in order to work in all browsers, DNA's philosophy is to use its template engine to handle Custom Elements life cycle, resulting more efficient, reliable and light.

Design Web Components

DNA does not introduce any custom pattern for Component definitions, since it is based on the standard Custom Elements specifications, so the life cycle is almost the same, with some helper methods.

Fast and reliable

In order to be fast, predictive and easier to install, DNA uses a custom template engine. Components automatically re-render when the state change and only the necessary patches are applied to the DOM tree thanks to an in-place diffing algorithm.

Interpolation and JSX

If you are familiar with JSX, you can write your templates using the React syntax, but if you prefer to use standard JavaScript you can also use template strings to avoid the build step in your workflow.

Properties, slots, Promises and Observables!

DNA comes with a lot of features in a very small package. You can use <slot> elements like in Shadow DOM contexts, observe properties changes and delegate events. It can also resolve Promises and pipe Observables directly in the template.

Browsers support

Tests are run against all ever green browsers, Internet Explorer and old Safari versions. DNA itself does not require any polyfill and it is distribute as ES6 module (with untranspiled classes and async/await statements), but some Babel helpers if you want to use decorators need support for Symbol, Object.assign and Array.prototype.find. Also, a polyfill for Promise is required in IE11 if you are using async methods or the registry's whenDefined method.

Get the library

Usage via unpkg.com as ES6 module:

import { Component, customElements, html, ... } from 'https://unpkg.com/@chialab/dna?module';

Install via NPM:

$ npm i @chialab/dna

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

Define a Component

This is an example of Component defined via DNA. Please refer to the documentation for more examples and cases of use.

Define the Component

import { Component, customElement, html, property } from '@chialab/dna';

@customElement('hello-world')
class HelloWorld extends Component {
    static get listeners() {
        return {
            // delegate an event
            'change input[name="firstName"]': function() {
                this.name = target.value;
            },
        };
    }

    // define an observed property
    @property() name = '';

    render() {
        return html`
            <input name="firstName" value="${this.name}" />
            <h1>Hello ${this.name || 'World'}!</h1>
        `;
    }
}

Then use the element in your HTML:

<hello-world />

---

Development

Requirements

Build the project

Install the dependencies and run the build script:

$ npm run install
$ npm run build

This will generate the the ESM bundles in the dist folder, as well as the declaration files.

Test the project

Run the test script:

$ npm run test

---

License

DNA is released under the MIT license.