remix-validated-form 4.5.2 → 4.6.0-beta.0

package/src/internal/state/controlledFields.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { InternalFormContextValue } from "../formContext";
 import { useFieldDefaultValue } from "../hooks";
-import { useControlledFieldStore } from "./controlledFieldStore";
 import { useFormStore } from "./storeHooks";
 import { InternalFormId } from "./types";
 
@@ -9,63 +8,57 @@ export const useControlledFieldValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const value = useControlledFieldStore(
-    (state) => state.getField(context.formId, field)?.value
+  const value = useFormStore(context.formId, (state) =>
+    state.controlledFields.getValue(field)
   );
-
   const isFormHydrated = useFormStore(
     context.formId,
     (state) => state.isHydrated
   );
   const defaultValue = useFieldDefaultValue(field, context);
 
-  const isFieldHydrated = useControlledFieldStore(
-    (state) => state.getField(context.formId, field)?.hydrated ?? false
-  );
-  const hydrateWithDefault = useControlledFieldStore(
-    (state) => state.hydrateWithDefault
-  );
-
-  useEffect(() => {
-    if (isFormHydrated && !isFieldHydrated) {
-      hydrateWithDefault(context.formId, field, defaultValue);
-    }
-  }, [
-    context.formId,
-    defaultValue,
-    field,
-    hydrateWithDefault,
-    isFieldHydrated,
-    isFormHydrated,
-  ]);
-
-  return isFieldHydrated ? value : defaultValue;
+  return isFormHydrated ? value : defaultValue;
 };
 
-export const useControllableValue = (
+export const useRegisterControlledField = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const resolveUpdate = useControlledFieldStore(
-    (state) => state.getField(context.formId, field)?.resolveValueUpdate
+  const resolveUpdate = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.valueUpdateResolvers[field]
   );
   useEffect(() => {
     resolveUpdate?.();
   }, [resolveUpdate]);
 
-  const register = useControlledFieldStore((state) => state.register);
-  const unregister = useControlledFieldStore((state) => state.unregister);
+  const register = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.register
+  );
+  const unregister = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.unregister
+  );
   useEffect(() => {
-    register(context.formId, field);
-    return () => unregister(context.formId, field);
+    register(field);
+    return () => unregister(field);
   }, [context.formId, field, register, unregister]);
+};
 
-  const setControlledFieldValue = useControlledFieldStore(
-    (state) => state.setValue
+export const useControllableValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  useRegisterControlledField(context, field);
+
+  const setControlledFieldValue = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.setValue
   );
   const setValue = useCallback(
-    (value: unknown) => setControlledFieldValue(context.formId, field, value),
-    [context.formId, field, setControlledFieldValue]
+    (value: unknown) => setControlledFieldValue(field, value),
+    [field, setControlledFieldValue]
   );
 
   const value = useControlledFieldValue(context, field);
@@ -74,17 +67,20 @@ export const useControllableValue = (
 };
 
 export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const setValue = useControlledFieldStore((state) => state.setValue);
+  const setValue = useFormStore(
+    formId,
+    (state) => state.controlledFields.setValue
+  );
   return useCallback(
-    (field: string, value: unknown) => setValue(formId, field, value),
-    [formId, setValue]
+    (field: string, value: unknown) => setValue(field, value),
+    [setValue]
   );
 };
 
 export const useAwaitValue = (formId: InternalFormId) => {
-  const awaitValue = useControlledFieldStore((state) => state.awaitValueUpdate);
-  return useCallback(
-    (field: string) => awaitValue(formId, field),
-    [awaitValue, formId]
+  const awaitValue = useFormStore(
+    formId,
+    (state) => state.controlledFields.awaitValueUpdate
   );
+  return useCallback((field: string) => awaitValue(field), [awaitValue]);
 };

package/src/internal/state/createFormStore.ts

@@ -1,4 +1,6 @@
 import { WritableDraft } from "immer/dist/internal";
+import lodashGet from "lodash/get";
+import lodashSet from "lodash/set";
 import invariant from "tiny-invariant";
 import create, { GetState } from "zustand";
 import { immer } from "zustand/middleware/immer";
@@ -8,7 +10,7 @@ import {
   ValidationResult,
   Validator,
 } from "../../validation/types";
-import { useControlledFieldStore } from "./controlledFieldStore";
+import * as arrayUtil from "./arrayUtil";
 import { InternalFormId } from "./types";
 
 export type SyncedFormProps = {
@@ -35,6 +37,7 @@ export type FormState = {
   touchedFields: TouchedFields;
   formProps?: SyncedFormProps;
   formElement: HTMLFormElement | null;
+  currentDefaultValues: Record<string, any>;
 
   isValid: () => boolean;
   startSubmit: () => void;
@@ -45,13 +48,37 @@ export type FormState = {
   clearFieldError: (field: string) => void;
   reset: () => void;
   syncFormProps: (props: SyncedFormProps) => void;
-  setHydrated: () => void;
   setFormElement: (formElement: HTMLFormElement | null) => void;
   validateField: (fieldName: string) => Promise<string | null>;
   validate: () => Promise<ValidationResult<unknown>>;
   resetFormElement: () => void;
   submit: () => void;
   getValues: () => FormData;
+
+  controlledFields: {
+    values: { [fieldName: string]: any };
+    refCounts: { [fieldName: string]: number };
+    valueUpdatePromises: { [fieldName: string]: Promise<void> };
+    valueUpdateResolvers: { [fieldName: string]: () => void };
+
+    register: (fieldName: string) => void;
+    unregister: (fieldName: string) => void;
+    setValue: (fieldName: string, value: unknown) => void;
+    kickoffValueUpdate: (fieldName: string) => void;
+    getValue: (fieldName: string) => unknown;
+    awaitValueUpdate: (fieldName: string) => Promise<void>;
+
+    array: {
+      push: (fieldName: string, value: unknown) => void;
+      swap: (fieldName: string, indexA: number, indexB: number) => void;
+      move: (fieldName: string, fromIndex: number, toIndex: number) => void;
+      insert: (fieldName: string, index: number, value: unknown) => void;
+      unshift: (fieldName: string, value: unknown) => void;
+      remove: (fieldName: string, index: number) => void;
+      pop: (fieldName: string) => void;
+      replace: (fieldName: string, index: number, value: unknown) => void;
+    };
+  };
 };
 
 const noOp = () => {};
@@ -69,10 +96,10 @@ const defaultFormState: FormState = {
   setFieldError: noOp,
   setFieldErrors: noOp,
   clearFieldError: noOp,
+  currentDefaultValues: {},
 
   reset: () => noOp,
   syncFormProps: noOp,
-  setHydrated: noOp,
   setFormElement: noOp,
   validateField: async () => null,
 
@@ -86,10 +113,36 @@ const defaultFormState: FormState = {
 
   resetFormElement: noOp,
   getValues: () => new FormData(),
+
+  controlledFields: {
+    values: {},
+    refCounts: {},
+    valueUpdatePromises: {},
+    valueUpdateResolvers: {},
+
+    register: noOp,
+    unregister: noOp,
+    setValue: noOp,
+    getValue: noOp,
+    kickoffValueUpdate: noOp,
+    awaitValueUpdate: async () => {
+      throw new Error("AwaitValueUpdate called before form was initialized.");
+    },
+
+    array: {
+      push: noOp,
+      swap: noOp,
+      move: noOp,
+      insert: noOp,
+      unshift: noOp,
+      remove: noOp,
+      pop: noOp,
+      replace: noOp,
+    },
+  },
 };
 
 const createFormState = (
-  formId: InternalFormId,
   set: (setter: (draft: WritableDraft<FormState>) => void) => void,
   get: GetState<FormState>
 ): FormState => ({
@@ -100,6 +153,7 @@ const createFormState = (
   touchedFields: {},
   fieldErrors: {},
   formElement: null,
+  currentDefaultValues: {},
 
   isValid: () => Object.keys(get().fieldErrors).length === 0,
   startSubmit: () =>
@@ -132,16 +186,20 @@ const createFormState = (
       state.fieldErrors = {};
       state.touchedFields = {};
       state.hasBeenSubmitted = false;
+      const nextDefaults = state.formProps?.defaultValues ?? {};
+      state.controlledFields.values = nextDefaults;
+      state.currentDefaultValues = nextDefaults;
     }),
   syncFormProps: (props: SyncedFormProps) =>
     set((state) => {
+      if (!state.isHydrated) {
+        state.controlledFields.values = props.defaultValues;
+        state.currentDefaultValues = props.defaultValues;
+      }
+
       state.formProps = props;
       state.isHydrated = true;
     }),
-  setHydrated: () =>
-    set((state) => {
-      state.isHydrated = true;
-    }),
   setFormElement: (formElement: HTMLFormElement | null) => {
     // This gets called frequently, so we want to avoid calling set() every time
     // Or else we wind up with an infinite loop
@@ -165,7 +223,7 @@ const createFormState = (
       "Cannot validator. This is probably a bug in remix-validated-form."
     );
 
-    await useControlledFieldStore.getState().awaitValueUpdate?.(formId, field);
+    await get().controlledFields.awaitValueUpdate?.(field);
 
     const { error } = await validator.validateField(
       new FormData(formElement),
@@ -206,20 +264,231 @@ const createFormState = (
       "Cannot find reference to form. This is probably a bug in remix-validated-form."
     );
 
-    formElement.submit();
+    formElement.requestSubmit();
   },
 
-  getValues: () => {
-    const formElement = get().formElement;
-    invariant(
-      formElement,
-      "Cannot find reference to form. This is probably a bug in remix-validated-form."
-    );
-
-    return new FormData(formElement);
-  },
+  getValues: () => new FormData(get().formElement ?? undefined),
 
   resetFormElement: () => get().formElement?.reset(),
+
+  controlledFields: {
+    values: {},
+    refCounts: {},
+    valueUpdatePromises: {},
+    valueUpdateResolvers: {},
+
+    register: (fieldName) => {
+      set((state) => {
+        const current = state.controlledFields.refCounts[fieldName] ?? 0;
+        state.controlledFields.refCounts[fieldName] = current + 1;
+      });
+    },
+    unregister: (fieldName) => {
+      // For this helper in particular, we may run into a case where state is undefined.
+      // When the whole form unmounts, the form state may be cleaned up before the fields are.
+      if (get() === null || get() === undefined) return;
+      set((state) => {
+        const current = state.controlledFields.refCounts[fieldName] ?? 0;
+        if (current > 1) {
+          state.controlledFields.refCounts[fieldName] = current - 1;
+          return;
+        }
+
+        const isNested = Object.keys(state.controlledFields.refCounts).some(
+          (key) => fieldName.startsWith(key) && key !== fieldName
+        );
+
+        // When nested within a field array, we should leave resetting up to the field array
+        if (!isNested) {
+          lodashSet(
+            state.controlledFields.values,
+            fieldName,
+            lodashGet(state.formProps?.defaultValues, fieldName)
+          );
+          lodashSet(
+            state.currentDefaultValues,
+            fieldName,
+            lodashGet(state.formProps?.defaultValues, fieldName)
+          );
+        }
+
+        delete state.controlledFields.refCounts[fieldName];
+      });
+    },
+    getValue: (fieldName) =>
+      lodashGet(get().controlledFields.values, fieldName),
+    setValue: (fieldName, value) => {
+      set((state) => {
+        lodashSet(state.controlledFields.values, fieldName, value);
+      });
+      get().controlledFields.kickoffValueUpdate(fieldName);
+    },
+    kickoffValueUpdate: (fieldName) => {
+      const clear = () =>
+        set((state) => {
+          delete state.controlledFields.valueUpdateResolvers[fieldName];
+          delete state.controlledFields.valueUpdatePromises[fieldName];
+        });
+      set((state) => {
+        const promise = new Promise<void>((resolve) => {
+          state.controlledFields.valueUpdateResolvers[fieldName] = resolve;
+        }).then(clear);
+        state.controlledFields.valueUpdatePromises[fieldName] = promise;
+      });
+    },
+
+    awaitValueUpdate: async (fieldName) => {
+      await get().controlledFields.valueUpdatePromises[fieldName];
+    },
+
+    array: {
+      push: (fieldName, item) => {
+        set((state) => {
+          arrayUtil
+            .getArray(state.controlledFields.values, fieldName)
+            .push(item);
+          arrayUtil.getArray(state.currentDefaultValues, fieldName).push(item);
+          // New item added to the end, no need to update touched or error
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+
+      swap: (fieldName, indexA, indexB) => {
+        set((state) => {
+          arrayUtil.swap(
+            arrayUtil.getArray(state.controlledFields.values, fieldName),
+            indexA,
+            indexB
+          );
+          arrayUtil.swap(
+            arrayUtil.getArray(state.currentDefaultValues, fieldName),
+            indexA,
+            indexB
+          );
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            arrayUtil.swap(array, indexA, indexB)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            arrayUtil.swap(array, indexA, indexB)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+
+      move: (fieldName, from, to) => {
+        set((state) => {
+          arrayUtil.move(
+            arrayUtil.getArray(state.controlledFields.values, fieldName),
+            from,
+            to
+          );
+          arrayUtil.move(
+            arrayUtil.getArray(state.currentDefaultValues, fieldName),
+            from,
+            to
+          );
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            arrayUtil.move(array, from, to)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            arrayUtil.move(array, from, to)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      insert: (fieldName, index, item) => {
+        set((state) => {
+          arrayUtil.insert(
+            arrayUtil.getArray(state.controlledFields.values, fieldName),
+            index,
+            item
+          );
+          arrayUtil.insert(
+            arrayUtil.getArray(state.currentDefaultValues, fieldName),
+            index,
+            item
+          );
+          // Even though this is a new item, we need to push around other items.
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            arrayUtil.insert(array, index, false)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            arrayUtil.insert(array, index, undefined)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      remove: (fieldName, index) => {
+        set((state) => {
+          arrayUtil.remove(
+            arrayUtil.getArray(state.controlledFields.values, fieldName),
+            index
+          );
+          arrayUtil.remove(
+            arrayUtil.getArray(state.currentDefaultValues, fieldName),
+            index
+          );
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            arrayUtil.remove(array, index)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            arrayUtil.remove(array, index)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      pop: (fieldName) => {
+        set((state) => {
+          arrayUtil.getArray(state.controlledFields.values, fieldName).pop();
+          arrayUtil.getArray(state.currentDefaultValues, fieldName).pop();
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            array.pop()
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            array.pop()
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      unshift: (fieldName, value) => {
+        set((state) => {
+          arrayUtil
+            .getArray(state.controlledFields.values, fieldName)
+            .unshift(value);
+          arrayUtil
+            .getArray(state.currentDefaultValues, fieldName)
+            .unshift(value);
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            array.unshift(false)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            array.unshift(undefined)
+          );
+        });
+      },
+      replace: (fieldName, index, item) => {
+        set((state) => {
+          arrayUtil.replace(
+            arrayUtil.getArray(state.controlledFields.values, fieldName),
+            index,
+            item
+          );
+          arrayUtil.replace(
+            arrayUtil.getArray(state.currentDefaultValues, fieldName),
+            index,
+            item
+          );
+          arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) =>
+            arrayUtil.replace(array, index, item)
+          );
+          arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) =>
+            arrayUtil.replace(array, index, item)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+    },
+  },
 });
 
 export const useRootFormStore = create<FormStoreState>()(
@@ -237,7 +506,6 @@ export const useRootFormStore = create<FormStoreState>()(
       if (get().forms[formId]) return;
       set((state) => {
         state.forms[formId] = createFormState(
-          formId,
           (setter) => set((state) => setter(state.forms[formId])),
           () => get().forms[formId]
         ) as WritableDraft<FormState>;

package/src/internal/state/fieldArray.tsx

@@ -0,0 +1,155 @@
+import React, { useMemo } from "react";
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+import { InternalFormContextValue } from "../formContext";
+import {
+  useFieldDefaultValue,
+  useFieldError,
+  useInternalFormContext,
+  useInternalHasBeenSubmitted,
+  useValidateField,
+} from "../hooks";
+import { useRegisterControlledField } from "./controlledFields";
+import { useFormStore } from "./storeHooks";
+
+export type FieldArrayValidationBehavior = "onChange" | "onSubmit";
+
+export type FieldArrayValidationBehaviorOptions = {
+  initial: FieldArrayValidationBehavior;
+  whenSubmitted: FieldArrayValidationBehavior;
+};
+
+const useInternalFieldArray = (
+  context: InternalFormContextValue,
+  field: string,
+  validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>
+) => {
+  const value = useFieldDefaultValue(field, context);
+  useRegisterControlledField(context, field);
+  const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
+  const validateField = useValidateField(context.formId);
+  const error = useFieldError(field, context);
+
+  const resolvedValidationBehavior: FieldArrayValidationBehaviorOptions = {
+    initial: "onSubmit",
+    whenSubmitted: "onChange",
+    ...validationBehavior,
+  };
+
+  const behavior = hasBeenSubmitted
+    ? resolvedValidationBehavior.whenSubmitted
+    : resolvedValidationBehavior.initial;
+
+  const maybeValidate = useCallback(() => {
+    if (behavior === "onChange") {
+      validateField(field);
+    }
+  }, [behavior, field, validateField]);
+
+  invariant(
+    value === undefined || value === null || Array.isArray(value),
+    `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`
+  );
+
+  const arr = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.array
+  );
+
+  const helpers = useMemo(
+    () => ({
+      push: (item: any) => {
+        arr.push(field, item);
+        maybeValidate();
+      },
+      swap: (indexA: number, indexB: number) => {
+        arr.swap(field, indexA, indexB);
+        maybeValidate();
+      },
+      move: (from: number, to: number) => {
+        arr.move(field, from, to);
+        maybeValidate();
+      },
+      insert: (index: number, value: any) => {
+        arr.insert(field, index, value);
+        maybeValidate();
+      },
+      unshift: (value: any) => {
+        arr.unshift(field, value);
+        maybeValidate();
+      },
+      remove: (index: number) => {
+        arr.remove(field, index);
+        maybeValidate();
+      },
+      pop: () => {
+        arr.pop(field);
+        maybeValidate();
+      },
+      replace: (index: number, value: any) => {
+        arr.replace(field, index, value);
+        maybeValidate();
+      },
+    }),
+    [arr, field, maybeValidate]
+  );
+
+  const arrayValue = useMemo(() => value ?? [], [value]);
+
+  return [arrayValue, helpers, error] as const;
+};
+
+export type FieldArrayHelpers<Item = any> = {
+  push: (item: Item) => void;
+  swap: (indexA: number, indexB: number) => void;
+  move: (from: number, to: number) => void;
+  insert: (index: number, value: Item) => void;
+  unshift: (value: Item) => void;
+  remove: (index: number) => void;
+  pop: () => void;
+  replace: (index: number, value: Item) => void;
+};
+
+export type UseFieldArrayOptions = {
+  formId?: string;
+  validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
+};
+
+export function useFieldArray<Item = any>(
+  name: string,
+  { formId, validationBehavior }: UseFieldArrayOptions = {}
+) {
+  const context = useInternalFormContext(formId, "FieldArray");
+
+  return useInternalFieldArray(context, name, validationBehavior) as [
+    itemDefaults: Item[],
+    helpers: FieldArrayHelpers,
+    error: string | undefined
+  ];
+}
+
+export type FieldArrayProps = {
+  name: string;
+  children: (
+    itemDefaults: any[],
+    helpers: FieldArrayHelpers,
+    error: string | undefined
+  ) => React.ReactNode;
+  formId?: string;
+  validationBehavior?: FieldArrayValidationBehaviorOptions;
+};
+
+export const FieldArray = ({
+  name,
+  children,
+  formId,
+  validationBehavior,
+}: FieldArrayProps) => {
+  const context = useInternalFormContext(formId, "FieldArray");
+  const [value, helpers, error] = useInternalFieldArray(
+    context,
+    name,
+    validationBehavior
+  );
+  return children(value, helpers, error);
+};

package/src/server.ts

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/server-runtime";
+import { json } from "remix";
 import {
   formDefaultValuesKey,
   FORM_DEFAULTS_FIELD,

package/vite.config.ts

@@ -2,6 +2,6 @@ import { makeConfig } from "vite-config";
 
 export default makeConfig({
   lib: "remix-validated-form",
-  external: ["react", "@remix-run/react", "@remix-run/server-runtime"],
+  external: ["react", "@remix-run/react"],
   dir: __dirname,
 });