Merge pull request airjp73#199 from airjp73/remove-lodash

Remove lodash

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
     "sample-app/remix-validated-form",
   ],
   extends: ["react-app"],
-  plugins: ["prettier", "lodash"],
+  plugins: ["prettier"],
   rules: {
     "import/no-anonymous-default-export": "off",
     "import/order": [
@@ -36,7 +36,6 @@ module.exports = {
       },
     ],
     "prettier/prettier": "error",
-    "lodash/import-scope": "error",
   },
   overrides: [
     {

.gitignore

@@ -12,4 +12,5 @@ yarn-error.log*
 apps/test-app/cypress/videos
 apps/test-app/cypress/screenshots
 .vercel
-dist
+dist
+stats.html

apps/bug-repro/package.json

@@ -26,10 +26,10 @@
     "@remix-run/dev": "^1.6.5",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
-    "typescript": "^4.1.2"
+    "typescript": "^4.8.4"
   },
   "engines": {
     "node": ">=14"
   },
   "sideEffects": false
-}
+}

apps/docs/package.json

@@ -26,7 +26,6 @@
     "classnames": "^2.3.1",
     "framer-motion": "^5.5.5",
     "highlight.js": "^11.3.1",
-    "lodash": "^4.17.21",
     "nanoid": "^3.3.4",
     "outdent": "^0.8.0",
     "react": "^18.1.0",
@@ -52,10 +51,10 @@
     "postcss-import": "^14.0.2",
     "rollup": "^2.63.0",
     "tailwindcss": "3.0.7",
-    "typescript": "^4.1.2"
+    "typescript": "^4.8.4"
   },
   "engines": {
     "node": ">=14"
   },
   "sideEffects": false
-}
+}

apps/sample-app/package.json

@@ -30,10 +30,10 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "prisma": "^3.6.0",
-    "typescript": "^4.1.2"
+    "typescript": "^4.8.4"
   },
   "engines": {
     "node": ">=14"
   },
   "sideEffects": false
-}
+}

apps/test-app/package.json

@@ -40,10 +40,10 @@
     "har-validator": "^5.1.5",
     "start-server-and-test": "^1.14.0",
     "tiny-invariant": "^1.2.0",
-    "typescript": "^4.1.2"
+    "typescript": "^4.8.4"
   },
   "engines": {
     "node": ">=14"
   },
   "sideEffects": false
-}
+}

package.json

@@ -25,23 +25,22 @@
     "vite": "^2.9.5"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-lodash": "^7.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "jest": "^27.4.4",
     "lint-staged": "^12.1.2",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "turbo": "latest",
     "vitest": "^0.21.0"
   },

packages/remix-validated-form/package.json

@@ -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",
+    "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"
   }

packages/remix-validated-form/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)) {

packages/remix-validated-form/src/internal/flatten.ts

@@ -1,11 +1,12 @@
-import set from "lodash/set";
+import { setPath } from "setGet";
 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>
   );
 };

packages/remix-validated-form/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;
   };
 };

packages/remix-validated-form/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) =>

packages/remix-validated-form/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;
   }
 };

packages/remix-validated-form/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";
@@ -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);
     },

packages/remix-validated-form/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;

packages/remix-validated-form/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.

packages/remix-validated-form/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",

packages/setGet/index.ts

@@ -0,0 +1,3 @@
+export { setPath } from "./src/setPath";
+export { getPath } from "./src/getPath";
+export { stringToPathArray } from "./src/stringToPathArray";

packages/setGet/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "setGet",
+  "version": "1.0.0",
+  "license": "MIT"
+}