remix-validated-form 4.6.2 → 4.6.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.6.2",
+  "version": "4.6.4",
   "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",
@@ -39,17 +39,18 @@
   "devDependencies": {
     "@remix-run/react": "^1.6.5",
     "@testing-library/react": "^13.3.0",
-    "@types/lodash": "^4.14.178",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",
     "react": "^18.1.0",
+    "set-get": "*",
+    "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",
     "tiny-invariant": "^1.2.0",
     "zustand": "^4.0.0-rc.1"
   }

package/src/ValidatedForm.tsx

@@ -4,7 +4,6 @@ import {
   useFetcher,
   useSubmit,
 } from "@remix-run/react";
-import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
   FormEvent,
@@ -15,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 {
@@ -108,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)) {

package/src/internal/flatten.ts

@@ -1,11 +1,12 @@
-import set from "lodash/set";
+import { setPath } from "set-get";
 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]) =>
+      setPath(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 "set-get";
 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/state/arrayUtil.ts

@@ -1,5 +1,4 @@
-import lodashGet from "lodash/get";
-import lodashSet from "lodash/set";
+import { getPath, setPath } from "set-get";
 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,8 +104,10 @@ export const mutateAsArray = (
 
   const newKeys = getDeepArrayPaths(arr);
   for (const key of newKeys) {
-    const val = lodashGet(arr, key);
-    obj[`${field}${key}`] = val;
+    const val = getPath(arr, key);
+    if (val !== undefined) {
+      obj[`${field}${key}`] = val;
+    }
   }
 };
 
@@ -355,6 +356,19 @@ if (import.meta.vitest) {
       });
     });
 
+    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",

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 "set-get";
 import invariant from "tiny-invariant";
 import create, { GetState } from "zustand";
 import { immer } from "zustand/middleware/immer";
@@ -12,7 +11,6 @@ import {
 } from "../../validation/types";
 import { requestSubmit } from "../logic/requestSubmit";
 import * as arrayUtil from "./arrayUtil";
-import { useControlledFieldStore } from "./controlledFieldStore";
 import { InternalFormId } from "./types";
 
 export type SyncedFormProps = {
@@ -302,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/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,4 +1,4 @@
-import omit from "lodash/omit";
+import * as R from "remeda";
 import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
@@ -12,7 +12,7 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
 };
 
 const omitInternalFields = (data: GenericObject): GenericObject =>
-  omit(data, FORM_ID_FIELD);
+  R.omit(data, [FORM_ID_FIELD]);
 
 /**
  * Used to create a validator for a form.

package/src/validation/validation.test.ts

@@ -1,7 +1,7 @@
 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 omit from "lodash/omit";
+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";
@@ -120,7 +120,7 @@ describe("Validation", () => {
           [FORM_ID_FIELD]: "something",
         };
         expect(await validator.validate(person)).toEqual({
-          data: omit(person, FORM_ID_FIELD),
+          data: R.omit(person as any, [FORM_ID_FIELD]),
           error: undefined,
           submittedData: person,
           formId: "something",