Merge branch 'main' of github.com:80avin/redux-devtools into state-filter

.changeset/config.json

@@ -6,5 +6,8 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": [],
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }

.changeset/early-poets-enjoy.md

@@ -1,5 +0,0 @@
----
-'@redux-devtools/cli': major
----
-
-Dropped support for Node.js 14.

.changeset/plenty-gifts-watch.md

@@ -1,7 +0,0 @@
----
-'remotedev-redux-devtools-extension': minor
-'@redux-devtools/inspector-monitor': minor
----
-
-Option to sort State Tree keys alphabetically
-Option to disable collapsing of object keys

.changeset/rude-zebras-smell.md

@@ -1,5 +0,0 @@
----
-'@redux-devtools/inspector-monitor': patch
----
-
-Move @types/redux-devtools-themes to dependencies

.gitattributes

@@ -1,14 +1 @@
-*.js text eol=lf
+* text=auto eol=lf
-*.jsx text eol=lf
-*.ts text eol=lf
-*.tsx text eol=lf
-*.json text eol=lf
-*.css text eol=lf
-*.html text eol=lf
-*.md text eol=lf
-*.yml text eol=lf
-*.graphql text eol=lf
-.eslintrc text eol=lf
-.prettierrc text eol=lf
-.babelrc text eol=lf
-.stylelintrc text eol=lf

.github/workflows/CI.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: nrwl/nx-set-shas@v3
+      - uses: nrwl/nx-set-shas@v4
       - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
           cache: 'pnpm'
@@ -29,6 +29,6 @@ jobs:
       - name: Lint
         run: pnpm run lint:all
       - name: Test
-        uses: GabrielBB/xvfb-action@v1
+        uses: coactions/setup-xvfb@v1
         with:
           run: pnpm run test:all

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
@@ -21,7 +21,7 @@ jobs:
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
           cache: 'pnpm'
@@ -40,19 +40,19 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Archive Chrome Extension
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: chrome
           path: extension/chrome/dist
 
       - name: Archive Edge Extension
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: edge
           path: extension/edge/dist
 
       - name: Archive Firefox Extension
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: firefox
           path: extension/firefox/dist

.gitignore

@@ -9,3 +9,4 @@ coverage
 .idea
 .eslintcache
 !packages/redux-devtools-slider-monitor/examples/todomvc/dist/index.html
+.nx/cache

eslintrc.ts.base.json

@@ -3,15 +3,29 @@
   "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "prettier"
   ],
   "rules": {
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.jest.base.json

@@ -2,9 +2,8 @@
   "plugins": ["jest"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:jest/recommended",
     "plugin:jest/style",
     "prettier"
@@ -13,6 +12,21 @@
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.react.base.json

@@ -8,9 +8,8 @@
   "plugins": ["@typescript-eslint", "react"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "prettier"
@@ -32,6 +31,21 @@
           "attributes": false
         }
       }
-    ]
+    ],
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.react.jest.base.json

@@ -2,9 +2,8 @@
   "plugins": ["jest"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:jest/recommended",
@@ -15,6 +14,21 @@
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

extension/CHANGELOG.md

@@ -1,5 +1,87 @@
 # remotedev-redux-devtools-extension
 
+## 3.1.9
+
+### Patch Changes
+
+- Updated dependencies [bbb1a40]
+  - react-json-tree@0.19.0
+  - @redux-devtools/slider-monitor@5.0.1
+  - @redux-devtools/ui@1.3.2
+
+## 3.1.8
+
+### Patch Changes
+
+- 191d419: Convert d3 packages to ESM
+- Updated dependencies [191d419]
+  - @redux-devtools/app@6.0.1
+
+## 3.1.7
+
+### Patch Changes
+
+- Updated dependencies [5cfe3e5]
+- Updated dependencies [decc035]
+  - @redux-devtools/app@6.0.0
+  - @redux-devtools/slider-monitor@5.0.0
+  - @redux-devtools/core@4.0.0
+  - @redux-devtools/utils@3.0.0
+
+## 3.1.6
+
+### Patch Changes
+
+- Updated dependencies [158ba2c]
+  - @redux-devtools/app@5.0.0
+
+## 3.1.5
+
+### Patch Changes
+
+- 65205f90: Replace Action<unknown> with Action<string>
+- Updated dependencies [65205f90]
+  - @redux-devtools/app@4.0.1
+  - @redux-devtools/core@3.13.2
+
+## 3.1.4
+
+### Patch Changes
+
+- Updated dependencies [e57bcb39]
+  - @redux-devtools/app@4.0.0
+
+## 3.1.3
+
+### Patch Changes
+
+- bca76009: Fix missing CSS for code editor
+
+## 3.1.2
+
+### Patch Changes
+
+- 64ed81b0: Fix extension in Firefox and Chrome Incognito
+
+## 3.1.1
+
+### Patch Changes
+
+- d18525b5: Increase min-width of popup
+- Updated dependencies [57751ff9]
+  - @redux-devtools/app@3.0.0
+
+## 3.1.0
+
+### Minor Changes
+
+- d54adb76: Option to sort State Tree keys alphabetically
+  Option to disable collapsing of object keys
+
+### Patch Changes
+
+- @redux-devtools/app@2.2.2
+
 ## 3.0.19
 
 ### Patch Changes

extension/README.md

@@ -13,8 +13,8 @@
 
 - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd);
 - or download `extension.zip` from [last releases](https://github.com/zalmoxisus/redux-devtools-extension/releases), unzip, open `chrome://extensions` url and turn on developer mode from top left and then click; on `Load Unpacked` and select the extracted folder for use
-- or build it with `npm i && npm run build:extension` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./build/extension`;
+- or build it with `npm i && npm run build:extension` and [load the extension's folder](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) `./build/extension`;
-- or run it in dev mode with `npm i && npm start` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./dev`.
+- or run it in dev mode with `npm i && npm start` and [load the extension's folder](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) `./dev`.
 
 ### 2. For Firefox
 

extension/build.mjs

@@ -0,0 +1,71 @@
+import * as fs from 'node:fs';
+import * as esbuild from 'esbuild';
+import pug from 'pug';
+
+const args = process.argv.slice(2);
+const prod = !args.includes('--dev');
+
+const commonEsbuildOptions = {
+  bundle: true,
+  logLevel: 'info',
+  outdir: 'dist',
+  minify: prod,
+  sourcemap: !prod,
+  define: {
+    'process.env.NODE_ENV': prod ? '"production"' : '"development"',
+    'process.env.BABEL_ENV': prod ? '"production"' : '"development"',
+  },
+};
+
+await esbuild.build({
+  ...commonEsbuildOptions,
+  entryPoints: [
+    { out: 'background.bundle', in: 'src/background/index.ts' },
+    { out: 'options.bundle', in: 'src/options/index.tsx' },
+    { out: 'window.bundle', in: 'src/window/index.tsx' },
+    { out: 'remote.bundle', in: 'src/remote/index.tsx' },
+    { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' },
+    { out: 'devtools.bundle', in: 'src/devtools/index.ts' },
+    { out: 'content.bundle', in: 'src/contentScript/index.ts' },
+    { out: 'page.bundle', in: 'src/pageScript/index.ts' },
+    ...(prod ? [] : [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }]),
+  ],
+  loader: {
+    '.woff2': 'file',
+  },
+});
+
+if (prod) {
+  await esbuild.build({
+    ...commonEsbuildOptions,
+    entryPoints: [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }],
+    loader: {
+      '.js': 'text',
+    },
+  });
+}
+
+console.log();
+
+console.log('Creating HTML files...');
+const htmlFiles = ['devpanel', 'devtools', 'options', 'remote', 'window'];
+for (const htmlFile of htmlFiles) {
+  fs.writeFileSync(
+    `dist/${htmlFile}.html`,
+    pug.renderFile(`src/${htmlFile}/${htmlFile}.pug`),
+  );
+}
+
+console.log('Copying manifest.json...');
+fs.copyFileSync('chrome/manifest.json', 'dist/manifest.json');
+
+console.log('Copying assets...');
+fs.cpSync('src/assets', 'dist', { recursive: true });
+
+console.log('Copying dist for each browser...');
+fs.cpSync('dist', 'chrome/dist', { recursive: true });
+fs.copyFileSync('chrome/manifest.json', 'chrome/dist/manifest.json');
+fs.cpSync('dist', 'edge/dist', { recursive: true });
+fs.copyFileSync('edge/manifest.json', 'edge/dist/manifest.json');
+fs.cpSync('dist', 'firefox/dist', { recursive: true });
+fs.copyFileSync('firefox/manifest.json', 'firefox/dist/manifest.json');

extension/chrome/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.19",
+  "version": "3.1.6",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/docs/API/Arguments.md

@@ -5,10 +5,10 @@ Use with
 - `window.__REDUX_DEVTOOLS_EXTENSION__([options])`
 - `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()`
 - `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])`
-- `redux-devtools-extension` npm package:
+- `@redux-devtools/extension` npm package:
 
 ```js
-import { composeWithDevTools } from 'redux-devtools-extension';
+import { composeWithDevTools } from '@redux-devtools/extension';
 
 const composeEnhancers = composeWithDevTools(options);
 const store = createStore(

extension/edge/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.19",
+  "version": "3.1.6",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/firefox/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.19",
+  "version": "3.1.6",
   "name": "Redux DevTools",
   "manifest_version": 2,
   "description": "Redux Developer Tools for debugging application state changes.",

extension/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|d3|dateformat|delaunator|internmap|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)',
   ],
 };

extension/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.0.19",
+  "version": "3.1.9",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
@@ -11,12 +11,8 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack --env development --watch",
+    "build": "pnpm run build:extension && pnpm run type-check",
-    "build": "pnpm run build:extension && pnpm run build:chrome && pnpm run build:edge && pnpm run build:firefox",
+    "build:extension": "node build.mjs",
-    "build:extension": "webpack --env production && webpack --config wrap.webpack.config.js",
-    "build:chrome": "cpy . ../chrome/dist --cwd dist && cpy manifest.json dist --cwd chrome",
-    "build:edge": "cpy . ../edge/dist --cwd dist && cpy manifest.json dist --cwd edge",
-    "build:firefox": "cpy . ../firefox/dist --cwd dist && cpy manifest.json dist --cwd firefox",
     "build:examples": "babel-node examples/buildAll.js",
     "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
@@ -28,69 +24,61 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@redux-devtools/app": "^2.2.1",
+    "@emotion/react": "^11.11.4",
-    "@redux-devtools/core": "^3.13.0",
+    "@redux-devtools/app": "^6.0.1",
+    "@redux-devtools/core": "^4.0.0",
     "@redux-devtools/instrument": "^2.1.0",
     "@redux-devtools/serialize": "^0.4.1",
-    "@redux-devtools/slider-monitor": "^4.0.0",
+    "@redux-devtools/slider-monitor": "^5.0.1",
-    "@redux-devtools/ui": "^1.3.0",
+    "@redux-devtools/ui": "^1.3.2",
-    "@redux-devtools/utils": "^2.0.0",
+    "@redux-devtools/utils": "^3.0.0",
-    "@types/jsan": "^3.1.2",
+    "@types/jsan": "^3.1.5",
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react-icons": "^5.0.1",
     "react-is": "^18.2.0",
-    "react-json-tree": "^0.18.0",
+    "react-json-tree": "^0.19.0",
-    "react-redux": "^8.1.2",
+    "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.24.3",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.24.1",
-    "@babel/register": "^7.22.5",
+    "@babel/register": "^7.23.7",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.2.2",
-    "@types/chrome": "^0.0.243",
+    "@types/chrome": "^0.0.263",
-    "@types/lodash": "^4.14.196",
+    "@types/lodash": "^4.17.0",
-    "@types/react": "^18.2.18",
+    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.2.22",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.34",
-    "babel-loader": "^9.1.3",
+    "chromedriver": "^118.0.1",
-    "chromedriver": "^114.0.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
+    "electron": "^27.3.7",
-    "electron": "^25.4.0",
+    "esbuild": "^0.20.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "file-loader": "^6.2.0",
+    "immutable": "^4.3.5",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "jest": "^29.7.0",
-    "immutable": "^4.3.2",
+    "jest-environment-jsdom": "^29.7.0",
-    "jest": "^29.6.2",
+    "pug": "^3.0.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "rimraf": "^5.0.5",
-    "pug-html-loader": "^1.1.5",
+    "selenium-webdriver": "^4.18.1",
-    "raw-loader": "^4.0.2",
-    "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.4",
-    "rimraf": "^5.0.1",
-    "selenium-webdriver": "^4.11.1",
     "sinon-chrome": "^3.0.1",
-    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.2",
-    "ts-jest": "^29.1.1",
+    "typescript": "~5.3.3",
-    "typescript": "~5.1.6",
+    "webpack": "^5.91.0",
-    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   }
 }

extension/src/background/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import { Store } from 'redux';
 import configureStore, { BackgroundAction } from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';

extension/src/background/store/apiMiddleware.ts

@@ -84,7 +84,7 @@ export interface NAAction {
   readonly id: string | number;
 }
 
-interface InitMessage<S, A extends Action<unknown>> {
+interface InitMessage<S, A extends Action<string>> {
   readonly type: 'INIT';
   readonly payload: string;
   instanceId: string;
@@ -137,7 +137,7 @@ interface SerializedActionMessage {
   readonly nextActionId: number;
 }
 
-interface SerializedStateMessage<S, A extends Action<unknown>> {
+interface SerializedStateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: Omit<
     LiftedState<S, A, unknown>,
@@ -151,7 +151,7 @@ interface SerializedStateMessage<S, A extends Action<unknown>> {
   readonly committedState: boolean;
 }
 
-type UpdateStateRequest<S, A extends Action<unknown>> =
+type UpdateStateRequest<S, A extends Action<string>> =
   | InitMessage<S, A>
   | LiftedMessage
   | SerializedPartialStateMessage
@@ -163,7 +163,7 @@ export interface EmptyUpdateStateAction {
   readonly type: typeof UPDATE_STATE;
 }
 
-interface UpdateStateAction<S, A extends Action<unknown>> {
+interface UpdateStateAction<S, A extends Action<string>> {
   readonly type: typeof UPDATE_STATE;
   request: UpdateStateRequest<S, A>;
   readonly id: string | number;
@@ -177,7 +177,7 @@ export type TabMessage =
   | ImportAction
   | ActionAction
   | ExportAction;
-export type PanelMessage<S, A extends Action<unknown>> =
+export type PanelMessage<S, A extends Action<string>> =
   | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>
@@ -192,7 +192,7 @@ type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: (message: TabMessage) => void;
 };
 type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
-  postMessage: <S, A extends Action<unknown>>(
+  postMessage: <S, A extends Action<string>>(
     message: PanelMessage<S, A>,
   ) => void;
 };
@@ -214,7 +214,7 @@ const connections: {
 const chunks: {
   [instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors<
     unknown,
-    Action<unknown>
+    Action<string>
   >;
 } = {};
 let monitors = 0;
@@ -223,13 +223,13 @@ let isMonitored = false;
 const getId = (sender: chrome.runtime.MessageSender, name?: string) =>
   sender.tab ? sender.tab.id! : name || sender.id!;
 
-type MonitorAction<S, A extends Action<unknown>> =
+type MonitorAction<S, A extends Action<string>> =
   | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>
   | SetPersistAction;
 
-function toMonitors<S, A extends Action<unknown>>(
+function toMonitors<S, A extends Action<string>>(
   action: MonitorAction<S, A>,
   tabId?: string | number,
   verbose?: boolean,
@@ -387,14 +387,14 @@ export type SingleMessage =
   | OpenOptionsMessage
   | GetOptionsMessage;
 
-type BackgroundStoreMessage<S, A extends Action<unknown>> =
+type BackgroundStoreMessage<S, A extends Action<string>> =
   | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
   | SplitMessage
   | SingleMessage;
 type BackgroundStoreResponse = { readonly options: Options };
 
 // Receive messages from content scripts
-function messaging<S, A extends Action<unknown>>(
+function messaging<S, A extends Action<string>>(
   request: BackgroundStoreMessage<S, A>,
   sender: chrome.runtime.MessageSender,
   sendResponse?: (response?: BackgroundStoreResponse) => void,
@@ -508,7 +508,7 @@ function disconnect(
   };
 }
 
-function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
+function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
   let id: number | string;
   let listener;
 

extension/src/contentScript/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import {
   injectOptions,
   getOptionsFromBg,
@@ -91,18 +92,18 @@ export type ContentScriptToPageScriptMessage =
   | ExportAction
   | UpdateAction;
 
-interface ImportStatePayload<S, A extends Action<unknown>> {
+interface ImportStatePayload<S, A extends Action<string>> {
   readonly type: 'IMPORT_STATE';
   readonly nextLiftedState: LiftedState<S, A, unknown> | readonly A[];
   readonly preloadedState?: S;
 }
 
-interface ImportStateDispatchAction<S, A extends Action<unknown>> {
+interface ImportStateDispatchAction<S, A extends Action<string>> {
   readonly type: 'DISPATCH';
   readonly payload: ImportStatePayload<S, A>;
 }
 
-export type ListenerMessage<S, A extends Action<unknown>> =
+export type ListenerMessage<S, A extends Action<string>> =
   | StartAction
   | StopAction
   | DispatchAction
@@ -203,7 +204,7 @@ export type SplitMessage =
   | SplitMessageChunk
   | SplitMessageEnd;
 
-function tryCatch<S, A extends Action<unknown>>(
+function tryCatch<S, A extends Action<string>>(
   fn: (
     args:
       | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
@@ -263,24 +264,24 @@ interface InitInstanceContentScriptToBackgroundMessage {
   readonly instanceId: number;
 }
 
-interface RelayMessage<S, A extends Action<unknown>> {
+interface RelayMessage<S, A extends Action<string>> {
   readonly name: 'RELAY';
   readonly message:
     | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
     | SplitMessage;
 }
 
-export type ContentScriptToBackgroundMessage<S, A extends Action<unknown>> =
+export type ContentScriptToBackgroundMessage<S, A extends Action<string>> =
   | InitInstanceContentScriptToBackgroundMessage
   | RelayMessage<S, A>;
 
-function postToBackground<S, A extends Action<unknown>>(
+function postToBackground<S, A extends Action<string>>(
   message: ContentScriptToBackgroundMessage<S, A>,
 ) {
   bg!.postMessage(message);
 }
 
-function send<S, A extends Action<unknown>>(
+function send<S, A extends Action<string>>(
   message:
     | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
     | SplitMessage,
@@ -295,7 +296,7 @@ function send<S, A extends Action<unknown>>(
 }
 
 // Resend messages from the page to the background script
-function handleMessages<S, A extends Action<unknown>>(
+function handleMessages<S, A extends Action<string>>(
   event: MessageEvent<PageScriptToContentScriptMessage<S, A>>,
 ) {
   if (!isAllowed()) return;

extension/src/devpanel/devpanel.pug

@@ -12,4 +12,5 @@ html
 
   body
     #root
+    link(href='/devpanel.bundle.css', rel='stylesheet')
     script(src='/devpanel.bundle.js')

extension/src/devpanel/index.tsx

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import React, { CSSProperties, ReactNode } from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
@@ -6,7 +7,6 @@ import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
 import App from '../app/App';
 import configureStore from './store/panelStore';
 
-import './devpanel.pug';
 import { Action, Store } from 'redux';
 import type { PanelMessage } from '../background/store/apiMiddleware';
 import type { StoreStateWithoutSocket } from './store/panelReducer';
@@ -96,7 +96,7 @@ function init(id: number) {
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
-    <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
+    <S, A extends Action<string>>(message: PanelMessage<S, A>) => {
       if (message.type === 'NA') {
         if (message.id === id) renderNA();
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });

extension/src/devpanel/store/panelReducer.ts

@@ -12,6 +12,8 @@ import {
   ReportsState,
   section,
   SectionState,
+  StateTreeSettings,
+  stateTreeSettings,
   StoreAction,
   theme,
   ThemeState,
@@ -25,6 +27,7 @@ export interface StoreStateWithoutSocket {
   readonly instances: InstancesState;
   readonly reports: ReportsState;
   readonly notification: NotificationState;
+  readonly stateTreeSettings: StateTreeSettings;
 }
 
 const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
@@ -36,6 +39,7 @@ const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
     section,
     theme,
     connection,
+    stateTreeSettings,
   });
 
 export default rootReducer;

extension/src/devtools/index.ts

@@ -1,5 +1,3 @@
-import './devtools.pug';
-
 function createPanel(url: string) {
   chrome.devtools.panels.create(
     'Redux',

extension/src/options/index.tsx

@@ -1,10 +1,9 @@
+import '../chromeApiMock';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
-import './options.pug';
-
 chrome.runtime.getBackgroundPage((background) => {
   const syncOptions = background!.syncOptions;
 

extension/src/pageScript/Monitor.ts

@@ -8,7 +8,7 @@ declare global {
   }
 }
 
-export default class Monitor<S, A extends Action<unknown>> {
+export default class Monitor<S, A extends Action<string>> {
   update: (
     liftedState?: LiftedState<S, A, unknown> | undefined,
     libConfig?: LibConfig,

extension/src/pageScript/api/filters.ts

@@ -21,7 +21,7 @@ export const noFiltersApplied = (localFilter: LocalFilter | undefined) =>
     !window.devToolsOptions.filter ||
     window.devToolsOptions.filter === FilterState.DO_NOT_FILTER);
 
-export function isFiltered<A extends Action<unknown>>(
+export function isFiltered<A extends Action<string>>(
   action: A | string,
   localFilter: LocalFilter | undefined,
 ) {
@@ -41,7 +41,7 @@ export function isFiltered<A extends Action<unknown>>(
   );
 }
 
-function filterActions<A extends Action<unknown>>(
+function filterActions<A extends Action<string>>(
   actionsById: { [p: number]: PerformAction<A> },
   actionSanitizer: ((action: A, id: number) => A) | undefined,
 ): { [p: number]: PerformAction<A> } {
@@ -63,7 +63,7 @@ function filterStates<S>(
   }));
 }
 
-export function filterState<S, A extends Action<unknown>>(
+export function filterState<S, A extends Action<string>>(
   state: LiftedState<S, A, unknown>,
   localFilter: LocalFilter | undefined,
   stateSanitizer: ((state: S, index: number) => S) | undefined,
@@ -120,7 +120,7 @@ export function filterState<S, A extends Action<unknown>>(
   };
 }
 
-export interface PartialLiftedState<S, A extends Action<unknown>> {
+export interface PartialLiftedState<S, A extends Action<string>> {
   readonly actionsById: { [actionId: number]: PerformAction<A> };
   readonly computedStates: { state: S; error?: string }[];
   readonly stagedActionIds: readonly number[];
@@ -129,16 +129,16 @@ export interface PartialLiftedState<S, A extends Action<unknown>> {
   readonly committedState?: S;
 }
 
-export function startingFrom<S, A extends Action<unknown>>(
+export function startingFrom<S, A extends Action<string>>(
   sendingActionId: number,
   state: LiftedState<S, A, unknown>,
   localFilter: LocalFilter | undefined,
   stateSanitizer: (<S>(state: S, index: number) => S) | undefined,
   actionSanitizer:
-    | (<A extends Action<unknown>>(action: A, id: number) => A)
+    | (<A extends Action<string>>(action: A, id: number) => A)
     | undefined,
   predicate:
-    | (<S, A extends Action<unknown>>(state: S, action: A) => boolean)
+    | (<S, A extends Action<string>>(state: S, action: A) => boolean)
     | undefined,
 ): LiftedState<S, A, unknown> | PartialLiftedState<S, A> | undefined {
   const stagedActionIds = state.stagedActionIds;

extension/src/pageScript/api/importState.ts

@@ -30,7 +30,7 @@ interface ParsedSerializedLiftedState {
   readonly preloadedState?: string;
 }
 
-export default function importState<S, A extends Action<unknown>>(
+export default function importState<S, A extends Action<string>>(
   state: string | undefined,
   { serialize }: Config,
 ) {

extension/src/pageScript/api/index.ts

@@ -115,7 +115,7 @@ interface DisconnectMessage {
   readonly source: typeof source;
 }
 
-interface InitMessage<S, A extends Action<unknown>> {
+interface InitMessage<S, A extends Action<string>> {
   readonly type: 'INIT';
   readonly payload: string;
   readonly instanceId: number;
@@ -161,7 +161,7 @@ interface SerializedActionMessage {
   readonly nextActionId?: number;
 }
 
-interface SerializedStateMessage<S, A extends Action<unknown>> {
+interface SerializedStateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: Omit<
     LiftedState<S, A, unknown>,
@@ -183,7 +183,7 @@ interface OpenMessage {
 
 export type PageScriptToContentScriptMessageForwardedToMonitors<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | InitMessage<S, A>
   | LiftedMessage
@@ -194,7 +194,7 @@ export type PageScriptToContentScriptMessageForwardedToMonitors<
 
 export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | PageScriptToContentScriptMessageForwardedToMonitors<S, A>
   | ErrorMessage
@@ -204,17 +204,17 @@ export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
 
 export type PageScriptToContentScriptMessageWithoutDisconnect<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
 > =
   | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
   | InitInstancePageScriptToContentScriptMessage
   | InitInstanceMessage;
 
-export type PageScriptToContentScriptMessage<S, A extends Action<unknown>> =
+export type PageScriptToContentScriptMessage<S, A extends Action<string>> =
   | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
   | DisconnectMessage;
 
-function post<S, A extends Action<unknown>>(
+function post<S, A extends Action<string>>(
   message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');
@@ -258,7 +258,7 @@ function getStackTrace(
   return stack;
 }
 
-function amendActionType<A extends Action<unknown>>(
+function amendActionType<A extends Action<string>>(
   action:
     | A
     | StructuralPerformAction<A>
@@ -288,7 +288,7 @@ interface LiftedMessage {
   readonly source: typeof source;
 }
 
-interface PartialStateMessage<S, A extends Action<unknown>> {
+interface PartialStateMessage<S, A extends Action<string>> {
   readonly type: 'PARTIAL_STATE';
   readonly payload: PartialLiftedState<S, A>;
   readonly source: typeof source;
@@ -296,7 +296,7 @@ interface PartialStateMessage<S, A extends Action<unknown>> {
   readonly maxAge: number;
 }
 
-interface ExportMessage<S, A extends Action<unknown>> {
+interface ExportMessage<S, A extends Action<string>> {
   readonly type: 'EXPORT';
   readonly payload: readonly A[];
   readonly committedState: S;
@@ -304,21 +304,21 @@ interface ExportMessage<S, A extends Action<unknown>> {
   readonly instanceId: number;
 }
 
-export interface StructuralPerformAction<A extends Action<unknown>> {
+export interface StructuralPerformAction<A extends Action<string>> {
   readonly action: A;
   readonly timestamp?: number;
   readonly stack?: string;
 }
 
-type SingleUserAction<A extends Action<unknown>> =
+type SingleUserAction<A extends Action<string>> =
   | PerformAction<A>
   | StructuralPerformAction<A>
   | A;
-type UserAction<A extends Action<unknown>> =
+type UserAction<A extends Action<string>> =
   | SingleUserAction<A>
   | readonly SingleUserAction<A>[];
 
-interface ActionMessage<S, A extends Action<unknown>> {
+interface ActionMessage<S, A extends Action<string>> {
   readonly type: 'ACTION';
   readonly payload: S;
   readonly source: typeof source;
@@ -329,7 +329,7 @@ interface ActionMessage<S, A extends Action<unknown>> {
   readonly name?: string;
 }
 
-interface StateMessage<S, A extends Action<unknown>> {
+interface StateMessage<S, A extends Action<string>> {
   readonly type: 'STATE';
   readonly payload: LiftedState<S, A, unknown>;
   readonly source: typeof source;
@@ -369,7 +369,7 @@ interface StopMessage {
   readonly instanceId: number;
 }
 
-type ToContentScriptMessage<S, A extends Action<unknown>> =
+type ToContentScriptMessage<S, A extends Action<string>> =
   | LiftedMessage
   | PartialStateMessage<S, A>
   | ExportMessage<S, A>
@@ -380,7 +380,7 @@ type ToContentScriptMessage<S, A extends Action<unknown>> =
   | GetReportMessage
   | StopMessage;
 
-export function toContentScript<S, A extends Action<unknown>>(
+export function toContentScript<S, A extends Action<string>>(
   message: ToContentScriptMessage<S, A>,
   serializeState?: Serialize | undefined,
   serializeAction?: Serialize | undefined,
@@ -425,7 +425,7 @@ export function toContentScript<S, A extends Action<unknown>>(
   }
 }
 
-export function sendMessage<S, A extends Action<unknown>>(
+export function sendMessage<S, A extends Action<string>>(
   action: StructuralPerformAction<A> | StructuralPerformAction<A>[],
   state: LiftedState<S, A, unknown>,
   config: Config,
@@ -496,7 +496,7 @@ export function setListener(
 }
 
 const liftListener =
-  <S, A extends Action<unknown>>(
+  <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
     config: Config,
   ) =>
@@ -520,15 +520,15 @@ export function disconnect() {
 }
 
 export interface ConnectResponse {
-  init: <S, A extends Action<unknown>>(
+  init: <S, A extends Action<string>>(
     state: S,
     liftedData?: LiftedState<S, A, unknown>,
   ) => void;
-  subscribe: <S, A extends Action<unknown>>(
+  subscribe: <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
   ) => (() => void) | undefined;
   unsubscribe: () => void;
-  send: <S, A extends Action<unknown>>(
+  send: <S, A extends Action<string>>(
     action: A,
     state: LiftedState<S, A, unknown>,
   ) => void;
@@ -550,8 +550,8 @@ export function connect(preConfig: Config): ConnectResponse {
   const localFilter = getLocalFilter(config);
   const autoPause = config.autoPause;
   let isPaused = autoPause;
-  let delayedActions: StructuralPerformAction<Action<unknown>>[] = [];
+  let delayedActions: StructuralPerformAction<Action<string>>[] = [];
-  let delayedStates: LiftedState<unknown, Action<unknown>, unknown>[] = [];
+  let delayedStates: LiftedState<unknown, Action<string>, unknown>[] = [];
 
   const rootListener = (action: ContentScriptToPageScriptMessage) => {
     if (autoPause) {
@@ -574,7 +574,7 @@ export function connect(preConfig: Config): ConnectResponse {
 
   listeners[id] = [rootListener];
 
-  const subscribe = <S, A extends Action<unknown>>(
+  const subscribe = <S, A extends Action<string>>(
     listener: (message: ListenerMessage<S, A>) => void,
   ) => {
     if (!listener) return undefined;
@@ -600,7 +600,7 @@ export function connect(preConfig: Config): ConnectResponse {
     delayedStates = [];
   }, latency);
 
-  const send = <S, A extends Action<unknown>>(
+  const send = <S, A extends Action<string>>(
     action: A,
     state: LiftedState<S, A, unknown>,
   ) => {
@@ -643,7 +643,7 @@ export function connect(preConfig: Config): ConnectResponse {
     );
   };
 
-  const init = <S, A extends Action<unknown>>(
+  const init = <S, A extends Action<string>>(
     state: S,
     liftedData?: LiftedState<S, A, unknown>,
   ) => {

extension/src/pageScript/api/openWindow.ts

@@ -3,7 +3,7 @@ import type { PageScriptToContentScriptMessage } from './index';
 
 export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
 
-function post<S, A extends Action<unknown>>(
+function post<S, A extends Action<string>>(
   message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');

extension/src/pageScript/enhancerStore.ts

@@ -18,9 +18,9 @@ declare global {
 
 export default function configureStore<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
-  MonitorAction extends Action<unknown>,
+  MonitorAction extends Action<string>,
 >(
   next: StoreEnhancerStoreCreator,
   monitorReducer: Reducer<MonitorState, MonitorAction>,

extension/src/pageScript/index.ts

@@ -56,7 +56,7 @@ import type { ContentScriptToPageScriptMessage } from '../contentScript';
 
 type EnhancedStoreWithInitialDispatch<
   S,
-  A extends Action<unknown>,
+  A extends Action<string>,
   MonitorState,
 > = EnhancedStore<S, A, MonitorState> & { initialDispatch: Dispatch<A> };
 
@@ -64,7 +64,7 @@ const source = '@devtools-page';
 let stores: {
   [K in string | number]: EnhancedStoreWithInitialDispatch<
     unknown,
-    Action<unknown>,
+    Action<string>,
     unknown
   >;
 } = {};
@@ -97,18 +97,18 @@ export interface ConfigWithExpandedMaxAge {
   readonly actionsAllowlist?: string | readonly string[];
   serialize?: boolean | SerializeWithImmutable;
   readonly stateSanitizer?: <S>(state: S, index?: number) => S;
-  readonly actionSanitizer?: <A extends Action<unknown>>(
+  readonly actionSanitizer?: <A extends Action<string>>(
     action: A,
     id?: number,
   ) => A;
-  readonly predicate?: <S, A extends Action<unknown>>(
+  readonly predicate?: <S, A extends Action<string>>(
     state: S,
     action: A,
   ) => boolean;
   readonly latency?: number;
   readonly maxAge?:
     | number
-    | (<S, A extends Action<unknown>>(
+    | (<S, A extends Action<string>>(
         currentLiftedAction: LiftedAction<S, A, unknown>,
         previousLiftedState: LiftedState<S, A, unknown> | undefined,
       ) => number);
@@ -123,9 +123,9 @@ export interface ConfigWithExpandedMaxAge {
   readonly autoPause?: boolean;
   readonly features?: Features;
   readonly type?: string;
-  readonly getActionType?: <A extends Action<unknown>>(action: A) => A;
+  readonly getActionType?: <A extends Action<string>>(action: A) => A;
   readonly actionCreators?: {
-    readonly [key: string]: ActionCreator<Action<unknown>>;
+    readonly [key: string]: ActionCreator<Action<string>>;
   };
 }
 
@@ -137,7 +137,7 @@ interface ReduxDevtoolsExtension {
   (config?: Config): StoreEnhancer;
   open: (position?: Position) => void;
   notifyErrors: (onError?: () => boolean) => void;
-  send: <S, A extends Action<unknown>>(
+  send: <S, A extends Action<string>>(
     action: StructuralPerformAction<A> | StructuralPerformAction<A>[],
     state: LiftedState<S, A, unknown>,
     config: Config,
@@ -158,7 +158,7 @@ declare global {
   }
 }
 
-function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
+function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<string>>(
   config?: Config,
 ): StoreEnhancer {
   /* eslint-disable no-param-reassign */

extension/src/pageScriptWrap.ts

@@ -1,8 +1,10 @@
+// @ts-ignore
+import script from '../dist/page.bundle.js';
+
 let s = document.createElement('script');
 s.type = 'text/javascript';
 
 if (process.env.NODE_ENV === 'production') {
-  const { default: script } = require('raw-loader!../dist/page.bundle.js');
   s.appendChild(document.createTextNode(script));
   (document.head || document.documentElement).appendChild(s);
   s.parentNode!.removeChild(s);

extension/src/remote/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
-import './remote.pug';
-
 chrome.storage.local.get(
   {
     'select-monitor': 'InspectorMonitor',

extension/src/remote/remote.pug

@@ -8,4 +8,5 @@ html
 
   body
     #root
+    link(href='/remote.bundle.css', rel='stylesheet')
     script(src='/remote.bundle.js')

extension/src/window/index.tsx

@@ -7,8 +7,6 @@ import App from '../app/App';
 import configureStore from './store/windowStore';
 import type { MonitorMessage } from '../background/store/apiMiddleware';
 
-import './window.pug';
-
 const position = location.hash;
 
 chrome.runtime.getBackgroundPage((window) => {
@@ -35,4 +33,5 @@ chrome.runtime.getBackgroundPage((window) => {
   );
 });
 
+if (position === '#popup') document.body.style.minWidth = '760px';
 if (position !== '#popup') document.body.style.minHeight = '100%';

extension/src/window/window.pug

@@ -14,4 +14,5 @@ html
           height=300, width=350,
           style='position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -175px;'
         )
+    link(href='/window.bundle.css', rel='stylesheet')
     script(src='/window.bundle.js')

extension/test/app/containers/App.spec.js

@@ -37,8 +37,6 @@ describe('App container', () => {
       </Provider>,
     );
     const actionList = screen.getByTestId('actionList');
-    expect(
+    expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();
-      within(actionList).getByTestId('actionListRows'),
-    ).toBeEmptyDOMElement();
   });
 });

extension/test/chrome/extension.spec.js

@@ -1,10 +1,8 @@
 import { resolve } from 'path';
 import webdriver from 'selenium-webdriver';
 import chrome from 'selenium-webdriver/chrome';
-import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
-const port = 9515;
 const path = resolve(__dirname, '..', '..', 'dist');
 const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 const actionsPattern =
@@ -14,12 +12,11 @@ describe('Chrome extension', function () {
   let driver;
 
   beforeAll(async () => {
-    chromedriver.start();
-    await delay(2000);
     driver = new webdriver.Builder()
-      .usingServer(`http://localhost:${port}`)
       .setChromeOptions(
-        new chrome.Options().addArguments(`load-extension=${path}`),
+        new chrome.Options()
+          .setBrowserVersion('stable')
+          .addArguments(`load-extension=${path}`),
       )
       .forBrowser('chrome')
       .build();
@@ -27,7 +24,6 @@ describe('Chrome extension', function () {
 
   afterAll(async () => {
     await driver.quit();
-    chromedriver.stop();
   });
 
   it("should open extension's window", async () => {
@@ -44,16 +40,14 @@ describe('Chrome extension', function () {
   it("should contain inspector monitor's component", async () => {
     await delay(1000);
     const val = await driver
-      .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
+      .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
     expect(val).toBeDefined();
   });
 
   it('should contain an empty actions list', async () => {
     const val = await driver
-      .findElement(
+      .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]'))
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
-      )
       .getText();
     expect(val).toBe('');
   });
@@ -63,7 +57,7 @@ describe('Chrome extension', function () {
   );
 
   it('should get actions list', async () => {
-    const url = 'http://zalmoxisus.github.io/examples/router/';
+    const url = 'https://zalmoxisus.github.io/examples/router/';
     await driver.executeScript(`window.open('${url}')`);
     await delay(2000);
 
@@ -76,9 +70,7 @@ describe('Chrome extension', function () {
 
     const result = await driver.wait(
       driver
-        .findElement(
+        .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]'))
-          webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
-        )
         .getText()
         .then((val) => {
           return actionsPattern.test(val);

extension/test/electron/devpanel.spec.js

@@ -5,7 +5,6 @@ import electronPath from 'electron';
 import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
-const port = 9515;
 const devPanelPath =
   'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html';
 
@@ -16,7 +15,7 @@ describe('DevTools panel for Electron', function () {
     chromedriver.start();
     await delay(1000);
     driver = new webdriver.Builder()
-      .usingServer(`http://localhost:${port}`)
+      .usingServer('http://localhost:9515')
       .setChromeOptions(
         new chrome.Options()
           .setChromeBinaryPath(electronPath)
@@ -90,7 +89,7 @@ describe('DevTools panel for Electron', function () {
   it('should contain INIT action', async () => {
     const element = await driver.wait(
       webdriver.until.elementLocated(
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
+        webdriver.By.xpath('//div[@data-testid="actionListRows"]'),
       ),
       5000,
       'Element not found',
@@ -101,7 +100,7 @@ describe('DevTools panel for Electron', function () {
 
   it("should contain Inspector monitor's component", async () => {
     const val = await driver
-      .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
+      .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
     expect(val).toBeDefined();
   });

extension/webpack.config.js

@@ -1,81 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const CopyPlugin = require('copy-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = function (env) {
-  return {
-    mode: env.production ? 'production' : 'development',
-    devtool: env.production ? undefined : 'eval-source-map',
-    entry: {
-      background: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/background/index'),
-      ],
-      options: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/options/index'),
-      ],
-      window: [path.resolve(__dirname, 'src/window/index')],
-      remote: [path.resolve(__dirname, 'src/remote/index')],
-      devpanel: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/devpanel/index'),
-      ],
-      devtools: path.resolve(__dirname, 'src/devtools/index'),
-      content: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/contentScript/index'),
-      ],
-      page: path.join(__dirname, 'src/pageScript'),
-      ...(env.production
-        ? {}
-        : { pagewrap: path.resolve(__dirname, 'src/pageScriptWrap') }),
-    },
-    output: {
-      filename: '[name].bundle.js',
-    },
-    plugins: [
-      new webpack.DefinePlugin({
-        'process.env.BABEL_ENV': JSON.stringify(process.env.NODE_ENV),
-      }),
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          configFile: 'tsconfig.json',
-        },
-      }),
-      new CopyPlugin({
-        patterns: [
-          {
-            from: path.join(__dirname, 'chrome/manifest.json'),
-            to: path.join(__dirname, 'dist/manifest.json'),
-          },
-          {
-            from: path.join(__dirname, 'src/assets'),
-            to: path.join(__dirname, 'dist'),
-          },
-        ],
-      }),
-    ],
-    resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.(js|ts)x?$/,
-          use: 'babel-loader',
-          exclude: /node_modules/,
-        },
-        {
-          test: /\.css?$/,
-          use: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.pug$/,
-          use: ['file-loader?name=[name].html', 'pug-html-loader'],
-        },
-      ],
-    },
-  };
-};

extension/wrap.webpack.config.js

@@ -1,31 +0,0 @@
-const path = require('path');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'),
-  },
-  output: {
-    filename: '[name].bundle.js',
-  },
-  plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        configFile: 'tsconfig.json',
-      },
-    }),
-  ],
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts)x?$/,
-        use: 'babel-loader',
-        exclude: /(node_modules|dist\/page\.bundle)/,
-      },
-    ],
-  },
-};

package.json

@@ -1,21 +1,21 @@
 {
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.22.9",
+    "@babel/eslint-parser": "^7.24.1",
-    "@changesets/cli": "^2.26.2",
+    "@changesets/cli": "^2.27.1",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@nrwl/nx-cloud": "^18.0.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "eslint": "^8.46.0",
+    "@typescript-eslint/parser": "^7.4.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.6.2",
+    "jest": "^29.7.0",
-    "prettier": "3.0.1",
+    "nx": "^18.1.3",
-    "typescript": "~5.1.6",
+    "prettier": "3.2.5",
-    "nx": "^16.6.0",
+    "typescript": "~5.3.3"
-    "@nrwl/nx-cloud": "^16.2.0"
   },
   "scripts": {
     "format": "prettier --write .",
@@ -39,10 +39,5 @@
     "packages/redux-devtools-rtk-query-monitor/demo",
     "packages/redux-devtools-slider-monitor/examples/todomvc"
   ],
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.15.5"
-  "pnpm": {
-    "overrides": {
-      "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
-    }
-  }
 }

packages/d3-state-visualizer/.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
       extends: '../../eslintrc.ts.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
+        project: true,
       },
     },
   ],

packages/d3-state-visualizer/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 3.0.0
+
+### Major Changes
+
+- 191d419: Convert d3 packages to ESM
+
+### Patch Changes
+
+- Updated dependencies [191d419]
+  - d3tooltip@4.0.0
+  - map2tree@4.0.0
+
 ## 2.0.0
 
 ### Major Changes

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/examples/tree/.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   extends: '../../../../eslintrc.ts.base.json',
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+    project: true,
   },
   overrides: [
     {

packages/d3-state-visualizer/examples/tree/CHANGELOG.md

@@ -1,5 +1,13 @@
 # d3-state-visualizer-tree-example
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [191d419]
+  - d3-state-visualizer@3.0.0
+  - map2tree@4.0.0
+
 ## 0.1.5
 
 ### Patch Changes

packages/d3-state-visualizer/examples/tree/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "d3-state-visualizer-tree-example",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Visualize your app state as a tree",
   "keywords": [
     "d3",
@@ -25,26 +25,26 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "d3-state-visualizer": "^2.0.0",
+    "d3-state-visualizer": "^3.0.0",
-    "map2tree": "^3.0.0"
+    "map2tree": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.24.3",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-typescript": "^7.24.1",
-    "@types/node": "^18.17.3",
+    "@types/node": "^20.11.30",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.46.0",
+    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "html-webpack-plugin": "^5.5.3",
+    "html-webpack-plugin": "^5.6.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
-    "typescript": "~5.1.6",
+    "typescript": "~5.3.3",
-    "webpack": "^5.88.2",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   }
 }

packages/d3-state-visualizer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-state-visualizer",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Visualize your app state with a range of reusable charts",
   "keywords": [
     "d3",
@@ -20,46 +20,37 @@
     "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.22.6",
+    "@types/d3": "^7.4.3",
-    "@types/d3": "^7.4.0",
+    "d3": "^7.9.0",
-    "d3": "^7.8.5",
+    "d3tooltip": "^4.0.0",
-    "d3tooltip": "^3.0.0",
     "deepmerge": "^4.3.1",
-    "map2tree": "^3.0.0",
+    "map2tree": "^4.0.0",
-    "ramda": "^0.29.0"
+    "ramda": "^0.29.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@types/ramda": "^0.29.11",
-    "@babel/core": "^7.22.9",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@babel/eslint-parser": "^7.22.9",
+    "@typescript-eslint/parser": "^7.4.0",
-    "@babel/preset-env": "^7.22.9",
+    "eslint": "^8.57.0",
-    "@babel/preset-typescript": "^7.22.5",
+    "eslint-config-prettier": "^9.1.0",
-    "@types/ramda": "^0.29.3",
+    "rimraf": "^5.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "typescript": "~5.3.3"
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
-    "rimraf": "^5.0.1",
-    "typescript": "~5.1.6"
   }
 }

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';
 
@@ -473,9 +473,10 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
 
       // update the links
       const link = vis
-        .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
+        .selectAll<
-          'path.link',
+          SVGPathElement,
-        )
+          HierarchyPointLink<InternalNode>
+        >('path.link')
         .data(links, (d) => d.target.data.id);
 
       // enter any new links at the parent's previous position

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/.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
       extends: '../../eslintrc.ts.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
+        project: true,
       },
     },
   ],

packages/d3tooltip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 4.0.0
+
+### Major Changes
+
+- 191d419: Convert d3 packages to ESM
+
+## 3.0.1
+
+### Patch Changes
+
+- 7f5bddbd: Widen peer dependencies
+
 ## 3.0.0
 
 ### Major Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "d3tooltip",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A highly configurable tooltip for d3",
   "keywords": [
     "d3",
@@ -16,45 +16,34 @@
     "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.22.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@types/d3": "^7.4.3",
-    "@babel/core": "^7.22.9",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@babel/eslint-parser": "^7.22.9",
+    "@typescript-eslint/parser": "^7.4.0",
-    "@babel/preset-env": "^7.22.9",
+    "d3": "^7.9.0",
-    "@babel/preset-typescript": "^7.22.5",
+    "eslint": "^8.57.0",
-    "@types/d3": "^7.4.0",
+    "eslint-config-prettier": "^9.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "rimraf": "^5.0.5",
-    "@typescript-eslint/parser": "^5.62.0",
+    "typescript": "~5.3.3"
-    "d3": "^7.8.5",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
-    "rimraf": "^5.0.1",
-    "typescript": "~5.1.6"
   },
   "peerDependencies": {
-    "@types/d3": "^7.4.0",
+    "@types/d3": "^7.4.3",
-    "d3": "^7.8.5"
+    "d3": "^7.9.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/.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
       extends: '../../eslintrc.ts.jest.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
+        project: true,
       },
     },
     {

packages/map2tree/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.0.0
+
+### Major Changes
+
+- 191d419: Convert d3 packages to ESM
+
 ## 3.0.0
 
 ### Major Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "map2tree",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Utility for mapping maps to trees",
   "keywords": [
     "map2tree",
@@ -19,47 +19,38 @@
     "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.22.6",
+    "lodash-es": "^4.17.21"
-    "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@types/jest": "^29.5.12",
-    "@babel/core": "^7.22.9",
+    "@types/lodash-es": "^4.17.12",
-    "@babel/eslint-parser": "^7.22.9",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@babel/preset-env": "^7.22.9",
+    "@typescript-eslint/parser": "^7.4.0",
-    "@babel/preset-typescript": "^7.22.5",
+    "eslint": "^8.57.0",
-    "@types/jest": "^29.5.3",
+    "eslint-config-prettier": "^9.1.0",
-    "@types/lodash": "^4.14.196",
+    "eslint-plugin-jest": "^27.9.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "immutable": "^4.3.5",
-    "@typescript-eslint/parser": "^5.62.0",
+    "jest": "^29.7.0",
-    "eslint": "^8.46.0",
+    "rimraf": "^5.0.5",
-    "eslint-config-prettier": "^9.0.0",
+    "ts-jest": "^29.1.2",
-    "eslint-plugin-jest": "^27.2.3",
+    "typescript": "~5.3.3"
-    "immutable": "^4.3.2",
-    "jest": "^29.6.2",
-    "rimraf": "^5.0.1",
-    "ts-jest": "^29.1.1",
-    "typescript": "~5.1.6"
   }
 }

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/test/map2tree.spec.ts

@@ -1,4 +1,4 @@
-import { map2tree, Node } from '../src';
+import { map2tree, Node } from '../src/index.js';
 import * as immutable from 'immutable';
 
 test('# rootNodeKey', () => {

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/react-base16-styling/.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
       extends: '../../eslintrc.ts.jest.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.json'],
+        project: true,
       },
     },
     {

packages/react-base16-styling/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.10.0
+
+### Minor Changes
+
+- bbb1a40: Convert React packages to ESM
+
 ## 0.9.0
 
 - Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997).

packages/react-base16-styling/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/react-base16-styling/babel.config.json

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

packages/react-base16-styling/jest.config.cjs

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

packages/react-base16-styling/jest.config.js

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

packages/react-base16-styling/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-base16-styling",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "React styling with base16 color scheme support",
   "keywords": [
     "react",
@@ -18,54 +18,42 @@
     "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": "git+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.22.6",
+    "@types/lodash": "^4.17.0",
-    "@types/base16": "^1.0.2",
-    "@types/lodash": "^4.14.196",
-    "base16": "^1.0.0",
     "color": "^4.2.3",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
-    "lodash.curry": "^4.1.1"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@types/color": "^3.0.6",
-    "@babel/core": "^7.22.9",
+    "@types/jest": "^29.5.12",
-    "@babel/eslint-parser": "^7.22.9",
+    "@types/lodash-es": "^4.17.12",
-    "@babel/plugin-transform-runtime": "^7.22.9",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@babel/preset-env": "^7.22.9",
+    "@typescript-eslint/parser": "^7.4.0",
-    "@babel/preset-typescript": "^7.22.5",
+    "eslint": "^8.57.0",
-    "@types/color": "^3.0.3",
+    "eslint-config-prettier": "^9.1.0",
-    "@types/jest": "^29.5.3",
+    "eslint-plugin-jest": "^27.9.0",
-    "@types/lodash.curry": "^4.1.7",
+    "jest": "^29.7.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "jest-environment-jsdom": "^29.7.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "rimraf": "^5.0.5",
-    "eslint": "^8.46.0",
+    "ts-jest": "^29.1.2",
-    "eslint-config-prettier": "^9.0.0",
+    "typescript": "~5.3.3"
-    "eslint-plugin-jest": "^27.2.3",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "rimraf": "^5.0.1",
-    "ts-jest": "^29.1.1",
-    "typescript": "~5.1.6"
   }
 }

packages/react-base16-styling/src/index.ts

@@ -1,10 +1,8 @@
-import * as base16 from 'base16';
-import { Base16Theme } from 'base16';
 import Color from 'color';
 import * as CSS from 'csstype';
-import curry from 'lodash.curry';
+import { curry } from 'lodash-es';
 import type { CurriedFunction3 } from 'lodash';
-import { Color as ColorTuple, yuv2rgb, rgb2yuv } from './colorConverters';
+import { Color as ColorTuple, yuv2rgb, rgb2yuv } from './colorConverters.js';
 import {
   Styling,
   StylingConfig,
@@ -12,7 +10,9 @@ import {
   StylingValue,
   StylingValueFunction,
   Theme,
-} from './types';
+} from './types.js';
+import { base16Themes as base16 } from './themes/index.js';
+import type { Base16Theme } from './themes/index.js';
 
 const DEFAULT_BASE16 = base16.default;
 
@@ -272,7 +272,7 @@ export const getBase16Theme = (
     if (base16Themes) {
       theme = base16Themes[themeName];
     } else {
-      theme = base16[themeName as keyof typeof base16];
+      theme = base16[themeName as keyof typeof base16] as Base16Theme;
     }
     if (modifier === 'inverted') {
       theme = invertBase16Theme(theme);
@@ -308,4 +308,5 @@ export const invertTheme = (theme: Theme | undefined): Theme | undefined => {
 };
 
 export type { Base16Theme };
-export * from './types';
+export { base16 as base16Themes };
+export * from './types.js';

packages/react-base16-styling/src/themes/apathy.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'apathy',
+  author: 'jannik siebert (https://github.com/janniks)',
+  base00: '#031A16',
+  base01: '#0B342D',
+  base02: '#184E45',
+  base03: '#2B685E',
+  base04: '#5F9C92',
+  base05: '#81B5AC',
+  base06: '#A7CEC8',
+  base07: '#D2E7E4',
+  base08: '#3E9688',
+  base09: '#3E7996',
+  base0A: '#3E4C96',
+  base0B: '#883E96',
+  base0C: '#963E4C',
+  base0D: '#96883E',
+  base0E: '#4C963E',
+  base0F: '#3E965B',
+};

packages/react-base16-styling/src/themes/ashes.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'ashes',
+  author: 'jannik siebert (https://github.com/janniks)',
+  base00: '#1C2023',
+  base01: '#393F45',
+  base02: '#565E65',
+  base03: '#747C84',
+  base04: '#ADB3BA',
+  base05: '#C7CCD1',
+  base06: '#DFE2E5',
+  base07: '#F3F4F5',
+  base08: '#C7AE95',
+  base09: '#C7C795',
+  base0A: '#AEC795',
+  base0B: '#95C7AE',
+  base0C: '#95AEC7',
+  base0D: '#AE95C7',
+  base0E: '#C795AE',
+  base0F: '#C79595',
+};

packages/react-base16-styling/src/themes/atelier-dune.ts

@@ -0,0 +1,21 @@
+export default {
+  scheme: 'atelier dune',
+  author:
+    'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)',
+  base00: '#20201d',
+  base01: '#292824',
+  base02: '#6e6b5e',
+  base03: '#7d7a68',
+  base04: '#999580',
+  base05: '#a6a28c',
+  base06: '#e8e4cf',
+  base07: '#fefbec',
+  base08: '#d73737',
+  base09: '#b65611',
+  base0A: '#cfb017',
+  base0B: '#60ac39',
+  base0C: '#1fad83',
+  base0D: '#6684e1',
+  base0E: '#b854d4',
+  base0F: '#d43552',
+};

packages/react-base16-styling/src/themes/atelier-forest.ts

@@ -0,0 +1,21 @@
+export default {
+  scheme: 'atelier forest',
+  author:
+    'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)',
+  base00: '#1b1918',
+  base01: '#2c2421',
+  base02: '#68615e',
+  base03: '#766e6b',
+  base04: '#9c9491',
+  base05: '#a8a19f',
+  base06: '#e6e2e0',
+  base07: '#f1efee',
+  base08: '#f22c40',
+  base09: '#df5320',
+  base0A: '#d5911a',
+  base0B: '#5ab738',
+  base0C: '#00ad9c',
+  base0D: '#407ee7',
+  base0E: '#6666ea',
+  base0F: '#c33ff3',
+};

packages/react-base16-styling/src/themes/atelier-heath.ts

@@ -0,0 +1,21 @@
+export default {
+  scheme: 'atelier heath',
+  author:
+    'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)',
+  base00: '#1b181b',
+  base01: '#292329',
+  base02: '#695d69',
+  base03: '#776977',
+  base04: '#9e8f9e',
+  base05: '#ab9bab',
+  base06: '#d8cad8',
+  base07: '#f7f3f7',
+  base08: '#ca402b',
+  base09: '#a65926',
+  base0A: '#bb8a35',
+  base0B: '#379a37',
+  base0C: '#159393',
+  base0D: '#516aec',
+  base0E: '#7b59c0',
+  base0F: '#cc33cc',
+};

packages/react-base16-styling/src/themes/atelier-lakeside.ts

@@ -0,0 +1,21 @@
+export default {
+  scheme: 'atelier lakeside',
+  author:
+    'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)',
+  base00: '#161b1d',
+  base01: '#1f292e',
+  base02: '#516d7b',
+  base03: '#5a7b8c',
+  base04: '#7195a8',
+  base05: '#7ea2b4',
+  base06: '#c1e4f6',
+  base07: '#ebf8ff',
+  base08: '#d22d72',
+  base09: '#935c25',
+  base0A: '#8a8a0f',
+  base0B: '#568c3b',
+  base0C: '#2d8f6f',
+  base0D: '#257fad',
+  base0E: '#5d5db1',
+  base0F: '#b72dd2',
+};

packages/react-base16-styling/src/themes/atelier-seaside.ts

@@ -0,0 +1,21 @@
+export default {
+  scheme: 'atelier seaside',
+  author:
+    'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)',
+  base00: '#131513',
+  base01: '#242924',
+  base02: '#5e6e5e',
+  base03: '#687d68',
+  base04: '#809980',
+  base05: '#8ca68c',
+  base06: '#cfe8cf',
+  base07: '#f0fff0',
+  base08: '#e6193c',
+  base09: '#87711d',
+  base0A: '#c3c322',
+  base0B: '#29a329',
+  base0C: '#1999b3',
+  base0D: '#3d62f5',
+  base0E: '#ad2bee',
+  base0F: '#e619c3',
+};

packages/react-base16-styling/src/themes/bespin.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'bespin',
+  author: 'jan t. sott',
+  base00: '#28211c',
+  base01: '#36312e',
+  base02: '#5e5d5c',
+  base03: '#666666',
+  base04: '#797977',
+  base05: '#8a8986',
+  base06: '#9d9b97',
+  base07: '#baae9e',
+  base08: '#cf6a4c',
+  base09: '#cf7d34',
+  base0A: '#f9ee98',
+  base0B: '#54be0d',
+  base0C: '#afc4db',
+  base0D: '#5ea6ea',
+  base0E: '#9b859d',
+  base0F: '#937121',
+};

packages/react-base16-styling/src/themes/brewer.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'brewer',
+  author: 'timothée poisot (http://github.com/tpoisot)',
+  base00: '#0c0d0e',
+  base01: '#2e2f30',
+  base02: '#515253',
+  base03: '#737475',
+  base04: '#959697',
+  base05: '#b7b8b9',
+  base06: '#dadbdc',
+  base07: '#fcfdfe',
+  base08: '#e31a1c',
+  base09: '#e6550d',
+  base0A: '#dca060',
+  base0B: '#31a354',
+  base0C: '#80b1d3',
+  base0D: '#3182bd',
+  base0E: '#756bb1',
+  base0F: '#b15928',
+};

packages/react-base16-styling/src/themes/bright.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'bright',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: '#000000',
+  base01: '#303030',
+  base02: '#505050',
+  base03: '#b0b0b0',
+  base04: '#d0d0d0',
+  base05: '#e0e0e0',
+  base06: '#f5f5f5',
+  base07: '#ffffff',
+  base08: '#fb0120',
+  base09: '#fc6d24',
+  base0A: '#fda331',
+  base0B: '#a1c659',
+  base0C: '#76c7b7',
+  base0D: '#6fb3d2',
+  base0E: '#d381c3',
+  base0F: '#be643c',
+};

packages/react-base16-styling/src/themes/chalk.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'chalk',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: '#151515',
+  base01: '#202020',
+  base02: '#303030',
+  base03: '#505050',
+  base04: '#b0b0b0',
+  base05: '#d0d0d0',
+  base06: '#e0e0e0',
+  base07: '#f5f5f5',
+  base08: '#fb9fb1',
+  base09: '#eda987',
+  base0A: '#ddb26f',
+  base0B: '#acc267',
+  base0C: '#12cfc0',
+  base0D: '#6fc2ef',
+  base0E: '#e1a3ee',
+  base0F: '#deaf8f',
+};

packages/react-base16-styling/src/themes/codeschool.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'codeschool',
+  author: 'brettof86',
+  base00: '#232c31',
+  base01: '#1c3657',
+  base02: '#2a343a',
+  base03: '#3f4944',
+  base04: '#84898c',
+  base05: '#9ea7a6',
+  base06: '#a7cfa3',
+  base07: '#b5d8f6',
+  base08: '#2a5491',
+  base09: '#43820d',
+  base0A: '#a03b1e',
+  base0B: '#237986',
+  base0C: '#b02f30',
+  base0D: '#484d79',
+  base0E: '#c59820',
+  base0F: '#c98344',
+};

packages/react-base16-styling/src/themes/colors.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'colors',
+  author: 'mrmrs (http://clrs.cc)',
+  base00: '#111111',
+  base01: '#333333',
+  base02: '#555555',
+  base03: '#777777',
+  base04: '#999999',
+  base05: '#bbbbbb',
+  base06: '#dddddd',
+  base07: '#ffffff',
+  base08: '#ff4136',
+  base09: '#ff851b',
+  base0A: '#ffdc00',
+  base0B: '#2ecc40',
+  base0C: '#7fdbff',
+  base0D: '#0074d9',
+  base0E: '#b10dc9',
+  base0F: '#85144b',
+};

packages/react-base16-styling/src/themes/default.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'default',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: '#181818',
+  base01: '#282828',
+  base02: '#383838',
+  base03: '#585858',
+  base04: '#b8b8b8',
+  base05: '#d8d8d8',
+  base06: '#e8e8e8',
+  base07: '#f8f8f8',
+  base08: '#ab4642',
+  base09: '#dc9656',
+  base0A: '#f7ca88',
+  base0B: '#a1b56c',
+  base0C: '#86c1b9',
+  base0D: '#7cafc2',
+  base0E: '#ba8baf',
+  base0F: '#a16946',
+};

packages/react-base16-styling/src/themes/eighties.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'eighties',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: '#2d2d2d',
+  base01: '#393939',
+  base02: '#515151',
+  base03: '#747369',
+  base04: '#a09f93',
+  base05: '#d3d0c8',
+  base06: '#e8e6df',
+  base07: '#f2f0ec',
+  base08: '#f2777a',
+  base09: '#f99157',
+  base0A: '#ffcc66',
+  base0B: '#99cc99',
+  base0C: '#66cccc',
+  base0D: '#6699cc',
+  base0E: '#cc99cc',
+  base0F: '#d27b53',
+};