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

package/src/components/FieldRenderer.tsx

@@ -1,120 +1,166 @@
-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,
-      })}
-    </>
-  );
-}
+import { FieldPath, FormField, NonnullFormField } from "@goodie-forms/core";
+import {
+  ChangeEvent,
+  FocusEvent,
+  ReactNode,
+  Ref,
+  useEffect,
+  useRef,
+} from "react";
+import { useForm, UseForm } from "../hooks/useForm";
+import { useFormField } from "../hooks/useFormField";
+import { composeFns } from "../utils/composeFns";
+
+export interface RenderParams<TOutput extends object, TValue> {
+  ref: Ref<any | null>;
+
+  value: TValue | undefined;
+
+  handlers: {
+    onChange: (event: ChangeEvent<EventTarget>) => void;
+    onFocus: (event: FocusEvent) => void;
+    onBlur: (event: FocusEvent) => void;
+  };
+
+  field: undefined extends TValue
+    ? FormField<TOutput, TValue>
+    : NonnullFormField<TOutput, TValue>;
+}
+
+type DefaultValueProps<TValue> = undefined extends TValue
+  ? { defaultValue?: TValue | (() => TValue) }
+  : { defaultValue: TValue | (() => TValue) };
+
+export type FieldRendererProps<
+  TOutput extends object,
+  TPath extends FieldPath.Segments,
+> = {
+  form: UseForm<TOutput>;
+  path: TPath;
+  overrideInitialValue?: boolean;
+  unbindOnUnmount?: boolean;
+  render: (
+    params: RenderParams<TOutput, FieldPath.Resolve<TOutput, NoInfer<TPath>>>,
+  ) => ReactNode;
+} & DefaultValueProps<FieldPath.Resolve<TOutput, NoInfer<TPath>>>;
+
+export function FieldRenderer<
+  TOutput extends object,
+  const TPath extends FieldPath.Segments,
+>(props: FieldRendererProps<TOutput, TPath>) {
+  type TValue = FieldPath.Resolve<TOutput, 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<TOutput, TValue>["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 TValue, {
+        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 (
+          !FieldPath.equals(_path, props.path) &&
+          !FieldPath.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,
+      })}
+    </>
+  );
+}
+
+/* ---- TESTS ---------------- */
+
+// function TestComp() {
+//   const form = useForm<{ a?: { b: 99 } }>({});
+
+//   const jsx = (
+//     <>
+//       <FieldRenderer
+//         form={form}
+//         path={form.paths.fromProxy((data) => data.a.b)}
+//         defaultValue={() => 99 as const}
+//         render={({ ref, value, handlers, field }) => {
+//           //            ^?
+//           return <></>;
+//         }}
+//       />
+
+//       {/* defaultField olmayabilir, çünkü "a" nullable */}
+//       <FieldRenderer
+//         form={form}
+//         path={form.paths.fromProxy((data) => data.a)}
+//         render={({ ref, value, handlers, field }) => {
+//           //            ^?
+//           return <></>;
+//         }}
+//       />
+
+//       <FieldRenderer
+//         form={form}
+//         path={form.paths.fromStringPath("a.b")}
+//         defaultValue={() => 99 as const}
+//         render={({ ref, value, handlers, field }) => {
+//           //            ^?
+//           return <></>;
+//         }}
+//       />
+//     </>
+//   );
+// }

package/src/hooks/useForm.tsx

@@ -1,55 +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,
-  } as UseForm<TShape>;
-}
-
-export type UseForm<TShape extends object> = {
-  formConfigs: Form.FormConfigs<TShape>;
-  hookConfigs?: {
-    validateMode?: "onChange" | "onBlur" | "onSubmit";
-    revalidateMode?: "onChange" | "onBlur" | "onSubmit";
-    watchIssues?: boolean;
-    watchValues?: boolean;
-  };
-  controller: FormController<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,42 +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,
-  TInclude extends Field.Paths<TShape>[] | undefined
->(
-  form: UseForm<TShape>,
-  options?: {
-    include?: TInclude;
-  }
-) {
-  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!)
-  );
-
-  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;
+}