@atomico/lit-html

@atomico/lit-html will allow you to use lit-html within Atomico, example:

import { c } from "atomico";
import { html } from "@atomico/lit-html";

function component() {
    return html`<h1>Atomico + lit-html</h1>`;
}

The first html return must always come from the @atomico/lit-html model, since atomico adds the render method to this function, which allows atomico to render any library.

Objectives.

1. Support lit-html as an optional renderer for developers who are comfortable with lit-html.
2. Give declarative support to the use of the shadowDom.
3. Support references, to share hooks between Atomico, lit-html, react and react.

shadowDom

import { c } from "atomico";
import { html } from "@atomico/lit-html";

function component({ message }: Props<typeof component>) {
    html.shadowDom = true;
    return html`<h1>Welcome to ${message}!</h1>`;
}

component.props = {
    message: { type: String, value: "Atomico" },
};

customElements.define("my-component", c(component));

useRender

Homologous hook of useRender from @atomico/hooks/use-render.

import { useRender } from "@atomico/lit-html";

function component() {
    useRender(() => html`<input type="text" />`);
}

ref

Allows the use of Atomico references within lit-html.

import { useRef } from "atomico";
import { ref } from "@atomico/lit-html";

function component() {
    const refInput = useRef();
    return html`<input type="text" ${ref(refInput)} />`;
}