@goodie-forms/react 1.0.0-alpha → 1.1.0-alpha

package/package.json

@@ -1,32 +1,32 @@
-{
-  "name": "@goodie-forms/react",
-  "version": "1.0.0-alpha",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublish": "npm run build"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0"
-  },
-  "dependencies": {
-    "@goodie-forms/core": "workspace:*",
-    "@vitejs/plugin-react": "^5.1.2",
-    "react-dom": "^19.2.3"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+  "name": "@goodie-forms/react",
+  "version": "1.1.0-alpha",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "@goodie-forms/core": "workspace:*",
+    "@vitejs/plugin-react": "^5.1.2",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/components/FieldRenderer.tsx

@@ -1,107 +1,120 @@
-import { Field, FormField } from "@goodie-forms/core";
-import {
-  ChangeEvent,
-  FocusEvent,
-  ReactNode,
-  Ref,
-  useEffect,
-  useRef,
-} from "react";
-import { UseForm } from "../hooks/useForm";
-import { useFormField } from "../hooks/useFormField";
-import { composeFns } from "../utils/composeFns";
-
-export interface RenderParams<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>,
-> {
-  ref: Ref<any | null>;
-
-  value: Field.GetValue<TShape, TPath> | undefined;
-
-  handlers: {
-    onChange: (event: ChangeEvent<EventTarget>) => void;
-    onFocus: (event: FocusEvent) => void;
-    onBlur: (event: FocusEvent) => void;
-  };
-
-  field: FormField<TShape, TPath>;
-}
-
-export interface FieldRendererProps<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>,
-> {
-  form: UseForm<TShape>;
-  path: TPath;
-  resetOnUnmount?: boolean;
-  defaultValue?: Field.GetValue<TShape, TPath>;
-  render: (params: RenderParams<TShape, TPath>) => ReactNode;
-}
-
-export function FieldRenderer<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>,
->(props: FieldRendererProps<TShape, TPath>) {
-  const elementRef = useRef<HTMLElement>(null);
-
-  const field = useFormField(props.form, props.path, props.defaultValue);
-
-  const handlers: RenderParams<TShape, TPath>["handlers"] = {
-    onChange(event) {
-      const { target } = event;
-      if (target !== field.boundElement) return;
-      if (!("value" in target)) return;
-      if (typeof target.value !== "string") return;
-      field.setValue(target.value as Field.GetValue<TShape, TPath>, {
-        shouldTouch: true,
-        shouldMarkDirty: true,
-      });
-    },
-    onFocus() {
-      field.touch();
-    },
-    onBlur() {
-      if (
-        props.form.hookConfigs?.validateMode === "onBlur" ||
-        props.form.hookConfigs?.validateMode === "onChange"
-      ) {
-        props.form.controller.validateField(props.path);
-      }
-    },
-  };
-
-  useEffect(() => {
-    const { events } = props.form.controller;
-
-    return composeFns(
-      events.on("valueChanged", (path) => {
-        if (path !== props.path) return;
-        if (props.form.hookConfigs?.validateMode === "onChange") {
-          props.form.controller.validateField(path);
-        }
-      }),
-    );
-  }, []);
-
-  useEffect(() => {
-    field.bindElement(elementRef.current!);
-
-    return () => {
-      if (props.resetOnUnmount) {
-        props.form.controller.unbindField(props.path);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      {props.render({
-        ref: elementRef,
-        value: field.value,
-        handlers: handlers,
-        field: field,
-      })}
-    </>
-  );
-}
+import { Field, FormField, NonnullFormField } from "@goodie-forms/core";
+import {
+  ChangeEvent,
+  FocusEvent,
+  ReactNode,
+  Ref,
+  useEffect,
+  useRef,
+} from "react";
+import { UseForm } from "../hooks/useForm";
+import { useFormField } from "../hooks/useFormField";
+import { composeFns } from "../utils/composeFns";
+
+export interface RenderParams<
+  TShape extends object,
+  TPath extends Field.Paths<TShape>
+> {
+  ref: Ref<any | null>;
+
+  value: Field.GetValue<TShape, TPath> | undefined;
+
+  handlers: {
+    onChange: (event: ChangeEvent<EventTarget>) => void;
+    onFocus: (event: FocusEvent) => void;
+    onBlur: (event: FocusEvent) => void;
+  };
+
+  field: undefined extends Field.GetValue<TShape, TPath>
+    ? FormField<TShape, TPath>
+    : NonnullFormField<TShape, TPath>;
+}
+
+type DefaultValueProps<TValue> = undefined extends TValue
+  ? { defaultValue?: TValue | (() => TValue) }
+  : { defaultValue: TValue | (() => TValue) };
+
+export type FieldRendererProps<
+  TShape extends object,
+  TPath extends Field.Paths<TShape>
+> = {
+  form: UseForm<TShape>;
+  path: TPath;
+  overrideInitialValue?: boolean;
+  unbindOnUnmount?: boolean;
+  render: (params: RenderParams<TShape, TPath>) => ReactNode;
+} & DefaultValueProps<Field.GetValue<TShape, TPath>>;
+
+export function FieldRenderer<
+  TShape extends object,
+  TPath extends Field.Paths<TShape>
+>(props: FieldRendererProps<TShape, TPath>) {
+  const elementRef = useRef<HTMLElement>(null);
+
+  const field = useFormField(props.form, props.path, {
+    overrideInitialValue: props.overrideInitialValue ?? true,
+    defaultValue:
+      typeof props.defaultValue === "function"
+        ? (props.defaultValue as any)()
+        : props.defaultValue,
+  })!;
+
+  const handlers: RenderParams<TShape, TPath>["handlers"] = {
+    onChange(event) {
+      const { target } = event;
+      if (target !== field.boundElement) return;
+      if (!("value" in target)) return;
+      if (typeof target.value !== "string") return;
+      field.setValue(target.value as Field.GetValue<TShape, TPath>, {
+        shouldTouch: true,
+        shouldMarkDirty: true,
+      });
+    },
+    onFocus() {
+      field.touch();
+    },
+    onBlur() {
+      if (
+        props.form.hookConfigs?.validateMode === "onBlur" ||
+        props.form.hookConfigs?.validateMode === "onChange"
+      ) {
+        props.form.controller.validateField(props.path);
+      }
+    },
+  };
+
+  useEffect(() => {
+    const { events } = props.form.controller;
+
+    return composeFns(
+      events.on("valueChanged", (path) => {
+        if (path !== props.path && !Field.isDescendant(path, props.path))
+          return;
+        if (props.form.hookConfigs?.validateMode === "onChange") {
+          props.form.controller.validateField(props.path);
+        }
+      })
+    );
+  }, []);
+
+  useEffect(() => {
+    field.bindElement(elementRef.current!);
+
+    return () => {
+      if (props.unbindOnUnmount) {
+        props.form.controller.unbindField(props.path);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      {props.render({
+        ref: elementRef,
+        value: field.value,
+        handlers: handlers,
+        field: field as any,
+      })}
+    </>
+  );
+}

package/src/hooks/useForm.tsx

@@ -1,51 +1,46 @@
-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();
-
-  const [, setIsSubmitting] = useState(() => controller.isSubmitting);
-  const [, setIsValid] = useState(() => controller.isValid);
-
-  useEffect(() => {
-    const noop = () => {};
-
-    return composeFns(
-      controller.events.on("statusChanged", (state) => {
-        // Only re-render when submission state changes
-        setIsSubmitting(state === "submitting");
-        setIsValid(controller.isValid);
-      }),
-      hookConfigs?.watchIssues
-        ? controller.events.on("validationIssuesUpdated", () =>
-            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 { 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>>;

package/src/hooks/useFormErrorObserver.ts

@@ -1,38 +1,40 @@
-import type { 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();
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    return composeFns(
-      events.on("validationIssuesUpdated", (path) => {
-        if (options?.include?.includes?.(path) ?? true) {
-          renderControl.forceRerender();
-        }
-      }),
-    );
-  }, []);
-
-  const filteredIssues = form.controller._issues.filter((issue) => {
-    if (options?.include == null) return true;
-    const path = issue.path!.join(".") as Field.Paths<TShape>;
-    return options.include.includes(path);
-  });
-
-  return groupBy(
-    filteredIssues,
-    (issue) => issue.path!.join(".") as Field.Paths<TShape>,
-  );
-}
+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;
+}

package/src/hooks/useFormField.tsx

@@ -1,46 +1,55 @@
-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,
-  defaultValue?: Field.GetValue<TShape, TPath>,
-) {
-  const renderControl = useRenderControl();
-
-  const [field] = useState(() => {
-    return (
-      form.controller.getField(path) ??
-      form.controller.bindField(path, {
-        defaultValue: defaultValue,
-      })
-    );
-  });
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    return composeFns(
-      events.on("valueChanged", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-      events.on("fieldTouchUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-      events.on("fieldDirtyUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-      events.on("validationIssuesUpdated", (_path) => {
-        if (_path === path) renderControl.forceRerender();
-      }),
-    );
-  }, []);
-
-  return field;
-}
+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;
+}

package/src/hooks/useFormValuesObserver.ts

@@ -1,34 +1,45 @@
-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>(
-  form: UseForm<TShape>,
-  options?: {
-    include?: Field.Paths<TShape>[];
-  },
-) {
-  const renderControl = useRenderControl();
-
-  useEffect(() => {
-    const { events } = form.controller;
-
-    return composeFns(
-      events.on("valueChanged", (path) => {
-        if (options?.include?.includes?.(path) ?? true) {
-          renderControl.forceRerender();
-        }
-      }),
-    );
-  }, []);
-
-  return 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);
-}
+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;
+}