remix-validated-form 5.0.2 → 5.1.1-beta.0

package/src/internal/logic/requestSubmit.test.tsx

@@ -1,24 +0,0 @@
-import { render } from "@testing-library/react";
-import React, { createRef } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { requestSubmit } from "./requestSubmit";
-
-describe("requestSubmit polyfill", () => {
-  it("should polyfill requestSubmit", () => {
-    const submit = vi.fn();
-    const ref = createRef<HTMLFormElement>();
-    render(
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          submit();
-        }}
-        ref={ref}
-      >
-        <input name="test" value="testing" />
-      </form>
-    );
-    requestSubmit(ref.current!);
-    expect(submit).toHaveBeenCalledTimes(1);
-  });
-});

package/src/internal/logic/requestSubmit.ts

@@ -1,103 +0,0 @@
-/**
- * Ponyfill of the HTMLFormElement.requestSubmit() method.
- * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
- */
-export const requestSubmit = (
-  element: HTMLFormElement,
-  submitter?: HTMLElement
-) => {
-  // In vitest, let's test the polyfill.
-  // Cypress will test the native implementation by nature of using chrome.
-  if (
-    typeof Object.getPrototypeOf(element).requestSubmit === "function" &&
-    !import.meta.vitest
-  ) {
-    element.requestSubmit(submitter);
-    return;
-  }
-
-  if (submitter) {
-    validateSubmitter(element, submitter);
-    submitter.click();
-    return;
-  }
-
-  const dummySubmitter = document.createElement("input");
-  dummySubmitter.type = "submit";
-  dummySubmitter.hidden = true;
-  element.appendChild(dummySubmitter);
-  dummySubmitter.click();
-  element.removeChild(dummySubmitter);
-};
-
-function validateSubmitter(element: HTMLFormElement, submitter: HTMLElement) {
-  // Should be redundant, but here for completeness
-  const isHtmlElement = submitter instanceof HTMLElement;
-  if (!isHtmlElement) {
-    raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
-  }
-
-  const hasSubmitType =
-    "type" in submitter && (submitter as HTMLInputElement).type === "submit";
-  if (!hasSubmitType)
-    raise(TypeError, "The specified element is not a submit button");
-
-  const isForCorrectForm =
-    "form" in submitter && (submitter as HTMLInputElement).form === element;
-  if (!isForCorrectForm)
-    raise(
-      DOMException,
-      "The specified element is not owned by this form element",
-      "NotFoundError"
-    );
-}
-
-interface ErrorConstructor {
-  new (message: string, name?: string): Error;
-}
-
-function raise(
-  errorConstructor: ErrorConstructor,
-  message: string,
-  name?: string
-): never {
-  throw new errorConstructor(
-    "Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".",
-    name
-  );
-}
-
-if (import.meta.vitest) {
-  const { it, expect } = import.meta.vitest;
-  it("should validate the submitter", () => {
-    const form = document.createElement("form");
-    document.body.appendChild(form);
-
-    const submitter = document.createElement("input");
-    expect(() => validateSubmitter(null as any, null as any)).toThrow();
-    expect(() => validateSubmitter(form, null as any)).toThrow();
-    expect(() => validateSubmitter(form, submitter)).toThrow();
-    expect(() =>
-      validateSubmitter(form, document.createElement("div"))
-    ).toThrow();
-
-    submitter.type = "submit";
-    expect(() => validateSubmitter(form, submitter)).toThrow();
-
-    form.appendChild(submitter);
-    expect(() => validateSubmitter(form, submitter)).not.toThrow();
-
-    form.removeChild(submitter);
-    expect(() => validateSubmitter(form, submitter)).toThrow();
-
-    document.body.appendChild(submitter);
-    form.id = "test-form";
-    submitter.setAttribute("form", "test-form");
-    expect(() => validateSubmitter(form, submitter)).not.toThrow();
-
-    const button = document.createElement("button");
-    button.type = "submit";
-    form.appendChild(button);
-    expect(() => validateSubmitter(form, button)).not.toThrow();
-  });
-}

package/src/internal/state/arrayUtil.ts

@@ -1,451 +0,0 @@
-import { getPath, setPath } from "set-get";
-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 = getPath(values, field);
-  if (value === undefined || value === null) {
-    const newValue: unknown[] = [];
-    setPath(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 sparseCopy = <T>(array: T[]): T[] => array.slice();
-
-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);
-  else if (arguments.length === 3) return array.splice(start, deleteCount);
-  return array.splice(start);
-}
-
-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 insertEmpty = (array: unknown[], index: number) => {
-  const tail = sparseSplice(array, index);
-  tail.forEach((item, i) => {
-    sparseSplice(array, index + i + 1, 0, item);
-  });
-};
-
-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);
-      setPath(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 = getPath(arr, key);
-    if (val !== undefined) {
-      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("insertEmpty", () => {
-    it("should insert an empty item at a given index", () => {
-      const array = [1, 2, 3];
-      insertEmpty(array, 1);
-      // eslint-disable-next-line no-sparse-arrays
-      expect(array).toStrictEqual([1, , 2, 3]);
-      expect(array).not.toStrictEqual([1, undefined, 2, 3]);
-    });
-
-    it("should work with already sparse arrays", () => {
-      // eslint-disable-next-line no-sparse-arrays
-      const array = [, , 1, , 2, , 3];
-      insertEmpty(array, 3);
-      // eslint-disable-next-line no-sparse-arrays
-      expect(array).toStrictEqual([, , 1, , , 2, , 3]);
-      expect(array).not.toStrictEqual([
-        undefined,
-        undefined,
-        1,
-        undefined,
-        undefined,
-        2,
-        undefined,
-        3,
-      ]);
-    });
-  });
-
-  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 not create keys for `undefined`", () => {
-      const values = {
-        "myField[0]": "foo",
-      };
-      mutateAsArray("myField", values, (arr) => {
-        arr.unshift(undefined);
-      });
-      expect(Object.keys(values)).toHaveLength(1);
-      expect(values).toEqual({
-        "myField[1]": "foo",
-      });
-    });
-
-    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]",
-      ]);
-    });
-  });
-}

package/src/internal/state/controlledFields.ts

@@ -1,86 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { InternalFormContextValue } from "../formContext";
-import { useFieldDefaultValue } from "../hooks";
-import { useFormStore } from "./storeHooks";
-import { InternalFormId } from "./types";
-
-export const useControlledFieldValue = (
-  context: InternalFormContextValue,
-  field: string
-) => {
-  const value = useFormStore(context.formId, (state) =>
-    state.controlledFields.getValue(field)
-  );
-  const isFormHydrated = useFormStore(
-    context.formId,
-    (state) => state.isHydrated
-  );
-  const defaultValue = useFieldDefaultValue(field, context);
-
-  return isFormHydrated ? value : defaultValue;
-};
-
-export const useRegisterControlledField = (
-  context: InternalFormContextValue,
-  field: string
-) => {
-  const resolveUpdate = useFormStore(
-    context.formId,
-    (state) => state.controlledFields.valueUpdateResolvers[field]
-  );
-  useEffect(() => {
-    resolveUpdate?.();
-  }, [resolveUpdate]);
-
-  const register = useFormStore(
-    context.formId,
-    (state) => state.controlledFields.register
-  );
-  const unregister = useFormStore(
-    context.formId,
-    (state) => state.controlledFields.unregister
-  );
-  useEffect(() => {
-    register(field);
-    return () => unregister(field);
-  }, [context.formId, field, register, unregister]);
-};
-
-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(field, value),
-    [field, setControlledFieldValue]
-  );
-
-  const value = useControlledFieldValue(context, field);
-
-  return [value, setValue] as const;
-};
-
-export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const setValue = useFormStore(
-    formId,
-    (state) => state.controlledFields.setValue
-  );
-  return useCallback(
-    (field: string, value: unknown) => setValue(field, value),
-    [setValue]
-  );
-};
-
-export const useAwaitValue = (formId: InternalFormId) => {
-  const awaitValue = useFormStore(
-    formId,
-    (state) => state.controlledFields.awaitValueUpdate
-  );
-  return useCallback((field: string) => awaitValue(field), [awaitValue]);
-};