Convert Redux DevTools packages to ESM

packages/redux-devtools-instrument/jest.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  extensionsToTreatAsEsm: ['.ts'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '^.+\\.ts$': ['ts-jest', { tsconfig: 'tsconfig.test.json', useESM: true }],
+  },
+};

packages/redux-devtools-instrument/package.json

@@ -20,39 +20,30 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/instrument.js",
-  "module": "lib/esm/instrument.js",
-  "types": "lib/types/instrument.d.ts",
+  "main": "lib/instrument.js",
+  "types": "lib/instrument.d.ts",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
-    "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
-    "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build": "tsc",
     "clean": "rimraf lib",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
+    "prepublish": "pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.1",
-    "lodash": "^4.17.21"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-typescript": "^7.24.1",
+    "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.30",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",

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

@@ -1,6 +1,4 @@
-import difference from 'lodash/difference';
-import union from 'lodash/union';
-import isPlainObject from 'lodash/isPlainObject';
+import { difference, isPlainObject, union } from 'lodash-es';
 import {
   Action,
   Observer,
@@ -10,7 +8,7 @@ import {
   StoreEnhancer,
   StoreEnhancerStoreCreator,
 } from 'redux';
-import getSymbolObservable from './getSymbolObservable';
+import getSymbolObservable from './getSymbolObservable.js';
 
 export const ActionTypes = {
   PERFORM_ACTION: 'PERFORM_ACTION',

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

@@ -1,13 +1,15 @@
+import { jest } from '@jest/globals';
 import { createStore, compose, Reducer, Store, Action } from 'redux';
+import { from, Observable } from 'rxjs';
+import { mapValues } from 'lodash-es';
 import {
   ActionCreators,
   EnhancedStore,
   instrument,
   LiftedStore,
   LiftedState,
-} from '../src/instrument';
-import { from, Observable } from 'rxjs';
-import _ from 'lodash';
+  LiftedAction,
+} from '../src/instrument.js';
 
 type CounterAction = { type: 'INCREMENT' } | { type: 'DECREMENT' };
 function counter(state = 0, action: CounterAction) {
@@ -713,7 +715,16 @@ describe('instrument', () => {
 
     it('should use dynamic maxAge', () => {
       let max = 3;
-      const getMaxAge = jest.fn().mockImplementation(() => max);
+      const getMaxAge = jest
+        .fn<
+          (
+            currentLiftedAction: LiftedAction<number, CounterAction, null>,
+            previousLiftedState:
+              | LiftedState<number, CounterAction, null>
+              | undefined,
+          ) => number
+        >()
+        .mockImplementation(() => max);
       store = createStore(
         counter,
         instrument(undefined, { maxAge: getMaxAge }),
@@ -729,10 +740,10 @@ describe('instrument', () => {
       expect(getMaxAge.mock.calls[0][0].type).toContain('INIT');
       expect(getMaxAge.mock.calls[0][1]).toBeUndefined();
       expect(getMaxAge.mock.calls[1][0].type).toBe('PERFORM_ACTION');
-      expect(getMaxAge.mock.calls[1][1].nextActionId).toBe(1);
-      expect(getMaxAge.mock.calls[1][1].stagedActionIds).toEqual([0]);
-      expect(getMaxAge.mock.calls[2][1].nextActionId).toBe(2);
-      expect(getMaxAge.mock.calls[2][1].stagedActionIds).toEqual([0, 1]);
+      expect(getMaxAge.mock.calls[1][1]!.nextActionId).toBe(1);
+      expect(getMaxAge.mock.calls[1][1]!.stagedActionIds).toEqual([0]);
+      expect(getMaxAge.mock.calls[2][1]!.nextActionId).toBe(2);
+      expect(getMaxAge.mock.calls[2][1]!.stagedActionIds).toEqual([0, 1]);
 
       expect(store.getState()).toBe(2);
       expect(Object.keys(liftedStoreState.actionsById)).toHaveLength(3);
@@ -1155,7 +1166,7 @@ describe('instrument', () => {
   function filterStackAndTimestamps<S, A extends Action<string>>(
     state: LiftedState<S, A, null>,
   ) {
-    state.actionsById = _.mapValues(state.actionsById, (action) => {
+    state.actionsById = mapValues(state.actionsById, (action) => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       delete action.timestamp;

packages/redux-devtools-instrument/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.esm.base.json",
   "compilerOptions": {
-    "outDir": "lib/types",
+    "outDir": "lib",
     "types": ["node"]
   },
   "include": ["src"]

packages/redux-devtools-instrument/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.esm.base.json",
   "compilerOptions": {
     "types": ["jest", "node"]
   },

packages/redux-devtools/jest.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      { tsconfig: 'tsconfig.test.json', useESM: true },
+    ],
+  },
+};

packages/redux-devtools/package.json

@@ -20,41 +20,31 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
-    "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
-    "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build": "tsc",
     "clean": "rimraf lib",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint . --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
+    "prepublish": "pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.1",
     "@redux-devtools/instrument": "^2.2.0",
-    "lodash": "^4.17.21"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.72",
     "@typescript-eslint/eslint-plugin": "^7.4.0",

packages/redux-devtools/src/index.ts

@@ -6,5 +6,5 @@ export {
   type LiftedAction,
   type LiftedState,
 } from '@redux-devtools/instrument';
-export { default as persistState } from './persistState';
-export { default as createDevTools, type Monitor } from './createDevTools';
+export { default as persistState } from './persistState.js';
+export { default as createDevTools, type Monitor } from './createDevTools.js';

packages/redux-devtools/src/persistState.ts

@@ -1,5 +1,4 @@
-import mapValues from 'lodash/mapValues';
-import identity from 'lodash/identity';
+import { identity, mapValues } from 'lodash-es';
 import { Action, PreloadedState, Reducer, StoreEnhancer } from 'redux';
 import { LiftedState } from '@redux-devtools/instrument';
 

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

@@ -1,5 +1,6 @@
-import { instrument, persistState } from '../src';
+import { jest } from '@jest/globals';
 import { compose, createStore } from 'redux';
+import { instrument, persistState } from '../src/index.js';
 
 describe('persistState', () => {
   const savedLocalStorage = global.localStorage;

packages/redux-devtools/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
-    "outDir": "lib/types"
+    "outDir": "lib"
   },
   "include": ["src"]
 }

packages/redux-devtools/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
     "types": ["jest", "node"]
   },