@chialab/dna

DNA • Progressive Web Components

---

DNA is a component library which aims to provide a temporarary 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 and Shadow DOM flexibility, 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) and as UMD module (targeting ES5), 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 UMD package:

<script src="https://unpkg.com/@chialab/dna" type="text/javascript"></script>

or as ES6 module:

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

Install via NPM:

# NPM
$ npm install @chialab/dna
# Yarn
$ yarn add @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, customElements, html, property, render } from '@chialab/dna';

class HelloWorld extends Component {
    static get observedAttributes() {
        return ['name'];
    }

    get listeners() {
        return {
            // delegate an event
            'change input[name="firstName"]': this.setName,
        };
    }

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

    setName(event, target) {
        this.name = target.value;
    }

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

// link the Component class to a tag
customElements.define('hello-world', HelloWorld);

// render the Component
render(document.body, new HelloWorld);

Then use the element in your HTML:

<hello-world />

---

Development

Requirements

In order to build and test DNA, the following requirements are needed:

• NodeJS (>= 10.0.0)
• Yarn
• RNA (>= 3.0.0)

Build the project

Install the dependencies and run the build script:

$ yarn install
$ yarn build

This will generate the UMD and ESM bundles in the dist folder, as well as the declaration file.

Test the project

Run the test script:

$ yarn test

---

License

DNA is released under the MIT license.