Компоненты и адаптеры

Каждый @block компилируется в типизированный компонент для вашего фреймворка. За это отвечает адаптер — отдельный пакет под каждый фреймворк (React, Vue, Svelte, SolidJS, Astro) и под чистый DOM. Какой адаптер активен, задаёт defaultAdapter в конфигурации.

Имя компонента

Имя компонента — это префикс + имя блока. По умолчанию префикс — E:

• @block Button → EButton
• @block Card → ECard

Префикс настраивается опцией componentNamePrefix. Компонент импортируется напрямую из .ecss-файла:

import { EButton } from './Button.ecss';

Параметры — проп params

Параметры блока передаются единственным пропом params. Их типы выводятся из @param-объявлений, поэтому передать недопустимое значение не получится:

<EButton as="button" params={{ variant: 'primary' }}>
  Нажми меня
</EButton>

Подробнее о связи @param ↔ params — в разделе Параметры и состояния.

Тег — проп as

По умолчанию компонент рендерится как <div>. Проп as меняет корневой тег, а типизация подстраивает допустимые HTML-атрибуты под выбранный тег:

<EButton as="button" type="submit" params={{ variant: 'primary' }}>Отправить</EButton>

<EButton as="a" href="/about" params={{ variant: 'ghost' }}>Ссылка</EButton>

TIP

Не забывайте as для семантики: <EButton> без as отрендерится как <div>. Для кнопки укажите as="button", для ссылки — as="a".

Вложенные элементы

Если в блоке объявлены @element, они доступны как вложенные компоненты через статические свойства корневого:

<EButton params={{ withIcon: true }}>
  <EButton.Icon>★</EButton.Icon>
  <EButton.Text>Нажми меня</EButton.Text>
</EButton>

Какой адаптер выбрать

У всех адаптеров одинаковый API (params, as, суб-компоненты) — отличается только синтаксис конкретного фреймворка. Выберите свой:

• React · Vue · Svelte · SolidJS
• Astro — статические страницы и SSR без клиентского JS
• Vanilla JS (DOM) — без фреймворка

Общий API всех адаптеров описан в обзоре адаптеров.