Svelte компоненты

Svelte-компоненты в контексте экосистемы Atomico предоставляют гибридный подход к построению пользовательских интерфейсов, объединяя реактивность шаблонов с нативностью Web Components. Atomico реализует Svelte-подобный стиль декларативного управления состоянием, сохраняя при этом совместимость со стандартом Custom Elements и Shadow DOM.

Компонент Atomico — это функция, возвращающая JSX-разметку, интерпретируемую атомическим рантаймом. Изнутри используется реактивная система атомов и хуков. Svelte-стиль проявляется в минимализме: компоненты содержат состояние, шаблон и логику без промежуточных абстракций.

Пример объявления

import { c, useState } from "atomico";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <host>
      <button oncl ick={() => setCount(count + 1)}>{count}</button>
    </host>
  );
}

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

Структура аналогична Svelte: объявление состояния, использование в шаблоне и реакция на события.

Реактивные конструкции

Локальное состояние

Ключевое преимущество — автоматический рендер при изменениях. Atomico использует хук useState, напоминающий let count = 0 со Svelte-синтаксисом $: count, но опирается на стандартную функциональную модель.

Производные значения

Svelte использует реактивные декларации с префиксом $:. Atomico достигает похожего эффекта через мемоизации и хук useMemo, позволяя избегать лишних вычислений и ненужных повторных отображений.

const total = useMemo(() => items.reduce((a, b) => a + b, 0), [items]);

Пропсы и параметры

Svelte автоматически экспортирует переменные через export let prop. Atomico делает это явным определением props в метаданных компонента.

Counter.props = {
  step: Number
};

Это превращает входные параметры в наблюдаемые атрибуты Custom Element, обеспечивая согласование с DOM API.

События и двусторонняя связь

Svelte предоставляет директивы bind: и on:. Atomico использует нативную модель событий: dispatchEvent и пользовательские CustomEvent-сигналы. Хуки упрощают диспетчеризацию, а Web Components гарантируют изоляцию и сериализацию данных.

const dispatch = useEvent("change");
dispatch(newValue);

Композиция и повторное использование

Svelte продвигает подход компонентов-строительных блоков. Atomico добавляет к этому нативный инкапсулированный рендер через Shadow DOM, позволяя создавать библиотечные наборы элементов, совместимые с фреймворками и браузерами без транспиляции.

Слоты и контент

Поддерживается slot, аналогичный <slot> в Svelte. Это облегчает комбинирование компонентов, сохраняя контроль над стилями и структурой.

Стилизация

Svelte инкапсулирует CSS через компилятор. Atomico использует нативные :host и :host-context, а также scoped-CSS внутри Shadow DOM. Возможна интеграция с CSS-in-JS или статическими таблицами стилей.

Counter.styles = /*css*/`
  button {
    font-size: 1rem;
  }
`;

Рендеринг и оптимизация

Svelte компилирует компонент в императивный код и тем самым минимизирует накладные расходы рантайма. Atomico работает иначе: оно использует виртуальную DOM-модель с неглубокой дифференциацией и оптимизацией по хук-сигналам. В результате достигается близкая к Svelte плавность рендера на небольших компонентах с частыми обновлениями.

Отсечение побочных эффектов

Хуки useEffect и useLayoutEffect контролируют взаимодействие с DOM и сторонними API. Это расширяет модель Svelte-реактивности до функциональной экосистемы, где эффекты отдельны от вычислений.

Серверные сценарии и интеграции

Atomico может рендериться статически, что позволяет использовать компоненты в сборках на основе Vite или Rollup. Подход напоминает SvelteKit-стилевой рендеринг, но без тесной привязки к роутеру и серверным адаптерам. Поддерживается hydrate, что делает компоненты пригодными для прогрессивного улучшения страниц.

Совместимость с Web Components

Svelte обладает адаптерами для вывода в Custom Elements, но их использование не является базовым. Atomico изначально строит компоненты как Custom Elements, что обеспечивает:

  • прямую работу с DOM-деревом
  • интеграцию с любыми фреймворками
  • стабильность API без внутренних специфик

Этот подход важен при создании дизайн-систем и UI-китов, где строгая спецификация интерфейсов имеет первостепенное значение.

Работа со стором и внешним состоянием

Svelte предоставляет собственные store-механизмы (writable, readable, derived). Atomico интегрируется с внешними сторами через хуки. Для сторов поддерживаются оптимизации подписок, позволяющие уменьшить количество ререндеров и удалить лишние подписчики при размонтировании компонента.

Архитектурные преимущества

  • реактивность без тяжелой модели Virtual DOM
  • совместимость со стандартами браузера
  • расширяемая экосистема хук-инструментов
  • минимальный boilerplate
  • простота интеграции в существующие SPA и MPA

Atomico позиционируется как связующее звено между современными реактивными фреймворками и нативной платформой Web Components, а Svelte-подобный стиль делает компоновку декларативной и ясной.

Оглавление