@reformer/renderer-json 8.0.0 → 9.0.0-beta.1

package/README.md

@@ -0,0 +1,87 @@
+# @reformer/renderer-json
+
+Render [`@reformer/core`](https://www.npmjs.com/package/@reformer/core) forms from a **JSON schema**.
+Field bindings, components and data sources are expressed as string operators
+(`$model(...)`, `$component(...)`, `$dataSource(...)`), so an entire form can be described as data and
+rendered through a component registry — no per-field React code.
+
+## Documentation
+
+Full documentation is available at [https://alexandrbukhtatyy.github.io/ReFormer/](https://alexandrbukhtatyy.github.io/ReFormer/)
+
+## Features
+
+- Describe forms declaratively as JSON (`JsonFormSchema`)
+- String operators bind schema leaves to a reactive `FormModel` and to registered components
+- Component registry (`defineRegistry`) maps operator names to your React components
+- Optional schema validation against a meta-schema (ajv, loaded dynamically — dev only)
+- TypeScript support, tree-shakable exports
+
+## Installation
+
+```bash
+npm install @reformer/renderer-json @reformer/core @reformer/renderer-react
+```
+
+`@reformer/ui-kit` is an optional peer — use it (or your own components) to populate the registry.
+
+## Quick Start
+
+```tsx
+import { useMemo } from 'react';
+import { createModel } from '@reformer/core';
+import { Input, Box, FormField } from '@reformer/ui-kit';
+import {
+  JsonFormRenderer,
+  JsonRendererProvider,
+  defineRegistry,
+  FIELD_WRAPPER,
+  type JsonFormSchema,
+} from '@reformer/renderer-json';
+
+// Bindings are string operators: '$model(...)', '$component(...)', '$dataSource(...)'.
+const schema: JsonFormSchema = {
+  version: '1.0',
+  root: {
+    component: '$component(Box)',
+    children: [
+      {
+        value: '$model(email)',
+        component: '$component(Input)',
+        componentProps: { label: 'Email' },
+      },
+    ],
+  },
+};
+
+type MyForm = { email: string };
+
+export function MyFormPage() {
+  // M1: the model is the source of truth; schema leaves bind to its signals.
+  const model = useMemo(() => createModel<MyForm>({ email: '' }), []);
+  const registry = useMemo(
+    () =>
+      defineRegistry((reg) => {
+        reg.component('Input', Input);
+        reg.component('Box', Box);
+        reg.component(FIELD_WRAPPER, FormField); // system field wrapper
+      }),
+    []
+  );
+
+  // The model is provided through the provider (settings.model), not as a renderer prop.
+  return (
+    <JsonRendererProvider settings={{ registry, model }}>
+      <JsonFormRenderer<MyForm> schema={schema} validate={import.meta.env.DEV} />
+    </JsonRendererProvider>
+  );
+}
+```
+
+`JsonFormRenderer` accepts only `{ schema, renderBehavior?, onSchemaReady?, validate? }`. The
+`FormModel` is supplied via `JsonRendererProvider` settings (`model`); schema leaves are bound to its
+signals by the built-in converter.
+
+## License
+
+MIT

package/dist/converter/json-to-render-schema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index-Bu5XPCQ7.js

@@ -0,0 +1,41 @@
+const s = /^\$(model|component|dataSource)\((.+)\)$/;
+function n(e) {
+  if (typeof e != "string") return null;
+  const t = s.exec(e);
+  return t ? { op: t[1], arg: t[2] } : null;
+}
+const $ = (e) => n(e)?.op === "model", g = (e) => n(e)?.op === "component", b = (e) => n(e)?.op === "dataSource", p = "http://json-schema.org/draft-07/schema#", c = "https://reformer.dev/schemas/form-schema.schema.json", m = "ReFormer JSON form schema (M1, string-operator DSL)", d = "Base meta-schema: validates node structure + operator string syntax ($model/$component/$dataSource). Component-name enum is tightened per-app via buildFormSchemaMetaSchema; $dataSource names and $model paths are checked outside this schema.", l = "object", f = ["root"], u = !1, h = { $schema: { type: "string" }, version: { type: "string" }, root: { $ref: "#/definitions/node" } }, y = { modelOp: { type: "string", pattern: "^\\$model\\(.+\\)$", description: 'Model binding: "$model(path)" — path resolved at runtime (not validated here).' }, componentOp: { type: "string", pattern: "^\\$component\\(.+\\)$", description: 'Registry component: "$component(Name)". Name is tightened to a registry enum by buildFormSchemaMetaSchema.' }, node: { $comment: "Discriminated by which operator key is present (array→value→component), mirroring the isArrayNode/isFieldNode/isContainerNode runtime guards. Using oneOf here made ajv (allErrors) report failures against all three branches for any single mistake, burying the real cause; if/then/else surfaces only the relevant branch's errors.", if: { type: "object", required: ["array"] }, then: { $ref: "#/definitions/arrayNode" }, else: { if: { type: "object", required: ["value"] }, then: { $ref: "#/definitions/fieldNode" }, else: { $ref: "#/definitions/containerNode" } } }, fieldNode: { type: "object", required: ["value"], additionalProperties: !1, properties: { selector: { type: "string" }, value: { $ref: "#/definitions/modelOp" }, component: { $ref: "#/definitions/componentOp" }, componentProps: { type: "object" }, wrapper: { $ref: "#/definitions/node" } } }, arrayNode: { type: "object", required: ["array", "item"], additionalProperties: !1, properties: { selector: { type: "string" }, array: { $ref: "#/definitions/modelOp" }, item: { type: "object", required: ["$template"], additionalProperties: !1, properties: { $template: { $ref: "#/definitions/node" } } }, initialValue: { type: "object" }, componentProps: { type: "object" } } }, containerNode: { type: "object", required: ["component"], additionalProperties: !1, properties: { selector: { type: "string" }, component: { $ref: "#/definitions/componentOp" }, componentProps: { type: "object" }, children: { type: "array", items: { $ref: "#/definitions/node" } } } } }, i = {
+  $schema: p,
+  $id: c,
+  title: m,
+  description: d,
+  type: l,
+  required: f,
+  additionalProperties: u,
+  properties: h,
+  definitions: y
+}, S = i;
+function N(e) {
+  return e.names().filter((t) => e.get(t)?.type === "component");
+}
+function O(e) {
+  return e.names().filter((t) => e.get(t)?.type === "dataSource");
+}
+function j(e) {
+  const t = JSON.parse(JSON.stringify(i)), o = e?.componentNames;
+  if (o && o.length > 0) {
+    const r = t.definitions.componentOp;
+    delete r.pattern, r.enum = o.map((a) => `$component(${a})`);
+  }
+  return t;
+}
+export {
+  g as a,
+  b,
+  j as c,
+  O as d,
+  S as f,
+  N as g,
+  $ as i,
+  n as p
+};

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsx as u, jsxs as M } from "react/jsx-runtime";
-import { useContext as N, createContext as O, useMemo as g, useState as C, useEffect as F } from "react";
-import { createRenderSchema as j, FormRenderer as k } from "@reformer/renderer-react";
-import { i as f, a as R, p as m, b as A } from "./index-BZLcW0SX.js";
-import { c as rr, f as er, g as tr, d as nr } from "./index-BZLcW0SX.js";
-class h {
+import { jsx as m, jsxs as R } from "react/jsx-runtime";
+import { useContext as $, createContext as O, useMemo as w, useState as F, useEffect as j } from "react";
+import { createRenderSchema as k, FormRenderer as v } from "@reformer/renderer-react";
+import { i as p, a as E, p as d, b as A } from "./index-Bu5XPCQ7.js";
+import { c as rr, f as er, g as tr, d as nr } from "./index-Bu5XPCQ7.js";
+class u {
   own = /* @__PURE__ */ new Map();
   parent = null;
   get(e) {
@@ -25,52 +25,58 @@ class h {
     this.own.has(e) && console.warn(`[ComponentRegistry] Overwriting entry: ${e}`), this.own.set(e, t);
   }
   static withParent(e, t) {
-    const n = new h();
-    return n.parent = e, t.own.forEach((o, i) => {
-      n.own.set(i, o);
-    }), n;
+    const n = new u(), o = (s) => {
+      if (s instanceof u)
+        s.own.forEach((i, a) => n.own.set(a, i));
+      else
+        for (const i of s.names()) {
+          const a = s.get(i);
+          a && n.own.set(i, a);
+        }
+    };
+    return e instanceof u ? n.parent = e : o(e), o(t), n;
   }
 }
 function K(r) {
-  const e = new h();
+  const e = new u();
   return r({
-    component(n, o, i) {
-      e._set(n, { component: o, type: "component", description: i });
+    component(n, o, s) {
+      e._set(n, { component: o, type: "component", description: s });
     },
-    dataSource(n, o, i) {
-      e._set(n, { component: o, type: "dataSource", description: i });
+    dataSource(n, o, s) {
+      e._set(n, { component: o, type: "dataSource", description: s });
     }
   }), e;
 }
-const v = "$fieldWrapper", w = O({});
+const C = "$fieldWrapper", P = O({});
 function Q({ settings: r, children: e }) {
-  const t = N(w), n = g(() => t.registry && r.registry ? h.withParent(t.registry, r.registry) : r.registry ?? t.registry, [t.registry, r.registry]), o = g(() => {
-    const i = n?.get(v)?.component;
+  const t = $(P), n = w(() => t.registry && r.registry ? u.withParent(t.registry, r.registry) : r.registry ?? t.registry, [t.registry, r.registry]), o = w(() => {
+    const s = n?.get(C)?.component;
     return {
       ...t,
       ...r,
       registry: n,
-      fieldWrapper: r.fieldWrapper ?? i ?? t.fieldWrapper
+      fieldWrapper: r.fieldWrapper ?? s ?? t.fieldWrapper
     };
   }, [t, r, n]);
-  return /* @__PURE__ */ u(w.Provider, { value: o, children: e });
+  return /* @__PURE__ */ m(P.Provider, { value: o, children: e });
 }
-function D() {
-  return N(w);
+function W() {
+  return $(P);
 }
-function $(r) {
+function J(r) {
   const e = r;
-  return f(e.array) && typeof e.item == "object" && e.item !== null && "$template" in e.item;
+  return p(e.array) && typeof e.item == "object" && e.item !== null && "$template" in e.item;
 }
-function E(r) {
-  return f(r.value);
+function M(r) {
+  return p(r.value);
 }
-function W(r) {
-  return R(r.component) && !E(r) && !$(r);
+function D(r) {
+  return E(r.component) && !M(r) && !J(r);
 }
-function P(r, e) {
+function y(r, e) {
   if (!r) return;
-  const t = m(r)?.arg;
+  const t = d(r)?.arg;
   if (!t) throw new Error(`Invalid $component operator: "${r}"`);
   const n = e.get(t);
   if (!n)
@@ -87,28 +93,30 @@ function L(r, e) {
     throw new Error(
       `Data source "${r}" not found in registry. Available: ${e.names().join(", ")}`
     );
+  if (t.type !== "dataSource")
+    throw new Error(`Entry "${r}" is a '${t.type}' and cannot be used as $dataSource(...)`);
   return t.component;
 }
-function I(r, e) {
+function V(r, e) {
   return e.split(".").reduce((t, n) => t == null ? t : t[n], r);
 }
-function V(r) {
+function q(r) {
   if (r === null || typeof r != "object") return !1;
   const e = r;
-  return f(e.value) || f(e.array) || R(e.component);
+  return p(e.value) || p(e.array) || E(e.component);
 }
-function _(r) {
+function T(r) {
   return r == null ? r : JSON.parse(JSON.stringify(r));
 }
 function b(r, e, t) {
-  if (A(r)) return L(m(r).arg, t);
-  if (R(r)) return P(r, t);
-  if (f(r)) return e.signalAt(m(r).arg);
-  if (V(r)) return p(r, e, t);
+  if (A(r)) return L(d(r).arg, t);
+  if (E(r)) return y(r, t);
+  if (p(r)) return e.signalAt(d(r).arg);
+  if (q(r)) return h(r, e, t);
   if (Array.isArray(r)) return r.map((n) => b(n, e, t));
   if (r !== null && typeof r == "object") {
     const n = r, o = {};
-    for (const i of Object.keys(n)) o[i] = b(n[i], e, t);
+    for (const s of Object.keys(n)) o[s] = b(n[s], e, t);
     return o;
   }
   return r;
@@ -119,43 +127,45 @@ function S(r, e, t) {
   for (const o of Object.keys(r)) n[o] = b(r[o], e, t);
   return n;
 }
-function p(r, e, t) {
-  if ($(r)) {
-    const n = I(e, m(r.array).arg), o = r.item.$template, i = r.initialValue;
+function h(r, e, t) {
+  if (J(r)) {
+    const n = V(e, d(r.array).arg), o = r.item.$template, s = r.initialValue;
     return {
       ...r.selector ? { selector: r.selector } : {},
       array: n,
-      initialValue: () => i ? _(i) : {},
-      item: (y) => p(o, y, t),
+      initialValue: () => s ? T(s) : {},
+      item: (i) => h(o, i, t),
       componentProps: S(r.componentProps, e, t)
     };
   }
-  if (E(r)) {
-    const n = m(r.value).arg, o = e.signalAt(n);
-    return !o && typeof console < "u" && console.warn(`[JsonRenderer/M1] No model signal for "${n}".`), {
+  if (M(r)) {
+    const n = d(r.value).arg, o = e.signalAt(n);
+    !o && typeof console < "u" && console.warn(`[JsonRenderer/M1] No model signal for "${n}".`);
+    const s = S(r.componentProps, e, t), i = r.wrapper ? y(r.wrapper.component, t) : void 0;
+    return {
       ...r.selector ? { selector: r.selector } : {},
       value: o,
-      component: P(r.component, t),
-      componentProps: S(r.componentProps, e, t)
+      component: y(r.component, t),
+      componentProps: i ? { ...s ?? {}, fieldWrapper: i } : s
     };
   }
-  if (W(r))
+  if (D(r))
     return {
       ...r.selector ? { selector: r.selector } : {},
-      component: P(r.component, t),
+      component: y(r.component, t),
       componentProps: S(r.componentProps, e, t),
-      children: r.children?.map((n) => p(n, e, t))
+      children: r.children?.map((n) => h(n, e, t))
     };
   throw new Error(`Invalid JSON node (M1): ${JSON.stringify(r)}`);
 }
 function U(r, e, t) {
-  return p(r.root, t, e);
+  return h(r.root, t, e);
 }
-function T(r, e, t) {
-  return () => p(r.root, t, e);
+function z(r, e, t) {
+  return () => h(r.root, t, e);
 }
-function q({ errors: r }) {
-  return /* @__PURE__ */ M(
+function I({ errors: r }) {
+  return /* @__PURE__ */ R(
     "div",
     {
       role: "alert",
@@ -169,12 +179,12 @@ function q({ errors: r }) {
         font: "14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace"
       },
       children: [
-        /* @__PURE__ */ M("strong", { style: { display: "block", marginBottom: 8, fontSize: 15 }, children: [
+        /* @__PURE__ */ R("strong", { style: { display: "block", marginBottom: 8, fontSize: 15 }, children: [
           "Невалидная JSON-схема формы (",
           r.length,
           ")"
         ] }),
-        /* @__PURE__ */ u("ul", { style: { margin: 0, paddingLeft: 20 }, children: r.map((e, t) => /* @__PURE__ */ u("li", { style: { marginBottom: 4 }, children: e }, t)) })
+        /* @__PURE__ */ m("ul", { style: { margin: 0, paddingLeft: 20 }, children: r.map((e, t) => /* @__PURE__ */ m("li", { style: { marginBottom: 4 }, children: e }, t)) })
       ]
     }
   );
@@ -185,56 +195,60 @@ function X({
   onSchemaReady: t,
   validate: n = !1
 }) {
-  const { registry: o, model: i, ...y } = D(), [a, d] = C(
+  const { registry: o, model: s, ...i } = W(), [a, g] = F(
     n ? void 0 : null
   );
-  F(() => {
+  j(() => {
     if (!n) {
-      d(null);
+      g(null);
       return;
     }
-    let l = !1;
-    return d(void 0), import("./validate.js").then(({ validateFormSchema: s }) => {
-      if (l) return;
-      const { valid: J, errors: x } = s(r, { registry: o });
-      d(J ? null : x);
-    }).catch((s) => {
-      l || d([`Schema validator failed to load: ${String(s)}`]);
+    let f = !1;
+    return g(void 0), import("./validate.js").then(({ validateFormSchema: c }) => {
+      if (f) return;
+      const { valid: N, errors: x } = c(r, { registry: o });
+      g(N ? null : x);
+    }).catch((c) => {
+      f || g([`Schema validator failed to load: ${String(c)}`]);
     }), () => {
-      l = !0;
+      f = !0;
     };
   }, [n, r, o]);
-  const c = g(() => {
-    if (!i)
+  const l = w(() => {
+    if (!s)
       throw new Error(
         "JsonFormRenderer: settings.model is required (M1). Pass the FormModel via JsonRendererProvider."
       );
     if (a !== null) return null;
-    const l = T(r, o, i), s = j(l);
-    return e && e(s), s;
-  }, [r, o, e, i, a]);
-  return g(() => {
-    c && t && t(c);
-  }, [c]), a && a.length > 0 ? /* @__PURE__ */ u(q, { errors: a }) : c ? /* @__PURE__ */ u(k, { render: c, settings: y }) : null;
+    if (!o)
+      throw new Error(
+        "JsonFormRenderer: settings.registry is required. Pass a ComponentRegistry via JsonRendererProvider."
+      );
+    const f = z(r, o, s), c = k(f);
+    return e && e(c), c;
+  }, [r, o, e, s, a]);
+  return w(() => {
+    l && t && t(l);
+  }, [l]), a && a.length > 0 ? /* @__PURE__ */ m(I, { errors: a }) : l ? /* @__PURE__ */ m(v, { render: l, settings: i }) : null;
 }
 export {
-  v as FIELD_WRAPPER,
+  C as FIELD_WRAPPER,
   X as JsonFormRenderer,
   Q as JsonRendererProvider,
-  q as SchemaErrorPanel,
+  I as SchemaErrorPanel,
   rr as buildFormSchemaMetaSchema,
   U as convertJsonToM1Tree,
-  T as createRenderSchemaFromJsonM1,
+  z as createRenderSchemaFromJsonM1,
   K as defineRegistry,
   er as formSchemaMetaSchema,
   tr as getComponentNames,
   nr as getDataSourceNames,
-  $ as isArrayNode,
-  R as isComponentOp,
-  W as isContainerNode,
+  J as isArrayNode,
+  E as isComponentOp,
+  D as isContainerNode,
   A as isDataSourceOp,
-  E as isFieldNode,
-  f as isModelOp,
-  m as parseOperator,
-  D as useJsonRendererSettings
+  M as isFieldNode,
+  p as isModelOp,
+  d as parseOperator,
+  W as useJsonRendererSettings
 };

package/dist/schema/form-schema.schema.json.d.ts

@@ -23,11 +23,14 @@ declare const _default: {
       "description": "Registry component: \"$component(Name)\". Name is tightened to a registry enum by buildFormSchemaMetaSchema."
     },
     "node": {
-      "oneOf": [
-        { "$ref": "#/definitions/fieldNode" },
-        { "$ref": "#/definitions/arrayNode" },
-        { "$ref": "#/definitions/containerNode" }
-      ]
+      "$comment": "Discriminated by which operator key is present (array→value→component), mirroring the isArrayNode/isFieldNode/isContainerNode runtime guards. Using oneOf here made ajv (allErrors) report failures against all three branches for any single mistake, burying the real cause; if/then/else surfaces only the relevant branch's errors.",
+      "if": { "type": "object", "required": ["array"] },
+      "then": { "$ref": "#/definitions/arrayNode" },
+      "else": {
+        "if": { "type": "object", "required": ["value"] },
+        "then": { "$ref": "#/definitions/fieldNode" },
+        "else": { "$ref": "#/definitions/containerNode" }
+      }
     },
     "fieldNode": {
       "type": "object",

package/dist/schema/index.d.ts

@@ -38,9 +38,13 @@ export declare function getComponentNames(registry: ComponentRegistry): string[]
  */
 export declare function getDataSourceNames(registry: ComponentRegistry): string[];
 /**
- * Конкретная мета-схема: базовая + (если заданы `componentNames`) сужение паттерна `$component(...)`
- * до enum имён (`^\$component\((Input|Select|…)\)$`). `$dataSource`-имена JSON Schema'й не покрыть
- * (вложены в произвольный componentProps) — их проверяет рекурсивный обход в `validateFormSchema`.
+ * Конкретная мета-схема: базовая + (если заданы `componentNames`) сужение `$component(...)` до
+ * enum допустимых значений (`["$component(Input)", "$component(Select)", …]`). `$dataSource`-имена
+ * JSON Schema'й не покрыть (вложены в произвольный componentProps) — их проверяет рекурсивный обход
+ * в `validateFormSchema`.
+ *
+ * enum, а не regex-`pattern`: ajv перечисляет допустимые имена в тексте ошибки, IDE даёт
+ * автодополнение по значениям, а имена не нужно экранировать под regex (напр. `$fieldWrapper`).
  *
  * @example
  * ```ts