Merge branch 'main' into renovate/nanoid-4.x

.changeset/friendly-coats-trade.md

@@ -0,0 +1,8 @@
+---
+'d3-state-visualizer': major
+---
+
+- Remove UMD build.
+- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
+- The shape of the argument passed to the `onClickText` option has been updated.
+- Rename `InputOptions` to `Options`, `Primitive` to `StyleValue`, and `NodeWithId` to `HierarchyPointNode<Node>`.

.changeset/slimy-elephants-flash.md

@@ -0,0 +1,6 @@
+---
+'@redux-devtools/chart-monitor': major
+---
+
+- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
+- The shape of the argument passed to the `onClickText` option has been updated.

.changeset/spicy-olives-compete.md

@@ -0,0 +1,10 @@
+---
+'d3tooltip': major
+---
+
+- Remove UMD build.
+- Upgrade d3 peer dependency from v3 to v7.
+- Remove `attr` configuration method.
+- Rename `style` configuration method to `styles` and move to options.
+- Move `text` configuration method to options.
+- Remove d3 parameter as first parameter for `tooltip`.

.changeset/weak-kings-brake.md

@@ -0,0 +1,5 @@
+---
+'map2tree': major
+---
+
+- Remove UMD build.

.github/workflows/CI.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: nrwl/nx-set-shas@v2
+      - uses: nrwl/nx-set-shas@v3
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
@@ -25,10 +25,10 @@ jobs:
       - name: Check formatting
         run: pnpm run format:check
       - name: Build
-        run: pnpm exec nx affected --target=build --parallel=3
+        run: pnpm exec nx affected --target=build --parallel=1
       - name: Lint
-        run: pnpm exec nx affected --target=lint --parallel=3
+        run: pnpm exec nx affected --target=lint --parallel=1
       - name: Test
         uses: GabrielBB/xvfb-action@v1
         with:
-          run: pnpm exec nx affected --target=test --parallel=3
+          run: pnpm exec nx affected --target=test --parallel=1

.github/workflows/release.yml

@@ -5,6 +5,8 @@ on:
     branches:
       - main
 
+permissions: write-all
+
 jobs:
   release:
     name: Release
@@ -36,3 +38,21 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Archive Chrome Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: chrome
+          path: extension/chrome/dist
+
+      - name: Archive Edge Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: edge
+          path: extension/edge/dist
+
+      - name: Archive Firefox Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: firefox
+          path: extension/firefox/dist

extension/.eslintignore

@@ -1,7 +1,3 @@
 node_modules
-build
+dist
-dev
-webpack/replace
 examples
-npm-package
-_book

extension/.gitignore

@@ -1,9 +1,2 @@
 node_modules
-npm-debug.log
+dist
-.DS_Store
-.idea/
-dist/
-build/
-dev/
-tmp/
-_book

extension/CHANGELOG.md

@@ -1,5 +1,23 @@
 # remotedev-redux-devtools-extension
 
+## 3.0.17
+
+### Patch Changes
+
+- 1aa6c4f7: Fix remounting root for devpanel
+
+## 3.0.16
+
+### Patch Changes
+
+- 20ebf725: Remove source map from page wrap bundle
+
+## 3.0.14
+
+### Patch Changes
+
+- 24f60a7a: bump min popup window width to 760px #1126 #1129
+
 ## 3.0.13
 
 ### Patch Changes

extension/README.md

@@ -57,7 +57,7 @@ const composeEnhancers =
   compose;
 ```
 
-> For TypeScript use [`redux-devtools-extension` npm package](#13-use-redux-devtools-extension-package-from-npm), which contains all the definitions, or just use `(window as any)` (see [Recipes](/docs/Recipes.md#using-in-a-typescript-project) for an example).
+> For TypeScript use [`redux-devtools-extension` npm package](#13-use-redux-devtoolsextension-package-from-npm), which contains all the definitions, or just use `(window as any)` (see [Recipes](/docs/Recipes.md#using-in-a-typescript-project) for an example).
 
 ```js
 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

extension/chrome/manifest.json

@@ -1,7 +1,6 @@
 {
-  "version": "3.0.11",
+  "version": "3.0.17",
   "name": "Redux DevTools",
-  "short_name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",
   "manifest_version": 2,

extension/docs/Troubleshooting.md

@@ -16,6 +16,8 @@ If you develop on your local filesystem, make sure to allow Redux DevTools acces
 
 Most likely you mutate the state. Check it by [adding `redux-immutable-state-invariant` middleware](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/counter/store/configureStore.js#L3).
 
+Another cause could be that you are creating multiple stores, which means that the devtools get attached to one but the application uses another. See [https://github.com/reduxjs/redux-toolkit/issues/2753](this issue).
+
 ### @@INIT or REPLACE action resets the state of the app or last actions RE-APPLIED
 
 `@@redux/REPLACE` (or `@@INIT`) is used internally when the application is hot reloaded. When you use `store.replaceReducer` the effect will be the same as for hot-reloading, where the extension is recomputing all the history again. To avoid that set [`shouldHotReload`](/docs/API/Arguments.md#shouldhotreload) parameter to `false`.

extension/edge/manifest.json

@@ -0,0 +1,67 @@
+{
+  "version": "3.0.17",
+  "name": "Redux DevTools",
+  "description": "Redux DevTools for debugging application's state changes.",
+  "homepage_url": "https://github.com/reduxjs/redux-devtools",
+  "manifest_version": 2,
+  "page_action": {
+    "default_icon": "img/logo/gray.png",
+    "default_title": "Redux DevTools",
+    "default_popup": "window.html#popup"
+  },
+  "commands": {
+    "devtools-left": {
+      "description": "DevTools window to left"
+    },
+    "devtools-right": {
+      "description": "DevTools window to right"
+    },
+    "devtools-bottom": {
+      "description": "DevTools window to bottom"
+    },
+    "devtools-remote": {
+      "description": "Remote DevTools"
+    },
+    "_execute_page_action": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+E"
+      }
+    }
+  },
+  "icons": {
+    "16": "img/logo/16x16.png",
+    "48": "img/logo/48x48.png",
+    "128": "img/logo/128x128.png"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "chrome_style": true
+  },
+  "background": {
+    "scripts": ["background.bundle.js"],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "exclude_globs": ["https://www.google*"],
+      "js": ["content.bundle.js", "pagewrap.bundle.js"],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "devtools_page": "devtools.html",
+  "web_accessible_resources": ["page.bundle.js"],
+  "externally_connectable": {
+    "ids": ["*"]
+  },
+  "permissions": [
+    "notifications",
+    "contextMenus",
+    "storage",
+    "file:///*",
+    "http://*/*",
+    "https://*/*"
+  ],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
+}

extension/firefox/manifest.json

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

extension/jest.config.js

@@ -5,4 +5,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)',
+  ],
 };

extension/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.0.13",
+  "version": "3.0.17",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
@@ -11,20 +11,18 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack --config webpack/dev.config.babel.js",
+    "start": "webpack --env development --watch",
-    "build": "pnpm run build:extension && pnpm run build:firefox",
+    "build": "pnpm run build:extension && pnpm run build:chrome && pnpm run build:edge && pnpm run build:firefox",
-    "build:extension": "rimraf build/extension && webpack --config webpack/wrap.config.babel.js && webpack --config webpack/prod.config.babel.js",
+    "build:extension": "webpack --env production && webpack --config wrap.webpack.config.js",
-    "build:firefox": "webpack --config webpack/prod.firefox.config.babel.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",
-    "precompress:extension": "pnpm run lint && pnpm run test:app && pnpm run build:extension && pnpm run test:chrome && pnpm run test:electron",
+    "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
-    "precompress:firefox": "pnpm run lint && pnpm run build:firefox && pnpm run test:app",
-    "compress:extension": "bestzip build/extension.zip build/extension",
-    "compress:firefox": "bestzip build/extension.zip build/extension",
-    "clean": "rimraf build && rimraf dev",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
     "test:electron": "pnpm run build:test:electron:fixture && jest test/electron",
-    "test": "pnpm run test:app && pnpm run build:extension && pnpm run test:chrome && pnpm run test:electron",
+    "test": "pnpm run test:app && pnpm run test:chrome && pnpm run test:electron",
     "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
     "type-check": "tsc --noEmit"
   },
@@ -43,56 +41,56 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "react-json-tree": "^0.17.0",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.0.5",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/preset-typescript": "^7.18.6",
-    "@babel/register": "^7.17.7",
+    "@babel/register": "^7.18.9",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
-    "@types/chrome": "^0.0.190",
+    "@types/chrome": "^0.0.206",
-    "@types/lodash": "^4.14.182",
+    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.14",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.0.9",
-    "@types/styled-components": "^5.1.25",
+    "@types/styled-components": "^5.1.26",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.0",
-    "bestzip": "^2.2.1",
+    "chromedriver": "^108.0.0",
-    "chromedriver": "^102.0.0",
     "copy-webpack-plugin": "^11.0.0",
+    "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.3",
-    "electron": "^19.0.4",
+    "electron": "^22.0.0",
-    "eslint": "^8.18.0",
+    "eslint": "^8.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "immutable": "^4.1.0",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
-    "path-browserify": "^1.0.1",
+    "jest-environment-jsdom": "^29.3.1",
     "pug-html-loader": "^1.1.5",
     "raw-loader": "^4.0.2",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "rimraf": "^3.0.2",
-    "selenium-webdriver": "^4.2.0",
+    "selenium-webdriver": "^4.7.1",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^3.3.1",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.0.3",
-    "typescript": "~4.7.4",
+    "typescript": "~4.9.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^5.0.1"
   }
 }

extension/src/app/Actions.tsx

@@ -19,8 +19,8 @@ import {
 } from '@redux-devtools/app';
 import { GoRadioTower } from 'react-icons/go';
 import { MdBorderBottom, MdBorderLeft, MdBorderRight } from 'react-icons/md';
-import { Position } from '../api/openWindow';
+import type { Position } from '../pageScript/api/openWindow';
-import { SingleMessage } from '../middlewares/api';
+import type { SingleMessage } from '../background/store/apiMiddleware';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;

extension/src/app/stores/createStore.ts

@@ -1,15 +0,0 @@
-import {
-  Action,
-  createStore,
-  PreloadedState,
-  Reducer,
-  StoreEnhancer,
-} from 'redux';
-
-export default function configureStore<S, A extends Action<unknown>>(
-  reducer: Reducer<S, A>,
-  initialState: PreloadedState<S> | undefined,
-  enhance: () => StoreEnhancer
-) {
-  return createStore(reducer, initialState, enhance());
-}

extension/src/background/index.ts

@@ -1,11 +1,9 @@
 import { Store } from 'redux';
-import configureStore, {
+import configureStore, { BackgroundAction } from './store/backgroundStore';
-  BackgroundAction,
-} from '../../../app/stores/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';
 import syncOptions from '../options/syncOptions';
-import { BackgroundState } from '../../../app/reducers/background';
+import { BackgroundState } from './store/backgroundReducer';
 
 declare global {
   interface Window {

extension/src/background/store/apiMiddleware.ts

@@ -15,28 +15,23 @@ import syncOptions, {
   Options,
   OptionsMessage,
   SyncOptions,
-} from '../../browser/extension/options/syncOptions';
+} from '../../options/syncOptions';
-import openDevToolsWindow, {
+import openDevToolsWindow, { DevToolsPosition } from '../openWindow';
-  DevToolsPosition,
+import { getReport } from '../logging';
-} from '../../browser/extension/background/openWindow';
-import { getReport } from '../../browser/extension/background/logging';
 import { Action, Dispatch, MiddlewareAPI } from 'redux';
-import {
+import type {
   ContentScriptToBackgroundMessage,
   SplitMessage,
-} from '../../browser/extension/inject/contentScript';
+} from '../../contentScript';
-import {
+import type {
   ErrorMessage,
   PageScriptToContentScriptMessageForwardedToMonitors,
   PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,
-} from '../api';
+} from '../../pageScript/api';
 import { LiftedState } from '@redux-devtools/instrument';
-import {
+import type { BackgroundAction, LiftedActionAction } from './backgroundStore';
-  BackgroundAction,
+import type { Position } from '../../pageScript/api/openWindow';
-  LiftedActionAction,
+import type { BackgroundState } from './backgroundReducer';
-} from '../stores/backgroundStore';
-import { Position } from '../api/openWindow';
-import { BackgroundState } from '../reducers/background';
 
 interface TabMessageBase {
   readonly type: string;

extension/src/background/store/backgroundReducer.ts

@@ -1,6 +1,6 @@
 import { combineReducers, Reducer } from 'redux';
 import { instances, InstancesState } from '@redux-devtools/app';
-import { BackgroundAction } from '../../stores/backgroundStore';
+import type { BackgroundAction } from './backgroundStore';
 
 export interface BackgroundState {
   readonly instances: InstancesState;

extension/src/background/store/backgroundStore.ts

@@ -5,8 +5,8 @@ import {
   LIFTED_ACTION,
   StoreActionWithoutLiftedAction,
 } from '@redux-devtools/app';
-import rootReducer, { BackgroundState } from '../reducers/background';
+import rootReducer, { BackgroundState } from './backgroundReducer';
-import api, { CONNECTED, DISCONNECTED } from '../middlewares/api';
+import api, { CONNECTED, DISCONNECTED } from './apiMiddleware';
 
 interface LiftedActionActionBase {
   action?: DispatchAction | string | CustomAction;

extension/src/contentScript/index.ts

@@ -3,12 +3,12 @@ import {
   getOptionsFromBg,
   isAllowed,
 } from '../options/syncOptions';
-import { TabMessage } from '../../../app/middlewares/api';
+import type { TabMessage } from '../background/store/apiMiddleware';
-import {
+import type {
   PageScriptToContentScriptMessage,
   PageScriptToContentScriptMessageWithoutDisconnect,
   PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,
-} from '../../../app/api';
+} from '../pageScript/api';
 import { Action } from 'redux';
 import {
   CustomAction,

extension/src/devpanel/devpanel.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title Redux DevTools
-  include ./includes/style.pug
+  include ../style.pug
   style.
     body {
       min-height: 100px;

extension/src/devpanel/index.tsx

@@ -1,15 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Persistor } from 'redux-persist';
 import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
-import App from '../../../app/containers/App';
+import App from '../app/App';
-import configureStore from '../../../app/stores/panelStore';
+import configureStore from './store/panelStore';
 
-import '../../views/devpanel.pug';
+import './devpanel.pug';
 import { Action, Store } from 'redux';
-import { PanelMessage } from '../../../app/middlewares/api';
+import type { PanelMessage } from '../background/store/apiMiddleware';
-import { StoreStateWithoutSocket } from '../../../app/reducers/panel';
+import type { StoreStateWithoutSocket } from './store/panelReducer';
 import { PersistGate } from 'redux-persist/integration/react';
 
 const position = location.hash;
@@ -20,6 +20,7 @@ const messageStyle: CSSProperties = {
 };
 
 let rendered: boolean | undefined;
+let currentRoot: Root | undefined;
 let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
 let persistor: Persistor | undefined;
 let bgConnection: chrome.runtime.Port;
@@ -27,11 +28,16 @@ let naTimeout: NodeJS.Timeout;
 
 const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
 
-function renderDevTools(root: Root) {
+function renderNodeAtRoot(node: ReactNode) {
-  root.unmount();
+  if (currentRoot) currentRoot.unmount();
+  currentRoot = createRoot(document.getElementById('root')!);
+  currentRoot.render(node);
+}
+
+function renderDevTools() {
   clearTimeout(naTimeout);
   ({ store, persistor } = configureStore(position, bgConnection));
-  root.render(
+  renderNodeAtRoot(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
@@ -41,7 +47,7 @@ function renderDevTools(root: Root) {
   rendered = true;
 }
 
-function renderNA(root: Root) {
+function renderNA() {
   if (rendered === false) return;
   rendered = false;
   naTimeout = setTimeout(() => {
@@ -74,31 +80,28 @@ function renderNA(root: Root) {
           );
         }
 
-        root.unmount();
+        renderNodeAtRoot(message);
-        root.render(message);
         store = undefined;
       });
     } else {
-      root.unmount();
+      renderNodeAtRoot(message);
-      root.render(message);
       store = undefined;
     }
   }, 3500);
 }
 
 function init(id: number) {
-  const root = createRoot(document.getElementById('root')!);
+  renderNA();
-  renderNA(root);
   bgConnection = chrome.runtime.connect({
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
     <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
       if (message.type === 'NA') {
-        if (message.id === id) renderNA(root);
+        if (message.id === id) renderNA();
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
       } else {
-        if (!rendered) renderDevTools(root);
+        if (!rendered) renderDevTools();
         store!.dispatch(message);
       }
     }

extension/src/devpanel/store/panelStore.ts

@@ -2,8 +2,8 @@ import { createStore, applyMiddleware, Reducer } from 'redux';
 import localForage from 'localforage';
 import { persistReducer, persistStore } from 'redux-persist';
 import { exportStateMiddleware, StoreAction } from '@redux-devtools/app';
-import panelDispatcher from '../middlewares/panelSync';
+import panelDispatcher from './panelSyncMiddleware';
-import rootReducer, { StoreStateWithoutSocket } from '../reducers/panel';
+import rootReducer, { StoreStateWithoutSocket } from './panelReducer';
 
 const persistConfig = {
   key: 'redux-devtools',

extension/src/devtools/index.ts

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

extension/src/options/EditorGroup.tsx

@@ -23,7 +23,7 @@ export default ({ options, saveOption }: OptionsProps) => {
         <label className="option__label" htmlFor="editor-browser">
           {navigator.userAgent.indexOf('Firefox') !== -1
             ? "Don't open in external editor"
-            : "Use browser's debugger (from Chrome devpanel only)"}
+            : "Use browser's debugger (from browser devpanel only)"}
         </label>
       </div>
 

extension/src/options/FilterGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterState } from '../../../app/api/filters';
+import { FilterState } from '../pageScript/api/filters';
 import { OptionsProps } from './Options';
 
 export default ({ options, saveOption }: OptionsProps) => {

extension/src/options/MiscellaneousGroup.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import { OptionsProps } from './Options';
 
 export default ({ options, saveOption }: OptionsProps) => {
-  const browserName = navigator.userAgent.includes('Firefox')
-    ? 'Firefox'
-    : 'Chrome';
-
   return (
     <fieldset className="option-group">
       <legend className="option-group__title">Miscellaneous</legend>
@@ -46,7 +42,7 @@ export default ({ options, saveOption }: OptionsProps) => {
           Show errors
         </label>
         <div className="option__hint">
-          Show the {browserName} notifications when errors occur in the app
+          Show the browser notifications when errors occur in the app
         </div>
       </div>
     </fieldset>

extension/src/options/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
-import '../../views/options.pug';
+import './options.pug';
 
 chrome.runtime.getBackgroundPage((background) => {
   const syncOptions = background!.syncOptions;

extension/src/options/syncOptions.ts

@@ -1,4 +1,4 @@
-import { FilterState, FilterStateValue } from '../../../app/api/filters';
+import { FilterState, FilterStateValue } from '../pageScript/api/filters';
 
 export interface Options {
   readonly useEditor: number;

extension/src/pageScript/api/importState.ts

@@ -1,9 +1,6 @@
 import jsan from 'jsan';
 import { immutableSerialize } from '@redux-devtools/serialize';
-import {
+import type { Config, SerializeWithImmutable } from '../index';
-  Config,
-  SerializeWithImmutable,
-} from '../../browser/extension/inject/pageScript';
 import Immutable from 'immutable';
 import { LiftedState } from '@redux-devtools/instrument';
 import { Action } from 'redux';

extension/src/pageScript/api/index.ts

@@ -5,15 +5,15 @@ import { getActionsArray, getLocalFilter } from '@redux-devtools/utils';
 import { isFiltered, PartialLiftedState } from './filters';
 import importState from './importState';
 import generateId from './generateInstanceId';
-import { Config } from '../../browser/extension/inject/pageScript';
+import type { Config } from '../index';
 import { Action } from 'redux';
 import { LiftedState, PerformAction } from '@redux-devtools/instrument';
 import { LibConfig } from '@redux-devtools/app';
-import {
+import type {
   ContentScriptToPageScriptMessage,
   ListenerMessage,
-} from '../../browser/extension/inject/contentScript';
+} from '../../contentScript';
-import { Position } from './openWindow';
+import type { Position } from './openWindow';
 
 const listeners: {
   [instanceId: string]:

extension/src/pageScript/api/openWindow.ts

@@ -1,5 +1,5 @@
 import { Action } from 'redux';
-import { PageScriptToContentScriptMessage } from './index';
+import type { PageScriptToContentScriptMessage } from './index';
 
 export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
 

extension/src/pageScript/enhancerStore.ts

@@ -1,7 +1,7 @@
 import { Action, compose, Reducer, StoreEnhancerStoreCreator } from 'redux';
 import { instrument } from '@redux-devtools/instrument';
 import { persistState } from '@redux-devtools/core';
-import { ConfigWithExpandedMaxAge } from '../../browser/extension/inject/pageScript';
+import type { ConfigWithExpandedMaxAge } from './index';
 
 export function getUrlParam(key: string) {
   const matches = window.location.href.match(

extension/src/pageScript/index.ts

@@ -27,19 +27,19 @@ import {
   LibConfig,
   Features,
 } from '@redux-devtools/app';
-import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';
+import configureStore, { getUrlParam } from './enhancerStore';
 import { isAllowed, Options } from '../options/syncOptions';
-import Monitor from '../../../app/service/Monitor';
+import Monitor from './Monitor';
 import {
   noFiltersApplied,
   isFiltered,
   filterState,
   startingFrom,
-} from '../../../app/api/filters';
+} from './api/filters';
-import notifyErrors from '../../../app/api/notifyErrors';
+import notifyErrors from './api/notifyErrors';
-import importState from '../../../app/api/importState';
+import importState from './api/importState';
-import openWindow, { Position } from '../../../app/api/openWindow';
+import openWindow, { Position } from './api/openWindow';
-import generateId from '../../../app/api/generateInstanceId';
+import generateId from './api/generateInstanceId';
 import {
   toContentScript,
   sendMessage,
@@ -51,8 +51,8 @@ import {
   Serialize,
   StructuralPerformAction,
   ConnectResponse,
-} from '../../../app/api';
+} from './api';
-import { ContentScriptToPageScriptMessage } from './contentScript';
+import type { ContentScriptToPageScriptMessage } from '../contentScript';
 
 type EnhancedStoreWithInitialDispatch<
   S,
@@ -539,10 +539,14 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
           return next(reducer_, initialState_);
         }
 
-        store = stores[instanceId] = configureStore(next, monitor.reducer, {
+        store = stores[instanceId] = configureStore(
+          next as StoreEnhancerStoreCreator,
+          monitor.reducer,
+          {
             ...config,
             maxAge: getMaxAge as any,
-        })(reducer_, initialState_) as any;
+          }
+        )(reducer_, initialState_) as any;
 
         if (isInIframe()) setTimeout(init, 3000);
         else init();

extension/src/pageScriptWrap.ts

@@ -2,7 +2,7 @@ let s = document.createElement('script');
 s.type = 'text/javascript';
 
 if (process.env.NODE_ENV === 'production') {
-  const { default: script } = require('raw-loader!tmp/page.bundle.js');
+  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,7 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
-import '../../views/remote.pug';
+import './remote.pug';
 
 chrome.storage.local.get(
   {

extension/src/remote/remote.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title RemoteDev
-  include ./includes/style.pug
+  include ../style.pug
 
   body
     #root

extension/src/style.pug

@@ -7,7 +7,7 @@ style.
     overflow: hidden;
     height: 100%;
     width: 100%;
-    min-width: 350px;
+    min-width: 760px;
     min-height: 400px;
     margin: 0;
     padding: 0;
@@ -17,6 +17,7 @@ style.
     color: #fff;
   }
   #root {
+    min-width: 760px;
     height: 100%;
   }
   #root > div {

extension/src/window/index.tsx

@@ -3,11 +3,11 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { UPDATE_STATE } from '@redux-devtools/app';
-import App from '../../../app/containers/App';
+import App from '../app/App';
-import configureStore from '../../../app/stores/windowStore';
+import configureStore from './store/windowStore';
-import { MonitorMessage } from '../../../app/middlewares/api';
+import type { MonitorMessage } from '../background/store/apiMiddleware';
 
-import '../../views/window.pug';
+import './window.pug';
 
 const position = location.hash;
 

extension/src/window/store/instancesReducer.ts

@@ -6,10 +6,10 @@ import {
   LIFTED_ACTION,
   SET_PERSIST,
 } from '@redux-devtools/app';
-import {
+import type {
   ExpandedUpdateStateAction,
   WindowStoreAction,
-} from '../../stores/windowStore';
+} from './windowStore';
 
 export default function instances(
   state = instancesInitialState,

extension/src/window/store/windowReducer.ts

@@ -9,8 +9,8 @@ import {
   theme,
   StoreState,
 } from '@redux-devtools/app';
-import instances from './instances';
+import instances from './instancesReducer';
-import { WindowStoreAction } from '../../stores/windowStore';
+import type { WindowStoreAction } from './windowStore';
 
 const rootReducer: Reducer<StoreState, WindowStoreAction> =
   combineReducers<StoreState>({

extension/src/window/store/windowStore.ts

@@ -17,12 +17,15 @@ import {
   StoreState,
   UpdateStateAction,
 } from '@redux-devtools/app';
-import syncStores from '../middlewares/windowSync';
+import syncStores from './windowSyncMiddleware';
-import instanceSelector from '../middlewares/instanceSelector';
+import instanceSelector from './instanceSelectorMiddleware';
-import rootReducer from '../reducers/window';
+import rootReducer from './windowReducer';
-import { BackgroundState } from '../reducers/background';
+import type { BackgroundState } from '../../background/store/backgroundReducer';
-import { BackgroundAction } from './backgroundStore';
+import type { BackgroundAction } from '../../background/store/backgroundStore';
-import { EmptyUpdateStateAction, NAAction } from '../middlewares/api';
+import type {
+  EmptyUpdateStateAction,
+  NAAction,
+} from '../../background/store/apiMiddleware';
 
 export interface ExpandedUpdateStateAction extends UpdateStateAction {
   readonly instances: InstancesState;

extension/src/window/store/windowSyncMiddleware.ts

@@ -7,9 +7,9 @@ import {
   UPDATE_STATE,
 } from '@redux-devtools/app';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
-import { BackgroundState } from '../reducers/background';
+import type { BackgroundState } from '../../background/store/backgroundReducer';
-import { WindowStoreAction } from '../stores/windowStore';
+import type { WindowStoreAction } from './windowStore';
-import { BackgroundAction } from '../stores/backgroundStore';
+import type { BackgroundAction } from '../../background/store/backgroundStore';
 
 const syncStores =
   (baseStore: Store<BackgroundState, BackgroundAction>) =>

extension/src/window/window.pug

@@ -4,7 +4,7 @@ html
   head
     meta(charset='UTF-8')
   title Redux DevTools
-  include ./includes/style.pug
+  include ../style.pug
 
   body
     #root

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import configureStore from '../../../src/app/stores/windowStore';
+import configureStore from '../../../src/window/store/windowStore';
-import App from '../../../src/app/containers/App';
+import App from '../../../src/app/App';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -18,7 +18,7 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-const { store } = configureStore(store);
+const { store } = configureStore();
 
 describe('App container', () => {
   it("should render inspector monitor's component", () => {

extension/test/app/inject/api.spec.js

@@ -1,5 +1,5 @@
 import { insertScript, listenMessage } from '../../utils/inject';
-import '../../../src/browser/extension/inject/pageScript';
+import '../../../src/pageScript';
 
 describe('API', () => {
   it('should get window.__REDUX_DEVTOOLS_EXTENSION__ function', () => {

extension/test/app/inject/enhancer.spec.js

@@ -1,7 +1,7 @@
 import '@babel/polyfill';
 import { createStore, compose } from 'redux';
 import { insertScript, listenMessage } from '../../utils/inject';
-import '../../../src/browser/extension/inject/pageScript';
+import '../../../src/pageScript';
 
 function counter(state = 0, action) {
   switch (action.type) {

extension/test/chrome/extension.spec.js

@@ -5,7 +5,7 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const port = 9515;
-const path = resolve(__dirname, '..', '..', 'build', 'extension');
+const path = resolve(__dirname, '..', '..', 'dist');
 const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 const actionsPattern =
   /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;

extension/test/electron/fixture/main.js

@@ -4,7 +4,7 @@ const { app, BrowserWindow, session } = require('electron');
 app.on('window-all-closed', app.quit);
 app.whenReady().then(async () => {
   await session.defaultSession.loadExtension(
-    path.join(__dirname, '../../../build/extension'),
+    path.join(__dirname, '../../../dist'),
     { allowFileAccess: true }
   );
 

extension/webpack.config.js

@@ -0,0 +1,81 @@
+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/webpack/base.config.js

@@ -1,91 +0,0 @@
-import path from 'path';
-import webpack from 'webpack';
-import CopyPlugin from 'copy-webpack-plugin';
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-
-const extpath = path.join(__dirname, '../src/browser/extension/');
-const mock = `${extpath}chromeAPIMock`;
-
-const baseConfig = (params) => ({
-  // devtool: 'source-map',
-  mode: params.mode,
-  entry: params.input || {
-    background: [mock, `${extpath}background/index`],
-    options: [mock, `${extpath}options/index`],
-    window: [`${extpath}window/index`],
-    remote: [`${extpath}window/remote`],
-    devpanel: [mock, `${extpath}devpanel/index`],
-    devtools: [`${extpath}devtools/index`],
-    content: [mock, `${extpath}inject/contentScript`],
-    pagewrap: [`${extpath}inject/pageScriptWrap`],
-    ...params.inputExtra,
-  },
-  output: {
-    filename: '[name].bundle.js',
-    chunkFilename: '[id].chunk.js',
-    ...params.output,
-  },
-  plugins: [
-    new webpack.DefinePlugin(params.globals),
-    ...(params.plugins
-      ? params.plugins
-      : [
-          new ForkTsCheckerWebpackPlugin({
-            typescript: {
-              configFile: 'tsconfig.json',
-            },
-          }),
-        ]),
-  ].concat(
-    params.copy
-      ? new CopyPlugin({
-          patterns: [
-            {
-              from: params.manifestJsonPath,
-              to: path.join(params.output.path, 'manifest.json'),
-            },
-            {
-              from: path.join(__dirname, '../src/assets/'),
-              to: params.output.path,
-            },
-          ],
-        })
-      : []
-  ),
-  performance: {
-    hints: false,
-  },
-  resolve: {
-    alias: {
-      app: path.join(__dirname, '../src/app'),
-      tmp: path.join(__dirname, '../build/tmp'),
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    fallback: {
-      path: require.resolve('path-browserify'),
-    },
-  },
-  module: {
-    rules: [
-      ...(params.loaders
-        ? params.loaders
-        : [
-            {
-              test: /\.(js|ts)x?$/,
-              use: 'babel-loader',
-              exclude: /(node_modules|tmp\/page\.bundle)/,
-            },
-          ]),
-      {
-        test: /\.css?$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.pug$/,
-        use: ['file-loader?name=[name].html', 'pug-html-loader'],
-      },
-    ],
-  },
-});
-
-export default baseConfig;

extension/webpack/dev.config.babel.js

@@ -1,26 +0,0 @@
-import path from 'path';
-import webpack from 'webpack';
-import baseConfig from './base.config';
-
-let config = baseConfig({
-  mode: 'development',
-  inputExtra: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
-  },
-  output: { path: path.join(__dirname, '../dev') },
-  globals: {
-    'process.env': {
-      NODE_ENV: '"development"',
-    },
-  },
-  plugins: [new webpack.NoEmitOnErrorsPlugin()],
-  copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/extension/manifest.json'
-  ),
-});
-
-config.watch = true;
-
-export default config;

extension/webpack/prod.config.babel.js

@@ -1,20 +0,0 @@
-import path from 'path';
-import baseConfig from './base.config';
-
-export default baseConfig({
-  mode: 'production',
-  inputExtra: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
-  },
-  output: { path: path.join(__dirname, '../build/extension') },
-  globals: {
-    'process.env': {
-      NODE_ENV: '"production"',
-    },
-  },
-  copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/extension/manifest.json'
-  ),
-});

extension/webpack/prod.firefox.config.babel.js

@@ -1,17 +0,0 @@
-import path from 'path';
-import baseConfig from './base.config';
-
-export default baseConfig({
-  mode: 'production',
-  output: { path: path.join(__dirname, '../build/extension') },
-  globals: {
-    'process.env': {
-      NODE_ENV: '"production"',
-    },
-  },
-  copy: true,
-  manifestJsonPath: path.join(
-    __dirname,
-    '../src/browser/firefox/manifest.json'
-  ),
-});

extension/webpack/wrap.config.babel.js

@@ -1,15 +0,0 @@
-import path from 'path';
-import baseConfig from './base.config';
-
-export default baseConfig({
-  mode: 'production',
-  input: {
-    page: [path.join(__dirname, '../src/browser/extension/inject/pageScript')],
-  },
-  output: { path: path.join(__dirname, '../build/tmp') },
-  globals: {
-    'process.env': {
-      NODE_ENV: '"production"',
-    },
-  },
-});

extension/wrap.webpack.config.js

@@ -0,0 +1,31 @@
+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,28 +1,29 @@
 {
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.19.1",
-    "@changesets/cli": "^2.23.0",
+    "@changesets/cli": "^2.26.0",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.18.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
-    "prettier": "2.7.1",
+    "prettier": "2.8.1",
-    "typescript": "~4.7.4",
+    "typescript": "~4.9.4",
-    "nx": "^14.3.6",
+    "nx": "^15.3.3",
-    "@nrwl/nx-cloud": "^14.1.2"
+    "@nrwl/nx-cloud": "^15.0.2"
   },
   "scripts": {
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "build:all": "nx run-many --target=build --all",
+    "build:all": "nx run-many --target=build --all --parallel=1",
-    "lint:all": "nx run-many --target=lint --all",
+    "lint:all": "nx run-many --target=lint --all --parallel=1",
-    "test:all": "nx run-many --target=test --all",
+    "test:all": "nx run-many --target=test --all --parallel=1",
+    "clean:all": "nx run-many --target=clean --all --parallel=1",
     "release": "pnpm build:all && changeset publish"
   },
   "workspaces": [
@@ -38,7 +39,7 @@
     "packages/redux-devtools-rtk-query-monitor/demo",
     "packages/redux-devtools-slider-monitor/examples/todomvc"
   ],
-  "packageManager": "pnpm@7.3.0",
+  "packageManager": "pnpm@7.19.0",
   "pnpm": {
     "overrides": {
       "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"

packages/d3-state-visualizer/README.md

@@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: { border: '1px solid black' },
+  chartStyles: { border: '1px solid black' },
   tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 
@@ -61,7 +61,7 @@ Other options are listed below and have reasonable default values if you want to
 | Option                    | Type    | Default                                                                          | Description                                                                                                                                                                                                                                                                                  |
 | ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                      | String  | `'d3svg'`                                                                        | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument                                                                                                                                                                   |
-| `style`                   | Object  | `{}`                                                                             | Sets the CSS style of the chart                                                                                                                                                                                                                                                              |
+| `chartStyles`             | Object  | `{}`                                                                             | Sets the CSS style of the chart                                                                                                                                                                                                                                                              |
 | `size`                    | Number  | `500`                                                                            | Sets size of the chart in pixels                                                                                                                                                                                                                                                             |
 | `aspectRatio`             | Float   | `1.0`                                                                            | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
 | `widthBetweenNodesCoeff`  | Float   | `1.0`                                                                            | Alters the horizontal space between each node                                                                                                                                                                                                                                                |
@@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to
 
 More to come...
 
-## Bindings
-
-### React
-
-[example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation.
-
 ## Roadmap
 
 - Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.

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

@@ -29,22 +29,22 @@
     "map2tree": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^16.11.41",
+    "@types/node": "^18.11.17",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.18.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
-    "typescript": "~4.7.4",
+    "typescript": "~4.9.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.9.2"
+    "webpack-dev-server": "^4.11.1"
   }
 }

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

@@ -28,7 +28,7 @@ const render = tree(document.getElementById('root')!, {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: { border: '1px solid black' },
+  chartStyles: { border: '1px solid black' },
   tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 

packages/d3-state-visualizer/package.json

@@ -23,18 +23,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "dist/d3-state-visualizer.umd.js",
   "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 && pnpm run build:umd",
+    "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:umd": "rollup -c",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
@@ -42,35 +40,26 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.20.6",
-    "@types/d3": "^3.5.47",
+    "@types/d3": "^7.4.0",
-    "d3": "^3.5.17",
+    "d3": "^7.8.0",
     "d3tooltip": "^2.1.0",
     "deepmerge": "^4.2.2",
     "map2tree": "^2.1.0",
     "ramda": "^0.28.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
+    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-typescript": "^7.18.6",
-    "@babel/preset-typescript": "^7.17.12",
+    "@types/ramda": "^0.28.20",
-    "@rollup/plugin-babel": "^5.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "eslint": "^8.30.0",
-    "@types/node": "^16.11.41",
-    "@types/ramda": "^0.28.14",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.6",
+    "typescript": "~4.9.4"
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "tslib": "^2.4.0",
-    "typescript": "~4.7.4"
   }
 }

packages/d3-state-visualizer/rollup.config.js

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3-state-visualizer',
-      file: 'lib/umd/d3-state-visualizer.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3-state-visualizer',
-      file: 'lib/umd/d3-state-visualizer.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

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

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

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

@@ -1,6 +1,8 @@
-import d3, { ZoomEvent, Primitive } from 'd3';
+import * as d3 from 'd3';
+import type { D3ZoomEvent, HierarchyPointLink, HierarchyPointNode } from 'd3';
 import { isEmpty } from 'ramda';
 import { map2tree } from 'map2tree';
+import type { Node } from 'map2tree';
 import deepmerge from 'deepmerge';
 import {
   getTooltipString,
@@ -9,17 +11,33 @@ import {
   getNodeGroupByDepthCount,
 } from './utils';
 import { tooltip } from 'd3tooltip';
+import type { StyleValue } from 'd3tooltip';
 
-export interface InputOptions {
+export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
   state?: {} | null;
   // eslint-disable-next-line @typescript-eslint/ban-types
-  tree?: NodeWithId | {};
+  tree?: Node | {};
 
   rootKeyName: string;
   pushMethod: 'push' | 'unshift';
   id: string;
-  style: { [key: string]: Primitive };
+  chartStyles: { [key: string]: StyleValue };
+  nodeStyleOptions: {
+    colors: {
+      default: string;
+      collapsed: string;
+      parent: string;
+    };
+    radius: number;
+  };
+  textStyleOptions: {
+    colors: {
+      default: string;
+      hover: string;
+    };
+  };
+  linkStyles: { [key: string]: StyleValue };
   size: number;
   aspectRatio: number;
   initialZoom: number;
@@ -34,7 +52,7 @@ export interface InputOptions {
   widthBetweenNodesCoeff: number;
   transitionDuration: number;
   blinkDuration: number;
-  onClickText: (datum: NodeWithId) => void;
+  onClickText: (datum: HierarchyPointNode<Node>) => void;
   tooltipOptions: {
     disabled?: boolean;
     left?: number | undefined;
@@ -43,64 +61,7 @@ export interface InputOptions {
       left: number;
       top: number;
     };
-    style?: { [key: string]: Primitive } | undefined;
+    styles?: { [key: string]: StyleValue } | undefined;
-    indentationSize?: number;
-  };
-}
-
-interface Options {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  state?: {} | null;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  tree?: NodeWithId | {};
-
-  rootKeyName: string;
-  pushMethod: 'push' | 'unshift';
-  id: string;
-  style: {
-    node: {
-      colors: {
-        default: string;
-        collapsed: string;
-        parent: string;
-      };
-      radius: number;
-    };
-    text: {
-      colors: {
-        default: string;
-        hover: string;
-      };
-    };
-    link: {
-      stroke: string;
-      fill: string;
-    };
-  };
-  size: number;
-  aspectRatio: number;
-  initialZoom: number;
-  margin: {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  };
-  isSorted: boolean;
-  heightBetweenNodesCoeff: number;
-  widthBetweenNodesCoeff: number;
-  transitionDuration: number;
-  blinkDuration: number;
-  onClickText: () => void;
-  tooltipOptions: {
-    disabled: boolean;
-    left: number | undefined;
-    top: number | undefined;
-    offset: {
-      left: number;
-      top: number;
-    };
-    style: { [key: string]: Primitive } | undefined;
     indentationSize?: number;
   };
 }
@@ -111,8 +72,8 @@ const defaultOptions: Options = {
   pushMethod: 'push',
   tree: undefined,
   id: 'd3svg',
-  style: {
+  chartStyles: {},
-    node: {
+  nodeStyleOptions: {
     colors: {
       default: '#ccc',
       collapsed: 'lightsteelblue',
@@ -120,17 +81,16 @@ const defaultOptions: Options = {
     },
     radius: 7,
   },
-    text: {
+  textStyleOptions: {
     colors: {
       default: 'black',
       hover: 'skyblue',
     },
   },
-    link: {
+  linkStyles: {
     stroke: '#000',
     fill: 'none',
   },
-  },
   size: 500,
   aspectRatio: 1.0,
   initialZoom: 1,
@@ -156,37 +116,29 @@ const defaultOptions: Options = {
       left: 0,
       top: 0,
     },
-    style: undefined,
+    styles: undefined,
   },
-};
+} satisfies Options;
 
-export interface NodeWithId {
+export interface InternalNode extends Node {
-  name: string;
+  _children?: this[] | undefined;
-  children?: NodeWithId[] | null;
+  id: string | number;
-  _children?: NodeWithId[] | null;
-  value?: unknown;
-  id: string;
-
-  parent?: NodeWithId;
-  depth?: number;
-  x?: number;
-  y?: number;
 }
 
 interface NodePosition {
-  parentId: string | null | undefined;
+  parentId: string | number | null;
-  id: string;
+  id: string | number;
-  x: number | undefined;
+  x: number;
-  y: number | undefined;
+  y: number;
 }
 
-export default function (
+export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
-  DOMNode: HTMLElement,
-  options: Partial<InputOptions> = {}
-) {
   const {
     id,
-    style,
+    chartStyles,
+    nodeStyleOptions,
+    textStyleOptions,
+    linkStyles,
     size,
     aspectRatio,
     initialZoom,
@@ -202,64 +154,50 @@ export default function (
     tree,
     tooltipOptions,
     onClickText,
-  } = deepmerge(defaultOptions, options) as Options;
+  } = deepmerge(defaultOptions, options);
 
   const width = size - margin.left - margin.right;
   const height = size * aspectRatio - margin.top - margin.bottom;
   const fullWidth = size;
   const fullHeight = size * aspectRatio;
 
-  const attr: { [key: string]: Primitive } = {
-    id,
-    preserveAspectRatio: 'xMinYMin slice',
-  };
-
-  if (!(style as unknown as { [key: string]: Primitive }).width) {
-    attr.width = fullWidth;
-  }
-
-  if (
-    !(style as unknown as { [key: string]: Primitive }).width ||
-    !(style as unknown as { [key: string]: Primitive }).height
-  ) {
-    attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
-  }
-
   const root = d3.select(DOMNode);
-  const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
+  const zoom = d3.zoom<SVGSVGElement, unknown>().scaleExtent([0.1, 3]);
-  const vis = root
+
+  const svgElement = root
     .append('svg')
-    .attr(attr)
+    .attr('id', id)
-    .style({ cursor: '-webkit-grab', ...style } as unknown as {
+    .attr('preserveAspectRatio', 'xMinYMin slice')
-      [key: string]: Primitive;
+    .style('cursor', '-webkit-grab');
-    })
+
+  if (!chartStyles.width) {
+    svgElement.attr('width', fullWidth);
+  }
+
+  if (!chartStyles.width || !chartStyles.height) {
+    svgElement.attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);
+  }
+
+  for (const [key, value] of Object.entries(chartStyles)) {
+    svgElement.style(key, value);
+  }
+
+  const vis = svgElement
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    .call(zoom.scaleTo, initialZoom)
     .call(
-      zoom.on('zoom', () => {
+      zoom.on('zoom', (event) => {
-        const { translate, scale } = d3.event as ZoomEvent;
+        const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
-        vis.attr(
+        vis.attr('transform', transform.toString());
-          'transform',
-          `translate(${translate.toString()})scale(${scale})`
-        );
       })
     )
     .append('g')
-    .attr({
+    .attr(
-      transform: `translate(${margin.left + style.node.radius}, ${
+      'transform',
+      `translate(${margin.left + nodeStyleOptions.radius}, ${
         margin.top
-      }) scale(${initialZoom})`,
+      }) scale(${initialZoom})`
-    });
-
-  let layout = d3.layout.tree().size([width, height]);
-  let data: NodeWithId;
-
-  if (isSorted) {
-    layout.sort((a, b) =>
-      (b as NodeWithId).name.toLowerCase() <
-      (a as NodeWithId).name.toLowerCase()
-        ? 1
-        : -1
     );
-  }
 
   // previousNodePositionsById stores node x and y
   // as well as hierarchy (id / parentId);
@@ -277,8 +215,8 @@ export default function (
   // of parent ids; once a parent that matches the given filter is found,
   // the parent position gets returned
   function findParentNodePosition(
-    nodePositionsById: { [nodeId: string]: NodePosition },
+    nodePositionsById: { [nodeId: string | number]: NodePosition },
-    nodeId: string,
+    nodeId: string | number,
     filter: (nodePosition: NodePosition) => boolean
   ) {
     let currentPosition = nodePositionsById[nodeId];
@@ -294,19 +232,18 @@ export default function (
   }
 
   return function renderChart(nextState = tree || state) {
-    data = !tree
+    let data = !tree
-      ? // eslint-disable-next-line @typescript-eslint/ban-types
+      ? (map2tree(nextState, {
-        (map2tree(nextState as {}, {
           key: rootKeyName,
           pushMethod,
-        }) as NodeWithId)
+        }) as InternalNode)
-      : (nextState as NodeWithId);
+      : (nextState as InternalNode);
 
     if (isEmpty(data) || !data.name) {
       data = {
         name: 'error',
         message: 'Please provide a state map or a tree structure',
-      } as unknown as NodeWithId;
+      } as unknown as InternalNode;
     }
 
     let nodeIndex = 0;
@@ -334,76 +271,94 @@ export default function (
 
     function update() {
       // path generator for links
-      const diagonal = d3.svg
+      const linkHorizontal = d3
-        .diagonal<NodePosition>()
+        .linkHorizontal<
-        .projection((d) => [d.y!, d.x!]);
+          {
+            source: { x: number; y: number };
+            target: { x: number; y: number };
+          },
+          { x: number; y: number }
+        >()
+        .x((d) => d.y)
+        .y((d) => d.x);
       // set tree dimensions and spacing between branches and nodes
       const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
 
-      layout = layout.size([
+      const layout = d3
-        maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
+        .tree<InternalNode>()
-        width,
+        .size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]);
-      ]);
 
-      const nodes = layout.nodes(data as d3.layout.tree.Node) as NodeWithId[];
+      const rootNode = d3.hierarchy(data);
-      const links = layout.links(nodes as d3.layout.tree.Node[]);
+      if (isSorted) {
+        rootNode.sort((a, b) =>
+          b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1
+        );
+      }
 
-      nodes.forEach(
+      const rootPointNode = layout(rootNode);
+      const links = rootPointNode.links();
+
+      rootPointNode.each(
         (node) =>
-          (node.y = node.depth! * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
       );
 
+      const nodes = rootPointNode.descendants();
+
       const nodePositions = nodes.map((n) => ({
-        parentId: n.parent && n.parent.id,
+        parentId: n.parent && n.parent.data.id,
-        id: n.id,
+        id: n.data.id,
         x: n.x,
         y: n.y,
       }));
-      const nodePositionsById: { [nodeId: string]: NodePosition } = {};
+      const nodePositionsById: { [nodeId: string | number]: NodePosition } = {};
       nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
 
       // process the node selection
       const node = vis
-        .selectAll('g.node')
+        .selectAll<SVGGElement, HierarchyPointNode<InternalNode>>('g.node')
-        .property('__oldData__', (d: NodeWithId) => d)
+        .property('__oldData__', (d) => d)
-        .data(nodes, (d) => d.id || (d.id = ++nodeIndex as unknown as string));
+        .data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex));
       const nodeEnter = node
         .enter()
         .append('g')
-        .attr({
+        .attr('class', 'node')
-          class: 'node',
+        .attr('transform', (d) => {
-          transform: (d) => {
           const position = findParentNodePosition(
             nodePositionsById,
-              d.id,
+            d.data.id,
             (n) => !!previousNodePositionsById[n.id]
           );
           const previousPosition =
             (position && previousNodePositionsById[position.id]) ||
             previousNodePositionsById.root;
-            return `translate(${previousPosition.y!},${previousPosition.x!})`;
+          return `translate(${previousPosition.y},${previousPosition.x})`;
-          },
         })
-        .style({
+        .style('fill', textStyleOptions.colors.default)
-          fill: style.text.colors.default,
+        .style('cursor', 'pointer')
-          cursor: 'pointer',
+        .on('mouseover', function mouseover() {
+          d3.select(this).style('fill', textStyleOptions.colors.hover);
         })
-        .on('mouseover', function mouseover(this: EventTarget) {
+        .on('mouseout', function mouseout() {
-          d3.select(this).style({
+          d3.select(this).style('fill', textStyleOptions.colors.default);
-            fill: style.text.colors.hover,
-          });
-        })
-        .on('mouseout', function mouseout(this: EventTarget) {
-          d3.select(this).style({
-            fill: style.text.colors.default,
-          });
         });
 
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
-          tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
+          tooltip<
-            .text((d, i) => getTooltipString(d, i, tooltipOptions))
+            SVGGElement,
-            .style(tooltipOptions.style)
+            HierarchyPointNode<InternalNode>,
+            SVGGElement,
+            unknown,
+            HTMLElement,
+            unknown,
+            null,
+            undefined
+          >('tooltip', {
+            ...tooltipOptions,
+            root,
+            text: (d) => getTooltipString(d.data, tooltipOptions),
+          })
         );
       }
 
@@ -412,77 +367,81 @@ export default function (
       const nodeEnterInnerGroup = nodeEnter.append('g');
       nodeEnterInnerGroup
         .append('circle')
-        .attr({
+        .attr('class', 'nodeCircle')
-          class: 'nodeCircle',
+        .attr('r', 0)
-          r: 0,
+        .on('click', (event, clickedNode) => {
-        })
+          if ((event as Event).defaultPrevented) return;
-        .on('click', (clickedNode) => {
+          toggleChildren(clickedNode.data);
-          if ((d3.event as Event).defaultPrevented) return;
-          toggleChildren(clickedNode);
           update();
         });
 
       nodeEnterInnerGroup
         .append('text')
-        .attr({
+        .attr('class', 'nodeText')
-          class: 'nodeText',
+        .attr('text-anchor', 'middle')
-          'text-anchor': 'middle',
+        .attr('transform', 'translate(0,0)')
-          transform: 'translate(0,0)',
+        .attr('dy', '.35em')
-          dy: '.35em',
+        .style('fill-opacity', 0)
-        })
+        .text((d) => d.data.name)
-        .style({
+        .on('click', (_, datum) => {
-          'fill-opacity': 0,
+          onClickText(datum);
-        })
+        });
-        .text((d) => d.name)
+
-        .on('click', onClickText);
+      const nodeEnterAndUpdate = nodeEnter.merge(node);
 
       // update the text to reflect whether node has children or not
-      node.select('text').text((d) => d.name);
+      nodeEnterAndUpdate.select('text').text((d) => d.data.name);
 
       // change the circle fill depending on whether it has children and is collapsed
-      node.select('circle').style({
+      nodeEnterAndUpdate
-        stroke: 'black',
+        .select('circle')
-        'stroke-width': '1.5px',
+        .style('stroke', 'black')
-        fill: (d) =>
+        .style('stroke-width', '1.5px')
-          d._children
+        .style('fill', (d) =>
-            ? style.node.colors.collapsed
+          d.data._children && d.data._children.length > 0
-            : d.children
+            ? nodeStyleOptions.colors.collapsed
-            ? style.node.colors.parent
+            : d.data.children && d.data.children.length > 0
-            : style.node.colors.default,
+            ? nodeStyleOptions.colors.parent
-      });
+            : nodeStyleOptions.colors.default
+        );
 
       // transition nodes to their new position
-      const nodeUpdate = node
+      const nodeUpdate = nodeEnterAndUpdate
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('transform', (d) => `translate(${d.y},${d.x})`);
-          transform: (d) => `translate(${d.y!},${d.x!})`,
-        });
 
       // ensure circle radius is correct
-      nodeUpdate.select('circle').attr('r', style.node.radius);
+      nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);
 
       // fade the text in and align it
       nodeUpdate
-        .select('text')
+        .select<SVGTextElement>('text')
         .style('fill-opacity', 1)
-        .attr({
+        .attr('transform', function transform(d) {
-          transform: function transform(this: SVGGraphicsElement, d) {
           const x =
-              (d.children || d._children ? -1 : 1) *
+            (((d.data.children ?? d.data._children)?.length ?? 0) > 0
-              (this.getBBox().width / 2 + style.node.radius + 5);
+              ? -1
+              : 1) *
+            (this.getBBox().width / 2 + nodeStyleOptions.radius + 5);
           return `translate(${x},0)`;
-          },
         });
 
       // blink updated nodes
-      node
+      nodeEnterAndUpdate
-        .filter(function flick(this: any, d) {
+        .filter(function flick(
+          this: SVGGElement & {
+            __oldData__?: HierarchyPointNode<InternalNode>;
+          },
+          d
+        ) {
           // test whether the relevant properties of d match
           // the equivalent property of the oldData
           // also test whether the old data exists,
           // to catch the entering elements!
-          return this.__oldData__ && d.value !== this.__oldData__.value;
+          return (
+            !!this.__oldData__ && d.data.value !== this.__oldData__.data.value
+          );
         })
         .select('g')
         .style('opacity', '0.3')
@@ -492,21 +451,19 @@ export default function (
 
       // transition exiting nodes to the parent's new position
       const nodeExit = node
-        .exit()
+        .exit<HierarchyPointNode<InternalNode>>()
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('transform', (d) => {
-          transform: (d) => {
           const position = findParentNodePosition(
             previousNodePositionsById,
-              d.id,
+            d.data.id,
             (n) => !!nodePositionsById[n.id]
           );
           const futurePosition =
             (position && nodePositionsById[position.id]) ||
             nodePositionsById.root;
-            return `translate(${futurePosition.y!},${futurePosition.x!})`;
+          return `translate(${futurePosition.y},${futurePosition.x})`;
-          },
         })
         .remove();
 
@@ -516,65 +473,66 @@ export default function (
 
       // update the links
       const link = vis
-        .selectAll('path.link')
+        .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
-        .data(links, (d) => (d.target as NodeWithId).id);
+          'path.link'
+        )
+        .data(links, (d) => d.target.data.id);
 
       // enter any new links at the parent's previous position
-      link
+      const linkEnter = link
         .enter()
         .insert('path', 'g')
-        .attr({
+        .attr('class', 'link')
-          class: 'link',
+        .attr('d', (d) => {
-          d: (d) => {
           const position = findParentNodePosition(
             nodePositionsById,
-              (d.target as NodeWithId).id,
+            d.target.data.id,
             (n) => !!previousNodePositionsById[n.id]
           );
           const previousPosition =
             (position && previousNodePositionsById[position.id]) ||
             previousNodePositionsById.root;
-            return diagonal({
+          return linkHorizontal({
             source: previousPosition,
             target: previousPosition,
-            } as d3.svg.diagonal.Link<NodePosition>);
+          });
-          },
+        });
-        })
+
-        .style(style.link);
+      for (const [key, value] of Object.entries(linkStyles)) {
+        linkEnter.style(key, value);
+      }
+
+      const linkEnterAndUpdate = linkEnter.merge(link);
 
       // transition links to their new position
-      link
+      linkEnterAndUpdate
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('d', linkHorizontal);
-          d: diagonal as unknown as Primitive,
-        });
 
       // transition exiting nodes to the parent's new position
       link
-        .exit()
+        .exit<HierarchyPointLink<InternalNode>>()
         .transition()
         .duration(transitionDuration)
-        .attr({
+        .attr('d', (d) => {
-          d: (d) => {
           const position = findParentNodePosition(
             previousNodePositionsById,
-              (d.target as NodeWithId).id,
+            d.target.data.id,
             (n) => !!nodePositionsById[n.id]
           );
           const futurePosition =
             (position && nodePositionsById[position.id]) ||
             nodePositionsById.root;
-            return diagonal({
+          return linkHorizontal({
             source: futurePosition,
             target: futurePosition,
           });
-          },
         })
         .remove();
 
       // delete the old data once it's no longer needed
-      node.property('__oldData__', null);
+      nodeEnterAndUpdate.property('__oldData__', null);
 
       // stash the old positions for transition
       previousNodePositionsById = nodePositionsById;
@@ -582,4 +540,4 @@ export default function (
   };
 }
 
-export { Primitive };
+export type { Node };

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

@@ -1,38 +1,38 @@
 import { is, join, pipe, replace } from 'ramda';
 import sortAndSerialize from './sortAndSerialize';
-import { NodeWithId } from './tree';
+import type { InternalNode } from './tree';
 
-export function collapseChildren(node: NodeWithId) {
+export function collapseChildren(node: InternalNode) {
   if (node.children) {
     node._children = node.children;
     node._children.forEach(collapseChildren);
-    node.children = null;
+    node.children = undefined;
   }
 }
 
-export function expandChildren(node: NodeWithId) {
+export function expandChildren(node: InternalNode) {
   if (node._children) {
     node.children = node._children;
     node.children.forEach(expandChildren);
-    node._children = null;
+    node._children = undefined;
   }
 }
 
-export function toggleChildren(node: NodeWithId) {
+export function toggleChildren(node: InternalNode) {
   if (node.children) {
     node._children = node.children;
-    node.children = null;
+    node.children = undefined;
   } else if (node._children) {
     node.children = node._children;
-    node._children = null;
+    node._children = undefined;
   }
   return node;
 }
 
 export function visit(
-  parent: NodeWithId,
+  parent: InternalNode,
-  visitFn: (parent: NodeWithId) => void,
+  visitFn: (parent: InternalNode) => void,
-  childrenFn: (parent: NodeWithId) => NodeWithId[] | null | undefined
+  childrenFn: (parent: InternalNode) => InternalNode[] | null | undefined
 ) {
   if (!parent) {
     return;
@@ -50,10 +50,10 @@ export function visit(
   }
 }
 
-export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
+export function getNodeGroupByDepthCount(rootNode: InternalNode) {
   const nodeGroupByDepthCount = [1];
 
-  const traverseFrom = function traverseFrom(node: NodeWithId, depth = 0) {
+  const traverseFrom = function traverseFrom(node: InternalNode, depth = 0) {
     if (!node.children || node.children.length === 0) {
       return 0;
     }
@@ -73,11 +73,7 @@ export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
   return nodeGroupByDepthCount;
 }
 
-export function getTooltipString(
+export function getTooltipString(node: InternalNode, { indentationSize = 4 }) {
-  node: unknown,
-  i: number | undefined,
-  { indentationSize = 4 }
-) {
   if (!is(Object, node)) return '';
 
   const spacer = join('  ');
@@ -89,7 +85,6 @@ export function getTooltipString(
 
   if (typeof node.value !== 'undefined') return json2html(node.value);
   if (typeof node.object !== 'undefined') return json2html(node.object);
-  if (children && children.length)
+  if (children && children.length) return `childrenCount: ${children.length}`;
-    return `childrenCount: ${(children as unknown[]).length}`;
   return 'empty';
 }

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

@@ -1,2 +1,2 @@
 export { tree } from './charts';
-export type { InputOptions, NodeWithId, Primitive } from './charts';
+export type { HierarchyPointNode, Node, Options, StyleValue } from './charts';

packages/d3tooltip/README.md

@@ -10,45 +10,45 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom
 ## Quick usage
 
 ```javascript
-import d3 from 'd3';
+import * as d3 from 'd3';
 import { tooltip } from 'd3tooltip';
 
 const DOMNode = document.getElementById('chart');
 const root = d3.select(DOMNode);
 const vis = root.append('svg');
 
-let options = {
+const options = {
-  offset: {left: 30, top: 10}
+  offset: { left: 30, top: 10 },
+  styles: { 'min-width': '50px', 'border-radius': '5px' },
 };
 
-vis.selectAll('circle').data(someData).enter()
+vis
+  .selectAll('circle')
+  .data(someData)
+  .enter()
   .append('circle')
   .attr('r', 10)
   .call(
-    d3tooltip(d3, 'tooltipClassName', options)
+    d3tooltip('tooltipClassName', {
-      .text((d, i) => toStringOrHtml(d))
+      ...options,
-      .attr({ 'class': 'anotherClassName' })
+      text: (d) => toStringOrHtml(d),
-      .style({ 'min-width': '50px', 'border-radius: 5px' })
+    })
   )
-  .on({
+  .on('mouseover', function () {
-    mouseover(d, i) {
+    d3.select(this).style('fill', 'skyblue');
-      d3.select(this).style({
+  })
-        fill: 'skyblue'
+  .on('mouseout', function () {
-      });
+    d3.select(this).style('fill', 'black');
-    },
-    mouseout(d, i) {
-      d3.select(this).style({
-        fill: 'black'
-      });
-    }
   });
 ```
 
 ## API
 
 | Option   | Type               | Default             | Description                                                                                                                                                      |
-| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `root`   | DOM.Element | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select)               |
+| `root`   | DOM.Element        | `body`              | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select).               |
-| `left`   | Number      | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element                                                        |
+| `left`   | Number             | `undefined`         | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element.                                                        |
-| `top`    | Number      | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element                                                        |
+| `top`    | Number             | `undefined`         | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element.                                                        |
-| `offset` | Object      | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option |
+| `offset` | Object             | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |
+| `styles` | Object             | `{}`                | Sets the styles of the tooltip element.                                                                                                                          |
+| `text`   | String or Function | `''`                | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`.                                              |

packages/d3tooltip/package.json

@@ -19,18 +19,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "lib/umd/d3tooltip.umd.js",
   "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 && pnpm run build:umd",
+    "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:umd": "rollup -c",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
@@ -38,36 +36,25 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.20.6"
-    "ramda": "^0.28.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
+    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-typescript": "^7.18.6",
-    "@babel/preset-typescript": "^7.17.12",
+    "@types/d3": "^7.4.0",
-    "@rollup/plugin-babel": "^5.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "d3": "^7.8.0",
-    "@types/d3": "^3.5.47",
+    "eslint": "^8.30.0",
-    "@types/node": "^16.11.41",
-    "@types/ramda": "^0.28.14",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "d3": "^3.5.17",
-    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.6",
+    "typescript": "~4.9.4"
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "tslib": "^2.4.0",
-    "typescript": "~4.7.4"
   },
   "peerDependencies": {
-    "@types/d3": "^3.5.47",
+    "@types/d3": "^7.4.0",
-    "d3": "^3.5.17"
+    "d3": "^7.8.0"
   }
 }

packages/d3tooltip/rollup.config.js

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3tooltip',
-      file: 'lib/umd/d3tooltip.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'd3tooltip',
-      file: 'lib/umd/d3tooltip.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

packages/d3tooltip/src/index.ts

@@ -1,161 +1,102 @@
-import d3Package, { Primitive, Selection } from 'd3';
+import * as d3 from 'd3';
-import { is } from 'ramda';
+import type { BaseType, Selection } from 'd3';
-import utils from './utils';
-const { prependClass, functor } = utils;
 
-interface Options<Datum> {
+export type StyleValue = string | number | boolean;
+
+interface Options<
+  Datum,
+  RootGElement extends BaseType,
+  RootDatum,
+  RootPElement extends BaseType,
+  RootPDatum
+> {
   left: number | undefined;
   top: number | undefined;
   offset: {
     left: number;
     top: number;
   };
-  root: Selection<Datum> | undefined;
+  root:
+    | Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
+    | undefined;
+  styles: { [key: string]: StyleValue };
+  text: string | ((datum: Datum) => string);
 }
 
-const defaultOptions: Options<unknown> = {
+const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
   root: undefined,
+  styles: {},
+  text: '',
 };
 
-interface Tip<Datum> {
+export function tooltip<
-  (selection: Selection<Datum>): void;
+  GElement extends BaseType,
-  attr: (
+  Datum,
-    this: this,
+  PElement extends BaseType,
-    d:
+  PDatum,
-      | string
+  RootGElement extends BaseType,
-      | {
+  RootDatum,
-          [key: string]:
+  RootPElement extends BaseType,
-            | Primitive
+  RootPDatum
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
+>(
-        }
-  ) => this;
-  style: (
-    this: this,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-      | undefined
-  ) => this;
-  text: (
-    this: this,
-    d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-  ) => this;
-}
-
-export function tooltip<Datum>(
-  d3: typeof d3Package,
   className = 'tooltip',
-  options: Partial<Options<Datum>> = {}
+  options: Partial<
-): Tip<Datum> {
+    Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
-  const { left, top, offset, root } = {
+  > = {}
+) {
+  const { left, top, offset, root, styles, text } = {
     ...defaultOptions,
     ...options,
-  } as Options<Datum>;
+  } as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;
 
-  let attrs = { class: className };
+  let el: Selection<HTMLDivElement, RootDatum, BaseType, unknown>;
-  let text: (datum: Datum, index?: number, outerIndex?: number) => string = (
+  const anchor: Selection<
-    node: Datum
+    RootGElement,
-  ) => '';
+    RootDatum,
-  let styles = {};
+    RootPElement | HTMLElement,
+    RootPDatum
+  > = root || d3.select<RootGElement, RootDatum>('body');
+  const rootNode = anchor.node()!;
 
-  let el: Selection<Datum>;
+  return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
-  const anchor = root || d3.select('body');
+    selection.on('mouseover.tip', (event, datum) => {
-  const rootNode = anchor.node();
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
-
+      const [x, y] = [
-  function tip(selection: Selection<Datum>) {
+        left || pointerX + offset.left,
-    selection.on('mouseover.tip', (node) => {
+        top || pointerY - offset.top,
-      const [mouseX, mouseY] = d3.mouse(rootNode);
+      ];
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
 
       anchor.selectAll(`div.${className}`).remove();
 
       el = anchor
         .append('div')
-        .attr(prependClass(className)(attrs))
+        .attr('class', className)
-        .style({
+        .style('position', 'absolute')
-          position: 'absolute',
+        .style('z-index', 1001)
-          'z-index': 1001,
+        .style('left', `${x}px`)
-          left: `${x}px`,
+        .style('top', `${y}px`)
-          top: `${y}px`,
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
-          ...styles,
+
-        })
+      for (const [key, value] of Object.entries(styles)) {
-        .html(() => text(node)) as Selection<Datum>;
+        el.style(key, value);
+      }
     });
 
-    selection.on('mousemove.tip', (node) => {
+    selection.on('mousemove.tip', (event, datum) => {
-      const [mouseX, mouseY] = d3.mouse(rootNode);
+      const [pointerX, pointerY] = d3.pointer(event, rootNode);
-      const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
+      const [x, y] = [
+        left || pointerX + offset.left,
+        top || pointerY - offset.top,
+      ];
 
-      el.style({
+      el.style('left', `${x}px`)
-        left: `${x}px`,
+        .style('top', `${y}px`)
-        top: `${y}px`,
+        .html(typeof text === 'function' ? () => text(datum) : () => text);
-      }).html(() => text(node));
     });
 
     selection.on('mouseout.tip', () => el.remove());
-  }
-
-  tip.attr = function setAttr(
-    this: typeof tip,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-  ) {
-    if (is(Object, d)) {
-      attrs = {
-        ...attrs,
-        ...(d as {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }),
   };
-    }
-    return this;
-  };
-
-  tip.style = function setStyle(
-    this: typeof tip,
-    d:
-      | string
-      | {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }
-      | undefined
-  ) {
-    if (is(Object, d)) {
-      styles = {
-        ...styles,
-        ...(d as {
-          [key: string]:
-            | Primitive
-            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
-        }),
-      };
-    }
-    return this;
-  };
-
-  tip.text = function setText(
-    this: typeof tip,
-    d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-  ) {
-    text = functor(d);
-    return this;
-  };
-
-  return tip;
 }

packages/d3tooltip/src/utils/functor.ts

@@ -1,20 +0,0 @@
-import { is } from 'ramda';
-import { Primitive } from 'd3';
-
-export default function functor<Datum>(
-  v: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
-): (datum: Datum, index?: number, outerIndex?: number) => string;
-export default function functor<Datum>(
-  v:
-    | Primitive
-    | ((datum: Datum, index: number, outerIndex?: number) => Primitive)
-): (datum: Datum, index?: number, outerIndex?: number) => Primitive;
-export default function functor<Datum>(
-  v:
-    | Primitive
-    | ((datum: Datum, index: number, outerIndex?: number) => Primitive)
-): (datum: Datum, index: number, outerIndex?: number) => Primitive {
-  return is(Function, v)
-    ? (v as (datum: Datum, index: number, outerIndex?: number) => Primitive)
-    : () => v;
-}

packages/d3tooltip/src/utils/index.ts

@@ -1,7 +0,0 @@
-import prependClass from './prependClass';
-import functor from './functor';
-
-export default {
-  prependClass,
-  functor,
-};

packages/d3tooltip/src/utils/prependClass.ts

@@ -1,28 +0,0 @@
-import { mapObjIndexed, join } from 'ramda';
-import functor from './functor';
-import { Primitive } from 'd3';
-
-export default function prependClass<Datum>(className: string) {
-  return mapObjIndexed(
-    (
-      value:
-        | Primitive
-        | ((datum: Datum, index: number, outerIndex?: number) => Primitive),
-      key
-    ) => {
-      if (key === 'class') {
-        const fn = functor(value);
-
-        return (d: Datum, i: number) => {
-          const classNames = fn(d, i);
-          if (classNames !== className) {
-            return join(' ', [className, classNames]);
-          }
-          return classNames;
-        };
-      }
-
-      return value;
-    }
-  );
-}

packages/map2tree/jest.config.js

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

packages/map2tree/package.json

@@ -22,18 +22,16 @@
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
-  "unpkg": "lib/umd/map2tree.umd.js",
   "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 && pnpm run build:umd",
+    "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:umd": "rollup -c",
     "clean": "rimraf lib",
     "test": "jest",
     "lint": "eslint . --ext .ts",
@@ -42,35 +40,26 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.20.6",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
+    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-typescript": "^7.18.6",
-    "@babel/preset-typescript": "^7.17.12",
+    "@types/jest": "^29.2.4",
-    "@rollup/plugin-babel": "^5.3.1",
+    "@types/lodash": "^4.14.191",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@types/jest": "^27.5.2",
+    "eslint": "^8.30.0",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^16.11.41",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^27.1.7",
     "immutable": "^4.1.0",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.6",
+    "ts-jest": "^29.0.3",
-    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "~4.9.4"
-    "rollup-plugin-typescript2": "^0.32.1",
-    "ts-jest": "^27.1.5",
-    "tslib": "^2.4.0",
-    "typescript": "~4.7.4"
   }
 }

packages/map2tree/rollup.config.js

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'map2tree',
-      file: 'lib/umd/map2tree.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      name: 'map2tree',
-      file: 'lib/umd/map2tree.min.js',
-      format: 'umd',
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-  },
-];
-
-export default config;

packages/map2tree/src/index.ts

@@ -4,7 +4,8 @@ import mapValues from 'lodash/mapValues';
 
 export interface Node {
   name: string;
-  children?: Node[] | null;
+  children?: this[];
+  object?: unknown;
   value?: unknown;
 }
 
@@ -43,7 +44,6 @@ function getNode(tree: Node, key: string): Node | null {
 }
 
 export function map2tree(
-  // eslint-disable-next-line @typescript-eslint/ban-types
   root: unknown,
   options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},
   tree: Node = { name: options.key || 'state', children: [] }

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

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

packages/react-base16-styling/package.json

@@ -39,32 +39,33 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.20.6",
     "@types/base16": "^1.0.2",
-    "@types/lodash": "^4.14.182",
+    "@types/lodash": "^4.14.191",
     "base16": "^1.0.0",
     "color": "^4.2.3",
-    "csstype": "^3.1.0",
+    "csstype": "^3.1.1",
     "lodash.curry": "^4.1.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
+    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/preset-typescript": "^7.18.6",
     "@types/color": "^3.0.3",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.2.4",
     "@types/lodash.curry": "^4.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "eslint": "^8.18.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^27.1.7",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.0.3",
-    "typescript": "~4.7.4"
+    "typescript": "~4.9.4"
   }
 }

packages/react-dock/demo/package.json

@@ -11,36 +11,36 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-bootstrap": "^2.4.0",
+    "react-bootstrap": "^2.7.0",
     "react-dock": "^0.6.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.17.12",
+    "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^16.11.41",
+    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.14",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.0.9",
-    "@types/styled-components": "^5.1.25",
+    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.18.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
     "html-webpack-plugin": "^5.5.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
-    "typescript": "~4.7.4",
+    "typescript": "~4.9.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.9.2"
+    "webpack-dev-server": "^4.11.1"
   }
 }