diff --git a/.changeset/friendly-coats-trade.md b/.changeset/friendly-coats-trade.md new file mode 100644 index 00000000..23f4be01 --- /dev/null +++ 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`. diff --git a/.changeset/slimy-elephants-flash.md b/.changeset/slimy-elephants-flash.md new file mode 100644 index 00000000..380595e6 --- /dev/null +++ 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 new file mode 100644 index 00000000..222625e8 --- /dev/null +++ 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 new file mode 100644 index 00000000..3f6b4107 --- /dev/null +++ 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 index 09b34843..e7ba695d 100644 --- a/extension/CHANGELOG.md +++ b/extension/CHANGELOG.md @@ -1,5 +1,17 @@ # 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 diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json index e37d37da..da162077 100644 --- a/extension/chrome/manifest.json +++ b/extension/chrome/manifest.json @@ -1,5 +1,5 @@ { - "version": "3.0.11", + "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 index 4ef91ee1..e6dae08a 100644 --- a/extension/edge/manifest.json +++ b/extension/edge/manifest.json @@ -1,5 +1,5 @@ { - "version": "3.0.11", + "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 index 8ff36ba4..a036827e 100644 --- a/extension/firefox/manifest.json +++ b/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.", diff --git a/extension/jest.config.js b/extension/jest.config.js index 924b5865..26d1c602 100644 --- a/extension/jest.config.js +++ b/extension/jest.config.js @@ -5,5 +5,7 @@ module.exports = { moduleNameMapper: { '\\.css$': '/test/__mocks__/styleMock.ts', }, - resolver: '/jestResolver.js', + transformIgnorePatterns: [ + 'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)', + ], }; diff --git a/extension/jestResolver.js b/extension/jestResolver.js deleted file mode 100644 index 8e066aa4..00000000 --- a/extension/jestResolver.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = (path, options) => { - return options.defaultResolver(path, { - ...options, - packageFilter: (pkg) => { - if (pkg.name === 'nanoid') { - pkg.exports['.'].browser = pkg.exports['.'].require; - } - if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) { - delete pkg.exports; - delete pkg.module; - } - return pkg; - }, - }); -}; diff --git a/extension/package.json b/extension/package.json index dd6427e1..6ff2d2d3 100644 --- a/extension/package.json +++ b/extension/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "remotedev-redux-devtools-extension", - "version": "3.0.14", + "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", @@ -41,7 +41,7 @@ "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^4.6.0", + "react-icons": "^4.7.1", "react-is": "^18.2.0", "react-json-tree": "^0.17.0", "react-redux": "^8.0.5", @@ -50,33 +50,33 @@ "styled-components": "^5.3.6" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@babel/register": "^7.18.9", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", - "@types/chrome": "^0.0.203", - "@types/lodash": "^4.14.190", - "@types/react": "^18.0.25", + "@types/chrome": "^0.0.206", + "@types/lodash": "^4.14.191", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/styled-components": "^5.1.26", "babel-loader": "^9.1.0", - "chromedriver": "^106.0.1", + "chromedriver": "^108.0.0", "copy-webpack-plugin": "^11.0.0", "cpy-cli": "^4.2.0", "cross-env": "^7.0.3", - "css-loader": "^6.7.2", - "electron": "^21.3.1", - "eslint": "^8.28.0", + "css-loader": "^6.7.3", + "electron": "^22.0.0", + "eslint": "^8.30.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "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.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "immutable": "^4.1.0", "jest": "^29.3.1", "jest-environment-jsdom": "^29.3.1", @@ -85,12 +85,12 @@ "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "rimraf": "^3.0.2", - "selenium-webdriver": "^4.6.1", + "selenium-webdriver": "^4.7.1", "sinon-chrome": "^3.0.1", "style-loader": "^3.3.1", "ts-jest": "^29.0.3", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0" + "webpack-cli": "^5.0.1" } } diff --git a/extension/src/devpanel/index.tsx b/extension/src/devpanel/index.tsx index aef0e752..a3879998 100644 --- 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,6 +20,7 @@ const messageStyle: CSSProperties = { }; let rendered: boolean | undefined; +let currentRoot: Root | undefined; let store: Store | 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) { - 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( @@ -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( >(message: PanelMessage) => { 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/extension/webpack.config.js b/extension/webpack.config.js index 0b80ce9d..9e31302e 100644 --- a/extension/webpack.config.js +++ b/extension/webpack.config.js @@ -6,7 +6,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); module.exports = function (env) { return { mode: env.production ? 'production' : 'development', - devtool: env.production ? 'source-map' : 'eval-source-map', + devtool: env.production ? undefined : 'eval-source-map', entry: { background: [ path.resolve(__dirname, 'src/chromeApiMock'), diff --git a/extension/wrap.webpack.config.js b/extension/wrap.webpack.config.js index c4d50d62..1eb38ca1 100644 --- a/extension/wrap.webpack.config.js +++ b/extension/wrap.webpack.config.js @@ -3,7 +3,6 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); module.exports = { mode: 'production', - devtool: 'source-map', entry: { pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'), }, diff --git a/package.json b/package.json index 45568576..12d3fbdd 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,20 @@ { "private": true, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.19.1", - "@changesets/cli": "^2.25.2", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@changesets/cli": "^2.26.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", - "prettier": "2.8.0", - "typescript": "~4.9.3", - "nx": "^15.2.1", + "prettier": "2.8.1", + "typescript": "~4.9.4", + "nx": "^15.3.3", "@nrwl/nx-cloud": "^15.0.2" }, "scripts": { @@ -39,7 +39,7 @@ "packages/redux-devtools-rtk-query-monitor/demo", "packages/redux-devtools-slider-monitor/examples/todomvc" ], - "packageManager": "pnpm@7.17.1", + "packageManager": "pnpm@7.19.0", "pnpm": { "overrides": { "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process" diff --git a/packages/d3-state-visualizer/README.md b/packages/d3-state-visualizer/README.md index b74dc149..bb7cc2ca 100644 --- 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/package.json b/packages/d3-state-visualizer/examples/tree/package.json index 3eb968a5..5d2680a3 100644 --- a/packages/d3-state-visualizer/examples/tree/package.json +++ b/packages/d3-state-visualizer/examples/tree/package.json @@ -29,22 +29,22 @@ "map2tree": "^2.1.0" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.18.6", - "@types/node": "^18.11.9", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@types/node": "^18.11.17", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/d3-state-visualizer/examples/tree/src/index.ts b/packages/d3-state-visualizer/examples/tree/src/index.ts index 5e8cf5e6..8c06c327 100644 --- 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 index 83c75022..83d2d071 100644 --- 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", @@ -42,9 +40,9 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", - "@types/d3": "^3.5.47", - "d3": "^3.5.17", + "@babel/runtime": "^7.20.6", + "@types/d3": "^7.4.0", + "d3": "^7.8.0", "d3tooltip": "^2.1.0", "deepmerge": "^4.2.2", "map2tree": "^2.1.0", @@ -52,25 +50,16 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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.2", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-terser": "^0.1.0", - "@types/node": "^18.11.9", "@types/ramda": "^0.28.20", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@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.5.0", - "rollup-plugin-typescript2": "^0.34.1", - "tslib": "^2.4.1", - "typescript": "~4.9.3" + "typescript": "~4.9.4" } } diff --git a/packages/d3-state-visualizer/rollup.config.mjs b/packages/d3-state-visualizer/rollup.config.mjs deleted file mode 100644 index e144a1bb..00000000 --- a/packages/d3-state-visualizer/rollup.config.mjs +++ /dev/null @@ -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; diff --git a/packages/d3-state-visualizer/src/charts/index.ts b/packages/d3-state-visualizer/src/charts/index.ts index fe78e795..90e07fa8 100644 --- 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'; diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts index e4b778d1..f3c38143 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.ts +++ b/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) => void; tooltipOptions: { disabled?: boolean; left?: number | undefined; @@ -43,64 +61,7 @@ export interface InputOptions { left: number; top: number; }; - style?: { [key: string]: Primitive } | 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; + styles?: { [key: string]: StyleValue } | undefined; indentationSize?: number; }; } @@ -111,26 +72,25 @@ const defaultOptions: Options = { pushMethod: 'push', tree: undefined, id: 'd3svg', - style: { - node: { - colors: { - default: '#ccc', - collapsed: 'lightsteelblue', - parent: 'white', - }, - radius: 7, + chartStyles: {}, + nodeStyleOptions: { + colors: { + default: '#ccc', + collapsed: 'lightsteelblue', + parent: 'white', }, - text: { - colors: { - default: 'black', - hover: 'skyblue', - }, - }, - link: { - stroke: '#000', - fill: 'none', + radius: 7, + }, + textStyleOptions: { + colors: { + default: 'black', + hover: 'skyblue', }, }, + 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 { - name: string; - children?: NodeWithId[] | null; - _children?: NodeWithId[] | null; - value?: unknown; - id: string; - - parent?: NodeWithId; - depth?: number; - x?: number; - y?: number; +export interface InternalNode extends Node { + _children?: this[] | undefined; + id: string | number; } interface NodePosition { - parentId: string | null | undefined; - id: string; - x: number | undefined; - y: number | undefined; + parentId: string | number | null; + id: string | number; + x: number; + y: number; } -export default function ( - DOMNode: HTMLElement, - options: Partial = {} -) { +export default function (DOMNode: HTMLElement, options: Partial = {}) { 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 vis = root + const zoom = d3.zoom().scaleExtent([0.1, 3]); + + const svgElement = root .append('svg') - .attr(attr) - .style({ cursor: '-webkit-grab', ...style } as unknown as { - [key: string]: Primitive; - }) + .attr('id', id) + .attr('preserveAspectRatio', 'xMinYMin slice') + .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', () => { - const { translate, scale } = d3.event as ZoomEvent; - vis.attr( - 'transform', - `translate(${translate.toString()})scale(${scale})` - ); + zoom.on('zoom', (event) => { + const { transform } = event as D3ZoomEvent; + vis.attr('transform', transform.toString()); }) ) .append('g') - .attr({ - transform: `translate(${margin.left + style.node.radius}, ${ + .attr( + 'transform', + `translate(${margin.left + nodeStyleOptions.radius}, ${ margin.top - }) 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 + }) scale(${initialZoom})` ); - } // 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 }, - nodeId: string, + nodePositionsById: { [nodeId: string | number]: NodePosition }, + 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 - ? // eslint-disable-next-line @typescript-eslint/ban-types - (map2tree(nextState as {}, { + let data = !tree + ? (map2tree(nextState, { key: rootKeyName, pushMethod, - }) as NodeWithId) - : (nextState as NodeWithId); + }) as InternalNode) + : (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 - .diagonal() - .projection((d) => [d.y!, d.x!]); + const linkHorizontal = d3 + .linkHorizontal< + { + 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([ - maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, - width, - ]); + const layout = d3 + .tree() + .size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]); - const nodes = layout.nodes(data as d3.layout.tree.Node) as NodeWithId[]; - const links = layout.links(nodes as d3.layout.tree.Node[]); + const rootNode = d3.hierarchy(data); + 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, - id: n.id, + parentId: n.parent && n.parent.data.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') - .property('__oldData__', (d: NodeWithId) => d) - .data(nodes, (d) => d.id || (d.id = ++nodeIndex as unknown as string)); + .selectAll>('g.node') + .property('__oldData__', (d) => d) + .data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex)); const nodeEnter = node .enter() .append('g') - .attr({ - class: 'node', - transform: (d) => { - const position = findParentNodePosition( - nodePositionsById, - d.id, - (n) => !!previousNodePositionsById[n.id] - ); - const previousPosition = - (position && previousNodePositionsById[position.id]) || - previousNodePositionsById.root; - return `translate(${previousPosition.y!},${previousPosition.x!})`; - }, + .attr('class', 'node') + .attr('transform', (d) => { + const position = findParentNodePosition( + nodePositionsById, + d.data.id, + (n) => !!previousNodePositionsById[n.id] + ); + const previousPosition = + (position && previousNodePositionsById[position.id]) || + previousNodePositionsById.root; + return `translate(${previousPosition.y},${previousPosition.x})`; }) - .style({ - fill: style.text.colors.default, - cursor: 'pointer', + .style('fill', textStyleOptions.colors.default) + .style('cursor', 'pointer') + .on('mouseover', function mouseover() { + d3.select(this).style('fill', textStyleOptions.colors.hover); }) - .on('mouseover', function mouseover(this: EventTarget) { - d3.select(this).style({ - fill: style.text.colors.hover, - }); - }) - .on('mouseout', function mouseout(this: EventTarget) { - d3.select(this).style({ - fill: style.text.colors.default, - }); + .on('mouseout', function mouseout() { + d3.select(this).style('fill', textStyleOptions.colors.default); }); if (!tooltipOptions.disabled) { nodeEnter.call( - tooltip(d3, 'tooltip', { ...tooltipOptions, root }) - .text((d, i) => getTooltipString(d, i, tooltipOptions)) - .style(tooltipOptions.style) + tooltip< + SVGGElement, + HierarchyPointNode, + 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({ - class: 'nodeCircle', - r: 0, - }) - .on('click', (clickedNode) => { - if ((d3.event as Event).defaultPrevented) return; - toggleChildren(clickedNode); + .attr('class', 'nodeCircle') + .attr('r', 0) + .on('click', (event, clickedNode) => { + if ((event as Event).defaultPrevented) return; + toggleChildren(clickedNode.data); update(); }); nodeEnterInnerGroup .append('text') - .attr({ - class: 'nodeText', - 'text-anchor': 'middle', - transform: 'translate(0,0)', - dy: '.35em', - }) - .style({ - 'fill-opacity': 0, - }) - .text((d) => d.name) - .on('click', onClickText); - - // update the text to reflect whether node has children or not - node.select('text').text((d) => d.name); - - // change the circle fill depending on whether it has children and is collapsed - node.select('circle').style({ - stroke: 'black', - 'stroke-width': '1.5px', - fill: (d) => - d._children - ? style.node.colors.collapsed - : d.children - ? style.node.colors.parent - : style.node.colors.default, - }); - - // transition nodes to their new position - const nodeUpdate = node - .transition() - .duration(transitionDuration) - .attr({ - transform: (d) => `translate(${d.y!},${d.x!})`, + .attr('class', 'nodeText') + .attr('text-anchor', 'middle') + .attr('transform', 'translate(0,0)') + .attr('dy', '.35em') + .style('fill-opacity', 0) + .text((d) => d.data.name) + .on('click', (_, datum) => { + onClickText(datum); }); + const nodeEnterAndUpdate = nodeEnter.merge(node); + + // update the text to reflect whether node has children or not + nodeEnterAndUpdate.select('text').text((d) => d.data.name); + + // change the circle fill depending on whether it has children and is collapsed + nodeEnterAndUpdate + .select('circle') + .style('stroke', 'black') + .style('stroke-width', '1.5px') + .style('fill', (d) => + d.data._children && d.data._children.length > 0 + ? nodeStyleOptions.colors.collapsed + : d.data.children && d.data.children.length > 0 + ? nodeStyleOptions.colors.parent + : nodeStyleOptions.colors.default + ); + + // transition nodes to their new position + const nodeUpdate = nodeEnterAndUpdate + .transition() + .duration(transitionDuration) + .attr('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('text') .style('fill-opacity', 1) - .attr({ - transform: function transform(this: SVGGraphicsElement, d) { - const x = - (d.children || d._children ? -1 : 1) * - (this.getBBox().width / 2 + style.node.radius + 5); - return `translate(${x},0)`; - }, + .attr('transform', function transform(d) { + const x = + (((d.data.children ?? d.data._children)?.length ?? 0) > 0 + ? -1 + : 1) * + (this.getBBox().width / 2 + nodeStyleOptions.radius + 5); + return `translate(${x},0)`; }); // blink updated nodes - node - .filter(function flick(this: any, d) { + nodeEnterAndUpdate + .filter(function flick( + this: SVGGElement & { + __oldData__?: HierarchyPointNode; + }, + 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>() .transition() .duration(transitionDuration) - .attr({ - transform: (d) => { - const position = findParentNodePosition( - previousNodePositionsById, - d.id, - (n) => !!nodePositionsById[n.id] - ); - const futurePosition = - (position && nodePositionsById[position.id]) || - nodePositionsById.root; - return `translate(${futurePosition.y!},${futurePosition.x!})`; - }, + .attr('transform', (d) => { + const position = findParentNodePosition( + previousNodePositionsById, + d.data.id, + (n) => !!nodePositionsById[n.id] + ); + const futurePosition = + (position && nodePositionsById[position.id]) || + nodePositionsById.root; + return `translate(${futurePosition.y},${futurePosition.x})`; }) .remove(); @@ -516,65 +473,66 @@ export default function ( // update the links const link = vis - .selectAll('path.link') - .data(links, (d) => (d.target as NodeWithId).id); + .selectAll>( + '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({ - class: 'link', - d: (d) => { - const position = findParentNodePosition( - nodePositionsById, - (d.target as NodeWithId).id, - (n) => !!previousNodePositionsById[n.id] - ); - const previousPosition = - (position && previousNodePositionsById[position.id]) || - previousNodePositionsById.root; - return diagonal({ - source: previousPosition, - target: previousPosition, - } as d3.svg.diagonal.Link); - }, - }) - .style(style.link); + .attr('class', 'link') + .attr('d', (d) => { + const position = findParentNodePosition( + nodePositionsById, + d.target.data.id, + (n) => !!previousNodePositionsById[n.id] + ); + const previousPosition = + (position && previousNodePositionsById[position.id]) || + previousNodePositionsById.root; + return linkHorizontal({ + source: previousPosition, + target: previousPosition, + }); + }); + + 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({ - d: diagonal as unknown as Primitive, - }); + .attr('d', linkHorizontal); // transition exiting nodes to the parent's new position link - .exit() + .exit>() .transition() .duration(transitionDuration) - .attr({ - d: (d) => { - const position = findParentNodePosition( - previousNodePositionsById, - (d.target as NodeWithId).id, - (n) => !!nodePositionsById[n.id] - ); - const futurePosition = - (position && nodePositionsById[position.id]) || - nodePositionsById.root; - return diagonal({ - source: futurePosition, - target: futurePosition, - }); - }, + .attr('d', (d) => { + const position = findParentNodePosition( + previousNodePositionsById, + d.target.data.id, + (n) => !!nodePositionsById[n.id] + ); + const futurePosition = + (position && nodePositionsById[position.id]) || + nodePositionsById.root; + 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 }; diff --git a/packages/d3-state-visualizer/src/charts/tree/utils.ts b/packages/d3-state-visualizer/src/charts/tree/utils.ts index 10a87a3c..a20873ca 100644 --- a/packages/d3-state-visualizer/src/charts/tree/utils.ts +++ b/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, - visitFn: (parent: NodeWithId) => void, - childrenFn: (parent: NodeWithId) => NodeWithId[] | null | undefined + parent: InternalNode, + visitFn: (parent: InternalNode) => void, + 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( - node: unknown, - i: number | undefined, - { indentationSize = 4 } -) { +export function getTooltipString(node: InternalNode, { 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) - return `childrenCount: ${(children as unknown[]).length}`; + if (children && children.length) return `childrenCount: ${children.length}`; return 'empty'; } diff --git a/packages/d3-state-visualizer/src/index.ts b/packages/d3-state-visualizer/src/index.ts index 6239d3ce..a2ce88d8 100644 --- a/packages/d3-state-visualizer/src/index.ts +++ b/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'; diff --git a/packages/d3tooltip/README.md b/packages/d3tooltip/README.md index 7a22d1c5..9671dada 100644 --- a/packages/d3tooltip/README.md +++ b/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 = { - offset: {left: 30, top: 10} +const options = { + 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) - .text((d, i) => toStringOrHtml(d)) - .attr({ 'class': 'anotherClassName' }) - .style({ 'min-width': '50px', 'border-radius: 5px' }) + d3tooltip('tooltipClassName', { + ...options, + text: (d) => toStringOrHtml(d), + }) ) - .on({ - mouseover(d, i) { - d3.select(this).style({ - fill: 'skyblue' - }); - }, - mouseout(d, i) { - d3.select(this).style({ - fill: 'black' - }); - } + .on('mouseover', function () { + d3.select(this).style('fill', 'skyblue'); + }) + .on('mouseout', function () { + 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) | -| `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 | -| `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 | +| 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). | +| `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. | +| `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`. | diff --git a/packages/d3tooltip/package.json b/packages/d3tooltip/package.json index 26e0eaac..04844c08 100644 --- a/packages/d3tooltip/package.json +++ b/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.20.1", - "ramda": "^0.28.0" + "@babel/runtime": "^7.20.6" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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.2", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-terser": "^0.1.0", - "@types/d3": "^3.5.47", - "@types/node": "^18.11.9", - "@types/ramda": "^0.28.20", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "d3": "^3.5.17", - "eslint": "^8.28.0", + "@types/d3": "^7.4.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "d3": "^7.8.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "rimraf": "^3.0.2", - "rollup": "^3.5.0", - "rollup-plugin-typescript2": "^0.34.1", - "tslib": "^2.4.1", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { - "@types/d3": "^3.5.47", - "d3": "^3.5.17" + "@types/d3": "^7.4.0", + "d3": "^7.8.0" } } diff --git a/packages/d3tooltip/rollup.config.mjs b/packages/d3tooltip/rollup.config.mjs deleted file mode 100644 index b2b9e71c..00000000 --- a/packages/d3tooltip/rollup.config.mjs +++ /dev/null @@ -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; diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts index bf8e2795..7d295b60 100644 --- a/packages/d3tooltip/src/index.ts +++ b/packages/d3tooltip/src/index.ts @@ -1,161 +1,102 @@ -import d3Package, { Primitive, Selection } from 'd3'; -import { is } from 'ramda'; -import utils from './utils'; -const { prependClass, functor } = utils; +import * as d3 from 'd3'; +import type { BaseType, Selection } from 'd3'; -interface Options { +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 | undefined; + root: + | Selection + | undefined; + styles: { [key: string]: StyleValue }; + text: string | ((datum: Datum) => string); } -const defaultOptions: Options = { +const defaultOptions: Options = { left: undefined, // mouseX top: undefined, // mouseY offset: { left: 0, top: 0 }, root: undefined, + styles: {}, + text: '', }; -interface Tip { - (selection: Selection): void; - attr: ( - this: this, - d: - | string - | { - [key: string]: - | Primitive - | ((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( - d3: typeof d3Package, +export function tooltip< + GElement extends BaseType, + Datum, + PElement extends BaseType, + PDatum, + RootGElement extends BaseType, + RootDatum, + RootPElement extends BaseType, + RootPDatum +>( className = 'tooltip', - options: Partial> = {} -): Tip { - const { left, top, offset, root } = { + options: Partial< + Options + > = {} +) { + const { left, top, offset, root, styles, text } = { ...defaultOptions, ...options, - } as Options; + } as Options; - let attrs = { class: className }; - let text: (datum: Datum, index?: number, outerIndex?: number) => string = ( - node: Datum - ) => ''; - let styles = {}; + let el: Selection; + const anchor: Selection< + RootGElement, + RootDatum, + RootPElement | HTMLElement, + RootPDatum + > = root || d3.select('body'); + const rootNode = anchor.node()!; - let el: Selection; - const anchor = root || d3.select('body'); - const rootNode = anchor.node(); - - function tip(selection: Selection) { - selection.on('mouseover.tip', (node) => { - const [mouseX, mouseY] = d3.mouse(rootNode); - const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; + return function tip(selection: Selection) { + selection.on('mouseover.tip', (event, datum) => { + const [pointerX, pointerY] = d3.pointer(event, rootNode); + const [x, y] = [ + left || pointerX + offset.left, + top || pointerY - offset.top, + ]; anchor.selectAll(`div.${className}`).remove(); el = anchor .append('div') - .attr(prependClass(className)(attrs)) - .style({ - position: 'absolute', - 'z-index': 1001, - left: `${x}px`, - top: `${y}px`, - ...styles, - }) - .html(() => text(node)) as Selection; + .attr('class', className) + .style('position', 'absolute') + .style('z-index', 1001) + .style('left', `${x}px`) + .style('top', `${y}px`) + .html(typeof text === 'function' ? () => text(datum) : () => text); + + for (const [key, value] of Object.entries(styles)) { + el.style(key, value); + } }); - selection.on('mousemove.tip', (node) => { - const [mouseX, mouseY] = d3.mouse(rootNode); - const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; + selection.on('mousemove.tip', (event, datum) => { + const [pointerX, pointerY] = d3.pointer(event, rootNode); + const [x, y] = [ + left || pointerX + offset.left, + top || pointerY - offset.top, + ]; - el.style({ - left: `${x}px`, - top: `${y}px`, - }).html(() => text(node)); + el.style('left', `${x}px`) + .style('top', `${y}px`) + .html(typeof text === 'function' ? () => text(datum) : () => text); }); 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; } diff --git a/packages/d3tooltip/src/utils/functor.ts b/packages/d3tooltip/src/utils/functor.ts deleted file mode 100644 index 9ed7427b..00000000 --- a/packages/d3tooltip/src/utils/functor.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { is } from 'ramda'; -import { Primitive } from 'd3'; - -export default function functor( - v: string | ((datum: Datum, index?: number, outerIndex?: number) => string) -): (datum: Datum, index?: number, outerIndex?: number) => string; -export default function functor( - v: - | Primitive - | ((datum: Datum, index: number, outerIndex?: number) => Primitive) -): (datum: Datum, index?: number, outerIndex?: number) => Primitive; -export default function functor( - 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; -} diff --git a/packages/d3tooltip/src/utils/index.ts b/packages/d3tooltip/src/utils/index.ts deleted file mode 100644 index ef868239..00000000 --- a/packages/d3tooltip/src/utils/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import prependClass from './prependClass'; -import functor from './functor'; - -export default { - prependClass, - functor, -}; diff --git a/packages/d3tooltip/src/utils/prependClass.ts b/packages/d3tooltip/src/utils/prependClass.ts deleted file mode 100644 index cc9bf058..00000000 --- a/packages/d3tooltip/src/utils/prependClass.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { mapObjIndexed, join } from 'ramda'; -import functor from './functor'; -import { Primitive } from 'd3'; - -export default function prependClass(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; - } - ); -} diff --git a/packages/map2tree/package.json b/packages/map2tree/package.json index 5b000463..baeb9169 100755 --- a/packages/map2tree/package.json +++ b/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.20.1", + "@babel/runtime": "^7.20.6", "lodash": "^4.17.21" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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.2", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-terser": "^0.1.0", - "@types/jest": "^29.2.3", - "@types/lodash": "^4.14.190", - "@types/node": "^18.11.9", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/jest": "^29.2.4", + "@types/lodash": "^4.14.191", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "immutable": "^4.1.0", "jest": "^29.3.1", "rimraf": "^3.0.2", - "rollup": "^3.5.0", - "rollup-plugin-typescript2": "^0.34.1", "ts-jest": "^29.0.3", - "tslib": "^2.4.1", - "typescript": "~4.9.3" + "typescript": "~4.9.4" } } diff --git a/packages/map2tree/rollup.config.mjs b/packages/map2tree/rollup.config.mjs deleted file mode 100644 index d7a30f91..00000000 --- a/packages/map2tree/rollup.config.mjs +++ /dev/null @@ -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; diff --git a/packages/map2tree/src/index.ts b/packages/map2tree/src/index.ts index 00aac7c5..a07163b6 100644 --- a/packages/map2tree/src/index.ts +++ b/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: [] } diff --git a/packages/react-base16-styling/package.json b/packages/react-base16-styling/package.json index 10b2845e..4012ee43 100644 --- a/packages/react-base16-styling/package.json +++ b/packages/react-base16-styling/package.json @@ -39,9 +39,9 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@types/base16": "^1.0.2", - "@types/lodash": "^4.14.190", + "@types/lodash": "^4.14.191", "base16": "^1.0.0", "color": "^4.2.3", "csstype": "^3.1.1", @@ -49,23 +49,23 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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", "@types/color": "^3.0.3", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/lodash.curry": "^4.1.7", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "jest": "^29.3.1", "jest-environment-jsdom": "^29.3.1", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" } } diff --git a/packages/react-dock/demo/package.json b/packages/react-dock/demo/package.json index 2fa1e075..2947351e 100644 --- a/packages/react-dock/demo/package.json +++ b/packages/react-dock/demo/package.json @@ -11,36 +11,36 @@ }, "dependencies": { "react": "^18.2.0", - "react-bootstrap": "^2.6.0", + "react-bootstrap": "^2.7.0", "react-dock": "^0.6.0", "react-dom": "^18.2.0", - "react-icons": "^4.6.0", + "react-icons": "^4.7.1", "react-is": "^18.2.0", "styled-components": "^5.3.6" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/react-dock/package.json b/packages/react-dock/package.json index 223bfa30..7ede3afc 100644 --- a/packages/react-dock/package.json +++ b/packages/react-dock/package.json @@ -39,29 +39,29 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", - "@types/lodash": "^4.14.190", + "@babel/runtime": "^7.20.6", + "@types/lodash": "^4.14.191", "@types/prop-types": "^15.7.5", "lodash.debounce": "^4.0.8", "prop-types": "^15.8.1" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/lodash.debounce": "^4.0.7", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", @@ -70,7 +70,7 @@ "react-test-renderer": "^18.2.0", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index d9fae455..c0a203f3 100644 --- a/packages/react-json-tree/examples/package.json +++ b/packages/react-json-tree/examples/package.json @@ -26,27 +26,27 @@ "react-json-tree": "^0.17.0" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json index 308ac708..30708af4 100644 --- a/packages/react-json-tree/package.json +++ b/packages/react-json-tree/package.json @@ -45,44 +45,44 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", - "@types/lodash": "^4.14.190", + "@babel/runtime": "^7.20.6", + "@types/lodash": "^4.14.191", "@types/prop-types": "^15.7.5", "prop-types": "^15.8.1", "react-base16-styling": "^0.9.1" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@rollup/plugin-babel": "^6.0.3", - "@rollup/plugin-commonjs": "^23.0.2", + "@rollup/plugin-commonjs": "^24.0.0", "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-terser": "^0.1.0", - "@types/jest": "^29.2.3", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@rollup/plugin-terser": "^0.2.1", + "@types/jest": "^29.2.4", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", "react": "^18.2.0", "react-test-renderer": "^18.2.0", "rimraf": "^3.0.2", - "rollup": "^3.5.0", + "rollup": "^3.7.5", "rollup-plugin-typescript2": "^0.34.1", "ts-jest": "^29.0.3", "tslib": "^2.4.1", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/redux-devtools-app/jest.config.js b/packages/redux-devtools-app/jest.config.js index 2bef3a04..e15f90f8 100644 --- a/packages/redux-devtools-app/jest.config.js +++ b/packages/redux-devtools-app/jest.config.js @@ -6,7 +6,10 @@ module.exports = { '\\.css$': '/test/__mocks__/styleMock.ts', }, transform: { + '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, - resolver: '/jestResolver.js', + transformIgnorePatterns: [ + 'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)', + ], }; diff --git a/packages/redux-devtools-app/jestResolver.js b/packages/redux-devtools-app/jestResolver.js deleted file mode 100644 index 8e066aa4..00000000 --- a/packages/redux-devtools-app/jestResolver.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = (path, options) => { - return options.defaultResolver(path, { - ...options, - packageFilter: (pkg) => { - if (pkg.name === 'nanoid') { - pkg.exports['.'].browser = pkg.exports['.'].require; - } - if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) { - delete pkg.exports; - delete pkg.module; - } - return pkg; - }, - }); -}; diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json index 099d552a..9cd52756 100644 --- a/packages/redux-devtools-app/package.json +++ b/packages/redux-devtools-app/package.json @@ -40,7 +40,7 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@redux-devtools/chart-monitor": "^3.0.0", "@redux-devtools/core": "^3.13.0", "@redux-devtools/inspector-monitor": "^3.0.0", @@ -50,7 +50,7 @@ "@redux-devtools/rtk-query-monitor": "^3.0.0", "@redux-devtools/slider-monitor": "^4.0.0", "@redux-devtools/ui": "^1.3.0", - "@reduxjs/toolkit": "^1.9.0", + "@reduxjs/toolkit": "^1.9.1", "@types/prop-types": "^15.7.5", "d3-state-visualizer": "^1.6.0", "javascript-stringify": "^2.1.0", @@ -59,7 +59,7 @@ "localforage": "^1.10.0", "lodash": "^4.17.21", "prop-types": "^15.8.1", - "react-icons": "^4.6.0", + "react-icons": "^4.7.1", "react-is": "^18.2.0", "react-redux": "^8.0.5", "redux": "^4.2.0", @@ -68,7 +68,7 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.19.1", "@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.20.2", @@ -77,28 +77,28 @@ "@rjsf/core": "^4.2.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/jsan": "^3.1.2", "@types/json-schema": "^7.0.11", - "@types/lodash": "^4.14.190", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/lodash": "^4.14.191", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/socketcluster-client": "^16.0.0", "@types/styled-components": "^5.1.26", "@types/testing-library__jest-dom": "^5.14.5", "@types/webpack-env": "^1.18.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "css-loader": "^6.7.2", - "eslint": "^8.28.0", + "css-loader": "^6.7.3", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-loader": "^4.2.0", "html-webpack-plugin": "^5.5.0", "jest": "^29.3.1", @@ -110,9 +110,9 @@ "styled-components": "^5.3.6", "ts-jest": "^29.0.3", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" }, "peerDependencies": { diff --git a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx b/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx index b8a5a829..7639c32b 100644 --- a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx @@ -1,14 +1,17 @@ import React, { Component } from 'react'; import { connect, ResolveThunks } from 'react-redux'; import { ChartMonitor } from '@redux-devtools/chart-monitor'; -import { NodeWithId } from 'd3-state-visualizer'; +import type { HierarchyPointNode, Node } from 'd3-state-visualizer'; import { selectMonitorWithState } from '../../actions'; -export function getPath(obj: NodeWithId, inspectedStatePath: string[]) { +export function getPath( + obj: HierarchyPointNode, + inspectedStatePath: string[] +) { const parent = obj.parent; if (!parent) return; getPath(parent, inspectedStatePath); - let name = obj.name; + let name = obj.data.name; const item = /.+\[(\d+)]/.exec(name); if (item) name = item[1]; inspectedStatePath.push(name); @@ -20,7 +23,7 @@ type Props = DispatchProps; class ChartMonitorWrapper extends Component { static update = ChartMonitor.update; - onClickText = (data: NodeWithId) => { + onClickText = (data: HierarchyPointNode) => { const inspectedStatePath: string[] = []; getPath(data, inspectedStatePath); this.props.selectMonitorWithState('InspectorMonitor', { diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx index c9b91f38..7009069b 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx @@ -1,7 +1,8 @@ import React, { Component, RefCallback } from 'react'; import { connect, ResolveThunks } from 'react-redux'; import { withTheme } from 'styled-components'; -import { InputOptions, NodeWithId, tree } from 'd3-state-visualizer'; +import { tree } from 'd3-state-visualizer'; +import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer'; import { getPath } from '../ChartMonitorWrapper'; import { updateMonitorState } from '../../../actions'; import { ThemeFromProvider } from '@redux-devtools/ui'; @@ -54,12 +55,12 @@ class ChartTab extends Component { this.renderChart(props.data as {} | null | undefined); } - getChartTheme(theme: ThemeFromProvider): Partial { + getChartTheme(theme: ThemeFromProvider): Partial { return { heightBetweenNodesCoeff: 1, widthBetweenNodesCoeff: 1.3, tooltipOptions: { - style: { + styles: { color: theme.base06, 'background-color': theme.base01, opacity: '0.9', @@ -69,29 +70,29 @@ class ChartTab extends Component { offset: { left: 30, top: 10 }, indentationSize: 2, }, - style: { + chartStyles: { width: '100%', height: '100%', - node: { - colors: { - default: theme.base0B, - collapsed: theme.base0B, - parent: theme.base0E, - }, - radius: 7, - } as unknown as string, - text: { - colors: { - default: theme.base0D, - hover: theme.base06, - }, - } as unknown as string, + }, + nodeStyleOptions: { + colors: { + default: theme.base0B, + collapsed: theme.base0B, + parent: theme.base0E, + }, + radius: 7, + }, + textStyleOptions: { + colors: { + default: theme.base0D, + hover: theme.base06, + }, }, onClickText: this.onClickText, }; } - onClickText = (data: NodeWithId) => { + onClickText = (data: HierarchyPointNode) => { const inspectedStatePath: string[] = []; getPath(data, inspectedStatePath); this.props.updateMonitorState({ diff --git a/packages/redux-devtools-chart-monitor/README.md b/packages/redux-devtools-chart-monitor/README.md index 6c6006db..37ff6bff 100644 --- a/packages/redux-devtools-chart-monitor/README.md +++ b/packages/redux-devtools-chart-monitor/README.md @@ -47,16 +47,18 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below: -| Name | Description | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `defaultIsVisible` | By default, set to `true`. | -| `transitionDuration` | By default, set to `750`, in milliseconds. | -| `heightBetweenNodesCoeff` | By default, set to `1`. | -| `widthBetweenNodesCoeff` | By default, set to `1.3`. | -| `isSorted` | By default, set to `false`. | -| `style` | {
  width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
  text: {
    colors: {
      'default': `theme.base0D`,
      hover: `theme.base06`
    }
  },
  node: {
    colors: {
      'default': `theme.base0B`,
      collapsed: `theme.base0B`,
      parent: `theme.base0E`
    },
    radius: 7
  }
} | -| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. | -| `tooltipOptions` | {
  disabled: false,
  indentationSize: 2,
  style: {
    'background-color': `theme.base06`,
    'opacity': '0.7',
    'border-radius': '5px',
    'padding': '5px'
  }
}
[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). | +| Name | Description | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `defaultIsVisible` | By default, set to `true`. | +| `transitionDuration` | By default, set to `750`, in milliseconds. | +| `heightBetweenNodesCoeff` | By default, set to `1`. | +| `widthBetweenNodesCoeff` | By default, set to `1.3`. | +| `isSorted` | By default, set to `false`. | +| `chartStyles` | {
  width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
} | +| `textStyleOptions` | {
  colors: {
    default: `theme.base0D`,
    hover: `theme.base06`,
  },
} | +| `nodeStyleOptions` | {
  colors: {
    default: `theme.base0B`,
    collapsed: `theme.base0B`,
    parent: `theme.base0E`,
  },
  radius: 7,
} | +| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. | +| `tooltipOptions` | {
  disabled: false,
  indentationSize: 2,
  styles: {
    'background-color': `theme.base06`,
    'opacity': '0.7',
    'border-radius': '5px',
    'padding': '5px',
  },
}
[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). | #### Redux DevTools props diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json index 6091404b..4768dc82 100644 --- a/packages/redux-devtools-chart-monitor/package.json +++ b/packages/redux-devtools-chart-monitor/package.json @@ -39,34 +39,32 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", - "@types/prop-types": "^15.7.5", + "@babel/runtime": "^7.20.6", "@types/redux-devtools-themes": "^1.0.0", "d3-state-visualizer": "^1.6.0", "deepmerge": "^4.2.2", - "prop-types": "^15.8.1", "redux-devtools-themes": "^1.0.0" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", - "@types/react": "^18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/react": "^18.0.26", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", diff --git a/packages/redux-devtools-chart-monitor/src/Chart.tsx b/packages/redux-devtools-chart-monitor/src/Chart.tsx index aa75a733..3ea4ada8 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.tsx +++ b/packages/redux-devtools-chart-monitor/src/Chart.tsx @@ -1,6 +1,6 @@ import React, { Component, createRef } from 'react'; -import PropTypes from 'prop-types'; -import { tree, NodeWithId, Primitive } from 'd3-state-visualizer'; +import { tree } from 'd3-state-visualizer'; +import type { Options } from 'd3-state-visualizer'; import { Action, Dispatch } from 'redux'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; import * as themes from 'redux-devtools-themes'; @@ -12,7 +12,8 @@ const wrapperStyle = { }; export interface Props> - extends LiftedState { + extends LiftedState, + Options { dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; @@ -20,76 +21,10 @@ export interface Props> invertTheme: boolean; state: S | null; - isSorted: boolean; - heightBetweenNodesCoeff: number; - widthBetweenNodesCoeff: number; - onClickText: (datum: NodeWithId) => void; - tooltipOptions: { - disabled: boolean; - offset: { - left: number; - top: number; - }; - indentationSize: number; - style: { [key: string]: Primitive } | undefined; - }; - style: { [key: string]: Primitive } | undefined; defaultIsVisible?: boolean; } class Chart> extends Component> { - static propTypes = { - state: PropTypes.object, - rootKeyName: PropTypes.string, - pushMethod: PropTypes.oneOf(['push', 'unshift']), - tree: PropTypes.shape({ - name: PropTypes.string, - children: PropTypes.array, - }), - id: PropTypes.string, - style: PropTypes.shape({ - node: PropTypes.shape({ - colors: PropTypes.shape({ - default: PropTypes.string, - parent: PropTypes.string, - collapsed: PropTypes.string, - }), - radius: PropTypes.number, - }), - text: PropTypes.shape({ - colors: PropTypes.shape({ - default: PropTypes.string, - hover: PropTypes.string, - }), - }), - link: PropTypes.object, - }), - size: PropTypes.number, - aspectRatio: PropTypes.number, - margin: PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number, - }), - isSorted: PropTypes.bool, - heightBetweenNodesCoeff: PropTypes.number, - widthBetweenNodesCoeff: PropTypes.number, - transitionDuration: PropTypes.number, - onClickText: PropTypes.func, - tooltipOptions: PropTypes.shape({ - disabled: PropTypes.bool, - left: PropTypes.number, - top: PropTypes.number, - offset: PropTypes.shape({ - left: PropTypes.number, - top: PropTypes.number, - }), - indentationSize: PropTypes.number, - style: PropTypes.object, - }), - }; - divRef = createRef(); // eslint-disable-next-line @typescript-eslint/ban-types renderChart?: (state?: {} | null | undefined) => void; diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx index 18eb4feb..660c29a5 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx +++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx @@ -1,5 +1,4 @@ import React, { CSSProperties, PureComponent } from 'react'; -import PropTypes from 'prop-types'; import * as themes from 'redux-devtools-themes'; import { ActionCreators, @@ -8,7 +7,7 @@ import { } from '@redux-devtools/core'; import deepmerge from 'deepmerge'; import { Action, Dispatch } from 'redux'; -import { NodeWithId, Primitive } from 'd3-state-visualizer'; +import type { Options } from 'd3-state-visualizer'; import reducer, { ChartMonitorState } from './reducers'; import Chart, { Props } from './Chart'; @@ -41,37 +40,14 @@ function invertColors(theme: themes.Base16Theme) { } export interface ChartMonitorProps> - extends LiftedState { + extends LiftedState, + Options { dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; theme: keyof typeof themes | themes.Base16Theme; invertTheme: boolean; - state: S | null; - isSorted: boolean; - heightBetweenNodesCoeff: number; - widthBetweenNodesCoeff: number; - onClickText: (datum: NodeWithId) => void; - tooltipOptions: unknown; - style: { - width: number; - height: number; - node: { - colors: { - default: string; - collapsed: string; - parent: string; - }; - radius: number; - }; - text: { - colors: { - default: string; - hover: string; - }; - }; - }; defaultIsVisible?: boolean; } @@ -80,23 +56,6 @@ class ChartMonitor> extends PureComponent< > { static update = reducer; - static propTypes = { - dispatch: PropTypes.func, - computedStates: PropTypes.array, - currentStateIndex: PropTypes.number, - actionsById: PropTypes.object, - stagedActionIds: PropTypes.array, - skippedActionIds: PropTypes.array, - monitorState: PropTypes.shape({ - initialScrollTop: PropTypes.number, - }), - - preserveScrollTop: PropTypes.bool, - select: PropTypes.func.isRequired, - theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - invertTheme: PropTypes.bool, - }; - static defaultProps = { select: (state: unknown) => state, theme: 'nicinabox', @@ -140,45 +99,10 @@ class ChartMonitor> extends PureComponent< return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; } - getChartStyle() { - const theme = this.getTheme(); - - return { - width: '100%', - height: '100%', - node: { - colors: { - default: theme.base0B, - collapsed: theme.base0B, - parent: theme.base0E, - }, - radius: 7, - }, - text: { - colors: { - default: theme.base0D, - hover: theme.base06, - }, - }, - }; - } - getChartOptions(props = this.props): Props { const { computedStates } = props; const theme = this.getTheme(); - const tooltipOptions = { - disabled: false, - offset: { left: 30, top: 10 }, - indentationSize: 2, - style: { - 'background-color': theme.base06, - opacity: '0.7', - 'border-radius': '5px', - padding: '5px', - }, - }; - const defaultOptions = { state: computedStates.length ? computedStates[props.currentStateIndex].state @@ -186,10 +110,35 @@ class ChartMonitor> extends PureComponent< isSorted: false, heightBetweenNodesCoeff: 1, widthBetweenNodesCoeff: 1.3, - tooltipOptions, - style: this.getChartStyle() as unknown as - | { [key: string]: Primitive } - | undefined, + tooltipOptions: { + disabled: false, + offset: { left: 30, top: 10 }, + indentationSize: 2, + styles: { + 'background-color': theme.base06, + opacity: '0.7', + 'border-radius': '5px', + padding: '5px', + }, + }, + chartStyles: { + width: '100%', + height: '100%', + }, + nodeStyleOptions: { + colors: { + default: theme.base0B, + collapsed: theme.base0B, + parent: theme.base0E, + }, + radius: 7, + }, + textStyleOptions: { + colors: { + default: theme.base0D, + hover: theme.base06, + }, + }, }; return deepmerge(defaultOptions, props); @@ -198,10 +147,9 @@ class ChartMonitor> extends PureComponent< render() { const theme = this.getTheme(); - const ChartAsAny = Chart as any; return (
- +
); } diff --git a/packages/redux-devtools-cli/package.json b/packages/redux-devtools-cli/package.json index cd5c9182..6d054c7d 100644 --- a/packages/redux-devtools-cli/package.json +++ b/packages/redux-devtools-cli/package.json @@ -41,13 +41,13 @@ }, "dependencies": { "@redux-devtools/app": "^2.1.3", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "apollo-server-express": "^3.11.1", "body-parser": "^1.20.1", "chalk": "^4.1.2", "cors": "^2.8.5", "cross-spawn": "^7.0.3", - "electron": "^21.3.1", + "electron": "^22.0.0", "express": "^4.18.2", "getport": "^0.1.0", "graphql": "^16.6.0", @@ -61,37 +61,37 @@ "react-is": "^18.2.0", "semver": "^7.3.8", "socketcluster-server": "^17.2.0", - "sqlite3": "^5.1.2", + "sqlite3": "^5.1.4", "styled-components": "^5.3.6", "uuid": "^9.0.0" }, "devDependencies": { "@types/body-parser": "^1.19.2", - "@types/cors": "^2.8.12", + "@types/cors": "^2.8.13", "@types/cross-spawn": "^6.0.2", - "@types/express": "^4.17.14", - "@types/jest": "^29.2.3", - "@types/lodash": "^4.14.190", + "@types/express": "^4.17.15", + "@types/jest": "^29.2.4", + "@types/lodash": "^4.14.191", "@types/minimist": "^1.2.2", "@types/morgan": "^1.9.3", - "@types/node": "^18.11.9", + "@types/node": "^18.11.17", "@types/semver": "^7.3.13", "@types/socketcluster-client": "^16.0.0", "@types/socketcluster-server": "^16.1.0", "@types/styled-components": "^5.1.26", "@types/supertest": "^2.0.12", "@types/uuid": "^9.0.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "jest": "^29.3.1", "ncp": "^2.0.0", "rimraf": "^3.0.2", "socketcluster-client": "^17.1.0", - "supertest": "^6.3.1", + "supertest": "^6.3.3", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" } } diff --git a/packages/redux-devtools-dock-monitor/package.json b/packages/redux-devtools-dock-monitor/package.json index 142a17f3..22589df8 100644 --- a/packages/redux-devtools-dock-monitor/package.json +++ b/packages/redux-devtools-dock-monitor/package.json @@ -41,7 +41,7 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@types/prop-types": "^15.7.5", "parse-key": "^0.2.1", "prop-types": "^15.8.1", @@ -49,7 +49,7 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.19.1", "@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.20.2", @@ -57,17 +57,17 @@ "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", "@types/parse-key": "^0.2.0", - "@types/react": "^18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/react": "^18.0.26", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", diff --git a/packages/redux-devtools-extension/package.json b/packages/redux-devtools-extension/package.json index fb8683d1..eacc2352 100644 --- a/packages/redux-devtools-extension/package.json +++ b/packages/redux-devtools-extension/package.json @@ -29,23 +29,23 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "immutable": "^4.1.0" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "redux": "^3.1.0 || ^4.0.0" diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json b/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json index fb7a44c4..96b2d9d0 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json +++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json @@ -21,39 +21,39 @@ "react-dom": "^18.2.0", "react-is": "^18.2.0", "react-redux": "^8.0.5", - "react-router-dom": "^6.4.3", + "react-router-dom": "^6.6.0", "redux": "^4.2.0", "redux-logger": "^3.0.6", "styled-components": "^5.3.6" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@types/lodash.shuffle": "^4.2.7", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/redux-logger": "^3.0.9", "@types/styled-components": "^5.1.26", "@types/webpack-env": "^1.18.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "css-loader": "^6.7.2", - "eslint": "^8.28.0", + "css-loader": "^6.7.3", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js b/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js index 3244f843..b5063992 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js +++ b/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js @@ -5,7 +5,8 @@ module.exports = { '\\.css$': '/test/__mocks__/styleMock.ts', }, transform: { + '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, - resolver: '/jestResolver.js', + transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'], }; diff --git a/packages/redux-devtools-inspector-monitor-test-tab/jestResolver.js b/packages/redux-devtools-inspector-monitor-test-tab/jestResolver.js deleted file mode 100644 index 385b2568..00000000 --- a/packages/redux-devtools-inspector-monitor-test-tab/jestResolver.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = (path, options) => { - return options.defaultResolver(path, { - ...options, - packageFilter: (pkg) => { - if (pkg.name === 'nanoid') { - pkg.exports['.'].browser = pkg.exports['.'].require; - } - return pkg; - }, - }); -}; diff --git a/packages/redux-devtools-inspector-monitor-test-tab/package.json b/packages/redux-devtools-inspector-monitor-test-tab/package.json index 3ab27cfc..f0d259ba 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/package.json +++ b/packages/redux-devtools-inspector-monitor-test-tab/package.json @@ -43,7 +43,7 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@redux-devtools/ui": "^1.3.0", "@types/prop-types": "^15.7.5", "es6template": "^1.0.5", @@ -51,12 +51,12 @@ "jsan": "^3.1.14", "object-path": "^0.11.8", "prop-types": "^15.8.1", - "react-icons": "^4.6.0", + "react-icons": "^4.7.1", "simple-diff": "^1.6.0" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.19.1", "@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.20.2", @@ -66,16 +66,16 @@ "@redux-devtools/inspector-monitor": "^3.0.0", "@testing-library/react": "^13.4.0", "@types/es6template": "^1.0.0", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/jsan": "^3.1.2", "@types/object-path": "^0.11.1", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/simple-diff": "^1.6.1", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", @@ -85,7 +85,7 @@ "redux": "^4.2.0", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/inspector-monitor": "^3.0.0", diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/package.json b/packages/redux-devtools-inspector-monitor-trace-tab/package.json index ecd64221..99c827bf 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/package.json +++ b/packages/redux-devtools-inspector-monitor-trace-tab/package.json @@ -31,8 +31,8 @@ }, "dependencies": { "@babel/code-frame": "^7.18.6", - "@babel/runtime": "^7.20.1", - "@types/chrome": "^0.0.203", + "@babel/runtime": "^7.20.6", + "@types/chrome": "^0.0.206", "anser": "^2.1.1", "html-entities": "^2.3.3", "path-browserify": "^1.0.1", @@ -41,7 +41,7 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/eslint-parser": "^7.19.1", "@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.20.2", @@ -52,17 +52,17 @@ "@testing-library/react": "^13.4.0", "@types/babel__code-frame": "^7.0.3", "@types/html-entities": "^1.3.4", - "@types/jest": "^29.2.3", - "@types/node": "^18.11.9", + "@types/jest": "^29.2.4", + "@types/node": "^18.11.17", "@types/path-browserify": "^1.0.0", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/redux-devtools-themes": "^1.0.0", "@types/source-map": "0.5.2", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", @@ -73,7 +73,7 @@ "redux": "^4.2.0", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/inspector-monitor": "^3.0.0", diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/rollup.config.js b/packages/redux-devtools-inspector-monitor-trace-tab/rollup.config.js deleted file mode 100644 index 93ef2d27..00000000 --- a/packages/redux-devtools-inspector-monitor-trace-tab/rollup.config.js +++ /dev/null @@ -1,39 +0,0 @@ -import typescript from 'rollup-plugin-typescript2'; -import babel from '@rollup/plugin-babel'; -import nodePolyfills from 'rollup-plugin-node-polyfills'; - -const config = [ - { - input: 'src/StackTraceTab.tsx', - output: [ - { - file: 'dist/redux-devtools-inspector-monitor-trace-tab.cjs.js', - format: 'cjs', - }, - { - file: 'dist/redux-devtools-inspector-monitor-trace-tab.esm.js', - format: 'esm', - }, - ], - plugins: [ - typescript(), - babel({ - babelHelpers: 'runtime', - extensions: ['.ts', '.tsx'], - plugins: ['@babel/plugin-transform-runtime'], - }), - nodePolyfills(), - ], - external: [ - /@babel\/runtime/, - 'react', - 'redux-devtools-themes', - 'source-map', - '@babel/code-frame', - 'anser', - 'html-entities', - ], - }, -]; - -export default config; diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json index d94f7894..e858c15b 100644 --- a/packages/redux-devtools-inspector-monitor/demo/package.json +++ b/packages/redux-devtools-inspector-monitor/demo/package.json @@ -17,39 +17,39 @@ "immutable": "^4.1.0", "lodash.shuffle": "^4.2.0", "react": "^18.2.0", - "react-bootstrap": "^2.6.0", + "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", - "react-router-dom": "^6.4.3", + "react-router-dom": "^6.6.0", "redux": "^4.2.0", "redux-logger": "^3.0.6" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@types/base16": "^1.0.2", "@types/lodash.shuffle": "^4.2.7", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/redux-logger": "^3.0.9", "@types/webpack-env": "^1.18.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 47cce392..c32ec949 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -35,11 +35,11 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@types/dragula": "^3.7.1", - "@types/lodash": "^4.14.190", + "@types/lodash": "^4.14.191", "@types/prop-types": "^15.7.5", - "dateformat": "^4.6.3", + "dateformat": "^5.0.3", "hex-rgba": "^1.0.2", "immutable": "^4.1.0", "javascript-stringify": "^2.1.0", @@ -55,30 +55,30 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", - "@types/dateformat": "^3.0.1", + "@types/dateformat": "^5.0.0", "@types/hex-rgba": "^1.0.1", "@types/history": "^4.7.11", "@types/lodash.debounce": "^4.0.7", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/react-dragula": "^1.1.0", "@types/redux-devtools-themes": "^1.0.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", diff --git a/packages/redux-devtools-instrument/package.json b/packages/redux-devtools-instrument/package.json index 8b24d9f6..c682904c 100644 --- a/packages/redux-devtools-instrument/package.json +++ b/packages/redux-devtools-instrument/package.json @@ -41,30 +41,30 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "lodash": "^4.17.21" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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", - "@types/jest": "^29.2.3", - "@types/lodash": "^4.14.190", - "@types/node": "^18.11.9", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/jest": "^29.2.4", + "@types/lodash": "^4.14.191", + "@types/node": "^18.11.17", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "jest": "^29.3.1", "redux": "^4.2.0", "rimraf": "^3.0.2", - "rxjs": "^7.5.7", + "rxjs": "^7.8.0", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "redux": "^3.4.0 || ^4.0.0" diff --git a/packages/redux-devtools-log-monitor/package.json b/packages/redux-devtools-log-monitor/package.json index ebe81399..c7bb39af 100644 --- a/packages/redux-devtools-log-monitor/package.json +++ b/packages/redux-devtools-log-monitor/package.json @@ -41,7 +41,7 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@types/lodash.debounce": "^4.0.7", "@types/prop-types": "^15.7.5", "@types/redux-devtools-themes": "^1.0.0", @@ -52,24 +52,24 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", - "@types/react": "^18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/react": "^18.0.26", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", diff --git a/packages/redux-devtools-remote/package.json b/packages/redux-devtools-remote/package.json index 29c078d0..0066cdf7 100644 --- a/packages/redux-devtools-remote/package.json +++ b/packages/redux-devtools-remote/package.json @@ -41,7 +41,7 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@redux-devtools/instrument": "^2.1.0", "@redux-devtools/utils": "^2.0.0", "jsan": "^3.1.14", @@ -51,22 +51,22 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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", "@types/jsan": "^3.1.2", - "@types/node": "^18.11.9", + "@types/node": "^18.11.17", "@types/rn-host-detect": "^1.2.0", "@types/socketcluster-client": "^16.0.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "redux": "^3.5.2 || ^4.0.0" diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json index bd7af850..6e8c8229 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/package.json +++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json @@ -10,53 +10,53 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@babel/runtime": "^7.20.1", - "@chakra-ui/react": "^2.4.1", + "@babel/runtime": "^7.20.6", + "@chakra-ui/react": "^2.4.4", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mswjs/data": "^0.11.0", "@redux-devtools/core": "^3.13.0", "@redux-devtools/dock-monitor": "^3.0.0", "@redux-devtools/rtk-query-monitor": "^3.1.0", - "@reduxjs/toolkit": "^1.9.0", - "framer-motion": "^7.6.12", - "msw": "^0.49.0", + "@reduxjs/toolkit": "^1.9.1", + "framer-motion": "^8.0.1", + "msw": "^0.49.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^4.6.0", + "react-icons": "^4.7.1", "react-is": "^18.2.0", "react-redux": "^8.0.5", - "react-router-dom": "^6.4.3", + "react-router-dom": "^6.6.0", "styled-components": "^5.3.6" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/plugin-transform-runtime": "^7.19.6", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@types/copy-webpack-plugin": "^8.0.1", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "copy-webpack-plugin": "^11.0.0", "cross-env": "^7.0.3", - "css-loader": "^6.7.2", - "eslint": "^8.28.0", + "css-loader": "^6.7.3", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" }, "msw": { diff --git a/packages/redux-devtools-rtk-query-monitor/jest.config.js b/packages/redux-devtools-rtk-query-monitor/jest.config.js index 3244f843..b5063992 100644 --- a/packages/redux-devtools-rtk-query-monitor/jest.config.js +++ b/packages/redux-devtools-rtk-query-monitor/jest.config.js @@ -5,7 +5,8 @@ module.exports = { '\\.css$': '/test/__mocks__/styleMock.ts', }, transform: { + '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, - resolver: '/jestResolver.js', + transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'], }; diff --git a/packages/redux-devtools-rtk-query-monitor/jestResolver.js b/packages/redux-devtools-rtk-query-monitor/jestResolver.js deleted file mode 100644 index 385b2568..00000000 --- a/packages/redux-devtools-rtk-query-monitor/jestResolver.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = (path, options) => { - return options.defaultResolver(path, { - ...options, - packageFilter: (pkg) => { - if (pkg.name === 'nanoid') { - pkg.exports['.'].browser = pkg.exports['.'].require; - } - return pkg; - }, - }); -}; diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index fb66ed1c..fc2d24c0 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/packages/redux-devtools-rtk-query-monitor/package.json @@ -44,9 +44,9 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@redux-devtools/ui": "^1.3.0", - "@types/lodash": "^4.14.190", + "@types/lodash": "^4.14.191", "@types/prop-types": "^15.7.5", "@types/redux-devtools-themes": "^1.0.0", "hex-rgba": "^1.0.2", @@ -61,25 +61,25 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", - "@reduxjs/toolkit": "^1.9.0", + "@reduxjs/toolkit": "^1.9.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/hex-rgba": "^1.0.1", "@types/lodash.debounce": "^4.0.7", - "@types/react": "^18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/react": "^18.0.26", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", @@ -90,11 +90,11 @@ "redux": "^4.2.0", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", - "@reduxjs/toolkit": "^1.9.0", + "@reduxjs/toolkit": "^1.9.1", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0", "@types/styled-components": "^5.1.26", "react": "^16.3.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/redux-devtools-serialize/package.json b/packages/redux-devtools-serialize/package.json index e83f7779..d0aed428 100644 --- a/packages/redux-devtools-serialize/package.json +++ b/packages/redux-devtools-serialize/package.json @@ -37,28 +37,28 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "jsan": "^3.1.14" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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", - "@types/jest": "^29.2.3", + "@types/jest": "^29.2.4", "@types/jsan": "^3.1.2", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "immutable": "^4.1.0", "jest": "^29.3.1", "rimraf": "^3.0.2", "ts-jest": "^29.0.3", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "immutable": "^4.1.0" diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/package.json b/packages/redux-devtools-slider-monitor/examples/todomvc/package.json index b0897243..c4668a76 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/package.json +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/package.json @@ -30,33 +30,33 @@ "todomvc-app-css": "^2.4.2" }, "devDependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@types/classnames": "^2.3.1", - "@types/node": "^18.11.9", + "@types/node": "^18.11.17", "@types/prop-types": "^15.7.5", - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/styled-components": "^5.1.26", "@types/webpack-env": "^1.18.0", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "cross-env": "^7.0.3", - "css-loader": "^6.7.2", - "eslint": "^8.28.0", + "css-loader": "^6.7.3", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^7.2.13", + "fork-ts-checker-webpack-plugin": "^7.2.14", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", "ts-node": "^10.9.1", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0", - "webpack-cli": "^5.0.0", + "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } diff --git a/packages/redux-devtools-slider-monitor/package.json b/packages/redux-devtools-slider-monitor/package.json index 4e5a677d..89eb72a5 100644 --- a/packages/redux-devtools-slider-monitor/package.json +++ b/packages/redux-devtools-slider-monitor/package.json @@ -32,7 +32,7 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@redux-devtools/ui": "^1.3.0", "@types/prop-types": "^15.7.5", "@types/redux-devtools-themes": "^1.0.0", @@ -41,29 +41,24 @@ }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@redux-devtools/core": "^3.13.1", - "@rollup/plugin-babel": "^6.0.3", - "@types/node": "^18.11.9", - "@types/react": "^18.0.25", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "eslint": "^8.28.0", + "@types/node": "^18.11.17", + "@types/react": "^18.0.26", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.0", "rimraf": "^3.0.2", - "rollup": "^3.5.0", - "rollup-plugin-typescript2": "^0.34.1", - "tslib": "^2.4.1", - "typescript": "~4.9.3" + "typescript": "~4.9.4" }, "peerDependencies": { "@redux-devtools/core": "^3.13.1", diff --git a/packages/redux-devtools-ui/.babelrc.json b/packages/redux-devtools-ui/babel.config.json similarity index 100% rename from packages/redux-devtools-ui/.babelrc.json rename to packages/redux-devtools-ui/babel.config.json diff --git a/packages/redux-devtools-ui/jest.config.js b/packages/redux-devtools-ui/jest.config.js index 3244f843..b5063992 100644 --- a/packages/redux-devtools-ui/jest.config.js +++ b/packages/redux-devtools-ui/jest.config.js @@ -5,7 +5,8 @@ module.exports = { '\\.css$': '/test/__mocks__/styleMock.ts', }, transform: { + '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, - resolver: '/jestResolver.js', + transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'], }; diff --git a/packages/redux-devtools-ui/jestResolver.js b/packages/redux-devtools-ui/jestResolver.js deleted file mode 100644 index 385b2568..00000000 --- a/packages/redux-devtools-ui/jestResolver.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = (path, options) => { - return options.defaultResolver(path, { - ...options, - packageFilter: (pkg) => { - if (pkg.name === 'nanoid') { - pkg.exports['.'].browser = pkg.exports['.'].require; - } - return pkg; - }, - }); -}; diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index 42cd478e..52a073ed 100644 --- a/packages/redux-devtools-ui/package.json +++ b/packages/redux-devtools-ui/package.json @@ -30,7 +30,7 @@ "build": "pnpm run build:lib && pnpm run build:storybook", "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css", "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --no-babelrc --extensions \".ts,.tsx\" --out-dir lib/esm", + "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm", "build:types": "tsc --emitDeclarationOnly", "build:css": "ncp fonts lib/fonts", "clean": "rimraf lib storybook-static", @@ -42,7 +42,7 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@rjsf/core": "^4.2.3", "@types/base16": "^1.0.2", "@types/codemirror": "^5.60.5", @@ -51,40 +51,40 @@ "@types/redux-devtools-themes": "^1.0.0", "@types/simple-element-resize-detector": "^1.3.0", "base16": "^1.0.0", - "codemirror": "^5.65.10", + "codemirror": "^5.65.11", "color": "^4.2.3", "prop-types": "^15.8.1", - "react-icons": "^4.6.0", - "react-select": "^5.6.1", + "react-icons": "^4.7.1", + "react-select": "^5.7.0", "redux-devtools-themes": "^1.0.0", "simple-element-resize-detector": "^1.3.0" }, "devDependencies": { "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", + "@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-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", - "@storybook/addon-essentials": "^6.5.13", - "@storybook/builder-webpack5": "^6.5.13", - "@storybook/manager-webpack5": "^6.5.13", - "@storybook/react": "^6.5.13", + "@storybook/addon-essentials": "^6.5.15", + "@storybook/builder-webpack5": "^6.5.15", + "@storybook/manager-webpack5": "^6.5.15", + "@storybook/react": "^6.5.15", "@testing-library/dom": "^8.19.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", "@types/color": "^3.0.3", - "@types/jest": "^29.2.3", - "@types/react": "^18.0.25", + "@types/jest": "^29.2.4", + "@types/react": "^18.0.26", "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", "babel-loader": "^9.1.0", "csstype": "^3.1.1", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jest": "^27.1.6", + "eslint-plugin-jest": "^27.1.7", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "jest": "^29.3.1", @@ -96,13 +96,13 @@ "require-from-string": "^2.0.2", "rimraf": "^3.0.2", "styled-components": "^5.3.6", - "stylelint": "^14.15.0", + "stylelint": "^14.16.0", "stylelint-config-prettier": "^9.0.4", "stylelint-config-standard": "^29.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^29.0.3", - "typescript": "~4.9.3", + "typescript": "~4.9.4", "webpack": "^5.75.0" }, "peerDependencies": { diff --git a/packages/redux-devtools-ui/test/__snapshots__/Form.test.tsx.snap b/packages/redux-devtools-ui/test/__snapshots__/Form.test.tsx.snap index d4c8f1af..a0653a74 100644 --- a/packages/redux-devtools-ui/test/__snapshots__/Form.test.tsx.snap +++ b/packages/redux-devtools-ui/test/__snapshots__/Form.test.tsx.snap @@ -188,17 +188,17 @@ exports[`Form renders correctly 1`] = ` class="css-1f43avz-a11yText-A11yText" />