Синтаксис шаблонов

Atomico — это современная библиотека для создания веб-компонентов на базе JavaScript, обеспечивающая реактивность и модульность. Центральной концепцией является использование шаблонов для описания структуры компонентов. Шаблоны в Atomico строятся с применением JSX-подобного синтаксиса, который компилируется в нативные DOM-элементы и связывается с реактивным состоянием.

Функция html

Для создания шаблонов используется функция html, предоставляемая Atomico. Она позволяет описывать разметку компонентов через шаблонные литералы:

import { html, component } from "atomico";

function Button() {
    return html`
        <button class="primary">Нажми меня</button>
    `;
}

customElements.define("my-button", component(Button));

Ключевые моменты:

  • html возвращает объект, который интерпретируется движком Atomico как виртуальный DOM.
  • Внутри шаблонных литералов можно использовать JavaScript-выражения, оборачивая их в ${}.
  • Поддерживается динамическая вставка атрибутов и событий.

Вставка выражений

Выражения внутри ${} могут быть любыми: переменными, функциями или вычислениями. Atomico автоматически отслеживает изменения реактивного состояния и обновляет DOM:

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

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

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

Особенности:

  • Любые обновления состояния через useState автоматически отражаются в шаблоне.
  • Можно использовать условные выражения и тернарные операторы прямо внутри ${}.

Динамические атрибуты и события

Атрибуты элементов могут быть привязаны к переменным:

const isActive = true;

html`<div class=${isActive ? "active" : "inactive"}></div>`;

События подключаются через JSX-подобный синтаксис:

html`<button oncl ick=${() => console.log("Clicked")}>Клик</button>`;

Особенности:

  • Atomico не использует делегирование событий по умолчанию; обработчик прикрепляется напрямую.
  • Можно использовать любые стандартные DOM-события (oninput, onchange, onmouseover).

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

Для условного отображения элементов применяется стандартный Jav * aScript:

const show = true;

html`
    <div>
        ${show ? html`<p>Элемент видим</p>` : null}
    </div>
`;
  • Возврат null или undefined исключает элемент из DOM.
  • Можно вкладывать целые компоненты в условные выражения.

Рендеринг списков

Atomico позволяет динамически создавать списки элементов с помощью map:

const items = ["Яблоко", "Банан", "Апельсин"];

html`
    <ul>
        ${items.map(item => html`<li>${item}</li>`)}
    </ul>
`;
  • Каждый элемент списка создается как отдельный виртуальный узел.
  • Для больших списков рекомендуется использовать ключи, чтобы минимизировать перерендеринг:
${items.map(item => html`<li key=${item}>${item}</li>`)}

Стилизация внутри шаблонов

Atomico поддерживает встроенные стили через тег css:

import { css } from "atomico";

const style = css`
    button {
        background: blue;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
    }
`;

function StyledButton() {
    return html`
        <div>
            <style>${style}</style>
            <button>Стилизованная кнопка</button>
        </div>
    `;
}
  • Стили локализуются внутри компонента.
  • Можно комбинировать динамические классы и CSS-переменные для реактивного дизайна.

Вложенные компоненты

Шаблоны легко комбинировать, создавая иерархию компонентов:

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

function ItemList({ items }) {
    return html`
        <ul>
            ${items.map(item => html`<${Item} name=${item} />`)}
        </ul>
    `;
}
  • Синтаксис <${Component} ... /> позволяет вставлять компонент в шаблон.
  • Все пропсы передаются через атрибуты, автоматически синхронизируясь с состоянием дочернего компонента.

Динамические фрагменты

Atomico поддерживает фрагменты — группы элементов без обертки:

html`
    <>
        <p>Первый элемент</p>
        <p>Второй элемент</p>
    </>
`;
  • Фрагменты полезны при условном рендеринге нескольких элементов без лишнего DOM-узла.
  • Сохраняют реактивность каждого вложенного узла.

Итоговые принципы работы шаблонов

  1. Шаблоны строятся с помощью функции html.
  2. Вставка выражений через ${} позволяет динамически обновлять содержимое.
  3. События и атрибуты привязываются напрямую к переменным или функциям.
  4. Списки и условные блоки реализуются стандартными JavaScript-конструкциями.
  5. Вложенные компоненты и фрагменты обеспечивают гибкую композицию UI.
  6. Стилизация может быть как локальной через css, так и глобальной при необходимости.

Шаблоны Atomico объединяют реактивность, динамическую разметку и простоту JSX-подобного синтаксиса, делая их ядром построения современных веб-компонентов.

Оглавление