Рендеринг разметки

Atomico — это легковесная библиотека для создания веб-компонентов на JavaScript с реактивной моделью состояния. Основной механизм отображения данных в DOM строится вокруг функции html, которая возвращает виртуальное дерево элементов и синхронизируется с реальным DOM при изменении состояния.

Функция html

Функция html используется для создания разметки с синтаксисом, похожим на JSX, но полностью нативным для JavaScript. Она поддерживает вложенные шаблоны, динамические значения и реактивные выражения.

Пример базового использования:

import { c, html, useState } from "atomico";

function Counter() {
    const [count, setCount] = useState(0);

    return html`
        <div>
            <p>Счетчик: ${count}</p>
            <button oncl ick=${() => setCount(count + 1)}>Увеличить</button>
        </div>
    `;
}

customElements.define("my-counter", c(Counter));

В этом примере html формирует виртуальное дерево, которое Atomico автоматически синхронизирует с DOM при изменении состояния count.

Вставка динамических данных

Важной особенностью html является возможность подставлять динамические значения через ${}. Atomico отслеживает изменения этих значений и обновляет только те части DOM, которые изменились, без перерисовки всего компонента.

const name = "Atomico";
html`<h1>Привет, ${name}!</h1>`;

Если name изменяется через реактивное состояние, заголовок автоматически обновится.

Условный рендеринг

Условные блоки создаются с использованием тернарного оператора прямо внутри шаблона html. Это позволяет управлять видимостью элементов без лишних функций.

const isLoggedIn = true;
html`
    <div>
        ${isLoggedIn ? html`<p>Добро пожаловать!</p>` : html`<p>Пожалуйста, войдите</p>`}
    </div>
`;

Списки и циклы

Для динамического создания списков применяются массивы и метод map. Atomico корректно обновляет DOM при изменении массива, минимизируя операции.

const items = ["Яблоко", "Банан", "Апельсин"];
html`
    <ul>
        ${items.map(item => html`<li>${item}</li>`)}
    </ul>
`;

При изменении массива items Atomico добавит, удалит или обновит только те <li>, которые изменились.

Рендеринг вложенных компонентов

Atomico позволяет встраивать компоненты друг в друга, передавая свойства через атрибуты. Это поддерживает модульную архитектуру и повторное использование кода.

function Item({ name }) {
    return html`<li>${name}</li>`;
}

function List() {
    const items = ["A", "B", "C"];
    return html`
        <ul>
            ${items.map(name => html`<${Item} name=${name} />`)}
        </ul>
    `;
}

Использование синтаксиса <${Component} ... /> позволяет Atomico корректно создавать и обновлять экземпляры вложенных компонентов.

События и управление DOM

События в Atomico связываются через атрибуты вида onclick, oninput и т.д. Функции-обработчики могут напрямую изменять реактивное состояние, что автоматически инициирует перерисовку соответствующих участков DOM.

const [value, setValue] = useState("");

html`
    <input value=${value} onin put=${e => setValue(e.target.value)} />
    <p>Вы ввели: ${value}</p>
`;

Эффективность рендеринга

Atomico использует виртуальное дерево и диффинг для минимизации операций с DOM. При изменении состояния библиотека не пересоздает весь узел, а обновляет только изменившиеся атрибуты, текст и дочерние элементы. Это позволяет создавать сложные интерактивные интерфейсы с высокой производительностью.

Использование слотов

Для организации гибкой разметки в компонентах применяются слоты. Они позволяют передавать произвольный контент внутрь компонента.

function Card() {
    return html`
        <div class="card">
            <slot></slot>
        </div>
    `;
}

html`<${Card}><p>Контент карты</p></${Card}>`;

Слоты поддерживают вложенность и позволяют создавать универсальные компоненты с настраиваемой структурой контента.

Заключение по рендерингу

В Atomico рендеринг строится вокруг функции html, реактивного состояния через useState и диффинга виртуального дерева. Комбинация динамических выражений, вложенных компонентов, условного рендеринга и слотов позволяет создавать масштабируемые, быстрые и читаемые интерфейсы на чистом JavaScript без необходимости в сложных шаблонизаторах.

Этот подход делает Atomico удобной библиотекой для создания современных веб-компонентов с минимальными накладными расходами на управление DOM.

Оглавление