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

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

@@ -1 +1 @@
-export declare const objectFromPathEntries: (entries: [string, any][]) => {};
+export declare const objectFromPathEntries: (entries: [string, any][]) => Record<string, any>;

package/dist/types/internal/logic/requestSubmit.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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 declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement | undefined) => void;

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

@@ -25,4 +25,4 @@ export declare type FieldArrayProps = {
     formId?: string;
     validationBehavior?: FieldArrayValidationBehaviorOptions;
 };
-export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => React.ReactNode;
+export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.6.0-beta.0",
+  "version": "4.6.1-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",
@@ -38,17 +38,19 @@
   },
   "devDependencies": {
     "@remix-run/react": "^1.6.5",
-    "@types/lodash": "^4.14.178",
+    "@testing-library/react": "^13.3.0",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",
     "react": "^18.1.0",
+    "ts-toolbelt": "^9.6.0",
     "tsconfig": "*",
-    "typescript": "^4.5.3",
+    "typescript": "^4.8.4",
     "vite-config": "*"
   },
   "dependencies": {
     "immer": "^9.0.12",
-    "lodash": "^4.17.21",
+    "remeda": "^1.2.0",
+    "setGet": "*",
     "tiny-invariant": "^1.2.0",
     "zustand": "^4.0.0-rc.1"
   }

package/src/ValidatedForm.tsx

@@ -1,5 +1,9 @@
-import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
-import uniq from "lodash/uniq";
+import {
+  Form as RemixForm,
+  FormMethod,
+  useFetcher,
+  useSubmit,
+} from "@remix-run/react";
 import React, {
   ComponentProps,
   FormEvent,
@@ -10,6 +14,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import * as R from "remeda";
 import { useIsSubmitting, useIsValid } from "./hooks";
 import { FORM_ID_FIELD } from "./internal/constants";
 import {
@@ -103,7 +108,7 @@ const focusFirstInvalidInput = (
     })
     .filter(nonNull)
     .filter((name) => name in fieldErrors);
-  const uniqueNamesInOrder = uniq(namesInOrder);
+  const uniqueNamesInOrder = R.uniq(namesInOrder);
 
   for (const fieldName of uniqueNamesInOrder) {
     if (customFocusHandlers.has(fieldName)) {
@@ -301,10 +306,16 @@ export function ValidatedForm<DataType>({
     nativeEvent: HTMLSubmitEvent["nativeEvent"]
   ) => {
     startSubmit();
-    const result = await validator.validate(getDataFromForm(e.currentTarget));
+    const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
+    const formDataToValidate = getDataFromForm(e.currentTarget);
+    if (submitter?.name) {
+      formDataToValidate.append(submitter.name, submitter.value);
+    }
+
+    const result = await validator.validate(formDataToValidate);
     if (result.error) {
-      endSubmit();
       setFieldErrors(result.error.fieldErrors);
+      endSubmit();
       if (!disableFocusOnError) {
         focusFirstInvalidInput(
           result.error.fieldErrors,
@@ -313,6 +324,7 @@ export function ValidatedForm<DataType>({
         );
       }
     } else {
+      setFieldErrors({});
       const eventProxy = formEventProxy(e);
       await onSubmit?.(result.data, eventProxy);
       if (eventProxy.defaultPrevented) {
@@ -320,15 +332,17 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      const submitter = 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(submitter || e.currentTarget);
-      else submit(submitter || target, { replace });
+      else
+        submit(submitter || target, {
+          replace,
+          method: (submitter?.formMethod as FormMethod) || method,
+        });
     }
   };
 

package/src/internal/flatten.ts

@@ -1,11 +1,12 @@
-import set from "lodash/set";
+import * as R from "remeda";
 import { MultiValueMap } from "./MultiValueMap";
 
 export const objectFromPathEntries = (entries: [string, any][]) => {
   const map = new MultiValueMap<string, any>();
   entries.forEach(([key, value]) => map.add(key, value));
   return [...map.entries()].reduce(
-    (acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value),
-    {}
+    (acc, [key, value]) =>
+      R.set(acc, key, value.length === 1 ? value[0] : value),
+    {} as Record<string, any>
   );
 };

package/src/internal/getInputProps.ts

@@ -1,4 +1,4 @@
-import omitBy from "lodash/omitBy";
+import * as R from "remeda";
 import { getCheckboxChecked } from "./logic/getCheckboxChecked";
 import { getRadioChecked } from "./logic/getRadioChecked";
 
@@ -89,6 +89,6 @@ export const createGetInputProps = ({
       inputProps.defaultValue = defaultValue;
     }
 
-    return omitBy(inputProps, (value) => value === undefined) as T;
+    return R.omitBy(inputProps, (value) => value === undefined) as T;
   };
 };

package/src/internal/hooks.ts

@@ -1,6 +1,6 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import lodashGet from "lodash/get";
 import { useCallback, useContext } from "react";
+import { getPath } from "setGet";
 import invariant from "tiny-invariant";
 import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
@@ -145,7 +145,7 @@ export const useCurrentDefaultValueForField = (
   formId: InternalFormId,
   field: string
 ) =>
-  useFormStore(formId, (state) => lodashGet(state.currentDefaultValues, field));
+  useFormStore(formId, (state) => getPath(state.currentDefaultValues, field));
 
 export const useFieldDefaultValue = (
   name: string,
@@ -154,7 +154,7 @@ export const useFieldDefaultValue = (
   const defaultValues = useDefaultValuesForForm(context);
   const state = useCurrentDefaultValueForField(context.formId, name);
 
-  return defaultValues.map((val) => lodashGet(val, name)).hydrateTo(state);
+  return defaultValues.map((val) => getPath(val, name)).hydrateTo(state);
 };
 
 export const useInternalIsSubmitting = (formId: InternalFormId) =>

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,103 @@
+/**
+ * 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,5 +1,4 @@
-import lodashGet from "lodash/get";
-import lodashSet from "lodash/set";
+import { getPath, setPath } from "setGet";
 import invariant from "tiny-invariant";
 
 ////
@@ -8,10 +7,10 @@ import invariant from "tiny-invariant";
 ////
 
 export const getArray = (values: any, field: string): unknown[] => {
-  const value = lodashGet(values, field);
+  const value = getPath(values, field);
   if (value === undefined || value === null) {
     const newValue: unknown[] = [];
-    lodashSet(values, field, newValue);
+    setPath(values, field, newValue);
     return newValue;
   }
   invariant(
@@ -94,8 +93,8 @@ export const mutateAsArray = (
   for (const [key, value] of Object.entries(obj)) {
     if (key.startsWith(field) && key !== field) {
       beforeKeys.add(key);
+      setPath(arr, key.substring(field.length), value);
     }
-    lodashSet(arr, key.substring(field.length), value);
   }
 
   mutate(arr);
@@ -105,7 +104,7 @@ export const mutateAsArray = (
 
   const newKeys = getDeepArrayPaths(arr);
   for (const key of newKeys) {
-    const val = lodashGet(arr, key);
+    const val = getPath(arr, key);
     obj[`${field}${key}`] = val;
   }
 };

package/src/internal/state/createFormStore.ts

@@ -1,6 +1,5 @@
 import { WritableDraft } from "immer/dist/internal";
-import lodashGet from "lodash/get";
-import lodashSet from "lodash/set";
+import { getPath, setPath } from "setGet";
 import invariant from "tiny-invariant";
 import create, { GetState } from "zustand";
 import { immer } from "zustand/middleware/immer";
@@ -10,6 +9,7 @@ import {
   ValidationResult,
   Validator,
 } from "../../validation/types";
+import { requestSubmit } from "../logic/requestSubmit";
 import * as arrayUtil from "./arrayUtil";
 import { InternalFormId } from "./types";
 
@@ -264,7 +264,7 @@ const createFormState = (
       "Cannot find reference to form. This is probably a bug in remix-validated-form."
     );
 
-    formElement.requestSubmit();
+    requestSubmit(formElement);
   },
 
   getValues: () => new FormData(get().formElement ?? undefined),
@@ -300,26 +300,25 @@ const createFormState = (
 
         // When nested within a field array, we should leave resetting up to the field array
         if (!isNested) {
-          lodashSet(
+          setPath(
             state.controlledFields.values,
             fieldName,
-            lodashGet(state.formProps?.defaultValues, fieldName)
+            getPath(state.formProps?.defaultValues, fieldName)
           );
-          lodashSet(
+          setPath(
             state.currentDefaultValues,
             fieldName,
-            lodashGet(state.formProps?.defaultValues, fieldName)
+            getPath(state.formProps?.defaultValues, fieldName)
           );
         }
 
         delete state.controlledFields.refCounts[fieldName];
       });
     },
-    getValue: (fieldName) =>
-      lodashGet(get().controlledFields.values, fieldName),
+    getValue: (fieldName) => getPath(get().controlledFields.values, fieldName),
     setValue: (fieldName, value) => {
       set((state) => {
-        lodashSet(state.controlledFields.values, fieldName, value);
+        setPath(state.controlledFields.values, fieldName, value);
       });
       get().controlledFields.kickoffValueUpdate(fieldName);
     },

package/src/internal/state/fieldArray.tsx

@@ -151,5 +151,5 @@ export const FieldArray = ({
     name,
     validationBehavior
   );
-  return children(value, helpers, error);
+  return <>{children(value, helpers, error)}</>;
 };

package/src/internal/util.ts

@@ -1,6 +1,6 @@
-import isEqual from "lodash/isEqual";
 import type React from "react";
 import { useEffect, useLayoutEffect, useRef } from "react";
+import * as R from "remeda";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -29,7 +29,7 @@ export const useIsomorphicLayoutEffect =
 
 export const useDeepEqualsMemo = <T>(item: T): T => {
   const ref = useRef<T>(item);
-  const areEqual = ref.current === item || isEqual(ref.current, item);
+  const areEqual = ref.current === item || R.equals(ref.current, item);
   useEffect(() => {
     if (!areEqual) {
       ref.current = item;

package/src/validation/createValidator.ts

@@ -1,3 +1,4 @@
+import * as R from "remeda";
 import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
@@ -10,6 +11,9 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
   return objectFromPathEntries(Object.entries(data));
 };
 
+const omitInternalFields = (data: GenericObject): GenericObject =>
+  R.omit(data, [FORM_ID_FIELD]);
+
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
@@ -21,7 +25,7 @@ export function createValidator<T>(
   return {
     validate: async (value) => {
       const data = preprocessFormData(value);
-      const result = await validator.validate(data);
+      const result = await validator.validate(omitInternalFields(data));
 
       if (result.error) {
         return {

package/src/validation/validation.test.ts

@@ -1,11 +1,13 @@
 import { anyString, TestFormData } from "@remix-validated-form/test-utils";
 import { withYup } from "@remix-validated-form/with-yup/src";
 import { withZod } from "@remix-validated-form/with-zod";
+import * as R from "remeda";
 import { Validator } from "remix-validated-form/src";
 import { objectFromPathEntries } from "remix-validated-form/src/internal/flatten";
 import { describe, it, expect } from "vitest";
 import * as yup from "yup";
 import { z } from "zod";
+import { FORM_ID_FIELD } from "../internal/constants";
 
 // If adding an adapter, write a validator that validates this shape
 type Person = {
@@ -101,6 +103,30 @@ describe("Validation", () => {
         });
       });
 
+      it("should omit internal fields", async () => {
+        const person: Person = {
+          firstName: "John",
+          lastName: "Doe",
+          age: 30,
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+
+          // @ts-expect-error
+          // internal filed technically not part of person type
+          [FORM_ID_FIELD]: "something",
+        };
+        expect(await validator.validate(person)).toEqual({
+          data: R.omit(person as any, [FORM_ID_FIELD]),
+          error: undefined,
+          submittedData: person,
+          formId: "something",
+        });
+      });
+
       it("should return field errors when invalid", async () => {
         const obj = { age: "hi!", pets: [{ animal: "dog" }] };
         expect(await validator.validate(obj)).toEqual({