MixSlide
Начать

Введение в кастомные виджеты

Кастомный виджет — это блок, который описывается на основе React-подобного синтаксиса, но исполняется в контролируемом runtime MixSlide.

В отличие от стандартных примитивов, вы:

  • объявляете собственные параметры (цвета, размеры, текст, SVG-данные),
  • рисуете структуру в JSX-подобном виде,
  • получаете пересчёт блока при изменении параметров,
  • можете поддерживать версионность и распространять виджет между проектами.

!(Кастомные и стандартные блоки в библиотеке виджетов)[]

Типичные сценарии

  • фирменный компонент для серии макетов (карточка продукта, метка, CTA);
  • декоративные фигуры, адаптивные к параметрам;
  • текстовые элементы с нестандартной логикой (по оси, по кривой, с векторным рендерингом);
  • генеративные формы (blob, лента, штрих, волны);
  • SVG-объекты с управляемыми атрибутами (stroke/fill/контрольные точки).

Что делает кастомный виджет в общем пайплайне

  1. Код виджета компилируется в IR (compileWidgetV2) при сохранении/валидации.
  2. IR сохраняется как версия виджета и используется в runtime.
  3. Во время рендера runtime вычисляет Widget() с параметрами из блока и строит VDOM-представление.
  4. При изменении свойств блок перерасчитывается только в рамках своей логики.

![Схема: код → IR → runtime → VDOM в блоке] []

Почему важно знать об API и ограничениях

Кастомный код исполняется не в произвольной JS-среде браузера, а в специальном ограниченном движке:

  • нет доступа к window, document, fetch, eval и др.;
  • нет произвольных побочных эффектов;
  • проверяются лимиты по шагам, глубине вызовов, длине строк, числу узлов;
  • поддерживается только набор разрешённых функций и тегов.

Это делает систему безопасной, но требует строгости в коде.

Обновления и совместимость

Увидели баг в опубликованной версии виджета? Вы можете выпустить новую версию и обновить ею экземпляры.

После обновления нужно проверить:

  • не ломаются ли пользовательские проекты (особенно текст-векторизация и обработка v1ParamName);
  • сохранились ли fallback-пути для старых типов параметров;
  • нет ли regressions в fill/stroke и URL-параметрах.