test-dom.md

description
Atomico optimizes the execution of your script by minimizing resources through the rendering control.

Render cycle

Atomico's render cycle works like this:

First, when the component is instantiated, 3 promises will be created pending resolution:

1. componentInstance.mounted: resolved once the connectedCallback has been executed by the customElement.
2. componentInstance.updated: the render cycle for first mount or update is encapsulated in componentInstance.updated.
3. componentInstance.unmounted: resolved once the disconnectedCallback has been executed by the customElement.

Render or rerender cases are:

1. First render.
2. Updating a property or attribute.
3. Update dispatched by a hook

Remember all updates are stacked into a single big loop of componentInstance.updated.

This improves the testing experience since to observe the changes you only have to wait for the resolution of componentInstance.updated , example:

import { html } from "atomico";
import { expect } from "@esm-bundle/chai";
import { fixture } from "atomico/test-dom";
import { Component } from "./component.js";

describe("my test", () => {
  it("my-component", async () => {
    const componentInstance = fixture(html`<${Component}>
        <span>content...</span>
    </${Component}>`);

    await componentInstance.updated; // fist render

    componentInstance.myProp1 = 10;
    componentInstance.myProp2 = 20;
    componentInstance.myProp3 = 20;

    await componentInstance.updated; // now we can observe the effects on the DOM from the previous updates
    
    await componentInstance.unmounted; // the component has been unmounted
  });
});

Webcomponent as function

The first rendering as the update of a prop will call to execute again the function that defines our component, Atomico internally stores the references to support the Hooks api and will render the virtualDOM returned by said function, this is encapsulated within componentInstance.updated

function component(){
    useEffect(()=>{
        console.log("Component mounted");
        ()=> console.log("Component unmounted");
    }, []);
    return <host/>
}

SSR

Atomico allows modifying its life cycle in cases of SSR, improving the rendering of the CSS in case of SSR and avoiding the effects of useEffect and useLayoutEffect

import {options} from "atomico";

// replace the internal use of CSS StyleSheet by the style tag
options.sheet = false; 

// will avoid hook side effects
options.ssr = true; 

Hydration

Technique to reuse the DOM generated by the SSR, Atomico only in the first render of the component that declares date-hydrate will retrieve the existing DOM in the DOM not created by Atomico to relate it to the virtualDOM, avoiding creating the node again.

Optimization

Atomico by default has a good performance, but it can be further optimized if certain techniques are applied.

Render optimization with static nodes

{% tabs %} {% tab title="JSX" %}

const staticDom = (
  <host shadowDom>
    <slot />
  </host>
);
function component() {
  return staticDom;
}

{% endtab %}

{% tab title="Template string" %}

function component() {
  return html`<host shadowDom>
    <slot />
  </host>`;
}

{% endtab %} {% endtabs %}

A static node is equivalent to using node.cloneNode(true)

render optimization with renderOnce

function component() {
  return <host shadowDom renderOnce>
    <slot />
  </host>
}

The renderOnce property renders the node only once, one of the advantages of this technique is that the virtualDOM can access the scope of the function.