Введение
ReFormer — библиотека для построения сложных форм на React, основанная на сигналах. Она даёт декларативный способ описывать формы с валидацией, вычисляемыми полями и условной логикой — без ручной синхронизации состояния и лишних перерисовок.
Философия: архитектура M1
В основе ядра лежит архитектура M1, разделяющая форму на четыре слоя. Каждый слой отвечает за одну задачу, что делает форму предсказуемой, переиспользуемой и легко тестируемой.
Модель ─────► Схема ─────► Форма ─────► Behavior
createModel привязка createForm defineFormBehavior
значения поле↔сигнал ноды/proxy реактивная логика
- Модель (
createModel) — источник истины для значений. Обычный на вид объект, где под каждым полем стоит реактивный сигнал. Значения принадлежат модели, а не UI. - Схема — дерево узлов, где каждый узел привязывает поле модели к компоненту
(
value: model.$.field) и держит его конфигурацию (component,componentProps,validators). - Форма (
createForm) — строит ноды (FieldNode/GroupNode/ArrayNode) поверх сигналов модели и отдаёт типизированный proxy:form.email,form.address.city. - Behavior (
defineFormBehavior) — декларативная реактивная логика: вычисляемые поля, условная доступность, синхронизация, реакции на изменения.
Такое разделение — ключевая идея: «какие данные собираем» (модель + схема) отделено от «как данные реагируют» (behavior) и от «правильны ли данные» (валидаторы).
Ключевые возможности
- Реактивность на сигналах — точечные обновления без лишних ре-рендеров.
- Типобезопасность — полный вывод типов из формы; доступ к полям через типизированный proxy.
- Декларативная валидация — набор встроенных валидаторов-фабрик + произвольная кастомная логика.
- Декларативные behaviors — вычисляемые поля, условная доступность, синхронизация полей.
- Вложенность и массивы — сложные структуры и динамические списки, принадлежащие модели.
- AI-friendly — предсказуемый API с чёткими паттернами, удобный для генерации ассистентами.
Экосистема
@reformer/core — фундамент. Поверх него:
| Пакет | Назначение |
|---|---|
@reformer/core | ядро: модель, схема, форма, behaviors, валидаторы, хуки |
@reformer/cdk | headless-компоненты (FormArray, FormWizard, FormField) |
@reformer/ui-kit | готовые стилизованные поля (Input, Select, Checkbox, …) |
@reformer/renderer-react | рендеринг формы из render-схемы |
@reformer/renderer-json | форма из JSON-описания |
@reformer/mcp | MCP-сервер для AI-ассистентов |
Дальше
- Установка — добавить ReFormer в проект.
- Быстрый старт — собрать первую форму.
- Основные концепции — как всё устроено внутри.