Replace lodash usage with throttle-debounce

Smaller bundle size

extension/package.json

@@ -35,7 +35,6 @@
     "@types/jsan": "^3.1.5",
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
-    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
@@ -44,7 +43,8 @@
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -56,10 +56,10 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/chrome": "^0.0.269",
-    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
+    "@types/throttle-debounce": "^5.0.2",
     "chromedriver": "^126.0.5",
     "cross-env": "^7.0.3",
     "electron": "^31.3.1",

extension/src/pageScript/api/index.ts

@@ -1,5 +1,5 @@
 import jsan, { Options } from 'jsan';
-import { throttle } from 'lodash-es';
+import { throttle } from 'throttle-debounce';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import { getActionsArray, getLocalFilter } from '@redux-devtools/utils';
 import { isFiltered, PartialLiftedState } from './filters';
@@ -594,11 +594,11 @@ export function connect(preConfig: Config): ConnectResponse {
     delete listeners[id];
   };
 
-  const sendDelayed = throttle(() => {
+  const sendDelayed = throttle(latency ?? 0, () => {
     sendMessage(delayedActions, delayedStates as any, config);
     delayedActions = [];
     delayedStates = [];
-  }, latency);
+  });
 
   const send = <S, A extends Action<string>>(
     action: A,

extension/src/pageScript/index.ts

@@ -4,7 +4,7 @@ import {
   getActionsArray,
   getLocalFilter,
 } from '@redux-devtools/utils';
-import { throttle } from 'lodash-es';
+import { throttle } from 'throttle-debounce';
 import { Action, ActionCreator, Dispatch, Reducer, StoreEnhancer } from 'redux';
 import Immutable from 'immutable';
 import {
@@ -178,6 +178,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
   }
 
   const relayState = throttle(
+    latency,
     (
       liftedState?: LiftedState<S, A, unknown> | undefined,
       libConfig?: LibConfig,
@@ -203,7 +204,6 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
         serializeAction,
       );
     },
-    latency,
   );
 
   const monitor = new Monitor(relayState);
@@ -229,7 +229,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
     );
   }
 
-  const relayAction = throttle(() => {
+  const relayAction = throttle(latency, () => {
     const liftedState = store.liftedStore.getState();
     const nextActionId = liftedState.nextActionId;
     const currentActionId = nextActionId - 1;
@@ -313,7 +313,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
       serializeState,
       serializeAction,
     );
-  }, latency);
+  });
 
   function dispatchRemotely(action: string | CustomAction) {
     if (config!.features && !config!.features.dispatch) return;

pnpm-lock.yaml

@@ -92,9 +92,6 @@ importers:
       localforage:
         specifier: ^1.10.0
         version: 1.10.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -122,6 +119,9 @@ importers:
       styled-components:
         specifier: ^5.3.11
         version: 5.3.11(@babel/core@7.25.2)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
+      throttle-debounce:
+        specifier: ^5.0.2
+        version: 5.0.2
     devDependencies:
       '@babel/core':
         specifier: ^7.25.2
@@ -150,9 +150,6 @@ importers:
       '@types/chrome':
         specifier: ^0.0.269
         version: 0.0.269
-      '@types/lodash-es':
-        specifier: ^4.17.12
-        version: 4.17.12
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -162,6 +159,9 @@ importers:
       '@types/styled-components':
         specifier: ^5.1.34
         version: 5.1.34
+      '@types/throttle-debounce':
+        specifier: ^5.0.2
+        version: 5.0.2
       chromedriver:
         specifier: ^126.0.5
         version: 126.0.5
@@ -9011,6 +9011,10 @@ packages:
       '@types/estree': 1.0.5
     dev: false
 
+  /@types/throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==}
+    dev: true
+
   /@types/tough-cookie@4.0.5:
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
@@ -18632,6 +18636,11 @@ packages:
       tslib: 2.6.3
     dev: true
 
+  /throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
     dependencies: