@react-typed-forms/schemas 14.4.1 → 15.0.0

package/lib/util.d.ts

@@ -1,4 +1,4 @@
-import { ControlActionHandler, ControlDataVisitor, ControlDefinition, DataControlDefinition, DisplayOnlyRenderOptions, GroupRenderOptions } from "./controlDefinition";
+import { ControlActionHandler, ControlDataVisitor, ControlDefinition, DataControlDefinition, DisplayOnlyRenderOptions, FormTree, GroupRenderOptions } from "./controlDefinition";
 import { MutableRefObject } from "react";
 import { CompoundField, FieldOption, SchemaDataNode, SchemaField, SchemaNode } from "./schemaField";
 import { Control } from "@react-typed-forms/core";
@@ -105,16 +105,25 @@ export declare function findNonDataGroups(controls: ControlDefinition[]): Contro
  * Adds missing controls to the provided control definitions based on the schema fields.
  * @param fields - The schema fields to use for adding missing controls.
  * @param controls - The control definitions to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
  * @returns The control definitions with missing controls added.
  */
-export declare function addMissingControls(fields: SchemaField[], controls: ControlDefinition[]): ControlDefinition[];
+export declare function addMissingControls(fields: SchemaField[], controls: ControlDefinition[], warning?: (msg: string) => void): ControlDefinition[];
 /**
  * Adds missing controls to the provided control definitions based on the schema fields.
  * @param schema - The root schema node to use for adding missing controls.
  * @param controls - The control definitions to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
  * @returns The control definitions with missing controls added.
  */
-export declare function addMissingControlsForSchema(schema: SchemaNode, controls: ControlDefinition[]): ControlDefinition[];
+export declare function addMissingControlsForSchema(schema: SchemaNode, controls: ControlDefinition[], warning?: (msg: string) => void): ControlDefinition[];
+/**
+ * Adds missing controls to the provided form tree based on the schema fields.
+ * @param schema - The root schema node to use for adding missing controls.
+ * @param tree - The form tree to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
+ */
+export declare function addMissingControlsToForm(schema: SchemaNode, tree: FormTree, warning?: (msg: string) => void): void;
 /**
  * Custom hook to use an updated reference.
  * @param a - The value to create a reference for.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "14.4.1",
+  "version": "15.0.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",

package/src/controlBuilder.ts

@@ -227,7 +227,7 @@ export function useControlDefinitionForSchema(
 
 export interface EditorGroup {
   parent: string;
-  group: GroupedControlsDefinition;
+  group: ControlDefinition;
 }
 
 export interface CustomRenderOptions {

package/src/controlDefinition.ts

@@ -551,60 +551,99 @@ export interface FormNode {
   definition: ControlDefinition;
   tree: FormTree;
   parent?: FormNode;
-  getChildNodes(dontFollowRef?: boolean): FormNode[];
+  getChildNodes(): FormNode[];
 }
 
-export function defaultGetChildNodes(
-  parent: FormNode,
-  children?: ControlDefinition[] | null,
-) {
-  return (
-    children?.map((x, i) => nodeForControl(x, parent.tree, i, parent)) ?? []
-  );
+class FormNodeImpl implements FormNode {
+  public children: FormNode[] = [];
+  constructor(
+    public id: string,
+    public definition: ControlDefinition,
+    public tree: FormTree,
+    public parent?: FormNode,
+  ) {}
+
+  getChildNodes() {
+    return this.children;
+  }
 }
 
 export interface FormTreeLookup {
   getForm(formId: string): FormTree | undefined;
 }
-export interface FormTree extends FormTreeLookup {
-  rootNode: FormNode;
-  getChildrenForId(id: string, parent: FormNode): FormNode[];
-}
+export abstract class FormTree implements FormTreeLookup {
+  abstract rootNode: FormNode;
+  abstract getByRefId(id: string): FormNode | undefined;
+  abstract addChild(parent: FormNode, control: ControlDefinition): FormNode;
+
+  abstract getForm(formId: string): FormTree | undefined;
+  createTempNode(
+    id: string,
+    definition: ControlDefinition,
+    children?: FormNode[],
+    parent?: FormNode,
+  ): FormNode {
+    const tempNode = {
+      id,
+      definition,
+      tree: this,
+      parent,
+      getChildNodes: () =>
+        children ?? this.createChildNodes(tempNode, definition.children),
+    } as FormNode;
+    return tempNode;
+  }
 
-export function wrapFormNode(
-  node: FormNode,
-  getChildren?: (dontFollowRef?: boolean) => FormNode[],
-): FormNode {
-  return {
-    ...node,
-    getChildNodes: getChildren ?? ((dfr) => node.getChildNodes(dfr)),
-  };
+  createChildNodes(
+    parent: FormNode,
+    definitions: ControlDefinition[] | undefined | null,
+  ): FormNode[] {
+    return (
+      definitions?.map((x, i) =>
+        this.createTempNode(parent.id + "_" + i, x, undefined, parent),
+      ) ?? []
+    );
+  }
 }
-export function nodeForControl(
-  definition: ControlDefinition,
-  tree: FormTree,
-  indexOrId?: number | string,
-  parent?: FormNode,
-): FormNode {
-  return {
-    id: parent ? parent.id + "/" + indexOrId : "",
-    definition,
-    tree,
-    parent,
-    getChildNodes(dontFollowRef?: boolean): FormNode[] {
-      let children = this.definition.children;
-      if (!dontFollowRef && this.definition.childRefId) {
-        return this.tree.getChildrenForId(this.definition.childRefId, this);
-      }
-      return defaultGetChildNodes(this, children);
-    },
-  };
+
+class FormTreeImpl extends FormTree {
+  controlMap: Record<string, FormNode> = {};
+  rootNode: FormNode;
+  idCount = 1;
+
+  constructor(private forms: FormTreeLookup) {
+    super();
+    this.rootNode = new FormNodeImpl("", { type: "Group" }, this);
+  }
+
+  getByRefId(id: string): FormNode | undefined {
+    return this.controlMap[id];
+  }
+
+  register(node: FormNode) {
+    this.controlMap[node.id] = node;
+    node.getChildNodes().forEach((x) => this.register(x));
+  }
+  addChild(parent: FormNode, control: ControlDefinition): FormNode {
+    const node = new FormNodeImpl(
+      control.id ? control.id : "c" + this.idCount++,
+      control,
+      this,
+      parent,
+    );
+    control.children?.forEach((x) => this.addChild(node, x));
+    parent.getChildNodes().push(node);
+    this.register(node);
+    return node;
+  }
+
+  getForm(formId: string): FormTree | undefined {
+    return this.forms.getForm(formId);
+  }
 }
 
 export function legacyFormNode(definition: ControlDefinition) {
-  return createFormLookup({ $legacy: [definition] })
-    .getForm("$legacy")!
-    .rootNode.getChildNodes()[0];
+  return createFormTree([definition]).rootNode.getChildNodes()[0];
 }
 
 function getControlIds(
@@ -616,40 +655,13 @@ function getControlIds(
     : [[definition.id, definition], ...childEntries];
 }
 
-export function createFormTreeWithRoot(
-  createRootNode: (tree: FormTree) => FormNode,
-  getChildrenForId: (id: string, parent: FormNode) => FormNode[],
-  getForm: FormTreeLookup = { getForm: () => undefined },
-): FormTree {
-  const tree = {
-    ...getForm,
-    getChildrenForId,
-    rootNode: undefined! as FormNode,
-  } satisfies FormTree;
-  tree.rootNode = createRootNode(tree);
-  return tree;
-}
-
 export function createFormTree(
   controls: ControlDefinition[],
   getForm: FormTreeLookup = { getForm: () => undefined },
 ): FormTree {
-  const controlMap = Object.fromEntries(controls.flatMap(getControlIds));
-  return createFormTreeWithRoot(
-    (tree) =>
-      nodeForControl(
-        { children: controls, type: ControlDefinitionType.Group },
-        tree,
-      ),
-    (id: string, parent: FormNode) => {
-      return (
-        controlMap[id]?.children?.map((x, i) =>
-          nodeForControl(x, parent.tree, i, parent),
-        ) ?? []
-      );
-    },
-    getForm,
-  );
+  const tree = new FormTreeImpl(getForm);
+  controls.forEach((x) => tree.addChild(tree.rootNode, x));
+  return tree;
 }
 
 export function createFormLookup<A extends Record<string, ControlDefinition[]>>(

package/src/controlRender.tsx

@@ -514,6 +514,7 @@ export function useControlRendererComponent(
     formNode,
   });
 
+  if (formNode == null) debugger;
   const Component = useCallback(() => {
     const stopTracking = useComponentTracking();
 
@@ -643,8 +644,18 @@ export function useControlRendererComponent(
             formOptions: myOptions,
           }),
         ) ?? [];
+      const otherChildNodes =
+        definition.childRefId &&
+        formNode.tree.getByRefId(definition.childRefId)?.getChildNodes();
+
       const labelAndChildren = renderControlLayout({
-        formNode,
+        formNode: otherChildNodes
+          ? formNode.tree.createTempNode(
+              formNode.id,
+              definition,
+              otherChildNodes,
+            )
+          : formNode,
         definition: c,
         renderer,
         renderChild: (k, child, options) => {

package/src/hooks.tsx

@@ -55,6 +55,16 @@ export type UseEvalExpressionHook = (
   coerce: (v: any) => any,
 ) => DynamicHookGenerator<Control<any> | undefined, ControlDataContext>;
 
+export function optionalHook(
+  expr: EntityExpression | undefined | null,
+  useHook: UseEvalExpressionHook,
+  coerce: (v: any) => any,
+):
+  | DynamicHookGenerator<Control<any> | undefined, ControlDataContext>
+  | undefined {
+  return expr && expr.type ? useHook(expr, coerce) : undefined;
+}
+
 export function useEvalVisibilityHook(
   useEvalExpressionHook: UseEvalExpressionHook,
   definition: ControlDefinition,

package/src/util.ts

@@ -3,10 +3,13 @@ import {
   ControlDataVisitor,
   ControlDefinition,
   ControlDefinitionType,
+  createFormTree,
   DataControlDefinition,
   DataRenderType,
   DisplayOnlyRenderOptions,
   fieldPathForDefinition,
+  FormNode,
+  FormTree,
   GroupRenderOptions,
   isAutoCompleteClasses,
   isCheckEntryClasses,
@@ -333,77 +336,123 @@ export function findNonDataGroups(
  * Adds missing controls to the provided control definitions based on the schema fields.
  * @param fields - The schema fields to use for adding missing controls.
  * @param controls - The control definitions to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
  * @returns The control definitions with missing controls added.
  */
 export function addMissingControls(
   fields: SchemaField[],
   controls: ControlDefinition[],
+  warning?: (msg: string) => void,
 ) {
-  return addMissingControlsForSchema(rootSchemaNode(fields), controls);
+  return addMissingControlsForSchema(rootSchemaNode(fields), controls, warning);
 }
 
-interface ControlAndSchema {
-  control: ControlDefinition;
-  children: ControlAndSchema[];
-  schema?: SchemaNode;
-  parent?: ControlAndSchema;
+function registerSchemaEntries(formNode: FormNode, parentSchema: SchemaNode) {
+  const formToSchema: Record<string, SchemaNode> = {};
+  const schemaToForm: Record<string, FormNode[]> = {};
+  function register(node: FormNode, parentSchema: SchemaNode) {
+    const c = node.definition;
+    const controlPath = fieldPathForDefinition(c);
+    let dataSchema = controlPath
+      ? schemaForFieldPath(controlPath, parentSchema)
+      : undefined;
+    if (isGroupControl(c) && dataSchema == null) dataSchema = parentSchema;
+    if (dataSchema) {
+      formToSchema[node.id] = dataSchema;
+      const formNodes = schemaToForm[dataSchema.id] ?? [];
+      formNodes.push(node);
+      schemaToForm[dataSchema.id] = formNodes;
+    }
+    node
+      .getChildNodes()
+      .forEach((x) => register(x, dataSchema ?? parentSchema));
+  }
+  register(formNode, parentSchema);
+  return { formToSchema, schemaToForm, register };
 }
+
 /**
  * Adds missing controls to the provided control definitions based on the schema fields.
  * @param schema - The root schema node to use for adding missing controls.
  * @param controls - The control definitions to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
  * @returns The control definitions with missing controls added.
  */
 export function addMissingControlsForSchema(
   schema: SchemaNode,
   controls: ControlDefinition[],
+  warning?: (msg: string) => void,
 ) {
-  const controlMap: { [k: string]: ControlAndSchema } = {};
-  const schemaControlMap: { [k: string]: ControlAndSchema[] } = {};
-  const rootControls = controls.map((c) => toControlAndSchema(c, schema));
-  const rootSchema = { schema, children: rootControls } as ControlAndSchema;
-  addSchemaMapEntry("", rootSchema);
-  rootControls.forEach(addReferences);
-  const fields = schema.getChildNodes();
-  fields.forEach(addMissing);
-  return rootControls.map(toDefinition);
+  const tree = createFormTree(controls);
+  addMissingControlsToForm(schema, tree, warning);
+  return toDefinition(tree.rootNode).children ?? [];
 
-  function toDefinition(c: ControlAndSchema): ControlDefinition {
-    const children = c.children.length ? c.children.map(toDefinition) : null;
-    return { ...c.control, children };
+  function toDefinition(c: FormNode): ControlDefinition {
+    const children = c.getChildNodes().length
+      ? c.getChildNodes().map(toDefinition)
+      : null;
+    return { ...c.definition, children };
   }
+}
+
+/**
+ * Adds missing controls to the provided form tree based on the schema fields.
+ * @param schema - The root schema node to use for adding missing controls.
+ * @param tree - The form tree to add missing controls to.
+ * @param warning - An optional function to call with warning messages.
+ */
+export function addMissingControlsToForm(
+  schema: SchemaNode,
+  tree: FormTree,
+  warning?: (msg: string) => void,
+): void {
+  const { formToSchema, schemaToForm, register } = registerSchemaEntries(
+    tree.rootNode,
+    schema,
+  );
+
+  schema.getChildNodes().forEach(addMissing);
+  return;
 
   function addMissing(schemaNode: SchemaNode) {
     if (fieldHasTag(schemaNode.field, SchemaTags.NoControl)) return;
-    const existingControls = schemaControlMap[schemaNode.id];
+    let skipChildren = false;
+    const existingControls = schemaToForm[schemaNode.id];
     if (!existingControls) {
       const eligibleParents = getEligibleParents(schemaNode);
       const desiredGroup = getTagParam(
         schemaNode.field,
         SchemaTags.ControlGroup,
       );
-      let parentGroup = desiredGroup ? controlMap[desiredGroup] : undefined;
+      let parentGroup = desiredGroup
+        ? tree.getByRefId(desiredGroup)
+        : undefined;
       if (!parentGroup && desiredGroup)
-        console.warn("No group '" + desiredGroup + "' for " + schemaNode.id);
-      if (parentGroup && eligibleParents.indexOf(parentGroup.schema!.id) < 0) {
-        console.warn(
+        warning?.("No group '" + desiredGroup + "' for " + schemaNode.id);
+      if (
+        parentGroup &&
+        eligibleParents.indexOf(formToSchema[parentGroup.id]!.id) < 0
+      ) {
+        warning?.(
           `Target group '${desiredGroup}' is not an eligible parent for '${schemaNode.id}'`,
         );
         parentGroup = undefined;
       }
       if (!parentGroup && eligibleParents.length) {
-        parentGroup = schemaControlMap[eligibleParents[0]]?.[0];
+        parentGroup = schemaToForm[eligibleParents[0]]?.[0];
       }
       if (parentGroup) {
         const newControl = defaultControlForField(schemaNode.field, true);
-        newControl.field = relativePath(parentGroup.schema!, schemaNode);
-        parentGroup.children.push(
-          toControlAndSchema(newControl, parentGroup.schema!, parentGroup),
-        );
-      } else
-        console.warn("Could not find a parent group for: " + schemaNode.id);
+        skipChildren = !!newControl.childRefId;
+        const parentSchemaNode = formToSchema[parentGroup.id];
+        newControl.field = relativePath(parentSchemaNode, schemaNode);
+        const newNode = tree.addChild(parentGroup, newControl);
+        register(newNode, parentSchemaNode);
+      } else warning?.("Could not find a parent group for: " + schemaNode.id);
+    } else {
+      skipChildren = existingControls.some((x) => x.definition.childRefId);
     }
-    schemaNode.getChildNodes(true).forEach(addMissing);
+    if (!skipChildren) schemaNode.getChildNodes(true).forEach(addMissing);
   }
 
   function getEligibleParents(schemaNode: SchemaNode) {
@@ -424,52 +473,6 @@ export function addMissingControlsForSchema(
       }
     }
   }
-
-  function addReferences(c: ControlAndSchema) {
-    c.children.forEach(addReferences);
-    if (c.control.childRefId) {
-      const ref = controlMap[c.control.childRefId];
-      if (ref) {
-        ref.children.forEach((x) =>
-          toControlAndSchema(x.control, c.schema!, c, true),
-        );
-        return;
-      }
-      console.warn("Missing reference", c.control.childRefId);
-    }
-  }
-
-  function addSchemaMapEntry(schemaId: string, entry: ControlAndSchema) {
-    if (!schemaControlMap[schemaId]) schemaControlMap[schemaId] = [];
-    schemaControlMap[schemaId].push(entry);
-  }
-  function toControlAndSchema(
-    c: ControlDefinition,
-    parentSchema: SchemaNode,
-    parentNode?: ControlAndSchema,
-    dontRegister?: boolean,
-  ): ControlAndSchema {
-    const controlPath = fieldPathForDefinition(c);
-    let dataSchema = controlPath
-      ? schemaForFieldPath(controlPath, parentSchema)
-      : undefined;
-    if (isGroupControl(c) && dataSchema == null) dataSchema = parentSchema;
-    const entry: ControlAndSchema = {
-      schema: dataSchema,
-      control: c,
-      children: [],
-      parent: parentNode,
-    };
-    entry.children =
-      c.children?.map((x) =>
-        toControlAndSchema(x, dataSchema ?? parentSchema, entry, dontRegister),
-      ) ?? [];
-    if (!dontRegister && c.id) controlMap[c.id] = entry;
-    if (dataSchema) {
-      addSchemaMapEntry(dataSchema.id, entry);
-    }
-    return entry;
-  }
 }
 
 /**

package/tsconfig.test.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "outDir": "lib"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "lib"]
+}