Введение
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/core
Пакет разбит на пять слоёв (плюс подпуть для сигнального рантайма):
| Слой | Импорт | Назначение |
|---|---|---|
| Модель | @reformer/core | createModel — источник истины значений; доступ к сигналам через model.$.<field> |
| Форма и ноды | @reformer/core | createForm, FieldNode / GroupNode / ArrayNode; доступ к полям через proxy form.<field> |
| Валидация | @reformer/core/validation | ambient-схема defineValidationSchema + операторы validate, validateAsync, validateWhen, cross, each, apply; раннер validateModel |
| Валидаторы | @reformer/core/validators | чистые фабрики required, email, min, max, minLength, pattern, phone, url, числовые и датовые |
| Behaviors | @reformer/core/behaviors | декларативный DSL defineFormBehavior + операторы compute, onChange, enableWhen, copyFrom, … |
| Signals | @reformer/core/signals | единый реактивный рантайм (signal, computed, effect, batch) для интеграций |
React-хуки (@reformer/core): useFormControl (полное состояние поля), useFormControlValue
(значение T напрямую), useArrayLength (реактивная длина массива).
Дальше
- Установка — добавить ReFormer в проект.
- Быстрый старт — собрать первую форму.
- Основные концепции — как всё устроено внутри.