Remove unnecessary lodash usage from bundles (#1718)

* Use lodash-es instead of lodash in extension

Produces (slightly) smaller bundles

* Use lodash-es instead of lodash in instrument

* Use lodash-es instead of lodash in utils

* Use lodash-es instead of lodash in redux-devtools

* Remove lodash from instrument

* Remove lodash from redux-devtools

* Remove lodash from utils

* Remove unnecessary mapValues from extension

Author: Methuselah96

extension/package.json

@@ -35,7 +35,7 @@
     "@types/jsan": "^3.1.5",
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
@@ -56,7 +56,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/chrome": "^0.0.269",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",

extension/src/pageScript/api/filters.ts

@@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import { Action } from 'redux';
 import { LiftedState, PerformAction } from '@redux-devtools/instrument';
 import { LocalFilter } from '@redux-devtools/utils';
@@ -46,10 +45,15 @@ function filterActions<A extends Action<string>>(
   actionSanitizer: ((action: A, id: number) => A) | undefined,
 ): { [p: number]: PerformAction<A> } {
   if (!actionSanitizer) return actionsById;
-  return mapValues(actionsById, (action, id) => ({
-    ...action,
-    action: actionSanitizer(action.action, id as unknown as number),
-  }));
+  return Object.fromEntries(
+    Object.entries(actionsById).map(([actionId, action]) => [
+      actionId,
+      {
+        ...action,
+        action: actionSanitizer(action.action, actionId as unknown as number),
+      },
+    ]),
+  );
 }
 
 function filterStates<S>(

extension/src/pageScript/api/index.ts

@@ -1,5 +1,5 @@
 import jsan, { Options } from 'jsan';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import { getActionsArray, getLocalFilter } from '@redux-devtools/utils';
 import { isFiltered, PartialLiftedState } from './filters';

extension/src/pageScript/index.ts

@@ -4,15 +4,8 @@ import {
   getActionsArray,
   getLocalFilter,
 } from '@redux-devtools/utils';
-import throttle from 'lodash/throttle';
-import {
-  Action,
-  ActionCreator,
-  Dispatch,
-  Reducer,
-  StoreEnhancer,
-  StoreEnhancerStoreCreator,
-} from 'redux';
+import { throttle } from 'lodash-es';
+import { Action, ActionCreator, Dispatch, Reducer, StoreEnhancer } from 'redux';
 import Immutable from 'immutable';
 import {
   EnhancedStore,

packages/redux-devtools-instrument/package.json

@@ -40,10 +40,6 @@
     "prepack": "pnpm run clean && pnpm run build",
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "lodash": "^4.17.21"
-  },
   "devDependencies": {
     "@babel/cli": "^7.24.8",
     "@babel/core": "^7.25.2",
@@ -52,7 +48,6 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.24.7",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.14",
     "jest": "^29.7.0",
     "redux": "^5.0.1",

packages/redux-devtools-instrument/src/instrument.ts

@@ -1,8 +1,6 @@
-import difference from 'lodash/difference';
-import union from 'lodash/union';
-import isPlainObject from 'lodash/isPlainObject';
 import {
   Action,
+  isPlainObject,
   Observer,
   Reducer,
   Store,
@@ -669,9 +667,18 @@ function liftReducerWith<
           const actionIds = [];
           for (let i = start; i < end; i++) actionIds.push(i);
           if (active) {
-            skippedActionIds = difference(skippedActionIds, actionIds);
+            const actionIdsSet = new Set(actionIds);
+            skippedActionIds = skippedActionIds.filter(
+              (actionId) => !actionIdsSet.has(actionId),
+            );
           } else {
-            skippedActionIds = union(skippedActionIds, actionIds);
+            const skippedActionIdsSet = new Set(skippedActionIds);
+            skippedActionIds = [
+              ...skippedActionIds,
+              ...actionIds.filter(
+                (actionId) => !skippedActionIdsSet.has(actionId),
+              ),
+            ];
           }
 
           // Optimization: we know history before this action hasn't changed
@@ -696,7 +703,10 @@ function liftReducerWith<
         }
         case ActionTypes.SWEEP: {
           // Forget any actions that are currently being skipped.
-          stagedActionIds = difference(stagedActionIds, skippedActionIds);
+          const skippedActionIdsSet = new Set(skippedActionIds);
+          stagedActionIds = stagedActionIds.filter(
+            (actionId) => !skippedActionIdsSet.has(actionId),
+          );
           skippedActionIds = [];
           currentStateIndex = Math.min(
             currentStateIndex,

packages/redux-devtools-instrument/test/instrument.spec.ts

@@ -15,7 +15,6 @@ import {
   LiftedState,
 } from '../src/instrument';
 import { from, Observable } from 'rxjs';
-import _ from 'lodash';
 
 type CounterAction = { type: 'INCREMENT' } | { type: 'DECREMENT' };
 function counter(state = 0, action: CounterAction) {
@@ -1171,13 +1170,15 @@ describe('instrument', () => {
   function filterStackAndTimestamps<S, A extends Action<string>>(
     state: LiftedState<S, A, null>,
   ) {
-    state.actionsById = _.mapValues(state.actionsById, (action) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      delete action.timestamp;
-      delete action.stack;
-      return action;
-    });
+    state.actionsById = Object.fromEntries(
+      Object.entries(state.actionsById).map(([actionId, action]) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        delete action.timestamp;
+        delete action.stack;
+        return [actionId, action];
+      }),
+    );
     return state;
   }
 

packages/redux-devtools-utils/package.json

@@ -39,7 +39,6 @@
     "get-params": "^0.1.2",
     "immutable": "^4.3.7",
     "jsan": "^3.1.14",
-    "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
     "redux": "^5.0.1"
   },
@@ -51,7 +50,6 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.24.7",
     "@types/jsan": "^3.1.5",
-    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.14",
     "rimraf": "^6.0.1",
     "typescript": "~5.5.4"

packages/redux-devtools-utils/src/filters.ts

@@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import { PerformAction } from '@redux-devtools/core';
 import { Action } from 'redux';
 
@@ -23,10 +22,15 @@ function filterActions(
   actionSanitizer: ((action: Action<string>, id: number) => Action) | undefined,
 ) {
   if (!actionSanitizer) return actionsById;
-  return mapValues(actionsById, (action, id: number) => ({
-    ...action,
-    action: actionSanitizer(action.action, id),
-  }));
+  return Object.fromEntries(
+    Object.entries(actionsById).map(([actionId, action]) => [
+      actionId,
+      {
+        ...action,
+        action: actionSanitizer(action.action, actionId as unknown as number),
+      },
+    ]),
+  );
 }
 
 function filterStates(

packages/redux-devtools/package.json

@@ -42,8 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@redux-devtools/instrument": "^2.2.0",
-    "lodash": "^4.17.21"
+    "@redux-devtools/instrument": "^2.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",
@@ -54,7 +53,6 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.14",
     "@types/react": "^18.3.3",
     "jest": "^29.7.0",

packages/redux-devtools/src/persistState.ts

@@ -1,12 +1,10 @@
-import mapValues from 'lodash/mapValues';
-import identity from 'lodash/identity';
 import { Action, Reducer, StoreEnhancer } from 'redux';
 import { LiftedState } from '@redux-devtools/instrument';
 
 export default function persistState<S, A extends Action<string>, MonitorState>(
   sessionId?: string | null,
-  deserializeState: (state: S) => S = identity,
-  deserializeAction: (action: A) => A = identity,
+  deserializeState: (state: S) => S = (state) => state,
+  deserializeAction: (action: A) => A = (state) => state,
 ): StoreEnhancer {
   if (!sessionId) {
     return (next) =>
@@ -19,10 +17,15 @@ export default function persistState<S, A extends Action<string>, MonitorState>(
   ): LiftedState<S, A, MonitorState> {
     return {
       ...state,
-      actionsById: mapValues(state.actionsById, (liftedAction) => ({
-        ...liftedAction,
-        action: deserializeAction(liftedAction.action),
-      })),
+      actionsById: Object.fromEntries(
+        Object.entries(state.actionsById).map(([actionId, liftedAction]) => [
+          actionId,
+          {
+            ...liftedAction,
+            action: deserializeAction(liftedAction.action),
+          },
+        ]),
+      ),
       committedState: deserializeState(state.committedState),
       computedStates: state.computedStates.map((computedState) => ({
         ...computedState,