@reformer/core 9.0.0 → 9.1.0

package/README.md

@@ -30,33 +30,35 @@ npm install @reformer/core@beta # Active development is underway, so you can try
 
 ## Quick Start
 
+ReFormer is built around the **M1 architecture**: a reactive `FormModel` owns the values, a single
+schema binds field config (component / validators) to the model's signals, and `createForm({ model, schema })`
+wires them into a typed form.
+
 ```tsx
 import { useMemo } from 'react';
 import {
+  createModel,
   createForm,
+  validateFormModel,
   useFormControl,
-  required,
-  email,
-  validate,
-  watchField,
-  FieldNode,
-  type ValidationSchemaFn,
-  type BehaviorSchemaFn,
+  type FieldNode,
 } from '@reformer/core';
+import { required, email, minLength } from '@reformer/core/validators';
+import { defineFormBehavior, onChange } from '@reformer/core/behaviors';
 
 // 0. Simple FormField component
 function FormField({ label, control }: { label: string; control: FieldNode<string> }) {
-  const { value, errors } = useFormControl(control);
+  const { value, errors, shouldShowError } = useFormControl(control);
 
   return (
     <div>
       <label>{label}</label>
       <input
-        value={value}
+        value={value ?? ''}
         onChange={(e) => control.setValue(e.target.value)}
         onBlur={() => control.markAsTouched()}
       />
-      {errors.length > 0 && <span className="error">{errors[0].message}</span>}
+      {shouldShowError && <span className="error">{errors[0].message}</span>}
     </div>
   );
 }
@@ -69,62 +71,55 @@ interface RegistrationForm {
   confirmPassword: string;
 }
 
-// 2. Form schema
-const formSchema = {
-  username: { value: '' },
-  email: { value: '' },
-  password: { value: '' },
-  confirmPassword: { value: '' },
+// 2. Reactive model — the source of truth for values
+const model = createModel<RegistrationForm>({
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+});
+
+// 3. Single schema — binds field config to model signals (`model.$.<field>`).
+//    Validators are inline factories from `@reformer/core/validators`.
+//    Cross-field validation is a ModelValidator `(value, model) => error | null`.
+const schema = {
+  children: [
+    { value: model.$.username, component: Input, validators: [required(), minLength(2)] },
+    { value: model.$.email, component: Input, validators: [required(), email()] },
+    { value: model.$.password, component: Input, validators: [required(), minLength(8)] },
+    {
+      value: model.$.confirmPassword,
+      component: Input,
+      validators: [
+        required(),
+        (value, m) =>
+          value && m.password && value !== m.password
+            ? { code: 'mismatch', message: 'Passwords do not match' }
+            : null,
+      ],
+    },
+  ],
 };
 
-// 3. Validation schema
-const validationSchema: ValidationSchemaFn<RegistrationForm> = (path) => {
-  required(path.username);
-
-  required(path.email);
-  email(path.email);
-
-  required(path.password);
-  required(path.confirmPassword);
-
-  // Cross-field validation: вешается на поле-носитель ошибки, соседнее поле читается через `root`
-  validate(path.confirmPassword, (value, _control, root) => {
-    const password = root.password.value.value;
-    if (value && password && value !== password) {
-      return { code: 'mismatch', message: 'Passwords do not match' };
-    }
-    return null;
+// 4. Behavior — declarative reactive logic, run by `createForm({ behavior })`.
+//    Clear confirmPassword whenever password changes.
+const behavior = defineFormBehavior<RegistrationForm>(({ model }) => {
+  onChange(model.$.password, () => {
+    if (model.confirmPassword) model.confirmPassword = '';
   });
-};
-
-// 4. Behavior schema
-const behaviorSchema: BehaviorSchemaFn<RegistrationForm> = (path) => {
-  // Clear confirmPassword when password changes (if not empty)
-  watchField(path.password, (_, ctx) => {
-    const confirmValue = ctx.form.confirmPassword.value.value;
-    if (confirmValue) {
-      ctx.form.confirmPassword.setValue('', { emitEvent: false });
-    }
-  });
-};
+});
 
 // 5. Registration form component
 function RegistrationFormExample() {
-  const form = useMemo(
-    () =>
-      createForm<RegistrationForm>({
-        form: formSchema,
-        validation: validationSchema,
-        behavior: behaviorSchema,
-      }),
-    []
-  );
+  const form = useMemo(() => createForm<RegistrationForm>({ model, schema, behavior }), []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    await form.validate();
-    if (form.valid.value) {
-      console.log('Form data:', form.value.value);
+    form.touchAll();
+    // Validate the whole model against the schema (sync + async); errors route into the form.
+    const { valid } = await validateFormModel(model, schema);
+    if (valid) {
+      console.log('Form data:', model.get());
     }
   };
 

package/dist/behaviors-node-BMOI2JJF.js

@@ -0,0 +1,26 @@
+import { effect as o } from "@preact/signals-core";
+import { d as a } from "./behaviors-value-lCpqicfa.js";
+const s = /* @__PURE__ */ new WeakMap();
+function l(e, n) {
+  s.set(e, n);
+}
+function f(e) {
+  return s.get(e);
+}
+function u(e, n, r) {
+  return o(() => {
+    const i = n(), t = f(e);
+    t && a(() => {
+      i ? t.enable() : (t.disable(), r?.resetOnDisable && t.reset());
+    });
+  });
+}
+function g(e, n, r) {
+  return u(e, () => !n(), r);
+}
+export {
+  g as d,
+  u as e,
+  f as g,
+  l as r
+};

package/dist/behaviors-value-lCpqicfa.js

@@ -0,0 +1,148 @@
+import { effect as f } from "@preact/signals-core";
+const a = /* @__PURE__ */ new WeakMap();
+function h(e) {
+  a.set(e, (a.get(e) ?? 0) + 1);
+}
+function y(e) {
+  const n = a.get(e);
+  n !== void 0 && (n <= 1 ? a.delete(e) : a.set(e, n - 1));
+}
+function E(e) {
+  return a.has(e);
+}
+const m = "runOutsideEffect";
+function v(e, n) {
+  process.env.NODE_ENV !== "production" && console.error(`[${n}]`, e);
+}
+function p(e) {
+  return typeof e == "object" && e !== null && typeof e.then == "function";
+}
+function d(e, n) {
+  try {
+    const t = e();
+    p(t) && t.then(void 0, (r) => v(r, n));
+  } catch (t) {
+    v(t, n);
+  }
+}
+function D(e) {
+  return (...n) => {
+    s(() => e(...n));
+  };
+}
+function s(e) {
+  let n = !1;
+  return queueMicrotask(() => {
+    n || d(e, m);
+  }), () => {
+    n = !0;
+  };
+}
+function w(e, n) {
+  return () => {
+    n(() => d(e, "safeDebouncedCallback"));
+  };
+}
+function b(e, n, t, r) {
+  return f(() => {
+    const u = e.map((c) => c.value);
+    if (r?.when && !r.when(...u)) return;
+    const o = t(...u);
+    n.peek() !== o && (n.value = o);
+  });
+}
+function F(e, n, t) {
+  return f(() => {
+    const r = e.value;
+    if (t?.when && !t.when()) return;
+    const u = t?.transform ? t.transform(r) : r;
+    n.peek() !== u && (n.value = u);
+  });
+}
+function x(e, n, t) {
+  let r = !0;
+  return f(() => {
+    const u = e.value;
+    r && (r = !1, !t?.immediate) || n(u);
+  });
+}
+function C(e, n) {
+  let t = !1;
+  return f(() => {
+    const r = e.value;
+    t || s(() => {
+      const u = n(r);
+      if (e.peek() !== u) {
+        t = !0;
+        try {
+          e.value = u;
+        } finally {
+          t = !1;
+        }
+      }
+    });
+  });
+}
+function O(e, n, t) {
+  const r = t?.resetValue ?? null;
+  return f(() => {
+    const u = n();
+    s(() => {
+      u && e.peek() !== r && (e.value = r);
+    });
+  });
+}
+function V(e, n, t) {
+  const r = t?.transform;
+  let u = !1;
+  const o = f(() => {
+    const i = e.value;
+    u || s(() => {
+      u = !0;
+      try {
+        const l = r ? r(i) : i;
+        n.peek() !== l && (n.value = l);
+      } finally {
+        u = !1;
+      }
+    });
+  }), c = f(() => {
+    const i = n.value;
+    u || s(() => {
+      u = !0;
+      try {
+        e.peek() !== i && (e.value = i);
+      } finally {
+        u = !1;
+      }
+    });
+  });
+  return () => {
+    o(), c();
+  };
+}
+function N(e, n) {
+  let t = !0;
+  return f(() => {
+    if (e.forEach((r) => r.value), t) {
+      t = !1;
+      return;
+    }
+    s(() => n());
+  });
+}
+export {
+  F as a,
+  N as b,
+  b as c,
+  s as d,
+  D as e,
+  w as f,
+  E as i,
+  h as m,
+  O as r,
+  V as s,
+  C as t,
+  y as u,
+  x as w
+};

package/dist/behaviors.d.ts

@@ -1,133 +1,2 @@
-import { Signal, ReadonlySignal } from '@preact/signals-core';
-import { BehaviorCleanup, FormModel, FormProxy } from './index';
-/** Контекст схемы поведения: модель (значения/сигналы) + форма (ноды). */
-export type BehaviorScope<T> = {
-    model: FormModel<T>;
-    form: FormProxy<T>;
-};
-/** Результат {@link defineFormBehavior}; передаётся в `createForm({ behavior })`. */
-export interface FormBehavior<T> {
-    /** @internal Запускается `createForm` после построения нод и заполнения реестра сигнал→нода. */
-    __run(model: FormModel<T>, form: FormProxy<T>): BehaviorCleanup;
-}
-export type { Signal, ReadonlySignal, BehaviorCleanup };
-/** Зарегистрировать произвольную отписку в активной схеме. */
-export declare function onDispose(cleanup: BehaviorCleanup): void;
-/** Текущий scope ({ model, form }) активной схемы (escape hatch для кросс-операторов). */
-export declare function getScope<T>(): BehaviorScope<T>;
-/**
- * Описать поведение формы декларативно. Возвращает {@link FormBehavior} для `createForm({ behavior })`.
- *
- * @example
- * ```ts
- * export const myBehavior = defineFormBehavior<MyForm>(({ model, form }) => {
- *   compute(model.$.total, () => model.price * model.qty);
- *   enableWhen([model.$.city], () => Boolean(model.country));
- *   onChange(model.$.country, async (c) => form.city.updateComponentProps({ options: await load(c) }));
- * });
- * ```
- */
-export declare function defineFormBehavior<T>(setup: (scope: BehaviorScope<T>) => void): FormBehavior<T>;
-/** Реактивный эффект (авто-dispose). Колбэк может вернуть собственный cleanup. */
-export declare function effect(fn: () => void | (() => void)): void;
-/** Отложенная запись вне effect-контекста (микротаск) — защита от «Cycle detected». */
-export declare function defer(fn: () => void): void;
-/** Вычисляемое поле с auto-tracking: `target = read()` при изменении прочитанных сигналов. */
-export declare function compute<R>(target: Signal<R>, read: () => R, options?: {
-    when?: () => boolean;
-}): void;
-/** Вычисляемое поле с явным списком зависимостей (escape hatch). */
-export declare function computeFrom<R>(sources: ReadonlySignal<unknown>[], target: Signal<R>, fn: (...values: any[]) => R, options?: {
-    when?: (...values: any[]) => boolean;
-}): void;
-/** Копирование `source → target` — скаляр или группа (объект целиком). */
-export declare function copyFrom<T>(source: ReadonlySignal<T> | object, target: Signal<T> | object, options?: {
-    when?: () => boolean;
-    transform?: (value: T) => T;
-}): void;
-/** Контекст async-реакции: `signal` аннулируется, когда поле меняется снова до завершения колбэка. */
-export interface ChangeContext {
-    signal: AbortSignal;
-}
-/**
- * Реакция на изменение поля; `{ debounce, immediate }`.
- *
- * Колбэк выполняется ВНЕ effect-контекста (микротаск/таймер) — можно безопасно писать сигналы и ноды
- * (`updateComponentProps`/`reset`/`clear`) без ручного `defer` и без «Cycle detected».
- *
- * Для async-колбэков 2-м аргументом приходит `{ signal }` (AbortSignal): при следующей смене значения
- * предыдущий `signal` аннулируется. Передавай его в `fetch` (сетевая отмена) или проверяй
- * `signal.aborted` перед применением результата — это убирает гонки устаревших ответов (F2).
- */
-export declare function onChange<T>(source: ReadonlySignal<T>, cb: (value: T, ctx: ChangeContext) => void, options?: {
-    immediate?: boolean;
-    debounce?: number;
-}): void;
-type EnableTarget = ReadonlySignal<unknown> | object;
-/** Условное включение поля(ей) — скаляр, массив целей или группа. `resetOnDisable=false` по умолчанию. */
-export declare function enableWhen(target: EnableTarget | EnableTarget[], condition: () => boolean, options?: {
-    resetOnDisable?: boolean;
-}): void;
-/** Условное выключение поля(ей) (инверсия {@link enableWhen}). */
-export declare function disableWhen(target: EnableTarget | EnableTarget[], condition: () => boolean, options?: {
-    resetOnDisable?: boolean;
-}): void;
-/** Трансформация значения поля (идемпотентная). */
-export declare function transformValue<T>(target: Signal<T>, transformer: (value: T) => T): void;
-/** Сброс значения по условию. */
-export declare function resetWhen<T>(target: Signal<T>, condition: () => boolean, options?: {
-    resetValue?: T;
-}): void;
-/** Двусторонняя синхронизация двух полей. */
-export declare function syncFields<T>(a: Signal<T>, b: Signal<T>, options?: {
-    transform?: (value: T) => T;
-}): void;
-/** Ревалидация при изменении зависимостей. */
-export declare function revalidateWhen(deps: ReadonlySignal<unknown>[], revalidate: () => void): void;
-/**
- * Применить под-схему к КАЖДОМУ элементу динамического массива (per-item поведение).
- * Реагирует на добавление/удаление строк: новым строкам поведение применяется, удалённым — отписывается.
- *
- * Под-схема получает scope строки: `model` (под-модель строки — `row.$.field`) и `form` (нода строки).
- * - Value-операции (`compute`/`copyFrom`/`transformValue` на `row.$.*`) работают всегда.
- * - Node-операции (`enableWhen`/`updateComponentProps`/`reset` через `form.*`) требуют, чтобы массив был
- *   МАТЕРИАЛИЗОВАН в форме (узел `{ array, item }` в схеме) — тогда `form` строки = та же нода, что
- *   рендерится, а её сигналы зарегистрированы (`enableWhen` резолвит ноду). Без материализации доступ
- *   к `form.*` бросит понятную ошибку (см. {@link unmaterializedRowForm}).
- *
- * @example
- * applyEach(model.$.items, defineFormBehavior<Item>(({ model: row, form }) => {
- *   compute(row.$.lineTotal, () => row.qty * row.price);    // value-op — всегда
- *   enableWhen(row.$.discount, () => row.qty > 10);          // node-op — нужна материализация массива
- * }));
- */
-export declare function applyEach<TItem>(array: object, itemSchema: FormBehavior<TItem>): void;
-/**
- * Взаимное исключение булева флага среди строк массива (single-selection — «единственный primary»).
- * Когда флаг строки становится true, у остальных строк он сбрасывается в false. Не хрупок к push:
- * новые строки с флагом false исключения не запускают.
- *
- * @example
- * exclusiveFlag(model.$.contacts, (row) => row.$.primary);
- */
-export declare function exclusiveFlag<TItem>(array: object, getFlag: (row: FormModel<TItem>) => Signal<boolean>): void;
-/**
- * Агрегатная запись в строки массива. `derive(snapshot)` получает СНИМОК строк и возвращает список
- * `{ index, patch }`, который применяется к строкам. Записи КОАЛЕСИРУЮТСЯ в один отложенный проход на
- * финальном состоянии — поэтому массовые синхронные мутации (push в цикле) не вызывают каскад на
- * промежуточных состояниях. `derive` должна сходиться (на фикспоинте возвращать те же значения).
- *
- * @example
- * // последняя строка = 100 − Σ(остальные)
- * aggregateInto(model.$.rows, (rows) => {
- *   const n = rows.length; if (n === 0) return [];
- *   const others = rows.slice(0, n - 1).reduce((s, r) => s + r.percent, 0);
- *   return [{ index: n - 1, patch: { percent: 100 - others } }];
- * });
- */
-export declare function aggregateInto<TItem>(array: object, derive: (rows: TItem[]) => Array<{
-    index: number;
-    patch: Partial<TItem>;
-}>): void;
-/** Применить под-схему к одному или нескольким полям-группам (переиспользование). */
-export declare function apply<TField>(targets: object | object[], subSchema: FormBehavior<TField>): void;
+export * from './form/behaviors'
+export {}