@chialab/dna

Evolution-based components.

---

Does the world really need another Component library?

Since its first version, DNA aims to provide a temporarary interface to define Web Components in a simple, light and declarative way until browsers support is complete. Other libraries like Polymer and LitElement requires heavy Web Components polyfills in order to work in all browsers. Instead, DNA 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, simple and predective, 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 Interpolated Templates to avoid the build step in your workflow.

Properties, async render, slots... and more!

DNA comes with a lot of features in a very small (< 5kb gzipped) package. You can use <slot> elements like in Shadow DOM contexts, render Promises results, observe properties changes and delegate events.

Get the library

Usage via unpkg.com:

<!-- As UMD package -->
<script src="https://unpkg.com/@chialab/dna" type="text/javascript"></script>

<!-- As module -->
<script type="module">
    import('https://unpkg.com/@chialab/dna?module')
        .then((DNA) => {
            //
        });
</script>

Install via NPM:

# NPM
$ npm install @chialab/dna
# Yarn
$ yarn add @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.

Expand the code

Define a template

<template name="hello-component">
    <style scoped>
        :host {
            display: block;
            padding: 10px;
        }

        .message {
            display: flex;
            align-items: center;
        }

        .icon {
            font-size: 50px;
        }
    </style>
    <form>
        <label>What's your name?</label>
        <input type="text" name="name" />
    </form>
    <span class="message">
        <span class="icon">👋🏻</span> Hello [[ name ]]
    </span>
</template>

Define the Component

import { Component, property, define, render } from '@chialab/dna';

class HelloComponent extends Component {
    @property() // define an observable Component property
    name: string;

    get events() { // define a list of delegated events
        return {
            'input [name="name"]': (ev, target) => {
                this.name = target.value;
            },
        };
    }
}

// link the Component class to a tag
define('hello-component', HelloComponent);

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

---

Development

Requirements

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

• NodeJS (>= 8.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.