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

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
 export * from "./userFacingFormContext";
+export { FieldArray, useFieldArray, type FieldArrayProps, type FieldArrayHelpers, } from "./internal/state/fieldArray";

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

@@ -13,6 +13,7 @@ export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextV
 export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => readonly [boolean, (touched: boolean) => void];
 export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
 export declare const useClearError: (context: InternalFormContextValue) => (field: string) => void;
+export declare const useCurrentDefaultValueForField: (formId: InternalFormId, field: string) => any;
 export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
 export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
 export declare const useInternalIsValid: (formId: InternalFormId) => boolean;

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

@@ -0,0 +1,12 @@
+export declare const getArray: (values: any, field: string) => unknown[];
+export declare const swap: (array: unknown[], indexA: number, indexB: number) => void;
+export declare const move: (array: unknown[], from: number, to: number) => void;
+export declare const insert: (array: unknown[], index: number, value: unknown) => void;
+export declare const remove: (array: unknown[], index: number) => void;
+export declare const replace: (array: unknown[], index: number, value: unknown) => void;
+/**
+ * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
+ * We key those objects by full paths to the fields.
+ * When we're doing array mutations, that makes it difficult to update those objects.
+ */
+export declare const mutateAsArray: (field: string, obj: Record<string, any>, mutate: (arr: any[]) => void) => void;

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

@@ -1,6 +1,7 @@
 import { InternalFormContextValue } from "../formContext";
 import { InternalFormId } from "./types";
 export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useRegisterControlledField: (context: InternalFormContextValue, field: string) => void;
 export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => 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

@@ -27,6 +27,7 @@ export declare type FormState = {
     touchedFields: TouchedFields;
     formProps?: SyncedFormProps;
     formElement: HTMLFormElement | null;
+    currentDefaultValues: Record<string, any>;
     isValid: () => boolean;
     startSubmit: () => void;
     endSubmit: () => void;
@@ -36,13 +37,42 @@ export declare 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;
+        };
+    };
 };
 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/fieldArray.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export declare type FieldArrayValidationBehavior = "onChange" | "onSubmit";
+export declare type FieldArrayValidationBehaviorOptions = {
+    initial: FieldArrayValidationBehavior;
+    whenSubmitted: FieldArrayValidationBehavior;
+};
+export declare 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 declare type UseFieldArrayOptions = {
+    formId?: string;
+    validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
+};
+export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
+export declare type FieldArrayProps = {
+    name: string;
+    children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
+    formId?: string;
+    validationBehavior?: FieldArrayValidationBehaviorOptions;
+};
+export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => React.ReactNode;

package/dist/types/server.d.ts

@@ -1,5 +1,5 @@
 import { FORM_DEFAULTS_FIELD } from "./internal/constants";
-import { ValidatorError } from "./validation/types";
+import { ValidatorError, ValidationErrorResponseData } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.2",
+  "version": "4.6.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",
@@ -34,12 +34,10 @@
   ],
   "peerDependencies": {
     "@remix-run/react": "1.x",
-    "@remix-run/server-runtime": "1.x",
     "react": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.6.5",
-    "@remix-run/server-runtime": "^1.6.5",
     "@types/lodash": "^4.14.178",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -23,7 +23,6 @@ import {
   useSetFieldErrors,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
-import { useControlledFieldStore } from "./internal/state/controlledFieldStore";
 import {
   SyncedFormProps,
   useRootFormStore,
@@ -237,7 +236,6 @@ 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((state) => state.reset);
   const startSubmit = useFormStore(formId, (state) => state.startSubmit);
   const endSubmit = useFormStore(formId, (state) => state.endSubmit);
   const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
@@ -354,7 +352,6 @@ export function ValidatedForm<DataType>({
         onReset?.(event);
         if (event.defaultPrevented) return;
         reset();
-        resetControlledFields(formId);
       }}
     >
       <InternalFormContext.Provider value={contextValue}>

package/src/index.ts

@@ -4,3 +4,9 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
 export * from "./userFacingFormContext";
+export {
+  FieldArray,
+  useFieldArray,
+  type FieldArrayProps,
+  type FieldArrayHelpers,
+} from "./internal/state/fieldArray";

package/src/internal/hooks.ts

@@ -141,15 +141,20 @@ export const useClearError = (context: InternalFormContextValue) => {
   return useFormStore(formId, (state) => state.clearFieldError);
 };
 
+export const useCurrentDefaultValueForField = (
+  formId: InternalFormId,
+  field: string
+) =>
+  useFormStore(formId, (state) => lodashGet(state.currentDefaultValues, field));
+
 export const useFieldDefaultValue = (
   name: string,
   context: InternalFormContextValue
 ) => {
   const defaultValues = useDefaultValuesForForm(context);
-  const state = useSyncedDefaultValues(context.formId);
-  return defaultValues
-    .map((val) => lodashGet(val, name))
-    .hydrateTo(lodashGet(state, name));
+  const state = useCurrentDefaultValueForField(context.formId, name);
+
+  return defaultValues.map((val) => lodashGet(val, name)).hydrateTo(state);
 };
 
 export const useInternalIsSubmitting = (formId: InternalFormId) =>

package/src/internal/logic/nestedObjectToPathObject.ts

@@ -0,0 +1,63 @@
+export const nestedObjectToPathObject = (
+  val: any,
+  acc: Record<string, any>,
+  path: string
+): any => {
+  if (Array.isArray(val)) {
+    val.forEach((v, index) =>
+      nestedObjectToPathObject(v, acc, `${path}[${index}]`)
+    );
+    return acc;
+  }
+
+  if (typeof val === "object") {
+    Object.entries(val).forEach(([key, value]) => {
+      const nextPath = path ? `${path}.${key}` : key;
+      nestedObjectToPathObject(value, acc, nextPath);
+    });
+    return acc;
+  }
+
+  if (val !== undefined) {
+    acc[path] = val;
+  }
+
+  return acc;
+};
+
+if (import.meta.vitest) {
+  const { describe, expect, it } = import.meta.vitest;
+
+  describe("nestedObjectToPathObject", () => {
+    it("should return an object with the correct path", () => {
+      const result = nestedObjectToPathObject(
+        {
+          a: 1,
+          b: 2,
+          c: { foo: "bar", baz: [true, false] },
+          d: [
+            { foo: "bar", baz: [true, false] },
+            { e: true, f: "hi" },
+          ],
+          g: undefined,
+        },
+        {},
+        ""
+      );
+
+      expect(result).toEqual({
+        a: 1,
+        b: 2,
+        "c.foo": "bar",
+        "c.baz[0]": true,
+        "c.baz[1]": false,
+        "d[0].foo": "bar",
+        "d[0].baz[0]": true,
+        "d[0].baz[1]": false,
+        "d[1].e": true,
+        "d[1].f": "hi",
+      });
+      expect(Object.keys(result)).toHaveLength(10);
+    });
+  });
+}

package/src/internal/state/arrayUtil.ts

@@ -0,0 +1,399 @@
+import lodashGet from "lodash/get";
+import lodashSet from "lodash/set";
+import invariant from "tiny-invariant";
+
+////
+// All of these array helpers are written in a way that mutates the original array.
+// This is because we're working with immer.
+////
+
+export const getArray = (values: any, field: string): unknown[] => {
+  const value = lodashGet(values, field);
+  if (value === undefined || value === null) {
+    const newValue: unknown[] = [];
+    lodashSet(values, field, newValue);
+    return newValue;
+  }
+  invariant(
+    Array.isArray(value),
+    `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`
+  );
+  return value;
+};
+
+export const swap = (array: unknown[], indexA: number, indexB: number) => {
+  const itemA = array[indexA];
+  const itemB = array[indexB];
+
+  const hasItemA = indexA in array;
+  const hasItemB = indexB in array;
+
+  // If we're dealing with a sparse array (i.e. one of the indeces doesn't exist),
+  // we should keep it sparse
+  if (hasItemA) {
+    array[indexB] = itemA;
+  } else {
+    delete array[indexB];
+  }
+
+  if (hasItemB) {
+    array[indexA] = itemB;
+  } else {
+    delete array[indexA];
+  }
+};
+
+// A splice that can handle sparse arrays
+function sparseSplice(
+  array: unknown[],
+  start: number,
+  deleteCount: number,
+  item?: unknown
+) {
+  // Inserting an item into an array won't behave as we need it to if the array isn't
+  // at least as long as the start index. We can force the array to be long enough like this.
+  if (array.length < start && item) {
+    array.length = start;
+  }
+
+  // If we just pass item in, it'll be undefined and splice will delete the item.
+  if (arguments.length === 4) return array.splice(start, deleteCount, item);
+  return array.splice(start, deleteCount);
+}
+
+export const move = (array: unknown[], from: number, to: number) => {
+  const [item] = sparseSplice(array, from, 1);
+  sparseSplice(array, to, 0, item);
+};
+
+export const insert = (array: unknown[], index: number, value: unknown) => {
+  sparseSplice(array, index, 0, value);
+};
+
+export const remove = (array: unknown[], index: number) => {
+  sparseSplice(array, index, 1);
+};
+
+export const replace = (array: unknown[], index: number, value: unknown) => {
+  sparseSplice(array, index, 1, value);
+};
+
+/**
+ * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
+ * We key those objects by full paths to the fields.
+ * When we're doing array mutations, that makes it difficult to update those objects.
+ */
+export const mutateAsArray = (
+  field: string,
+  obj: Record<string, any>,
+  mutate: (arr: any[]) => void
+) => {
+  const beforeKeys = new Set<string>();
+  const arr: any[] = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (key.startsWith(field) && key !== field) {
+      beforeKeys.add(key);
+    }
+    lodashSet(arr, key.substring(field.length), value);
+  }
+
+  mutate(arr);
+  for (const key of beforeKeys) {
+    delete obj[key];
+  }
+
+  const newKeys = getDeepArrayPaths(arr);
+  for (const key of newKeys) {
+    const val = lodashGet(arr, key);
+    obj[`${field}${key}`] = val;
+  }
+};
+
+const getDeepArrayPaths = (obj: any, basePath: string = ""): string[] => {
+  // This only needs to handle arrays and plain objects
+  // and we can assume the first call is always an array.
+
+  if (Array.isArray(obj)) {
+    return obj.flatMap((item, index) =>
+      getDeepArrayPaths(item, `${basePath}[${index}]`)
+    );
+  }
+
+  if (typeof obj === "object") {
+    return Object.keys(obj).flatMap((key) =>
+      getDeepArrayPaths(obj[key], `${basePath}.${key}`)
+    );
+  }
+
+  return [basePath];
+};
+
+if (import.meta.vitest) {
+  const { describe, expect, it } = import.meta.vitest;
+
+  // Count the actual number of items in the array
+  // instead of just getting the length.
+  // This is useful for validating that sparse arrays are handled correctly.
+  const countArrayItems = (arr: any[]) => {
+    let count = 0;
+    arr.forEach(() => count++);
+    return count;
+  };
+
+  describe("getArray", () => {
+    it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
+      const values = {
+        d: [
+          { foo: "bar", baz: [true, false] },
+          { e: true, f: "hi" },
+        ],
+      };
+      const result = getArray(values, "d[0].baz");
+      const finalValues = {
+        d: [
+          { foo: "bar", baz: [true, false, true] },
+          { e: true, f: "hi" },
+        ],
+      };
+
+      expect(result).toEqual([true, false]);
+      result.push(true);
+      expect(values).toEqual(finalValues);
+    });
+
+    it("should return an empty array that can be mutated if result is null or undefined", () => {
+      const values = {};
+      const result = getArray(values, "a.foo[0].bar");
+      const finalValues = {
+        a: { foo: [{ bar: ["Bob ross"] }] },
+      };
+
+      expect(result).toEqual([]);
+      result.push("Bob ross");
+      expect(values).toEqual(finalValues);
+    });
+
+    it("should throw if the value is defined and not an array", () => {
+      const values = { foo: "foo" };
+      expect(() => getArray(values, "foo")).toThrow();
+    });
+  });
+
+  describe("swap", () => {
+    it("should swap two items", () => {
+      const array = [1, 2, 3];
+      swap(array, 0, 1);
+      expect(array).toEqual([2, 1, 3]);
+    });
+
+    it("should work for sparse arrays", () => {
+      // A bit of a sanity check for native array behavior
+      const arr = [] as any[];
+      arr[0] = true;
+      swap(arr, 0, 2);
+
+      expect(countArrayItems(arr)).toEqual(1);
+      expect(0 in arr).toBe(false);
+      expect(2 in arr).toBe(true);
+      expect(arr[2]).toEqual(true);
+    });
+  });
+
+  describe("move", () => {
+    it("should move an item to a new index", () => {
+      const array = [1, 2, 3];
+      move(array, 0, 1);
+      expect(array).toEqual([2, 1, 3]);
+    });
+
+    it("should work with sparse arrays", () => {
+      const array = [1];
+      move(array, 0, 2);
+
+      expect(countArrayItems(array)).toEqual(1);
+      expect(array).toEqual([undefined, undefined, 1]);
+    });
+  });
+
+  describe("insert", () => {
+    it("should insert an item at a new index", () => {
+      const array = [1, 2, 3];
+      insert(array, 1, 4);
+      expect(array).toEqual([1, 4, 2, 3]);
+    });
+
+    it("should be able to insert falsey values", () => {
+      const array = [1, 2, 3];
+      insert(array, 1, null);
+      expect(array).toEqual([1, null, 2, 3]);
+    });
+
+    it("should handle sparse arrays", () => {
+      const array: any[] = [];
+      array[2] = true;
+      insert(array, 0, true);
+
+      expect(countArrayItems(array)).toEqual(2);
+      expect(array).toEqual([true, undefined, undefined, true]);
+    });
+  });
+
+  describe("remove", () => {
+    it("should remove an item at a given index", () => {
+      const array = [1, 2, 3];
+      remove(array, 1);
+      expect(array).toEqual([1, 3]);
+    });
+
+    it("should handle sparse arrays", () => {
+      const array: any[] = [];
+      array[2] = true;
+      remove(array, 0);
+
+      expect(countArrayItems(array)).toEqual(1);
+      expect(array).toEqual([undefined, true]);
+    });
+  });
+
+  describe("replace", () => {
+    it("should replace an item at a given index", () => {
+      const array = [1, 2, 3];
+      replace(array, 1, 4);
+      expect(array).toEqual([1, 4, 3]);
+    });
+
+    it("should handle sparse arrays", () => {
+      const array: any[] = [];
+      array[2] = true;
+      replace(array, 0, true);
+      expect(countArrayItems(array)).toEqual(2);
+      expect(array).toEqual([true, undefined, true]);
+    });
+  });
+
+  describe("mutateAsArray", () => {
+    it("should handle swap", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[2]": "bar",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "bar",
+        "myField[2]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      });
+    });
+
+    it("should swap sparse arrays", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[2]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      });
+    });
+
+    it("should handle arrays with nested values", () => {
+      const values = {
+        myField: "something",
+        "myField[0].title": "foo",
+        "myField[0].note": "bar",
+        "myField[2].title": "other",
+        "myField[2].note": "other",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0].title": "other",
+        "myField[0].note": "other",
+        "myField[2].title": "foo",
+        "myField[2].note": "bar",
+        otherField: "baz",
+        "otherField[0]": "something else",
+      });
+    });
+
+    it("should handle move", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "bar",
+        "myField[2]": "baz",
+        "otherField[0]": "something else",
+      };
+      mutateAsArray("myField", values, (arr) => {
+        move(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "bar",
+        "myField[1]": "baz",
+        "myField[2]": "foo",
+        "otherField[0]": "something else",
+      });
+    });
+
+    it("should handle remove", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "bar",
+        "myField[2]": "baz",
+        "otherField[0]": "something else",
+      };
+      mutateAsArray("myField", values, (arr) => {
+        remove(arr, 1);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "baz",
+        "otherField[0]": "something else",
+      });
+      expect("myField[2]" in values).toBe(false);
+    });
+  });
+
+  describe("getDeepArrayPaths", () => {
+    it("should return all paths recursively", () => {
+      const obj = [
+        true,
+        true,
+        [true, true],
+        { foo: true, bar: { baz: true, test: [true] } },
+      ];
+
+      expect(getDeepArrayPaths(obj, "myField")).toEqual([
+        "myField[0]",
+        "myField[1]",
+        "myField[2][0]",
+        "myField[2][1]",
+        "myField[3].foo",
+        "myField[3].bar.baz",
+        "myField[3].bar.test[0]",
+      ]);
+    });
+  });
+}