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",