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

Author: Methuselah96

.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/.eslintrc.js …ckages/d3-state-visualizer/.eslintrc.cjspackages/d3-state-visualizer/.eslintrc.js renamed to packages/d3-state-visualizer/.eslintrc.cjs packages/d3-state-visualizer/.eslintrc.js renamed to packages/d3-state-visualizer/.eslintrc.cjs

@@ -20,27 +20,23 @@
     "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\" --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",
     "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/babel.config.esm.json

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

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

@@ -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/package.json

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

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

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