Merge branch 'main' into renovate/dateformat-5.x

reduxjs · Jan 2, 2023 · 1c64147 · 1c64147
2 parents 2810004 + 9354604
commit 1c64147
Show file tree

Hide file tree

Showing 41 changed files with 1,243 additions and 1,446 deletions.
diff --git a/.changeset/friendly-coats-trade.md b/.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>`.
diff --git a/.changeset/slimy-elephants-flash.md b/.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.
diff --git a/.changeset/spicy-olives-compete.md b/.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`.
diff --git a/.changeset/weak-kings-brake.md b/.changeset/weak-kings-brake.md
@@ -0,0 +1,5 @@
+---
+'map2tree': major
+---
+
+- Remove UMD build.
diff --git a/extension/CHANGELOG.md b/extension/CHANGELOG.md
@@ -1,5 +1,11 @@
 # remotedev-redux-devtools-extension
 
+## 3.0.17
+
+### Patch Changes
+
+- 1aa6c4f7: Fix remounting root for devpanel
+
 ## 3.0.16
 
 ### Patch Changes

diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0.16",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

diff --git a/extension/edge/manifest.json b/extension/edge/manifest.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0.16",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0.16",
+  "version": "3.0.17",
   "name": "Redux DevTools",
   "manifest_version": 2,
   "description": "Redux Developer Tools for debugging application state changes.",

diff --git a/extension/jest.config.js b/extension/jest.config.js
@@ -5,5 +5,6 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!(d3)/)'],
   resolver: '<rootDir>/jestResolver.js',
 };
diff --git a/extension/package.json b/extension/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.0.16",
+  "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",

diff --git a/extension/src/devpanel/index.tsx b/extension/src/devpanel/index.tsx
@@ -1,4 +1,4 @@
-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';
@@ -20,18 +20,24 @@ 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;
 let naTimeout: NodeJS.Timeout;
 
 const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
 
-function renderDevTools(root: Root) {
-  root.unmount();
+function renderNodeAtRoot(node: ReactNode) {
+  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();
-        root.render(message);
+        renderNodeAtRoot(message);
         store = undefined;
       });
     } else {
-      root.unmount();
-      root.render(message);
+      renderNodeAtRoot(message);
       store = undefined;
     }
   }, 3500);
 }
 
 function init(id: number) {
-  const root = createRoot(document.getElementById('root')!);
-  renderNA(root);
+  renderNA();
   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);
       }
     }

diff --git a/packages/d3-state-visualizer/README.md b/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.
diff --git a/packages/d3-state-visualizer/examples/tree/src/index.ts b/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 },
 });
 

diff --git a/packages/d3-state-visualizer/package.json b/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",
@@ -43,8 +41,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@types/d3": "^3.5.47",
-    "d3": "^3.5.17",
+    "@types/d3": "^7.4.0",
+    "d3": "^7.8.0",
     "d3tooltip": "^2.1.0",
     "deepmerge": "^4.2.2",
     "map2tree": "^2.1.0",
@@ -54,23 +52,14 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.7",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.2.1",
-    "@types/node": "^18.11.17",
     "@types/ramda": "^0.28.20",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.7.5",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "tslib": "^2.4.1",
     "typescript": "~4.9.4"
   }
 }
diff --git a/packages/d3-state-visualizer/rollup.config.mjs b/packages/d3-state-visualizer/rollup.config.mjs
diff --git a/packages/d3-state-visualizer/src/charts/index.ts b/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';