remix-validated-form 4.4.1 → 4.5.0-beta.0

package/dist/types/hooks.d.ts

@@ -64,4 +64,4 @@ export declare const useField: (name: string, options?: {
     formId?: string | undefined;
 } | undefined) => FieldProps;
 export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
-export declare const useUpdateControlledField: (formId?: string | undefined) => (fieldName: string, value: unknown) => void;
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/dist/types/internal/hooks.d.ts

@@ -1,7 +1,7 @@
 import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
 import { Hydratable } from "./hydratable";
-import { InternalFormId } from "./state/storeFamily";
+import { InternalFormId } from "./state/types";
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;

package/dist/types/internal/state/controlledFieldStore.d.ts

@@ -1,24 +1,26 @@
+import { InternalFormId } from "./types";
+export declare type FieldState = {
+    refCount: number;
+    value: unknown;
+    defaultValue?: unknown;
+    hydrated: boolean;
+    valueUpdatePromise: Promise<void> | undefined;
+    resolveValueUpdate: (() => void) | undefined;
+};
 export declare type ControlledFieldState = {
-    fields: {
-        [fieldName: string]: {
-            refCount: number;
-            value: unknown;
-            defaultValue?: unknown;
-            hydrated: boolean;
-            valueUpdatePromise: Promise<void> | undefined;
-            resolveValueUpdate: (() => void) | undefined;
-        } | undefined;
+    forms: {
+        [formId: InternalFormId]: {
+            [fieldName: string]: FieldState | undefined;
+        };
     };
-    register: (fieldName: string) => void;
-    unregister: (fieldName: string) => void;
-    setValue: (fieldName: string, value: unknown) => void;
-    hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
-    awaitValueUpdate: (fieldName: string) => Promise<void>;
-    reset: () => void;
-};
-export declare const controlledFieldStore: {
-    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
-        setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
-    }>;
-    remove(formId: import("./storeFamily").InternalFormId): void;
+    register: (formId: InternalFormId, fieldName: string) => void;
+    unregister: (formId: InternalFormId, fieldName: string) => void;
+    getField: (formId: InternalFormId, fieldName: string) => FieldState | undefined;
+    setValue: (formId: InternalFormId, fieldName: string, value: unknown) => void;
+    hydrateWithDefault: (formId: InternalFormId, fieldName: string, defaultValue: unknown) => void;
+    awaitValueUpdate: (formId: InternalFormId, fieldName: string) => Promise<void>;
+    reset: (formId: InternalFormId) => void;
 };
+export declare const useControlledFieldStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
+    setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/dist/types/internal/state/controlledFields.d.ts

@@ -1,6 +1,6 @@
 import { InternalFormContextValue } from "../formContext";
-import { InternalFormId } from "./storeFamily";
+import { InternalFormId } from "./types";
 export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
 export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
-export declare const useUpdateControllableValue: (formId: InternalFormId) => (fieldName: string, value: unknown) => void;
-export declare const useAwaitValue: (formId: InternalFormId) => (fieldName: string) => Promise<void>;
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (field: string) => Promise<void>;

package/dist/types/internal/state/createFormStore.d.ts

@@ -1,4 +1,6 @@
+import { WritableDraft } from "immer/dist/internal";
 import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { InternalFormId } from "./types";
 export declare type SyncedFormProps = {
     formId?: string;
     action?: string;
@@ -9,6 +11,14 @@ export declare type SyncedFormProps = {
     registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
     validator: Validator<unknown>;
 };
+export declare type FormStoreState = {
+    forms: {
+        [formId: InternalFormId]: FormState;
+    };
+    form: (formId: InternalFormId) => FormState;
+    registerForm: (formId: InternalFormId) => void;
+    cleanupForm: (formId: InternalFormId) => void;
+};
 export declare type FormState = {
     isHydrated: boolean;
     isSubmitting: boolean;
@@ -32,9 +42,6 @@ export declare type FormState = {
     validate: () => Promise<void>;
     resetFormElement: () => void;
 };
-export declare const formStore: {
-    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormState>, "setState"> & {
-        setState(nextStateOrUpdater: FormState | Partial<FormState> | ((state: import("immer/dist/internal").WritableDraft<FormState>) => void), shouldReplace?: boolean | undefined): void;
-    }>;
-    remove(formId: import("./storeFamily").InternalFormId): void;
-};
+export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
+    setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/dist/types/internal/state/storeHooks.d.ts

@@ -1,5 +1,3 @@
-import { ControlledFieldState } from "./controlledFieldStore";
 import { FormState } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
+import { InternalFormId } from "./types";
 export declare const useFormStore: <T>(formId: InternalFormId, selector: (state: FormState) => T) => T;
-export declare const useControlledFieldStore: <T>(formId: InternalFormId, selector: (state: ControlledFieldState) => T) => T;

package/dist/types/internal/state/types.d.ts

@@ -0,0 +1 @@
+export declare type InternalFormId = string | symbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.4.1",
+  "version": "4.5.0-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",
@@ -41,9 +41,9 @@
     "@remix-run/react": "^1.2.1",
     "@remix-run/server-runtime": "^1.2.1",
     "@types/lodash": "^4.14.178",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "tsconfig": "*",
     "typescript": "^4.5.3",
     "vite-config": "*"
@@ -52,6 +52,6 @@
     "immer": "^9.0.12",
     "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0",
-    "zustand": "^4.0.0-rc.0"
+    "zustand": "^4.0.0-rc.1"
   }
 }

package/src/ValidatedForm.tsx

@@ -23,12 +23,12 @@ import {
   useSetFieldErrors,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
-import { cleanupFormState } from "./internal/state/cleanup";
-import { SyncedFormProps } from "./internal/state/createFormStore";
+import { useControlledFieldStore } from "./internal/state/controlledFieldStore";
 import {
-  useControlledFieldStore,
-  useFormStore,
-} from "./internal/state/storeHooks";
+  SyncedFormProps,
+  useRootFormStore,
+} from "./internal/state/createFormStore";
+import { useFormStore } from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
@@ -186,6 +186,14 @@ function formEventProxy<T extends object>(event: T): T {
   }) as T;
 }
 
+type HTMLSubmitEvent = React.BaseSyntheticEvent<
+  SubmitEvent,
+  Event,
+  HTMLFormElement
+>;
+
+type HTMLFormSubmitter = HTMLButtonElement | HTMLInputElement;
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -228,23 +236,16 @@ export function ValidatedForm<DataType>({
   const setFieldErrors = useSetFieldErrors(formId);
   const setFieldError = useFormStore(formId, (state) => state.setFieldError);
   const reset = useFormStore(formId, (state) => state.reset);
-  const resetControlledFields = useControlledFieldStore(
-    formId,
-    (state) => state.reset
-  );
+  const resetControlledFields = useControlledFieldStore((state) => state.reset);
   const startSubmit = useFormStore(formId, (state) => state.startSubmit);
   const endSubmit = useFormStore(formId, (state) => state.endSubmit);
   const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
-  const setHydrated = useFormStore(formId, (state) => state.setHydrated);
   const setFormElementInState = useFormStore(
     formId,
     (state) => state.setFormElement
   );
-
-  useEffect(() => {
-    setHydrated();
-    return () => cleanupFormState(formId);
-  }, [formId, setHydrated]);
+  const cleanupForm = useRootFormStore((state) => state.cleanupForm);
+  const registerForm = useRootFormStore((state) => state.registerForm);
 
   const customFocusHandlers = useMultiValueMap<string, () => void>();
   const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
@@ -258,6 +259,13 @@ export function ValidatedForm<DataType>({
       [customFocusHandlers]
     );
 
+  // TODO: all these hooks running at startup cause extra, unnecessary renders
+  // There must be a nice way to avoid this.
+  useLayoutEffect(() => {
+    registerForm(formId);
+    return () => cleanupForm(formId);
+  }, [cleanupForm, formId, registerForm]);
+
   useLayoutEffect(() => {
     syncFormProps({
       action,
@@ -276,6 +284,10 @@ export function ValidatedForm<DataType>({
     validator,
   ]);
 
+  useLayoutEffect(() => {
+    setFormElementInState(formRef.current);
+  }, [setFormElementInState]);
+
   useEffect(() => {
     setFieldErrors(backendError?.fieldErrors ?? {});
   }, [backendError?.fieldErrors, setFieldErrors, setFieldError]);
@@ -331,17 +343,16 @@ export function ValidatedForm<DataType>({
         return;
       }
 
+      const submitter = (e as unknown as HTMLSubmitEvent).nativeEvent
+        .submitter as HTMLFormSubmitter | null;
+
       // We deviate from the remix code here a bit because of our async submit.
       // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
       // but we already have the form in `formRef.current` so we can just use that.
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
-      if (fetcher) fetcher.submit(clickedButtonRef.current || formRef.current);
-      else
-        submit(clickedButtonRef.current || formRef.current, {
-          method,
-          replace,
-        });
+      if (fetcher) fetcher.submit(submitter || e.currentTarget);
+      else submit(submitter || e.currentTarget, { method, replace });
 
       clickedButtonRef.current = null;
     }
@@ -349,7 +360,7 @@ export function ValidatedForm<DataType>({
 
   return (
     <Form
-      ref={mergeRefs([formRef, formRefProp, setFormElementInState])}
+      ref={mergeRefs([formRef, formRefProp])}
       {...rest}
       id={id}
       action={action}
@@ -363,7 +374,7 @@ export function ValidatedForm<DataType>({
         onReset?.(event);
         if (event.defaultPrevented) return;
         reset();
-        resetControlledFields();
+        resetControlledFields(formId);
       }}
     >
       <InternalFormContext.Provider value={contextValue}>

package/src/internal/hooks.ts

@@ -6,8 +6,8 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
 import { Hydratable, hydratable } from "./hydratable";
-import { InternalFormId } from "./state/storeFamily";
 import { useFormStore } from "./state/storeHooks";
+import { InternalFormId } from "./state/types";
 
 export const useInternalFormContext = (
   formId?: string | symbol,

package/src/internal/state/controlledFieldStore.ts

@@ -1,91 +1,112 @@
-import invariant from "tiny-invariant";
 import create from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { storeFamily } from "./storeFamily";
+import { InternalFormId } from "./types";
+
+export type FieldState = {
+  refCount: number;
+  value: unknown;
+  defaultValue?: unknown;
+  hydrated: boolean;
+  valueUpdatePromise: Promise<void> | undefined;
+  resolveValueUpdate: (() => void) | undefined;
+};
 
 export type ControlledFieldState = {
-  fields: {
-    [fieldName: string]:
-      | {
-          refCount: number;
-          value: unknown;
-          defaultValue?: unknown;
-          hydrated: boolean;
-          valueUpdatePromise: Promise<void> | undefined;
-          resolveValueUpdate: (() => void) | undefined;
-        }
-      | undefined;
+  forms: {
+    [formId: InternalFormId]: {
+      [fieldName: string]: FieldState | undefined;
+    };
   };
-  register: (fieldName: string) => void;
-  unregister: (fieldName: string) => void;
-  setValue: (fieldName: string, value: unknown) => void;
-  hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
-  awaitValueUpdate: (fieldName: string) => Promise<void>;
-  reset: () => void;
+  register: (formId: InternalFormId, fieldName: string) => void;
+  unregister: (formId: InternalFormId, fieldName: string) => void;
+  getField: (
+    formId: InternalFormId,
+    fieldName: string
+  ) => FieldState | undefined;
+  setValue: (formId: InternalFormId, fieldName: string, value: unknown) => void;
+  hydrateWithDefault: (
+    formId: InternalFormId,
+    fieldName: string,
+    defaultValue: unknown
+  ) => void;
+  awaitValueUpdate: (
+    formId: InternalFormId,
+    fieldName: string
+  ) => Promise<void>;
+  reset: (formId: InternalFormId) => void;
 };
 
-export const controlledFieldStore = storeFamily(() =>
-  create<ControlledFieldState>()(
-    immer((set, get, api) => ({
-      fields: {},
+export const useControlledFieldStore = create<ControlledFieldState>()(
+  immer((set, get) => ({
+    forms: {},
+
+    register: (formId, field) =>
+      set((state) => {
+        if (!state.forms[formId]) {
+          state.forms[formId] = {};
+        }
+
+        if (state.forms[formId][field]) {
+          state.forms[formId][field]!.refCount++;
+        } else {
+          state.forms[formId][field] = {
+            refCount: 1,
+            value: undefined,
+            hydrated: false,
+            valueUpdatePromise: undefined,
+            resolveValueUpdate: undefined,
+          };
+        }
+      }),
 
-      register: (field) =>
-        set((state) => {
-          if (state.fields[field]) {
-            state.fields[field]!.refCount++;
-          } else {
-            state.fields[field] = {
-              refCount: 1,
-              value: undefined,
-              hydrated: false,
-              valueUpdatePromise: undefined,
-              resolveValueUpdate: undefined,
-            };
-          }
-        }),
+    unregister: (formId, field) =>
+      set((state) => {
+        const formState = state.forms?.[formId];
+        const fieldState = formState?.[field];
+        if (!fieldState) return;
 
-      unregister: (field) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+        fieldState.refCount--;
+        if (fieldState.refCount === 0) delete formState[field];
+      }),
 
-          fieldState.refCount--;
-          if (fieldState.refCount === 0) delete state.fields[field];
-        }),
+    getField: (formId, field) => {
+      return get().forms?.[formId]?.[field];
+    },
 
-      setValue: (field, value) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+    setValue: (formId, field, value) =>
+      set((state) => {
+        const fieldState = state.forms?.[formId]?.[field];
+        if (!fieldState) return;
 
-          fieldState.value = value;
-          const promise = new Promise<void>((resolve) => {
-            fieldState.resolveValueUpdate = resolve;
-          });
-          fieldState.valueUpdatePromise = promise;
-        }),
+        fieldState.value = value;
+        const promise = new Promise<void>((resolve) => {
+          fieldState.resolveValueUpdate = resolve;
+        });
+        fieldState.valueUpdatePromise = promise;
+      }),
 
-      hydrateWithDefault: (field, defaultValue) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+    hydrateWithDefault: (formId, field, defaultValue) =>
+      set((state) => {
+        const fieldState = state.forms[formId]?.[field];
+        if (!fieldState) return;
 
-          fieldState.value = defaultValue;
-          fieldState.defaultValue = defaultValue;
-          fieldState.hydrated = true;
-        }),
+        fieldState.value = defaultValue;
+        fieldState.defaultValue = defaultValue;
+        fieldState.hydrated = true;
+      }),
 
-      awaitValueUpdate: async (field) => {
-        await get().fields[field]?.valueUpdatePromise;
-      },
+    awaitValueUpdate: async (formId, field) => {
+      await get().getField(formId, field)?.valueUpdatePromise;
+    },
 
-      reset: () =>
-        set((state) => {
-          Object.values(state.fields).forEach((field) => {
-            if (!field) return;
-            field.value = field.defaultValue;
-          });
-        }),
-    }))
-  )
+    reset: (formId) =>
+      set((state) => {
+        const formState = state.forms[formId];
+        if (!formState) return;
+        Object.values(formState).forEach((field) => {
+          if (!field) return;
+          field.value = field.defaultValue;
+        });
+      }),
+  }))
 );

package/src/internal/state/controlledFields.ts

@@ -1,31 +1,37 @@
 import { useCallback, useEffect } from "react";
 import { InternalFormContextValue } from "../formContext";
 import { useFieldDefaultValue } from "../hooks";
-import { controlledFieldStore } from "./controlledFieldStore";
-import { formStore } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
+import { useControlledFieldStore } from "./controlledFieldStore";
+import { useFormStore } from "./storeHooks";
+import { InternalFormId } from "./types";
 
 export const useControlledFieldValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const useValueStore = controlledFieldStore(context.formId);
-  const value = useValueStore((state) => state.fields[field]?.value);
+  const value = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.value
+  );
 
-  const useFormStore = formStore(context.formId);
-  const isFormHydrated = useFormStore((state) => state.isHydrated);
+  const isFormHydrated = useFormStore(
+    context.formId,
+    (state) => state.isHydrated
+  );
   const defaultValue = useFieldDefaultValue(field, context);
 
-  const isFieldHydrated = useValueStore(
-    (state) => state.fields[field]?.hydrated ?? false
+  const isFieldHydrated = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.hydrated ?? false
+  );
+  const hydrateWithDefault = useControlledFieldStore(
+    (state) => state.hydrateWithDefault
   );
-  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
 
   useEffect(() => {
     if (isFormHydrated && !isFieldHydrated) {
-      hydrateWithDefault(field, defaultValue);
+      hydrateWithDefault(context.formId, field, defaultValue);
     }
   }, [
+    context.formId,
     defaultValue,
     field,
     hydrateWithDefault,
@@ -40,26 +46,26 @@ export const useControllableValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const useValueStore = controlledFieldStore(context.formId);
-
-  const resolveUpdate = useValueStore(
-    (state) => state.fields[field]?.resolveValueUpdate
+  const resolveUpdate = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.resolveValueUpdate
   );
   useEffect(() => {
     resolveUpdate?.();
   }, [resolveUpdate]);
 
-  const register = useValueStore((state) => state.register);
-  const unregister = useValueStore((state) => state.unregister);
+  const register = useControlledFieldStore((state) => state.register);
+  const unregister = useControlledFieldStore((state) => state.unregister);
   useEffect(() => {
-    register(field);
-    return () => unregister(field);
+    register(context.formId, field);
+    return () => unregister(context.formId, field);
   }, [context.formId, field, register, unregister]);
 
-  const setControlledFieldValue = useValueStore((state) => state.setValue);
+  const setControlledFieldValue = useControlledFieldStore(
+    (state) => state.setValue
+  );
   const setValue = useCallback(
-    (value: unknown) => setControlledFieldValue(field, value),
-    [field, setControlledFieldValue]
+    (value: unknown) => setControlledFieldValue(context.formId, field, value),
+    [context.formId, field, setControlledFieldValue]
   );
 
   const value = useControlledFieldValue(context, field);
@@ -68,11 +74,17 @@ export const useControllableValue = (
 };
 
 export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const useValueStore = controlledFieldStore(formId);
-  return useValueStore((state) => state.setValue);
+  const setValue = useControlledFieldStore((state) => state.setValue);
+  return useCallback(
+    (field: string, value: unknown) => setValue(formId, field, value),
+    [formId, setValue]
+  );
 };
 
 export const useAwaitValue = (formId: InternalFormId) => {
-  const useValueStore = controlledFieldStore(formId);
-  return useValueStore((state) => state.awaitValueUpdate);
+  const awaitValue = useControlledFieldStore((state) => state.awaitValueUpdate);
+  return useCallback(
+    (field: string) => awaitValue(formId, field),
+    [awaitValue, formId]
+  );
 };