Virtual dom

Efficient, extremely small and designed for webcomponents

The virtual-dom is simply a light and declarative representation of the DOM, which can be declared using Jsx, Template string, h function or as an object.

Syntax

h function : This function is to create the virtual-dom and is used for the configuration of JSX pragma, you can use h without the need of JSX, eg:

import { h } from "atomico";
function Component() {
return h("host",null,
"i'm text",
h("div",{ onclick: handler },"i'm div, click me!")
);
}

JSX, Syntax inherited from React.

/*@jsx h*/
import { h } from "atomico";
function Component() {
return (
<host>
i'm text
<div onclick={handler}>i'm div, click me!</div>
</host>
);
}

Template String: use the html function to create the virtual-dom using a template-string, this is thanks to the htm library, eg:

import html from "atomico/html";
function Component() {
return html`
<host>
i'm text
<div onclick="{handler}">i'm div, click me!</div>
</host>
`;
}

Virtual-dom object: you can analyze the output of the h function to know the structure of this object, you can declare that the virtual-dom maintains the same structure that returns the h function

function Component() {
return {
nodeType: "host",
children: [
"i'm text",
{ nodeType: "div", onclick: handler, children: ["i'm div, click me!"] }
]
};
}

All the exposed syntaxes are considered valid, the Atomico virtual-dom does not maintain references so you can reuse a node without problems between components, this is highly efficient if you want the render process to ignore static nodes, eg:

let staticVnode = <h1>node!</h1>
function WebComponent({value}){
return <host>
{static}
<h1>dinamic {value}</h1>
</host>
}

Lists and Keyes

The render process reuses existing nodes when a new children map is generated, eg:

<host>
<my-tag/>
<my-tag/>
<my-tag/>
</host>

This brings problems when each node retains an independent state, since each new list does not reference the node based on its state.

This is solved with the use of the key property, this property allows Atomico to reference the node not by position in the list, but by the referential index, this index must meet the following requirements:

  1. Unique among all the brothers

  2. All brothers must also have an index

<host>
<my-tag key="1"/>
<my-tag key="2"/>
<my-tag key="3"/>
</host>

This optimizes the manipulation of the sun by regenerating and maintaining the states associated with the node correctly.

shadowDom

Special property of virtual-dom that allows to activate the shadowDom of a node, eg

<host shadowDom>
inside shadowDom!
</host>
<host>
inside lightDom!
</host>

This property can be used on any node that supports attachShadow

Css

let styleSheet = `
:host{width:100px;height:100px}
`
<host shadowDom>
<style>${styleSheet}</style>
children...
</host>

is

the web-components allow to extend functionalities on existing tags in the document through the use of is, atomico supports this declaration, eg:

<button is="my-button"></button>

Events

The association of events in Atomico requires 2 conditions:

  1. the name of the event must begin with the prefix on.

  2. the event name value must be a function.

<host onclick={handler} onmyCustomEvent={handler}>
</host>

Atomico does not apply additional transformers outside of removing the prefix on to subscribe the event.