Convert d3 packages to ESM (#1648)

* d3tooltip

* Add back type-check

* Remove dependency

* map2tree

* Use lodash-es

* Update jest invocation

* Transform lodash-es

* d3-state-visualizer

* Use module: node16

* Update

* Create chilly-fans-hunt.md

.changeset/chilly-fans-hunt.md

@@ -0,0 +1,9 @@
+---
+'remotedev-redux-devtools-extension': patch
+'d3-state-visualizer': major
+'d3tooltip': major
+'map2tree': major
+'@redux-devtools/app': patch
+---
+
+Convert d3 packages to ESM

extension/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|nanoid|robust-predicates|uuid)',
+    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)',
   ],
 };

packages/d3-state-visualizer/babel.config.esm.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults", "modules": false }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/d3-state-visualizer/babel.config.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/d3-state-visualizer/package.json

@@ -20,27 +20,23 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
+  "main": "lib/index.js",
-  "module": "lib/esm/index.js",
+  "types": "lib/index.d.ts",
-  "types": "lib/types/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": "tsc",
-    "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",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint"
+    "prepublish": "pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.1",
     "@types/d3": "^7.4.3",
     "d3": "^7.9.0",
     "d3tooltip": "^3.0.0",
@@ -49,11 +45,6 @@
     "ramda": "^0.29.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-typescript": "^7.24.1",
     "@types/ramda": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",

packages/d3-state-visualizer/src/charts/index.ts

@@ -1,4 +1,4 @@
 export type { HierarchyPointNode } from 'd3';
 export type { StyleValue } from 'd3tooltip';
-export { default as tree } from './tree/tree';
+export { default as tree } from './tree/tree.js';
-export type { Node, Options } from './tree/tree';
+export type { Node, Options } from './tree/tree.js';

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -9,7 +9,7 @@ import {
   toggleChildren,
   visit,
   getNodeGroupByDepthCount,
-} from './utils';
+} from './utils.js';
 import { tooltip } from 'd3tooltip';
 import type { StyleValue } from 'd3tooltip';
 

packages/d3-state-visualizer/src/charts/tree/utils.ts

@@ -1,6 +1,6 @@
 import { is, join, pipe, replace } from 'ramda';
-import sortAndSerialize from './sortAndSerialize';
+import sortAndSerialize from './sortAndSerialize.js';
-import type { InternalNode } from './tree';
+import type { InternalNode } from './tree.js';
 
 export function collapseChildren(node: InternalNode) {
   if (node.children) {

packages/d3-state-visualizer/src/index.ts

@@ -1,2 +1,7 @@
-export { tree } from './charts';
+export { tree } from './charts/index.js';
-export type { HierarchyPointNode, Node, Options, StyleValue } from './charts';
+export type {
+  HierarchyPointNode,
+  Node,
+  Options,
+  StyleValue,
+} from './charts/index.js';

packages/d3-state-visualizer/tsconfig.json

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

packages/d3tooltip/babel.config.esm.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults", "modules": false }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/d3tooltip/babel.config.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/d3tooltip/package.json

@@ -16,34 +16,23 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
+  "main": "lib/index.js",
-  "module": "lib/esm/index.js",
+  "types": "lib/index.d.ts",
-  "types": "lib/types/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": "tsc",
-    "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",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint"
+    "prepublish": "pnpm run lint"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.24.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-typescript": "^7.24.1",
     "@types/d3": "^7.4.3",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",

packages/d3tooltip/tsconfig.json

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

packages/map2tree/babel.config.esm.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults", "modules": false }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/map2tree/babel.config.json

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/map2tree/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/map2tree/jest.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  transform: {
-    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
-  },
-};

packages/map2tree/package.json

@@ -19,38 +19,29 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
+  "main": "lib/index.js",
-  "module": "lib/esm/index.js",
+  "types": "lib/index.d.ts",
-  "types": "lib/types/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": "tsc",
-    "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",
     "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-es": "^4.17.21"
-    "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-typescript": "^7.24.1",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash-es": "^4.17.12",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "eslint": "^8.57.0",

packages/map2tree/src/index.ts

@@ -1,6 +1,4 @@
-import isArray from 'lodash/isArray';
+import { isArray, isPlainObject, mapValues } from 'lodash-es';
-import isPlainObject from 'lodash/isPlainObject';
-import mapValues from 'lodash/mapValues';
 
 export interface Node {
   name: string;

packages/map2tree/tsconfig.json

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

packages/map2tree/tsconfig.test.json

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

packages/redux-devtools-app/jest.config.js

@@ -10,6 +10,6 @@ module.exports = {
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|nanoid|robust-predicates|uuid)',
+    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)',
   ],
 };

pnpm-lock.yaml

@@ -225,9 +225,6 @@ importers:
 
   packages/d3-state-visualizer:
     dependencies:
-      '@babel/runtime':
-        specifier: ^7.24.1
-        version: 7.24.1
       '@types/d3':
         specifier: ^7.4.3
         version: 7.4.3
@@ -247,21 +244,6 @@ importers:
         specifier: ^0.29.1
         version: 0.29.1
     devDependencies:
-      '@babel/cli':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
-      '@babel/core':
-        specifier: ^7.24.3
-        version: 7.24.3
-      '@babel/eslint-parser':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)(eslint@8.57.0)
-      '@babel/preset-env':
-        specifier: ^7.24.3
-        version: 7.24.3(@babel/core@7.24.3)
-      '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
       '@types/ramda':
         specifier: ^0.29.11
         version: 0.29.11
@@ -346,26 +328,7 @@ importers:
         version: 5.0.4(webpack-cli@5.1.4)(webpack@5.91.0)
 
   packages/d3tooltip:
-    dependencies:
-      '@babel/runtime':
-        specifier: ^7.24.1
-        version: 7.24.1
     devDependencies:
-      '@babel/cli':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
-      '@babel/core':
-        specifier: ^7.24.3
-        version: 7.24.3
-      '@babel/eslint-parser':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)(eslint@8.57.0)
-      '@babel/preset-env':
-        specifier: ^7.24.3
-        version: 7.24.3(@babel/core@7.24.3)
-      '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
       '@types/d3':
         specifier: ^7.4.3
         version: 7.4.3
@@ -393,34 +356,16 @@ importers:
 
   packages/map2tree:
     dependencies:
-      '@babel/runtime':
+      lodash-es:
-        specifier: ^7.24.1
-        version: 7.24.1
-      lodash:
         specifier: ^4.17.21
         version: 4.17.21
     devDependencies:
-      '@babel/cli':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
-      '@babel/core':
-        specifier: ^7.24.3
-        version: 7.24.3
-      '@babel/eslint-parser':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)(eslint@8.57.0)
-      '@babel/preset-env':
-        specifier: ^7.24.3
-        version: 7.24.3(@babel/core@7.24.3)
-      '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.3)
       '@types/jest':
         specifier: ^29.5.12
         version: 29.5.12
-      '@types/lodash':
+      '@types/lodash-es':
-        specifier: ^4.17.0
+        specifier: ^4.17.12
-        version: 4.17.0
+        version: 4.17.12
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.4.0
         version: 7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.3.3)
@@ -10878,7 +10823,7 @@ packages:
       '@babel/core': 7.24.3
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
-      webpack: 5.91.0(@swc/core@1.4.11)(esbuild@0.20.2)
+      webpack: 5.91.0(webpack-cli@5.1.4)
     dev: true
 
   /babel-plugin-istanbul@6.1.1:

tsconfig.esm.base.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "node16",
+    "declaration": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": []
+  }
+}