@goodie-forms/react 1.1.5-alpha → 1.2.0-alpha

package/src/hooks/useForm.tsx

@@ -1,46 +1,50 @@
-import { FormController, type Form } from "@goodie-forms/core";
-import { useEffect, useState } from "react";
-import { composeFns } from "../utils/composeFns";
-import { useRenderControl } from "../hooks/useRenderControl";
-
-export function useForm<TShape extends object>(
-  formConfigs: Form.FormConfigs<TShape>,
-  hookConfigs?: {
-    validateMode?: "onChange" | "onBlur" | "onSubmit";
-    revalidateMode?: "onChange" | "onBlur" | "onSubmit";
-    watchIssues?: boolean;
-    watchValues?: boolean;
-  },
-) {
-  const [controller] = useState(() => new FormController(formConfigs));
-
-  const renderControl = useRenderControl();
-
-  useEffect(() => {
-    const noop = () => {};
-
-    return composeFns(
-      controller.events.on("submissionStatusChange", () => {
-        renderControl.forceRerender();
-      }),
-      hookConfigs?.watchIssues
-        ? controller.events.on("fieldIssuesUpdated", () =>
-            renderControl.forceRerender(),
-          )
-        : noop,
-      hookConfigs?.watchValues
-        ? controller.events.on("valueChanged", () =>
-            renderControl.forceRerender(),
-          )
-        : noop,
-    );
-  }, [controller]);
-
-  return {
-    formConfigs,
-    hookConfigs,
-    controller,
-  };
-}
-
-export type UseForm<TShape extends object> = ReturnType<typeof useForm<TShape>>;
+import { FieldPathBuilder, FormController } from "@goodie-forms/core";
+import { useEffect, useState } from "react";
+import { useRenderControl } from "../hooks/useRenderControl";
+import { composeFns } from "../utils/composeFns";
+
+export function useForm<TOutput extends object>(
+  formConfigs: FormController.Configs<TOutput>,
+  hookConfigs?: {
+    validateMode?: "onChange" | "onBlur" | "onSubmit";
+    revalidateMode?: "onChange" | "onBlur" | "onSubmit";
+    watchIssues?: boolean;
+    watchValues?: boolean;
+  },
+) {
+  const [controller] = useState(() => new FormController(formConfigs));
+  const [paths] = useState(() => new FieldPathBuilder<TOutput>());
+
+  const renderControl = useRenderControl();
+
+  useEffect(() => {
+    const noop = () => {};
+
+    return composeFns(
+      controller.events.on("submissionStatusChange", () => {
+        renderControl.forceRerender();
+      }),
+      hookConfigs?.watchIssues
+        ? controller.events.on("fieldIssuesUpdated", () =>
+            renderControl.forceRerender(),
+          )
+        : noop,
+      hookConfigs?.watchValues
+        ? controller.events.on("valueChanged", () =>
+            renderControl.forceRerender(),
+          )
+        : noop,
+    );
+  }, [controller]);
+
+  return {
+    formConfigs,
+    paths,
+    hookConfigs,
+    controller,
+  };
+}
+
+export type UseForm<TOutput extends object> = ReturnType<
+  typeof useForm<TOutput>
+>;

package/src/hooks/useFormErrorObserver.ts

@@ -1,40 +1,44 @@
-import { Field } from "@goodie-forms/core";
-import { useEffect } from "react";
-import { composeFns } from "../utils/composeFns";
-import { groupBy } from "../utils/groupBy";
-import type { UseForm } from "./useForm";
-import { useRenderControl } from "./useRenderControl";
-
-export function useFormErrorObserver<TShape extends object>(
-  form: UseForm<TShape>,
-  options?: {
-    include?: Field.Paths<TShape>[];
-  },
-) {
-  const renderControl = useRenderControl();
-
-  const filteredIssues = form.controller._issues.filter((issue) => {
-    if (options?.include == null) return true;
-    const path = Field.parsePath(issue.path!) as Field.Paths<TShape>;
-    return options.include.includes(path);
-  });
-
-  const observedIssues = groupBy(
-    filteredIssues,
-    (issue) => Field.parsePath(issue.path!) as Field.Paths<TShape>,
-  );
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    return composeFns(
-      events.on("fieldIssuesUpdated", (path) => {
-        if (options?.include?.includes?.(path) ?? true) {
-          renderControl.forceRerender();
-        }
-      }),
-    );
-  }, []);
-
-  return observedIssues;
-}
+import { FieldPath } from "@goodie-forms/core";
+import { groupBy } from "../utils/groupBy";
+import { useEffect } from "react";
+import { composeFns } from "../utils/composeFns";
+import type { UseForm } from "./useForm";
+import { useRenderControl } from "./useRenderControl";
+
+export function useFormErrorObserver<
+  TOutput extends object,
+  TInclude extends FieldPath.Segments[] | undefined = undefined,
+>(
+  form: UseForm<TOutput>,
+  options?: {
+    include?: TInclude;
+  },
+) {
+  const renderControl = useRenderControl();
+
+  const observedIssues = form.controller._issues.filter((issue) => {
+    if (options?.include == null) return true;
+    const normalizedIssuePath = FieldPath.normalize(issue.path);
+    return options.include.some((path) =>
+      FieldPath.equals(path, normalizedIssuePath),
+    );
+  });
+
+  useEffect(() => {
+    const { events } = form.controller;
+
+    return composeFns(
+      events.on("fieldIssuesUpdated", (path) => {
+        if (options?.include?.includes?.(path) ?? true) {
+          renderControl.forceRerender();
+        }
+      }),
+    );
+  }, []);
+
+  return groupBy(observedIssues, (issue) =>
+    issue.path == null
+      ? "$"
+      : FieldPath.toStringPath(FieldPath.normalize(issue.path)),
+  );
+}

package/src/hooks/useFormField.tsx

@@ -1,55 +1,63 @@
-import { Field } from "@goodie-forms/core";
-import { useEffect, useState } from "react";
-import { UseForm } from "../hooks/useForm";
-import { useRenderControl } from "../hooks/useRenderControl";
-import { composeFns } from "../utils/composeFns";
-
-export function useFormField<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>
->(
-  form: UseForm<TShape>,
-  path: TPath,
-  bindingConfig?: Parameters<typeof form.controller.bindField<TPath>>[1]
-) {
-  const renderControl = useRenderControl();
-
-  const [field, setField] = useState(() => {
-    let field = form.controller.getField(path);
-    if (field == null && bindingConfig != null) {
-      field = form.controller.bindField(path, bindingConfig);
-    }
-    return field;
-  });
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    setField(form.controller.getField(path));
-
-    return composeFns(
-      events.on("fieldBound", (_path) => {
-        if (_path === path) setField(form.controller.getField(path));
-      }),
-      events.on("fieldUnbound", (_path) => {
-        if (_path === path) setField(undefined);
-      }),
-      events.on("valueChanged", (changedPath) => {
-        if (changedPath === path || Field.isDescendant(changedPath, path)) {
-          renderControl.forceRerender();
-        }
-      }),
-      events.on("fieldTouchUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-      events.on("fieldDirtyUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-      events.on("fieldIssuesUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      })
-    );
-  }, []);
-
-  return field;
-}
+import { FieldPath } from "@goodie-forms/core";
+import { useEffect, useState } from "react";
+import { UseForm } from "../hooks/useForm";
+import { useRenderControl } from "../hooks/useRenderControl";
+import { composeFns } from "../utils/composeFns";
+
+export function useFormField<
+  TOutput extends object,
+  TPath extends FieldPath.Segments,
+>(
+  form: UseForm<TOutput>,
+  path: TPath,
+  bindingConfig?: Parameters<typeof form.controller.bindField<TPath>>[1],
+) {
+  const renderControl = useRenderControl();
+
+  const [field, setField] = useState(() => {
+    let field = form.controller.getField(path);
+    if (field == null && bindingConfig != null) {
+      field = form.controller.bindField(path, bindingConfig);
+    }
+    return field;
+  });
+
+  useEffect(() => {
+    const { events } = form.controller;
+
+    setField(form.controller.getField(path));
+
+    return composeFns(
+      events.on("fieldBound", (_path) => {
+        if (!FieldPath.equals(_path, path)) return;
+        setField(form.controller.getField(path));
+      }),
+      events.on("fieldUnbound", (_path) => {
+        if (!FieldPath.equals(_path, path)) return;
+        setField(undefined);
+      }),
+      events.on("valueChanged", (changedPath) => {
+        if (
+          FieldPath.equals(changedPath, path) ||
+          FieldPath.isDescendant(changedPath, path)
+        ) {
+          renderControl.forceRerender();
+        }
+      }),
+      events.on("fieldTouchUpdated", (_path) => {
+        if (!FieldPath.equals(_path, path)) return;
+        renderControl.forceRerender();
+      }),
+      events.on("fieldDirtyUpdated", (_path) => {
+        if (!FieldPath.equals(_path, path)) return;
+        renderControl.forceRerender();
+      }),
+      events.on("fieldIssuesUpdated", (_path) => {
+        if (!FieldPath.equals(_path, path)) return;
+        renderControl.forceRerender();
+      }),
+    );
+  }, []);
+
+  return field;
+}

package/src/hooks/useFormValuesObserver.ts

@@ -1,45 +1,49 @@
-import { Field } from "@goodie-forms/core";
-import { useEffect } from "react";
-import { composeFns } from "../utils/composeFns";
-import type { UseForm } from "./useForm";
-import { useRenderControl } from "./useRenderControl";
-
-export function useFormValuesObserver<
-  TShape extends object,
-  TPaths extends Field.Paths<TShape>[] | undefined = undefined
->(
-  form: UseForm<TShape>,
-  options?: {
-    include?: TPaths;
-  }
-) {
-  const renderControl = useRenderControl();
-
-  const observedValues =
-    options?.include == null
-      ? form.controller._data
-      : options.include.reduce((data, path) => {
-          const value = Field.getValue(form.controller._data as TShape, path)!;
-          Field.setValue(data, path, value);
-          return data;
-        }, {} as TShape);
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    return composeFns(
-      events.on("valueChanged", (changedPath) => {
-        const watchingChange =
-          options?.include == null
-            ? true
-            : options.include.some(
-                (path) =>
-                  path === changedPath || Field.isDescendant(path, changedPath)
-              );
-        if (watchingChange) renderControl.forceRerender();
-      })
-    );
-  }, []);
-
-  return observedValues;
-}
+import { FieldPath } from "@goodie-forms/core";
+import { useEffect } from "react";
+import { composeFns } from "../utils/composeFns";
+import type { UseForm } from "./useForm";
+import { useRenderControl } from "./useRenderControl";
+
+export function useFormValuesObserver<
+  TOutput extends object,
+  TPaths extends FieldPath.Segments[] | undefined = undefined,
+>(
+  form: UseForm<TOutput>,
+  options?: {
+    include?: TPaths;
+  },
+) {
+  const renderControl = useRenderControl();
+
+  const observedValues =
+    options?.include == null
+      ? form.controller._data
+      : options.include.reduce((data, path) => {
+          const value = FieldPath.getValue(
+            form.controller._data as TOutput,
+            path,
+          )!;
+          FieldPath.setValue(data, path, value);
+          return data;
+        }, {} as TOutput);
+
+  useEffect(() => {
+    const { events } = form.controller;
+
+    return composeFns(
+      events.on("valueChanged", (changedPath) => {
+        const watchingChange =
+          options?.include == null
+            ? true
+            : options.include.some(
+                (path) =>
+                  FieldPath.equals(path, changedPath) ||
+                  FieldPath.isDescendant(path, changedPath),
+              );
+        if (watchingChange) renderControl.forceRerender();
+      }),
+    );
+  }, []);
+
+  return observedValues;
+}

package/src/hooks/useRenderControl.tsx

@@ -1,26 +1,26 @@
-import { startTransition, useRef, useState } from "react";
-
-export function useRenderControl() {
-  const [, rerender] = useState(0);
-  const renderCount = useRef(0);
-  const renderScheduled = useRef(false);
-  renderCount.current++;
-
-  const scheduleRerender = () => {
-    if (renderScheduled.current) return;
-    renderScheduled.current = true;
-
-    queueMicrotask(() => {
-      startTransition(() => {
-        rerender((i) => i + 1);
-      });
-
-      renderScheduled.current = false;
-    });
-  };
-
-  return {
-    renderCount: renderCount.current,
-    forceRerender: scheduleRerender,
-  };
-}
+import { startTransition, useRef, useState } from "react";
+
+export function useRenderControl() {
+  const [, rerender] = useState(0);
+  const renderCount = useRef(0);
+  const renderScheduled = useRef(false);
+  renderCount.current++;
+
+  const scheduleRerender = () => {
+    if (renderScheduled.current) return;
+    renderScheduled.current = true;
+
+    queueMicrotask(() => {
+      startTransition(() => {
+        rerender((i) => i + 1);
+      });
+
+      renderScheduled.current = false;
+    });
+  };
+
+  return {
+    renderCount: renderCount.current,
+    forceRerender: scheduleRerender,
+  };
+}

package/src/index.ts

@@ -1,7 +1,7 @@
-export * from "./hooks/useForm";
-export * from "./hooks/useFormField";
-export * from "./hooks/useFormValuesObserver";
-export * from "./hooks/useFormErrorObserver";
-export * from "./hooks/useRenderControl";
-
-export * from "./components/FieldRenderer";
+export * from "./hooks/useForm";
+export * from "./hooks/useFormField";
+export * from "./hooks/useFormValuesObserver";
+export * from "./hooks/useFormErrorObserver";
+export * from "./hooks/useRenderControl";
+
+export * from "./components/FieldRenderer";

package/src/utils/composeFns.ts

@@ -1,7 +1,7 @@
-export function composeFns<TFns extends (() => void)[]>(...fns: TFns) {
-  return () => {
-    for (const fn of fns) {
-      fn();
-    }
-  };
-}
+export function composeFns<TFns extends (() => void)[]>(...fns: TFns) {
+  return () => {
+    for (const fn of fns) {
+      fn();
+    }
+  };
+}

package/src/utils/groupBy.ts

@@ -1,13 +1,13 @@
-export function groupBy<T, K extends PropertyKey>(
-  items: readonly T[],
-  key: (item: T) => K,
-): Record<K, T[]> {
-  const result = {} as Record<K, T[]>;
-
-  for (const item of items) {
-    const k = key(item);
-    (result[k] ??= []).push(item);
-  }
-
-  return result;
-}
+export function groupBy<T, K extends PropertyKey>(
+  items: readonly T[],
+  key: (item: T) => K,
+): Record<K, T[]> {
+  const result = {} as Record<K, T[]>;
+
+  for (const item of items) {
+    const k = key(item);
+    (result[k] ??= []).push(item);
+  }
+
+  return result;
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -1,23 +1,23 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  plugins: [react(), dts({ entryRoot: "src" })],
-  build: {
-    lib: {
-      entry: "src/index.ts",
-      formats: ["es"],
-      fileName: "index",
-    },
-    rollupOptions: {
-      external: [
-        "react",
-        "react-dom",
-        "react/jsx-runtime",
-        "@goodie-forms/core",
-      ],
-    },
-    sourcemap: true,
-  },
-});
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [react(), dts({ entryRoot: "src" })],
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "@goodie-forms/core",
+      ],
+    },
+    sourcemap: true,
+  },
+});