reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-26 07:59:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'reduxjs/main' into main

Browse Source
This commit is contained in:
Nathan Bierema 2022-07-05 08:50:07 -04:00
commit 74a7c5c6ec
109 changed files with 7453 additions and 7583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
extension/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# remotedev-redux-devtools-extension # remotedev-redux-devtools-extension
## 3.0.13
### Patch Changes
- Updated dependencies [8a7eae4]
- react-json-tree@0.17.0
- @redux-devtools/app@2.2.0
- @redux-devtools/slider-monitor@4.0.0
- @redux-devtools/ui@1.3.0
- @redux-devtools/core@3.13.0
- @redux-devtools/utils@2.0.0
## 3.0.12 ## 3.0.12
### Patch Changes ### Patch Changes

67
extension/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "remotedev-redux-devtools-extension", "name": "remotedev-redux-devtools-extension",
"version": "3.0.12", "version": "3.0.13",
"description": "Redux Developer Tools for debugging application state changes.", "description": "Redux Developer Tools for debugging application state changes.",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
"license": "MIT", "license": "MIT",
@ -30,57 +30,56 @@
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.12.1", "@babel/polyfill": "^7.12.1",
"@redux-devtools/app": "^2.1.4", "@redux-devtools/app": "^2.2.0",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/instrument": "^2.1.0", "@redux-devtools/instrument": "^2.1.0",
"@redux-devtools/serialize": "^0.4.1", "@redux-devtools/serialize": "^0.4.1",
"@redux-devtools/slider-monitor": "^3.1.2", "@redux-devtools/slider-monitor": "^4.0.0",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"@redux-devtools/utils": "^1.2.1", "@redux-devtools/utils": "^2.0.0",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"jsan": "^3.1.14", "jsan": "^3.1.14",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"react-json-tree": "^0.16.2", "react-json-tree": "^0.17.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@babel/register": "^7.17.7", "@babel/register": "^7.17.7",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^13.3.0",
"@types/chrome": "^0.0.184", "@types/chrome": "^0.0.191",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"bestzip": "^2.2.1", "bestzip": "^2.2.1",
"chromedriver": "^100.0.0", "chromedriver": "^102.0.0",
"copy-webpack-plugin": "^9.1.0", "copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"electron": "^18.2.0", "electron": "^19.0.6",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-jsx-a11y": "^6.6.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"pug-html-loader": "^1.1.5", "pug-html-loader": "^1.1.5",
@ -88,12 +87,12 @@
"react-transform-catch-errors": "^1.0.2", "react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4", "react-transform-hmr": "^1.0.4",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"selenium-webdriver": "^4.1.2", "selenium-webdriver": "^4.3.0",
"sinon-chrome": "^3.0.1", "sinon-chrome": "^3.0.1",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2" "webpack-cli": "^4.10.0"
} }
} }

31
extension/src/browser/extension/devpanel/index.tsx
View File

@ -1,5 +1,5 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import { render, unmountComponentAtNode } from 'react-dom'; import { createRoot, Root } from 'react-dom/client';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Persistor } from 'redux-persist'; import { Persistor } from 'redux-persist';
import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app'; import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
@ -27,23 +27,21 @@ let naTimeout: NodeJS.Timeout;
const isChrome = navigator.userAgent.indexOf('Firefox') === -1; const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
function renderDevTools() { function renderDevTools(root: Root) {
const node = document.getElementById('root'); root.unmount();
unmountComponentAtNode(node!);
clearTimeout(naTimeout); clearTimeout(naTimeout);
({ store, persistor } = configureStore(position, bgConnection)); ({ store, persistor } = configureStore(position, bgConnection));
render( root.render(
<Provider store={store}> <Provider store={store}>
<PersistGate loading={null} persistor={persistor}> <PersistGate loading={null} persistor={persistor}>
<App position={position} /> <App position={position} />
</PersistGate> </PersistGate>
</Provider>, </Provider>
node
); );
rendered = true; rendered = true;
} }
function renderNA() { function renderNA(root: Root) {
if (rendered === false) return; if (rendered === false) return;
rendered = false; rendered = false;
naTimeout = setTimeout(() => { naTimeout = setTimeout(() => {
@ -76,32 +74,31 @@ function renderNA() {
); );
} }
const node = document.getElementById('root'); root.unmount();
unmountComponentAtNode(node!); root.render(message);
render(message, node);
store = undefined; store = undefined;
}); });
} else { } else {
const node = document.getElementById('root'); root.unmount();
unmountComponentAtNode(node!); root.render(message);
render(message, node);
store = undefined; store = undefined;
} }
}, 3500); }, 3500);
} }
function init(id: number) { function init(id: number) {
renderNA(); const root = createRoot(document.getElementById('root')!);
renderNA(root);
bgConnection = chrome.runtime.connect({ bgConnection = chrome.runtime.connect({
name: id ? id.toString() : undefined, name: id ? id.toString() : undefined,
}); });
bgConnection.onMessage.addListener( bgConnection.onMessage.addListener(
<S, A extends Action<unknown>>(message: PanelMessage<S, A>) => { <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
if (message.type === 'NA') { if (message.type === 'NA') {
if (message.id === id) renderNA(); if (message.id === id) renderNA(root);
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id }); else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
} else { } else {
if (!rendered) renderDevTools(); if (!rendered) renderDevTools(root);
store!.dispatch(message); store!.dispatch(message);
} }
} }

8
extension/src/browser/extension/options/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import OptionsComponent from './Options'; import OptionsComponent from './Options';
import { Options } from './syncOptions'; import { Options } from './syncOptions';
@ -13,10 +13,8 @@ chrome.runtime.getBackgroundPage((background) => {
}; };
const renderOptions = (options: Options) => { const renderOptions = (options: Options) => {
render( const root = createRoot(document.getElementById('root')!);
<OptionsComponent options={options} saveOption={saveOption} />, root.render(<OptionsComponent options={options} saveOption={saveOption} />);
document.getElementById('root')
);
}; };
syncOptions.subscribe(renderOptions); syncOptions.subscribe(renderOptions);

8
extension/src/browser/extension/window/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'; import { PersistGate } from 'redux-persist/integration/react';
import { UPDATE_STATE } from '@redux-devtools/app'; import { UPDATE_STATE } from '@redux-devtools/app';
@ -25,13 +25,13 @@ chrome.runtime.getBackgroundPage((window) => {
bg.onMessage.addListener(update); bg.onMessage.addListener(update);
update(); update();
render( const root = createRoot(document.getElementById('root')!);
root.render(
<Provider store={localStore}> <Provider store={localStore}>
<PersistGate loading={null} persistor={persistor}> <PersistGate loading={null} persistor={persistor}>
<App position={position} /> <App position={position} />
</PersistGate> </PersistGate>
</Provider>, </Provider>
document.getElementById('root')
); );
}); });

8
extension/src/browser/extension/window/remote.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import { Root } from '@redux-devtools/app'; import { Root } from '@redux-devtools/app';
import '../../views/remote.pug'; import '../../views/remote.pug';
@ -15,7 +15,8 @@ chrome.storage.local.get(
}, },
(options) => { (options) => {
const AppAsAny = Root as any; const AppAsAny = Root as any;
render( const root = createRoot(document.getElementById('root')!);
root.render(
<AppAsAny <AppAsAny
selectMonitor={options['select-monitor']} selectMonitor={options['select-monitor']}
testTemplates={options['test-templates']} testTemplates={options['test-templates']}
@ -30,8 +31,7 @@ chrome.storage.local.get(
} }
: undefined : undefined
} }
/>, />
document.getElementById('root')
); );
} }
); );

34
package.json
View File

@ -1,21 +1,21 @@
{ {
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@changesets/cli": "^2.22.0", "@changesets/cli": "^2.23.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"prettier": "2.6.2", "prettier": "2.7.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"nx": "^14.1.4", "nx": "^14.3.6",
"@nrwl/nx-cloud": "^14.0.3" "@nrwl/nx-cloud": "^14.1.2"
}, },
"scripts": { "scripts": {
"format": "prettier --write .", "format": "prettier --write .",
@ -38,10 +38,16 @@
"packages/redux-devtools-rtk-query-monitor/demo", "packages/redux-devtools-rtk-query-monitor/demo",
"packages/redux-devtools-slider-monitor/examples/todomvc" "packages/redux-devtools-slider-monitor/examples/todomvc"
], ],
"packageManager": "pnpm@6.32.12", "packageManager": "pnpm@7.3.0",
"pnpm": { "pnpm": {
"overrides": { "overrides": {
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process" "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
},
"peerDependencyRules": {
"allowedVersions": {
"react": "18",
"react-dom": "18"
}
} }
} }
} }

24
packages/d3-state-visualizer/examples/tree/package.json
View File

@ -29,22 +29,22 @@
"map2tree": "^2.1.0" "map2tree": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

29
packages/d3-state-visualizer/package.json
View File

@ -42,7 +42,7 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/d3": "^3.5.47", "@types/d3": "^3.5.47",
"d3": "^3.5.17", "d3": "^3.5.17",
"d3tooltip": "^2.1.0", "d3tooltip": "^2.1.0",
@ -52,24 +52,25 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@types/ramda": "^0.28.12", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@types/ramda": "^0.28.14",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"eslint": "^8.15.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.72.1", "rollup": "^2.75.7",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.32.1",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "~4.6.4" "typescript": "~4.7.4"
} }
} }

29
packages/d3tooltip/package.json
View File

@ -38,32 +38,33 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"ramda": "^0.28.0" "ramda": "^0.28.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@types/d3": "^3.5.47", "@types/d3": "^3.5.47",
"@types/ramda": "^0.28.12", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@types/ramda": "^0.28.14",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.29.0",
"d3": "^3.5.17", "d3": "^3.5.17",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.72.1", "rollup": "^2.75.7",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.32.1",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@types/d3": "^3.5.47", "@types/d3": "^3.5.47",

35
packages/map2tree/package.json
View File

@ -42,34 +42,35 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"lodash": "^4.17.21" "lodash": "^4.17.21"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@types/node": "^16.11.41",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"eslint": "^8.15.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.72.1", "rollup": "^2.75.7",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.32.1",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "~4.6.4" "typescript": "~4.7.4"
} }
} }

28
packages/react-base16-styling/package.json
View File

@ -39,32 +39,32 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/base16": "^1.0.2", "@types/base16": "^1.0.2",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"base16": "^1.0.0", "base16": "^1.0.0",
"color": "^4.2.3", "color": "^4.2.3",
"csstype": "^3.0.11", "csstype": "^3.1.0",
"lodash.curry": "^4.1.1" "lodash.curry": "^4.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/color": "^3.0.3", "@types/color": "^3.0.3",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/lodash.curry": "^4.1.7", "@types/lodash.curry": "^4.1.7",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"jest": "^27.5.1", "jest": "^27.5.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
} }
} }

6
packages/react-dock/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# Change Log # Change Log
## 0.6.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
## 0.5.0 ## 0.5.0
- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports): - Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):

8
packages/react-dock/demo/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
# react-dock-demo
## 0.1.5
### Patch Changes
- Updated dependencies [8a7eae4]
- react-dock@0.6.0

48
packages/react-dock/demo/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "react-dock-demo", "name": "react-dock-demo",
"version": "0.1.4", "version": "0.1.5",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open", "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open",
@ -10,37 +10,37 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"react": "^17.0.2", "react": "^18.2.0",
"react-bootstrap": "^2.3.1", "react-bootstrap": "^2.4.0",
"react-dock": "^0.5.1", "react-dock": "^0.6.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

5
packages/react-dock/demo/src/index.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
ReactDOM.render(<App />, document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

46
packages/react-dock/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-dock", "name": "react-dock",
"version": "0.5.1", "version": "0.6.0",
"description": "Resizable dockable react component", "description": "Resizable dockable react component",
"keywords": [ "keywords": [
"react", "react",
@ -39,7 +39,7 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
@ -47,32 +47,32 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-test-renderer": "^17.0.2", "@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-test-renderer": "^17.0.2", "react-test-renderer": "^18.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0" "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
} }
} }

6
packages/react-json-tree/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# Change Log # Change Log
## 0.17.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
## 0.16.2 ## 0.16.2
### Patch Changes ### Patch Changes

8
packages/react-json-tree/examples/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
# react-json-tree-example
## 1.1.7
### Patch Changes
- Updated dependencies [8a7eae4]
- react-json-tree@0.17.0

44
packages/react-json-tree/examples/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "react-json-tree-example", "name": "react-json-tree-example",
"version": "1.1.6", "version": "1.1.7",
"description": "React-Json-Tree example", "description": "React-Json-Tree example",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples",
"bugs": { "bugs": {
@ -19,34 +19,34 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"immutable": "^4.0.0", "immutable": "^4.1.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-base16-styling": "^0.9.1", "react-base16-styling": "^0.9.1",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-json-tree": "^0.16.1" "react-json-tree": "^0.17.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

5
packages/react-json-tree/examples/src/index.tsx
View File

@ -1,5 +1,6 @@
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import React from 'react'; import React from 'react';
import App from './App'; import App from './App';
render(<App />, document.getElementById('root')); const root = createRoot(document.getElementById('root')!);
root.render(<App />);

53
packages/react-json-tree/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-json-tree", "name": "react-json-tree",
"version": "0.16.2", "version": "0.17.0",
"description": "React JSON Viewer Component, Extracted from redux-devtools", "description": "React JSON Viewer Component, Extracted from redux-devtools",
"keywords": [ "keywords": [
"react", "react",
@ -45,7 +45,7 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
@ -53,38 +53,39 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/react": "^17.0.45", "@types/node": "^16.11.41",
"@types/react-test-renderer": "^17.0.2", "@types/react": "^18.0.14",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"eslint": "^8.15.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-test-renderer": "^17.0.2", "react-test-renderer": "^18.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.72.1", "rollup": "^2.75.7",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.32.1",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0" "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
} }
} }

19
packages/redux-devtools-app/CHANGELOG.md
View File

@ -1,5 +1,24 @@
# Change Log # Change Log
## 2.2.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/chart-monitor@3.0.0
- @redux-devtools/inspector-monitor-test-tab@1.0.0
- @redux-devtools/inspector-monitor-trace-tab@1.0.0
- @redux-devtools/inspector-monitor@3.0.0
- @redux-devtools/log-monitor@4.0.0
- @redux-devtools/rtk-query-monitor@3.0.0
- @redux-devtools/slider-monitor@4.0.0
- @redux-devtools/ui@1.3.0
- @redux-devtools/core@3.13.0
## 2.1.4 ## 2.1.4
### Patch Changes ### Patch Changes

5
packages/redux-devtools-app/README.md
View File

@ -16,10 +16,11 @@ Also it's a react component you can use to build amazing monitor applications li
```js ```js
import React from 'react'; import React from 'react';
import ReactDom from 'react-dom'; import ReactDOM from 'react-dom/client';
import { Root } from '@redux-devtools/app'; import { Root } from '@redux-devtools/app';
ReactDom.render(<Root />, document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Root />);
``` ```
### Parameters ### Parameters

5
packages/redux-devtools-app/demo/index.tsx
View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import { Root } from '../src'; import { Root } from '../src';
render(<Root />, document.getElementById('root')); const root = createRoot(document.getElementById('root')!);
root.render(<Root />);
if (module.hot) { if (module.hot) {
// https://github.com/webpack/webpack/issues/418#issuecomment-53398056 // https://github.com/webpack/webpack/issues/418#issuecomment-53398056

95
packages/redux-devtools-app/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/app", "name": "@redux-devtools/app",
"version": "2.1.4", "version": "2.2.0",
"description": "Redux DevTools app", "description": "Redux DevTools app",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app",
"bugs": { "bugs": {
@ -40,17 +40,17 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/chart-monitor": "^2.1.1", "@redux-devtools/chart-monitor": "^3.0.0",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/inspector-monitor": "^2.1.2", "@redux-devtools/inspector-monitor": "^3.0.0",
"@redux-devtools/inspector-monitor-test-tab": "^0.8.6", "@redux-devtools/inspector-monitor-test-tab": "^1.0.0",
"@redux-devtools/inspector-monitor-trace-tab": "^0.3.4", "@redux-devtools/inspector-monitor-trace-tab": "^1.0.0",
"@redux-devtools/log-monitor": "^3.1.1", "@redux-devtools/log-monitor": "^4.0.0",
"@redux-devtools/rtk-query-monitor": "^2.1.2", "@redux-devtools/rtk-query-monitor": "^3.0.0",
"@redux-devtools/slider-monitor": "^3.1.2", "@redux-devtools/slider-monitor": "^4.0.0",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"@reduxjs/toolkit": "^1.8.1", "@reduxjs/toolkit": "^1.8.2",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"d3-state-visualizer": "^1.6.0", "d3-state-visualizer": "^1.6.0",
"javascript-stringify": "^2.1.0", "javascript-stringify": "^2.1.0",
@ -59,67 +59,66 @@
"localforage": "^1.10.0", "localforage": "^1.10.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"socketcluster-client": "^14.3.2" "socketcluster-client": "^16.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@rjsf/core": "^4.2.0", "@rjsf/core": "^4.2.0",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^13.3.0",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/json-schema": "^7.0.11", "@types/json-schema": "^7.0.11",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24", "@types/socketcluster-client": "^16.0.0",
"@types/socketcluster-client": "^13.0.5",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@types/testing-library__jest-dom": "^5.14.3", "@types/testing-library__jest-dom": "^5.14.5",
"@types/webpack-env": "^1.16.4", "@types/webpack-env": "^1.17.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-loader": "^3.1.0", "html-loader": "^3.1.2",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
} }
} }

2
packages/redux-devtools-app/src/actions/index.ts
View File

@ -1,5 +1,5 @@
import { SchemeName, ThemeName } from '@redux-devtools/ui'; import { SchemeName, ThemeName } from '@redux-devtools/ui';
import { AuthStates, States } from 'socketcluster-client/lib/scclientsocket'; import { AuthStates, States } from 'socketcluster-client/lib/clientsocket';
import { REHYDRATE } from 'redux-persist'; import { REHYDRATE } from 'redux-persist';
import { import {
CHANGE_SECTION, CHANGE_SECTION,

2
packages/redux-devtools-app/src/constants/socketActionTypes.ts
View File

@ -16,7 +16,7 @@ export const {
AUTHENTICATED, AUTHENTICATED,
PENDING, PENDING,
UNAUTHENTICATED, UNAUTHENTICATED,
} = socketCluster.SCClientSocket as unknown as States; } = socketCluster.AGClientSocket as unknown as States;
export const CONNECT_REQUEST = 'socket/CONNECT_REQUEST'; export const CONNECT_REQUEST = 'socket/CONNECT_REQUEST';
export const CONNECT_SUCCESS = 'socket/CONNECT_SUCCESS'; export const CONNECT_SUCCESS = 'socket/CONNECT_SUCCESS';
export const CONNECT_ERROR = 'socket/CONNECT_ERROR'; export const CONNECT_ERROR = 'socket/CONNECT_ERROR';

2
packages/redux-devtools-app/src/containers/DevTools.tsx
View File

@ -20,7 +20,7 @@ interface Props {
} }
class DevTools extends Component<Props> { class DevTools extends Component<Props> {
monitorProps: unknown; monitorProps?: object;
Monitor?: React.ComponentType< Monitor?: React.ComponentType<
LiftedState<unknown, Action<unknown>, unknown> LiftedState<unknown, Action<unknown>, unknown>
> & { > & {

169
packages/redux-devtools-app/src/middlewares/api.ts
View File

@ -1,4 +1,4 @@
import socketCluster, { SCClientSocket } from 'socketcluster-client'; import socketClusterClient, { AGClientSocket } from 'socketcluster-client';
import { stringify } from 'jsan'; import { stringify } from 'jsan';
import { Dispatch, MiddlewareAPI } from 'redux'; import { Dispatch, MiddlewareAPI } from 'redux';
import * as actions from '../constants/socketActionTypes'; import * as actions from '../constants/socketActionTypes';
@ -25,11 +25,16 @@ import {
import { nonReduxDispatch } from '../utils/monitorActions'; import { nonReduxDispatch } from '../utils/monitorActions';
import { StoreState } from '../reducers'; import { StoreState } from '../reducers';
let socket: SCClientSocket; let socket: AGClientSocket;
let store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>; let store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>;
function emit({ message: type, id, instanceId, action, state }: EmitAction) { function emit({ message: type, id, instanceId, action, state }: EmitAction) {
socket.emit(id ? `sc-${id}` : 'respond', { type, action, state, instanceId }); void socket.transmit(id ? `sc-${id}` : 'respond', {
type,
action,
state,
instanceId,
});
} }
function startMonitoring(channel: string) { function startMonitoring(channel: string) {
@ -120,7 +125,7 @@ function monitoring(request: MonitoringRequest) {
instanceId === instances.selected && instanceId === instances.selected &&
(request.type === 'ACTION' || request.type === 'STATE') (request.type === 'ACTION' || request.type === 'STATE')
) { ) {
socket.emit('respond', { void socket.transmit('respond', {
type: 'SYNC', type: 'SYNC',
state: stringify(instances.states[instanceId]), state: stringify(instances.states[instanceId]),
id: request.id, id: request.id,
@ -134,65 +139,84 @@ function subscribe(
subscription: typeof UPDATE_STATE | typeof UPDATE_REPORTS subscription: typeof UPDATE_STATE | typeof UPDATE_REPORTS
) { ) {
const channel = socket.subscribe(channelName); const channel = socket.subscribe(channelName);
if (subscription === UPDATE_STATE) channel.watch(monitoring); if (subscription === UPDATE_STATE) {
else { void (async () => {
for await (const data of channel) {
monitoring(data as MonitoringRequest);
}
})();
} else {
const watcher = (request: UpdateReportsRequest) => { const watcher = (request: UpdateReportsRequest) => {
store.dispatch({ type: subscription, request }); store.dispatch({ type: subscription, request });
}; };
channel.watch(watcher); void (async () => {
socket.on(channelName, watcher); for await (const data of channel) {
watcher(data as UpdateReportsRequest);
}
})();
} }
} }
function handleConnection() { function handleConnection() {
socket.on('connect', (status) => { void (async () => {
store.dispatch({ for await (const data of socket.listener('connect')) {
type: actions.CONNECT_SUCCESS, store.dispatch({
payload: { type: actions.CONNECT_SUCCESS,
id: status.id, payload: {
authState: socket.authState, id: data.id,
socketState: socket.state, authState: socket.authState,
}, socketState: socket.state,
error: status.authError, },
}); // @ts-expect-error Is this legitimate?
if (socket.authState !== actions.AUTHENTICATED) { error: data.authError,
store.dispatch({ type: actions.AUTH_REQUEST }); });
if (socket.authState !== actions.AUTHENTICATED) {
store.dispatch({ type: actions.AUTH_REQUEST });
}
} }
}); })();
socket.on('disconnect', (code) => { void (async () => {
store.dispatch({ type: actions.DISCONNECTED, code }); for await (const data of socket.listener('disconnect')) {
}); store.dispatch({ type: actions.DISCONNECTED, code: data.code });
}
})();
socket.on('subscribe', (channel) => { void (async () => {
store.dispatch({ type: actions.SUBSCRIBE_SUCCESS, channel }); for await (const data of socket.listener('subscribe')) {
}); store.dispatch({
socket.on('unsubscribe', (channel) => { type: actions.SUBSCRIBE_SUCCESS,
socket.unsubscribe(channel); channel: data.channel,
socket.unwatch(channel); });
socket.off(channel); }
store.dispatch({ type: actions.UNSUBSCRIBE, channel }); })();
}); void (async () => {
socket.on('subscribeFail', (error) => { for await (const data of socket.listener('unsubscribe')) {
store.dispatch({ void socket.unsubscribe(data.channel);
type: actions.SUBSCRIBE_ERROR, store.dispatch({ type: actions.UNSUBSCRIBE, channel: data.channel });
error, }
status: 'subscribeFail', })();
}); void (async () => {
}); for await (const data of socket.listener('subscribeFail')) {
socket.on('dropOut', (error) => { store.dispatch({
store.dispatch({ type: actions.SUBSCRIBE_ERROR, error, status: 'dropOut' }); type: actions.SUBSCRIBE_ERROR,
}); error: data.error,
status: 'subscribeFail',
});
}
})();
socket.on('error', (error) => { void (async () => {
store.dispatch({ type: actions.CONNECT_ERROR, error }); for await (const data of socket.listener('error')) {
}); store.dispatch({ type: actions.CONNECT_ERROR, error: data.error });
}
})();
} }
function connect() { function connect() {
if (process.env.NODE_ENV === 'test') return; if (process.env.NODE_ENV === 'test') return;
const connection = store.getState().connection; const connection = store.getState().connection;
try { try {
socket = socketCluster.create(connection.options); socket = socketClusterClient.create(connection.options);
handleConnection(); handleConnection();
} catch (error) { } catch (error) {
store.dispatch({ type: actions.CONNECT_ERROR, error: error as Error }); store.dispatch({ type: actions.CONNECT_ERROR, error: error as Error });
@ -205,43 +229,42 @@ function connect() {
function disconnect() { function disconnect() {
if (socket) { if (socket) {
socket.disconnect(); socket.disconnect();
socket.off();
} }
} }
function login() { function login() {
socket.emit('login', {}, (error: Error, baseChannel: string) => { void (async () => {
if (error) { try {
store.dispatch({ type: actions.AUTH_ERROR, error }); const baseChannel = (await socket.invoke('login', {})) as string;
return; store.dispatch({ type: actions.AUTH_SUCCESS, baseChannel });
store.dispatch({
type: actions.SUBSCRIBE_REQUEST,
channel: baseChannel,
subscription: UPDATE_STATE,
});
store.dispatch({
type: actions.SUBSCRIBE_REQUEST,
channel: 'report',
subscription: UPDATE_REPORTS,
});
} catch (error) {
store.dispatch({ type: actions.AUTH_ERROR, error: error as Error });
} }
store.dispatch({ type: actions.AUTH_SUCCESS, baseChannel }); })();
store.dispatch({
type: actions.SUBSCRIBE_REQUEST,
channel: baseChannel,
subscription: UPDATE_STATE,
});
store.dispatch({
type: actions.SUBSCRIBE_REQUEST,
channel: 'report',
subscription: UPDATE_REPORTS,
});
});
} }
function getReport(reportId: unknown) { function getReport(reportId: unknown) {
socket.emit( void (async () => {
'getReport', try {
reportId, const data = (await socket.invoke('getReport', reportId)) as {
(error: Error, data: { payload: string }) => { payload: string;
if (error) { };
store.dispatch({ type: GET_REPORT_ERROR, error });
return;
}
store.dispatch({ type: GET_REPORT_SUCCESS, data }); store.dispatch({ type: GET_REPORT_SUCCESS, data });
store.dispatch(importState(data.payload)); store.dispatch(importState(data.payload));
} catch (error) {
store.dispatch({ type: GET_REPORT_ERROR, error: error as Error });
} }
); })();
} }
export function api(inStore: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) { export function api(inStore: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) {

2
packages/redux-devtools-app/src/reducers/socket.ts
View File

@ -1,4 +1,4 @@
import { AuthStates, States } from 'socketcluster-client/lib/scclientsocket'; import { AuthStates, States } from 'socketcluster-client/lib/clientsocket';
import * as actions from '../constants/socketActionTypes'; import * as actions from '../constants/socketActionTypes';
import { StoreAction } from '../actions'; import { StoreAction } from '../actions';

19
packages/redux-devtools-chart-monitor/CHANGELOG.md
View File

@ -1,5 +1,24 @@
# Change Log # Change Log
## 3.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 3.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/core@3.13.0
## 2.1.1 ## 2.1.1
### Patch Changes ### Patch Changes

40
packages/redux-devtools-chart-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/chart-monitor", "name": "@redux-devtools/chart-monitor",
"version": "2.1.1", "version": "3.0.1",
"description": "Chart monitor for Redux DevTools", "description": "Chart monitor for Redux DevTools",
"keywords": [ "keywords": [
"redux", "redux",
@ -39,7 +39,7 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"d3-state-visualizer": "^1.6.0", "d3-state-visualizer": "^1.6.0",
@ -49,29 +49,29 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"
} }
} }

19
packages/redux-devtools-cli/app/index.html
View File

@ -31,16 +31,15 @@
<script src="/redux-devtools-app.min.js"></script> <script src="/redux-devtools-app.min.js"></script>
<script src="/port.js"></script> <script src="/port.js"></script>
<script> <script>
ReactDOM.render( const container = document.querySelector('#root');
React.createElement(ReduxDevToolsApp, { const element = React.createElement(ReduxDevToolsApp, {
socketOptions: { socketOptions: {
hostname: location.hostname, hostname: location.hostname,
port: reduxDevToolsPort, port: reduxDevToolsPort,
autoReconnect: true, autoReconnect: true,
}, },
}), });
document.querySelector('#root') ReactDOM.createRoot(container).render(element);
);
</script> </script>
</body> </body>
</html> </html>

43
packages/redux-devtools-cli/package.json
View File

@ -41,26 +41,26 @@
}, },
"dependencies": { "dependencies": {
"@redux-devtools/app": "^2.1.3", "@redux-devtools/app": "^2.1.3",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"apollo-server-express": "^3.7.0", "apollo-server-express": "^3.9.0",
"body-parser": "^1.20.0", "body-parser": "^1.20.0",
"chalk": "^4.1.2", "chalk": "^4.1.2",
"cors": "^2.8.5", "cors": "^2.8.5",
"cross-spawn": "^7.0.3", "cross-spawn": "^7.0.3",
"electron": "^18.2.0", "electron": "^19.0.6",
"express": "^4.18.1", "express": "^4.18.1",
"getport": "^0.1.0", "getport": "^0.1.0",
"graphql": "^16.4.0", "graphql": "^16.5.0",
"knex": "^2.0.0", "knex": "^2.1.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"minimist": "^1.2.6", "minimist": "^1.2.6",
"morgan": "^1.10.0", "morgan": "^1.10.0",
"open": "^8.4.0", "open": "^8.4.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"semver": "^7.3.7", "semver": "^7.3.7",
"socketcluster": "^14.4.2", "socketcluster-server": "^16.2.1",
"sqlite3": "^5.0.8", "sqlite3": "^5.0.8",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"uuid": "^8.3.2" "uuid": "^8.3.2"
@ -70,29 +70,28 @@
"@types/cors": "^2.8.12", "@types/cors": "^2.8.12",
"@types/cross-spawn": "^6.0.2", "@types/cross-spawn": "^6.0.2",
"@types/express": "^4.17.13", "@types/express": "^4.17.13",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/minimist": "^1.2.2", "@types/minimist": "^1.2.2",
"@types/morgan": "^1.9.3", "@types/morgan": "^1.9.3",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/semver": "^7.3.9", "@types/semver": "^7.3.10",
"@types/socketcluster": "^14.0.4", "@types/socketcluster-client": "^16.0.0",
"@types/socketcluster-client": "^13.0.5", "@types/socketcluster-server": "^16.1.0",
"@types/socketcluster-server": "^14.2.6",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@types/supertest": "^2.0.12", "@types/supertest": "^2.0.12",
"@types/uuid": "^8.3.4", "@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"jest": "^27.5.1", "jest": "^27.5.1",
"ncp": "^2.0.0", "ncp": "^2.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"socketcluster-client": "^14.3.2", "socketcluster-client": "^16.1.1",
"supertest": "^6.2.3", "supertest": "^6.2.3",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
} }
} }

7
packages/redux-devtools-cli/src/bin/redux-devtools.ts
View File

@ -88,10 +88,9 @@ if (argv.injectserver) {
} }
// eslint-disable-next-line @typescript-eslint/no-floating-promises // eslint-disable-next-line @typescript-eslint/no-floating-promises
server(argv).then(function (r) { server(argv).then(async function (r) {
if (argv.open && argv.open !== 'false') { if (argv.open && argv.open !== 'false') {
r.on('ready', async function () { await r.listener('ready').once();
await openApp(argv.open as string, options); await openApp(argv.open as string, options);
});
} }
}); });

4
packages/redux-devtools-cli/src/db/connector.ts
View File

@ -1,8 +1,8 @@
import path from 'path'; import path from 'path';
import knexModule, { Knex } from 'knex'; import knexModule, { Knex } from 'knex';
import { SCServer } from 'socketcluster-server'; import { AGServer } from 'socketcluster-server';
export default function connector(options: SCServer.SCServerOptions) { export default function connector(options: AGServer.AGServerOptions) {
const dbOptions = options.dbOptions as Knex.Config; const dbOptions = options.dbOptions as Knex.Config;
dbOptions.useNullAsDefault = true; dbOptions.useNullAsDefault = true;
if (!(dbOptions as any).migrate) { if (!(dbOptions as any).migrate) {

113
packages/redux-devtools-cli/src/index.ts
View File

@ -1,6 +1,10 @@
import express from 'express';
import http from 'http';
import getPort from 'getport'; import getPort from 'getport';
import SocketCluster from 'socketcluster'; import socketClusterServer from 'socketcluster-server';
import getOptions, { Options } from './options'; import getOptions, { Options } from './options';
import routes from './routes';
import createStore from './store';
// var LOG_LEVEL_NONE = 0; // var LOG_LEVEL_NONE = 0;
const LOG_LEVEL_ERROR = 1; const LOG_LEVEL_ERROR = 1;
@ -8,16 +12,14 @@ const LOG_LEVEL_WARN = 2;
const LOG_LEVEL_INFO = 3; const LOG_LEVEL_INFO = 3;
export interface ExtendedOptions extends Options { export interface ExtendedOptions extends Options {
workerController: string;
allowClientPublish: boolean; allowClientPublish: boolean;
} }
export default function (argv: { [arg: string]: any }): Promise<{ export default function (argv: { [arg: string]: any }): Promise<{
portAlreadyUsed?: boolean; portAlreadyUsed?: boolean;
on: (status: 'ready', cb: (() => void) | (() => Promise<void>)) => void; listener: (eventName: 'ready') => { once(): Promise<void> };
}> { }> {
const options = Object.assign(getOptions(argv), { const options = Object.assign(getOptions(argv), {
workerController: __dirname + '/worker.js',
allowClientPublish: false, allowClientPublish: false,
}); });
const port = options.port; const port = options.port;
@ -39,8 +41,12 @@ export default function (argv: { [arg: string]: any }): Promise<{
} }
resolve({ resolve({
portAlreadyUsed: true, portAlreadyUsed: true,
on: function (status: string, cb: () => void) { listener: function (eventName: 'ready') {
cb(); return {
once() {
return Promise.resolve();
},
};
}, },
}); });
} else { } else {
@ -48,7 +54,100 @@ export default function (argv: { [arg: string]: any }): Promise<{
console.log('[ReduxDevTools] Start server...'); console.log('[ReduxDevTools] Start server...');
console.log('-'.repeat(80) + '\n'); console.log('-'.repeat(80) + '\n');
} }
resolve(new SocketCluster(options)); const httpServer = http.createServer();
const agServer = socketClusterServer.attach(httpServer, options);
const app = express();
httpServer.on('request', app);
const store = createStore(options);
app.use(routes(options, store, agServer));
agServer.setMiddleware(
agServer.MIDDLEWARE_INBOUND,
// eslint-disable-next-line @typescript-eslint/no-misused-promises
async (middlewareStream) => {
for await (const action of middlewareStream) {
if (action.type === action.TRANSMIT) {
const channel = action.receiver;
const data = action.data;
if (
channel.substring(0, 3) === 'sc-' ||
channel === 'respond' ||
channel === 'log'
) {
void agServer.exchange.transmitPublish(channel, data);
} else if (channel === 'log-noid') {
void agServer.exchange.transmitPublish('log', {
id: action.socket.id,
data: data,
});
}
} else if (action.type === action.SUBSCRIBE) {
if (action.channel === 'report') {
store
.list()
.then(function (data) {
void agServer.exchange.transmitPublish('report', {
type: 'list',
data: data,
});
})
.catch(function (error) {
console.error(error); // eslint-disable-line no-console
});
}
}
action.allow();
}
}
);
void (async () => {
for await (const { socket } of agServer.listener('connection')) {
let channelToWatch: string, channelToEmit: string;
void (async () => {
for await (const request of socket.procedure('login')) {
const credentials = request.data;
if (credentials === 'master') {
channelToWatch = 'respond';
channelToEmit = 'log';
} else {
channelToWatch = 'log';
channelToEmit = 'respond';
}
request.end(channelToWatch);
}
})();
void (async () => {
for await (const request of socket.procedure('getReport')) {
const id = request.data as string;
store
.get(id)
.then(function (data) {
request.end(data);
})
.catch(function (error) {
console.error(error); // eslint-disable-line no-console
});
}
})();
void (async () => {
for await (const data of socket.listener('disconnect')) {
const channel = agServer.exchange.channel('sc-' + socket.id);
channel.unsubscribe();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
void agServer.exchange.transmitPublish(channelToEmit!, {
id: socket.id,
type: 'DISCONNECTED',
});
}
})();
}
})();
httpServer.listen(options.port);
// @ts-expect-error Shouldn't there be a 'ready' event?
resolve(agServer);
} }
/* eslint-enable no-console */ /* eslint-enable no-console */
}); });

11
packages/redux-devtools-cli/src/routes.ts
View File

@ -5,7 +5,7 @@ import morgan from 'morgan';
import * as http from 'http'; import * as http from 'http';
import bodyParser from 'body-parser'; import bodyParser from 'body-parser';
import cors from 'cors'; import cors from 'cors';
import { SCServer } from 'socketcluster-server'; import { AGServer } from 'socketcluster-server';
import { ApolloServer } from 'apollo-server-express'; import { ApolloServer } from 'apollo-server-express';
import { AddData, ReportBaseFields, Store } from './store'; import { AddData, ReportBaseFields, Store } from './store';
import { resolvers, schema } from './api/schema'; import { resolvers, schema } from './api/schema';
@ -21,9 +21,9 @@ function serveUmdModule(name: string) {
} }
function routes( function routes(
options: SCServer.SCServerOptions, options: AGServer.AGServerOptions,
store: Store, store: Store,
scServer: SCServer scServer: AGServer
): Router { ): Router {
const limit = options.maxRequestBody; const limit = options.maxRequestBody;
const logHTTPRequests = options.logHTTPRequests; const logHTTPRequests = options.logHTTPRequests;
@ -65,7 +65,8 @@ function routes(
serveUmdModule('@redux-devtools/app'); serveUmdModule('@redux-devtools/app');
app.get('/port.js', function (req, res) { app.get('/port.js', function (req, res) {
res.send(`reduxDevToolsPort = ${options.port!}`); // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
res.send(`reduxDevToolsPort = ${options.port}`);
}); });
app.get('*', function (req, res) { app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, '../app/index.html')); res.sendFile(path.join(__dirname, '../app/index.html'));
@ -108,7 +109,7 @@ function routes(
id: (r as ReportBaseFields).id, id: (r as ReportBaseFields).id,
error: (r as { error: string }).error, error: (r as { error: string }).error,
}); });
scServer.exchange.publish('report', { void scServer.exchange.transmitPublish('report', {
type: 'add', type: 'add',
data: r, data: r,
}); });

4
packages/redux-devtools-cli/src/store.ts
View File

@ -1,6 +1,6 @@
import { v4 as uuidV4 } from 'uuid'; import { v4 as uuidV4 } from 'uuid';
import pick from 'lodash/pick'; import pick from 'lodash/pick';
import { SCServer } from 'socketcluster-server'; import { AGServer } from 'socketcluster-server';
import { Knex } from 'knex'; import { Knex } from 'knex';
import connector from './db/connector'; import connector from './db/connector';
@ -139,7 +139,7 @@ export interface Store {
add: (data: AddData) => Promise<ReportBaseFields | { error: string }>; add: (data: AddData) => Promise<ReportBaseFields | { error: string }>;
} }
function createStore(options: SCServer.SCServerOptions): Store { function createStore(options: AGServer.AGServerOptions): Store {
knex = connector(options); knex = connector(options);
return { return {

86
packages/redux-devtools-cli/src/worker.ts
View File

@ -1,86 +0,0 @@
import SCWorker from 'socketcluster/scworker';
import express from 'express';
import routes from './routes';
import createStore from './store';
const app = express();
class Worker extends SCWorker {
run() {
const httpServer = this.httpServer;
const scServer = this.scServer;
const options = this.options;
const store = createStore(options);
httpServer.on('request', app);
app.use(routes(options, store, scServer));
scServer.addMiddleware(scServer.MIDDLEWARE_EMIT, function (req, next) {
const channel = req.event;
const data = req.data;
if (
channel.substr(0, 3) === 'sc-' ||
channel === 'respond' ||
channel === 'log'
) {
scServer.exchange.publish(channel, data);
} else if (channel === 'log-noid') {
scServer.exchange.publish('log', { id: req.socket.id, data: data });
}
next();
});
scServer.addMiddleware(scServer.MIDDLEWARE_SUBSCRIBE, function (req, next) {
next();
if (req.channel === 'report') {
store
.list()
.then(function (data) {
req.socket.emit(req.channel!, { type: 'list', data: data });
})
.catch(function (error) {
console.error(error); // eslint-disable-line no-console
});
}
});
scServer.on('connection', function (socket) {
let channelToWatch: string, channelToEmit: string;
socket.on('login', function (this: Worker, credentials, respond) {
if (credentials === 'master') {
channelToWatch = 'respond';
channelToEmit = 'log';
} else {
channelToWatch = 'log';
channelToEmit = 'respond';
}
this.exchange.subscribe('sc-' + socket.id).watch(function (msg) {
socket.emit(channelToWatch, msg);
});
respond(null, channelToWatch);
});
socket.on('getReport', function (id: string, respond) {
store
.get(id)
.then(function (data) {
respond(null, data);
})
.catch(function (error) {
console.error(error); // eslint-disable-line no-console
});
});
socket.on('disconnect', function (this: Worker) {
const channel = this.exchange.channel('sc-' + socket.id);
channel.unsubscribe();
channel.destroy();
scServer.exchange.publish(channelToEmit, {
id: socket.id,
type: 'DISCONNECTED',
});
});
});
}
}
new Worker();

257
packages/redux-devtools-cli/test/integration.spec.ts
View File

@ -1,6 +1,6 @@
import childProcess from 'child_process'; import childProcess from 'child_process';
import request from 'supertest'; import request from 'supertest';
import scClient from 'socketcluster-client'; import socketClusterClient from 'socketcluster-client';
jest.setTimeout(10000); jest.setTimeout(10000);
@ -44,20 +44,30 @@ describe('Server', function () {
}); });
describe('Realtime monitoring', function () { describe('Realtime monitoring', function () {
let socket: scClient.SCClientSocket, let socket: socketClusterClient.AGClientSocket,
socket2: scClient.SCClientSocket, socket2: socketClusterClient.AGClientSocket,
channel; channel;
beforeAll(function () { beforeAll(function () {
socket = scClient.connect({ hostname: 'localhost', port: 8000 }); socket = socketClusterClient.create({
hostname: 'localhost',
port: 8000,
});
socket.connect(); socket.connect();
socket.on('error', function (error) { void (async () => {
console.error('Socket1 error', error); // eslint-disable-line no-console for await (const data of socket.listener('error')) {
console.error('Socket1 error', data.error); // eslint-disable-line no-console
}
})();
socket2 = socketClusterClient.create({
hostname: 'localhost',
port: 8000,
}); });
socket2 = scClient.connect({ hostname: 'localhost', port: 8000 });
socket2.connect(); socket2.connect();
socket.on('error', function (error) { void (async () => {
console.error('Socket2 error', error); // eslint-disable-line no-console for await (const data of socket2.listener('error')) {
}); console.error('Socket2 error', data.error); // eslint-disable-line no-console
}
})();
}); });
afterAll(function () { afterAll(function () {
@ -65,73 +75,50 @@ describe('Server', function () {
socket2.disconnect(); socket2.disconnect();
}); });
it('should connect', function () { it('should connect', async function () {
return new Promise<void>((done) => { const data = await socket.listener('connect').once();
socket.on('connect', function (status) { expect(data.id).toBeTruthy();
expect(status.id).toBeTruthy();
done();
});
});
}); });
it('should login', function () { it('should login', async function () {
socket.emit( try {
'login', const channelName = (await socket.invoke('login', 'master')) as string;
'master', expect(channelName).toBe('respond');
function (error: Error | undefined, channelName: string) { channel = socket.subscribe(channelName);
if (error) { expect(channel.SUBSCRIBED).toBe('subscribed');
/* eslint-disable-next-line no-console */ } catch (error) {
console.log(error); console.log(error);
return; }
}
expect(channelName).toBe('respond');
channel = socket.subscribe(channelName);
expect(channel.SUBSCRIBED).toBe('subscribed');
}
);
}); });
it('should send message', function () { it('should send message', async function () {
return new Promise<void>((done) => { const data = {
const data = { type: 'ACTION',
type: 'ACTION', payload: {
payload: { todos: 'do some',
todos: 'do some', },
}, action: {
timestamp: 1483349708506,
action: { action: {
timestamp: 1483349708506, type: 'ADD_TODO',
action: { text: 'hggg',
type: 'ADD_TODO',
text: 'hggg',
},
}, },
instanceId: 'tAmA7H5fclyWhvizAAAi', },
name: 'LoggerInstance', instanceId: 'tAmA7H5fclyWhvizAAAi',
id: 'tAmA7H5fclyWhvizAAAi', name: 'LoggerInstance',
}; id: 'tAmA7H5fclyWhvizAAAi',
};
socket2.emit( try {
'login', const channelName = (await socket.invoke('login', '')) as string;
'', expect(channelName).toBe('log');
function (error: Error | undefined, channelName: string) { const channel2 = socket2.subscribe(channelName);
if (error) { expect(channel2.SUBSCRIBED).toBe('subscribed');
/* eslint-disable-next-line no-console */ const message = await channel2.listener('subscribe').once();
console.log(error); expect(message).toEqual(data);
return; } catch (error) {
} console.log(error);
expect(channelName).toBe('log'); }
const channel2 = socket2.subscribe(channelName);
expect(channel2.SUBSCRIBED).toBe('subscribed');
channel2.on('subscribe', function () {
channel2.watch(function (message) {
expect(message).toEqual(data);
done();
});
socket.emit(channelName, data);
});
}
);
});
}); });
}); });
@ -149,97 +136,61 @@ describe('Server', function () {
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) ' + 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) ' +
'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36', 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36',
}; };
it('should add a report', function () { it('should add a report', async function () {
return new Promise<void>((done) => { const res = await request('http://localhost:8000')
// eslint-disable-next-line @typescript-eslint/no-floating-promises .post('/')
request('http://localhost:8000') .send(report)
.post('/') .set('Accept', 'application/json')
.send(report) .expect('Content-Type', /application\/json/)
.set('Accept', 'application/json') .expect(200);
.expect('Content-Type', /application\/json/) id = res.body.id;
.expect(200) expect(id).toBeTruthy();
.then(function (res: { body: { id: string } }) {
id = res.body.id;
expect(id).toBeTruthy();
done();
});
});
}); });
it('should get the report', function () { it('should get the report', async function () {
return new Promise<void>((done) => { const res = await request('http://localhost:8000')
// eslint-disable-next-line @typescript-eslint/no-floating-promises .post('/')
request('http://localhost:8000') .send({
.post('/') op: 'get',
.send({ id: id,
op: 'get', })
id: id, .set('Accept', 'application/json')
}) .expect('Content-Type', /application\/json/)
.set('Accept', 'application/json') .expect(200);
.expect('Content-Type', /application\/json/) expect(res.body).toMatchObject(report);
.expect(200)
.then(function (res: { body: unknown }) {
expect(res.body).toMatchObject(report);
done();
});
});
}); });
it('should list reports', function () { it('should list reports', async function () {
return new Promise<void>((done) => { const res = await request('http://localhost:8000')
// eslint-disable-next-line @typescript-eslint/no-floating-promises .post('/')
request('http://localhost:8000') .send({
.post('/') op: 'list',
.send({ })
op: 'list', .set('Accept', 'application/json')
}) .expect('Content-Type', /application\/json/)
.set('Accept', 'application/json') .expect(200);
.expect('Content-Type', /application\/json/) expect(res.body).toHaveLength(1);
.expect(200) expect(res.body[0].id).toBe(id);
.then(function (res: { expect(res.body[0].title).toBe('Test report');
body: { id: string; title: string | null; added: string | null }[]; expect(res.body[0].added).toBeTruthy();
}) {
expect(res.body).toHaveLength(1);
expect(res.body[0].id).toBe(id);
expect(res.body[0].title).toBe('Test report');
expect(res.body[0].added).toBeTruthy();
done();
});
});
}); });
}); });
describe('GraphQL backend', function () { describe('GraphQL backend', function () {
it('should get the report', function () { it('should get the report', async function () {
return new Promise<void>((done) => { const res = await request('http://localhost:8000')
// eslint-disable-next-line @typescript-eslint/no-floating-promises .post('/graphql')
request('http://localhost:8000') .send({
.post('/graphql') query: '{ reports { id, type, title } }',
.send({ })
query: '{ reports { id, type, title } }', .set('Accept', 'application/json')
}) .expect('Content-Type', /application\/json/)
.set('Accept', 'application/json') .expect(200);
.expect('Content-Type', /application\/json/) const reports = res.body.data.reports;
.expect(200) expect(reports).toHaveLength(1);
.then(function (res: { expect(reports[0].id).toBeTruthy();
body: { expect(reports[0].title).toBe('Test report');
data: { expect(reports[0].type).toBe('ACTIONS');
reports: {
id: string;
title: string | null;
type: string | null;
}[];
};
};
}) {
const reports = res.body.data.reports;
expect(reports).toHaveLength(1);
expect(reports[0].id).toBeTruthy();
expect(reports[0].title).toBe('Test report');
expect(reports[0].type).toBe('ACTIONS');
done();
});
});
}); });
}); });
}); });

20
packages/redux-devtools-dock-monitor/CHANGELOG.md
View File

@ -1,5 +1,25 @@
# Change Log # Change Log
## 3.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 3.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- react-dock@0.6.0
- @redux-devtools/core@3.13.0
## 2.1.1 ## 2.1.1
### Patch Changes ### Patch Changes

42
packages/redux-devtools-dock-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/dock-monitor", "name": "@redux-devtools/dock-monitor",
"version": "2.1.1", "version": "3.0.1",
"description": "A resizable and movable dock for Redux DevTools monitors", "description": "A resizable and movable dock for Redux DevTools monitors",
"keywords": [ "keywords": [
"redux", "redux",
@ -41,38 +41,38 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"parse-key": "^0.2.1", "parse-key": "^0.2.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-dock": "^0.5.1" "react-dock": "^0.6.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@types/parse-key": "^0.2.0", "@types/parse-key": "^0.2.0",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"
} }
} }

20
packages/redux-devtools-extension/package.json
View File

@ -29,23 +29,23 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"immutable": "^4.0.0" "immutable": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"redux": "^3.1.0 || ^4.0.0" "redux": "^3.1.0 || ^4.0.0"

12
packages/redux-devtools-inspector-monitor-test-tab/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# Change Log # Change Log
## 1.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/inspector-monitor@3.0.0
- @redux-devtools/ui@1.3.0
## 0.8.6 ## 0.8.6
### Patch Changes ### Patch Changes

11
packages/redux-devtools-inspector-monitor-test-tab/demo/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# test-demo # test-demo
## 0.1.10
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/dock-monitor@3.0.0
- @redux-devtools/inspector-monitor-test-tab@1.0.0
- @redux-devtools/inspector-monitor@3.0.0
- @redux-devtools/ui@1.3.0
- @redux-devtools/core@3.13.0
## 0.1.9 ## 0.1.9
### Patch Changes ### Patch Changes

65
packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "test-demo", "name": "test-demo",
"version": "0.1.9", "version": "0.1.10",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open", "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open",
@ -10,55 +10,50 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/dock-monitor": "^2.1.1", "@redux-devtools/dock-monitor": "^3.0.0",
"@redux-devtools/inspector-monitor": "^2.1.2", "@redux-devtools/inspector-monitor": "^3.0.0",
"@redux-devtools/inspector-monitor-test-tab": "^0.8.6", "@redux-devtools/inspector-monitor-test-tab": "^1.0.0",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"connected-react-router": "^6.9.2", "immutable": "^4.1.0",
"history": "^4.10.1",
"immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0", "lodash.shuffle": "^4.2.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"react-router": "^5.3.1", "react-router-dom": "^6.3.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/history": "^4.7.11",
"@types/lodash.shuffle": "^4.2.7", "@types/lodash.shuffle": "^4.2.7",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24",
"@types/react-router": "^5.1.18",
"@types/redux-logger": "^3.0.9", "@types/redux-logger": "^3.0.9",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@types/webpack-env": "^1.16.4", "@types/webpack-env": "^1.17.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

150
packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx
View File

@ -1,8 +1,8 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button, Toolbar, Spacer } from '@redux-devtools/ui'; import { Button, Toolbar, Spacer } from '@redux-devtools/ui';
import { push as pushRoute } from 'connected-react-router';
import pkg from '@redux-devtools/inspector-monitor-test-tab/package.json'; import pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';
import { useLocation } from 'react-router-dom';
import getOptions from './getOptions'; import getOptions from './getOptions';
import { DemoAppState } from './reducers'; import { DemoAppState } from './reducers';
import { import {
@ -69,87 +69,84 @@ interface Props
shuffleArray: () => void; shuffleArray: () => void;
} }
class DemoApp extends React.Component<Props> { function DemoApp(props: Props) {
timeout?: number; const timeout = useRef<number | undefined>();
const location = useLocation();
render() { const options = getOptions(location);
const options = getOptions(this.props.router.location);
return ( const toggleTimeoutUpdate = () => {
<div style={styles.wrapper}> const enabled = !props.timeoutUpdateEnabled;
<h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3> props.toggleTimeoutUpdate(enabled);
<h5>
{pkg.description || (
<span style={styles.muted}>Package Description</span>
)}
</h5>
<Toolbar>
<Spacer />
<Button onClick={this.props.increment}>Increment</Button>
<Button onClick={this.props.push}>Push</Button>
<Button onClick={this.props.pop}>Pop</Button>
<Button onClick={this.props.replace}>Replace</Button>
<Button onClick={this.props.changeNested}>Change Nested</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.pushHugeArray}>Push Huge Array</Button>
<Button onClick={this.props.addHugeObject}>Add Huge Object</Button>
<Button onClick={this.props.hugePayload}>Huge Payload</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.addIterator}>Add Iterator</Button>
<Button onClick={this.props.addImmutableMap}>
Add Immutable Map
</Button>
<Button onClick={this.props.changeImmutableNested}>
Change Immutable Nested
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.addRecursive}>Add Recursive</Button>
<Button onClick={this.props.addFunction}>Add Function</Button>
<Button onClick={this.props.addSymbol}>Add Symbol</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.toggleTimeoutUpdate}>
Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
</Button>
<Button onClick={this.props.shuffleArray}>Shuffle Array</Button>
<Spacer />
</Toolbar>
<div>
{options.useExtension ? (
<a href={`${ROOT}`} style={styles.link}>
Disable browser extension
</a>
) : (
<a href={`${ROOT}?ext`} style={styles.link}>
Use browser extension
</a>
)}
</div>
</div>
);
}
toggleTimeoutUpdate = () => {
const enabled = !this.props.timeoutUpdateEnabled;
this.props.toggleTimeoutUpdate(enabled);
if (enabled) { if (enabled) {
this.timeout = window.setInterval(this.props.timeoutUpdate, 1000); timeout.current = window.setInterval(props.timeoutUpdate, 1000);
} else { } else {
clearTimeout(this.timeout); clearTimeout(timeout.current);
} }
}; };
return (
<div style={styles.wrapper}>
<h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3>
<h5>
{pkg.description || (
<span style={styles.muted}>Package Description</span>
)}
</h5>
<Toolbar>
<Spacer />
<Button onClick={props.increment}>Increment</Button>
<Button onClick={props.push}>Push</Button>
<Button onClick={props.pop}>Pop</Button>
<Button onClick={props.replace}>Replace</Button>
<Button onClick={props.changeNested}>Change Nested</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={props.pushHugeArray}>Push Huge Array</Button>
<Button onClick={props.addHugeObject}>Add Huge Object</Button>
<Button onClick={props.hugePayload}>Huge Payload</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={props.addIterator}>Add Iterator</Button>
<Button onClick={props.addImmutableMap}>Add Immutable Map</Button>
<Button onClick={props.changeImmutableNested}>
Change Immutable Nested
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={props.addRecursive}>Add Recursive</Button>
<Button onClick={props.addFunction}>Add Function</Button>
<Button onClick={props.addSymbol}>Add Symbol</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={toggleTimeoutUpdate}>
Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
</Button>
<Button onClick={props.shuffleArray}>Shuffle Array</Button>
<Spacer />
</Toolbar>
<div>
{options.useExtension ? (
<a href={`${ROOT}`} style={styles.link}>
Disable browser extension
</a>
) : (
<a href={`${ROOT}?ext`} style={styles.link}>
Use browser extension
</a>
)}
</div>
</div>
);
} }
export default connect((state: DemoAppState) => state, { export default connect((state: DemoAppState) => state, {
@ -180,5 +177,4 @@ export default connect((state: DemoAppState) => state, {
addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }), addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }), addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }), shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
pushRoute,
})(DemoApp); })(DemoApp);

15
packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import { import {
InspectorMonitor, InspectorMonitor,
@ -7,10 +6,9 @@ import {
Tab, Tab,
} from '@redux-devtools/inspector-monitor'; } from '@redux-devtools/inspector-monitor';
import { DockMonitor } from '@redux-devtools/dock-monitor'; import { DockMonitor } from '@redux-devtools/dock-monitor';
import { Location } from 'history'; import { useLocation } from 'react-router-dom';
import getOptions from './getOptions'; import getOptions from './getOptions';
import { TestTab } from '@redux-devtools/inspector-monitor-test-tab'; import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
import { DemoAppState } from './reducers';
import { Action } from 'redux'; import { Action } from 'redux';
export const getDevTools = (location: { search: string }) => export const getDevTools = (location: { search: string }) =>
@ -38,13 +36,8 @@ export const getDevTools = (location: { search: string }) =>
</DockMonitor> </DockMonitor>
); );
const UnconnectedDevTools = ({ location }: { location: Location }) => { export function ConnectedDevTools() {
const location = useLocation();
const DevTools = getDevTools(location); const DevTools = getDevTools(location);
return <DevTools />; return <DevTools />;
}; }
const mapStateToProps = (state: DemoAppState) => ({
location: state.router.location,
});
export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);

4
packages/redux-devtools-inspector-monitor-test-tab/demo/src/getOptions.ts
View File

@ -9,12 +9,12 @@ export default function getOptions(location: { search: string }) {
return { return {
useExtension: location.search.indexOf('ext') !== -1, useExtension: location.search.indexOf('ext') !== -1,
supportImmutable: location.search.indexOf('immutable') !== -1, supportImmutable: location.search.indexOf('immutable') !== -1,
theme: getTheme(), theme: getTheme(location),
dark: location.search.indexOf('dark') !== -1, dark: location.search.indexOf('dark') !== -1,
}; };
} }
function getTheme() { function getTheme(location: { search: string }) {
const match = /theme=([^&]+)/.exec(location.search); const match = /theme=([^&]+)/.exec(location.search);
return match ? match[1] : 'inspector'; return match ? match[1] : 'inspector';
} }

30
packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import { Container } from '@redux-devtools/ui'; import { Container } from '@redux-devtools/ui';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { import {
@ -10,12 +10,10 @@ import {
StoreEnhancerStoreCreator, StoreEnhancerStoreCreator,
} from 'redux'; } from 'redux';
import logger from 'redux-logger'; import logger from 'redux-logger';
import { Route } from 'react-router'; import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
import { persistState } from '@redux-devtools/core'; import { persistState } from '@redux-devtools/core';
import DemoApp from './DemoApp'; import DemoApp from './DemoApp';
import createRootReducer from './reducers'; import { rootReducer } from './reducers';
import getOptions from './getOptions'; import getOptions from './getOptions';
import { ConnectedDevTools, getDevTools } from './DevTools'; import { ConnectedDevTools, getDevTools } from './DevTools';
@ -31,14 +29,12 @@ const ROOT =
const DevTools = getDevTools(window.location); const DevTools = getDevTools(window.location);
const history = createBrowserHistory();
const useDevtoolsExtension = const useDevtoolsExtension =
!!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) && !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&
getOptions(window.location).useExtension; getOptions(window.location).useExtension;
const enhancer = compose( const enhancer = compose(
applyMiddleware(logger, routerMiddleware(history)), applyMiddleware(logger),
(next: StoreEnhancerStoreCreator) => { (next: StoreEnhancerStoreCreator) => {
const instrument = useDevtoolsExtension const instrument = useDevtoolsExtension
? ( ? (
@ -52,11 +48,12 @@ const enhancer = compose(
persistState(getDebugSessionKey()) persistState(getDebugSessionKey())
); );
const store = createStore(createRootReducer(history), enhancer); const store = createStore(rootReducer, enhancer);
render( const root = createRoot(document.getElementById('root')!);
root.render(
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={history}> <BrowserRouter>
<Container <Container
themeData={{ themeData={{
theme: 'default', theme: 'default',
@ -64,12 +61,11 @@ render(
colorPreference: 'auto', colorPreference: 'auto',
}} }}
> >
<Route path={ROOT}> <Routes>
<DemoApp /> <Route path={ROOT} element={<DemoApp />} />
</Route> </Routes>
{!useDevtoolsExtension && <ConnectedDevTools />} {!useDevtoolsExtension && <ConnectedDevTools />}
</Container> </Container>
</ConnectedRouter> </BrowserRouter>
</Provider>, </Provider>
document.getElementById('root')
); );

17
packages/redux-devtools-inspector-monitor-test-tab/demo/src/reducers.ts
View File

@ -1,12 +1,6 @@
import Immutable from 'immutable'; import Immutable from 'immutable';
import shuffle from 'lodash.shuffle'; import shuffle from 'lodash.shuffle';
import { combineReducers, Reducer } from 'redux'; import { combineReducers, Reducer } from 'redux';
import {
connectRouter,
LocationChangeAction,
RouterState,
} from 'connected-react-router';
import { History } from 'history';
type Nested = { long: { nested: { path: { to: { a: string } } }[] } }; type Nested = { long: { nested: { path: { to: { a: string } } }[] } };
@ -139,11 +133,9 @@ type DemoAppAction =
| HugePayloadAction | HugePayloadAction
| AddFunctionAction | AddFunctionAction
| AddSymbolAction | AddSymbolAction
| ShuffleArrayAction | ShuffleArrayAction;
| LocationChangeAction;
export interface DemoAppState { export interface DemoAppState {
router: RouterState;
timeoutUpdateEnabled: boolean; timeoutUpdateEnabled: boolean;
store: number; store: number;
undefined: { val: undefined }; undefined: { val: undefined };
@ -162,11 +154,8 @@ export interface DemoAppState {
shuffleArray: unknown[]; shuffleArray: unknown[];
} }
const createRootReducer = ( export const rootReducer: Reducer<DemoAppState, DemoAppAction> =
history: History
): Reducer<DemoAppState, DemoAppAction> =>
combineReducers<DemoAppState, DemoAppAction>({ combineReducers<DemoAppState, DemoAppAction>({
router: connectRouter(history) as Reducer<RouterState, DemoAppAction>,
timeoutUpdateEnabled: (state = false, action) => timeoutUpdateEnabled: (state = false, action) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE' action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled ? action.timeoutUpdateEnabled
@ -231,5 +220,3 @@ const createRootReducer = (
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) => shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state, action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
}); });
export default createRootReducer;

56
packages/redux-devtools-inspector-monitor-test-tab/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/inspector-monitor-test-tab", "name": "@redux-devtools/inspector-monitor-test-tab",
"version": "0.8.6", "version": "1.0.0",
"description": "Generate tests for redux devtools.", "description": "Generate tests for redux devtools.",
"keywords": [ "keywords": [
"redux", "redux",
@ -43,54 +43,54 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"es6template": "^1.0.5", "es6template": "^1.0.5",
"javascript-stringify": "^2.1.0", "javascript-stringify": "^2.1.0",
"jsan": "^3.1.14", "jsan": "^3.1.14",
"object-path": "^0.11.8", "object-path": "^0.11.8",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"simple-diff": "^1.6.0" "simple-diff": "^1.6.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/inspector-monitor": "^2.1.2", "@redux-devtools/inspector-monitor": "^3.0.0",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^13.3.0",
"@types/es6template": "^1.0.0", "@types/es6template": "^1.0.0",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/object-path": "^0.11.1", "@types/object-path": "^0.11.1",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/simple-diff": "^1.6.1", "@types/simple-diff": "^1.6.1",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/inspector-monitor": "^2.0.0", "@redux-devtools/inspector-monitor": "^3.0.0",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0", "redux": "^3.4.0 || ^4.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
} }

11
packages/redux-devtools-inspector-monitor-trace-tab/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# Change Log # Change Log
## 1.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/inspector-monitor@3.0.0
## 0.3.4 ## 0.3.4
### Patch Changes ### Patch Changes

58
packages/redux-devtools-inspector-monitor-trace-tab/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/inspector-monitor-trace-tab", "name": "@redux-devtools/inspector-monitor-trace-tab",
"version": "0.3.4", "version": "1.0.0",
"description": "Submonitor for Redux DevTools inspector to show stack traces.", "description": "Submonitor for Redux DevTools inspector to show stack traces.",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor-trace-tab", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor-trace-tab",
"license": "MIT", "license": "MIT",
@ -31,8 +31,8 @@
}, },
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.16.7", "@babel/code-frame": "^7.16.7",
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/chrome": "^0.0.184", "@types/chrome": "^0.0.191",
"anser": "^2.1.1", "anser": "^2.1.1",
"html-entities": "^2.3.3", "html-entities": "^2.3.3",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
@ -41,43 +41,43 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/inspector-monitor": "^2.1.2", "@redux-devtools/inspector-monitor": "^3.0.0",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^13.3.0",
"@types/babel__code-frame": "^7.0.3", "@types/babel__code-frame": "^7.0.3",
"@types/html-entities": "^1.3.4", "@types/html-entities": "^1.3.4",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/path-browserify": "^1.0.0", "@types/path-browserify": "^1.0.0",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"@types/source-map": "0.5.2", "@types/source-map": "0.5.2",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-test-renderer": "^17.0.2", "react-test-renderer": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/inspector-monitor": "^2.0.0", "@redux-devtools/inspector-monitor": "^3.0.0",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"
} }
} }

7
packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render, screen } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import { TraceTab } from '../src/StackTraceTab'; import { TraceTab } from '../src/StackTraceTab';
const actions = { const actions = {
@ -42,7 +42,10 @@ describe('StackTraceTab component', () => {
const { container } = render( const { container } = render(
<TraceTabAsAny actions={actions} action={actions[2].action} /> <TraceTabAsAny actions={actions} action={actions[2].action} />
); );
await screen.findByTestId('stack-trace'); const stackTraceDiv = await screen.findByTestId('stack-trace');
await waitFor(() =>
expect(stackTraceDiv.querySelector('div')).toBeTruthy()
);
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
}); });

20
packages/redux-devtools-inspector-monitor/CHANGELOG.md
View File

@ -1,5 +1,25 @@
# Change Log # Change Log
## 3.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 3.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- react-json-tree@0.17.0
- @redux-devtools/core@3.13.0
## 2.1.2 ## 2.1.2
### Patch Changes ### Patch Changes

9
packages/redux-devtools-inspector-monitor/demo/CHANGELOG.md
View File

@ -1,5 +1,14 @@
# inspector-demo # inspector-demo
## 0.1.7
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/dock-monitor@3.0.0
- @redux-devtools/inspector-monitor@3.0.0
- @redux-devtools/core@3.13.0
## 0.1.6 ## 0.1.6
### Patch Changes ### Patch Changes

61
packages/redux-devtools-inspector-monitor/demo/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "inspector-demo", "name": "inspector-demo",
"version": "0.1.6", "version": "0.1.7",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open", "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open",
@ -10,51 +10,46 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/dock-monitor": "^2.1.1", "@redux-devtools/dock-monitor": "^3.0.0",
"@redux-devtools/inspector-monitor": "^2.1.2", "@redux-devtools/inspector-monitor": "^3.0.0",
"base16": "^1.0.0", "base16": "^1.0.0",
"connected-react-router": "^6.9.2", "immutable": "^4.1.0",
"history": "^4.10.1",
"immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0", "lodash.shuffle": "^4.2.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-bootstrap": "^2.3.1", "react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"react-router": "^5.3.1", "react-router-dom": "^6.3.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-logger": "^3.0.6" "redux-logger": "^3.0.6"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/base16": "^1.0.2", "@types/base16": "^1.0.2",
"@types/history": "^4.7.11",
"@types/lodash.shuffle": "^4.2.7", "@types/lodash.shuffle": "^4.2.7",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24",
"@types/react-router": "^5.1.18",
"@types/redux-logger": "^3.0.9", "@types/redux-logger": "^3.0.9",
"@types/webpack-env": "^1.16.4", "@types/webpack-env": "^1.17.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

274
packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
View File

@ -1,4 +1,4 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import pkg from '@redux-devtools/inspector-monitor/package.json'; import pkg from '@redux-devtools/inspector-monitor/package.json';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
@ -10,9 +10,8 @@ import Col from 'react-bootstrap/Col';
import InputGroup from 'react-bootstrap/InputGroup'; import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import * as base16 from 'base16'; import * as base16 from 'base16';
import { push as pushRoute } from 'connected-react-router';
import { Path } from 'history';
import { inspectorThemes } from '@redux-devtools/inspector-monitor'; import { inspectorThemes } from '@redux-devtools/inspector-monitor';
import { useLocation, useNavigate } from 'react-router-dom';
import getOptions, { Options } from './getOptions'; import getOptions, { Options } from './getOptions';
import { import {
AddFunctionAction, AddFunctionAction,
@ -140,132 +139,15 @@ interface Props
addFunction: () => void; addFunction: () => void;
addSymbol: () => void; addSymbol: () => void;
shuffleArray: () => void; shuffleArray: () => void;
pushRoute: (path: Path) => void;
} }
class DemoApp extends React.Component<Props> { function DemoApp(props: Props) {
timeout?: number; const timeout = useRef<number | undefined>();
const location = useLocation();
const navigate = useNavigate();
render() { const toggleExtension = () => {
const options = getOptions(this.props.router.location); const options = getOptions(location);
return (
<div style={styles.wrapper}>
<h1 style={styles.header}>
{pkg.name || <span style={styles.muted}>Package Name</span>}
</h1>
<h5>
{pkg.description || (
<span style={styles.muted}>Package Description</span>
)}
</h5>
<div style={styles.links}>
<div style={styles.input}>
<Form>
<FormGroup as={Row}>
<Col as={FormLabel} sm={3}>
Theme:
</Col>
<Col sm={9}>
<InputGroup>
<FormControl
as="select"
onChange={(event) =>
this.setTheme(options, event.currentTarget.value)
}
>
{themeOptions.map((theme) => (
<option
key={(theme && theme.label) || 'empty'}
label={(theme && theme.label) || '──────────'}
value={theme ? theme.value : undefined}
disabled={!theme}
/>
))}
</FormControl>
<a onClick={this.toggleTheme} style={styles.link}>
{options.dark ? 'Light theme' : 'Dark theme'}
</a>
</InputGroup>
</Col>
</FormGroup>
</Form>
</div>
</div>
<div style={styles.content}>
<div style={styles.buttons}>
<Button onClick={this.props.increment} style={styles.button}>
Increment
</Button>
<Button onClick={this.props.push} style={styles.button}>
Push
</Button>
<Button onClick={this.props.pop} style={styles.button}>
Pop
</Button>
<Button onClick={this.props.replace} style={styles.button}>
Replace
</Button>
<Button onClick={this.props.changeNested} style={styles.button}>
Change Nested
</Button>
<Button onClick={this.props.pushHugeArray} style={styles.button}>
Push Huge Array
</Button>
<Button onClick={this.props.addHugeObject} style={styles.button}>
Add Huge Object
</Button>
<Button onClick={this.props.addIterator} style={styles.button}>
Add Iterator
</Button>
<Button onClick={this.props.addRecursive} style={styles.button}>
Add Recursive
</Button>
<Button onClick={this.props.addNativeMap} style={styles.button}>
Add Native Map
</Button>
<Button onClick={this.props.addImmutableMap} style={styles.button}>
Add Immutable Map
</Button>
<Button
onClick={this.props.changeImmutableNested}
style={styles.button}
>
Change Immutable Nested
</Button>
<Button onClick={this.props.hugePayload} style={styles.button}>
Huge Payload
</Button>
<Button onClick={this.props.addFunction} style={styles.button}>
Add Function
</Button>
<Button onClick={this.props.addSymbol} style={styles.button}>
Add Symbol
</Button>
<Button onClick={this.toggleTimeoutUpdate} style={styles.button}>
Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
</Button>
<Button onClick={this.props.shuffleArray} style={styles.button}>
Shuffle Array
</Button>
</div>
</div>
<div style={styles.links}>
<a onClick={this.toggleExtension} style={styles.link}>
{(options.useExtension ? 'Disable' : 'Enable') +
' Chrome Extension (will reload this page)'}
</a>
<a onClick={this.toggleImmutableSupport} style={styles.link}>
{(options.supportImmutable ? 'Disable' : 'Enable') +
' Full Immutable Support'}
</a>
</div>
</div>
);
}
toggleExtension = () => {
const options = getOptions(this.props.router.location);
window.location.href = buildUrl({ window.location.href = buildUrl({
...options, ...options,
@ -273,34 +155,147 @@ class DemoApp extends React.Component<Props> {
}); });
}; };
toggleImmutableSupport = () => { const toggleImmutableSupport = () => {
const options = getOptions(this.props.router.location); const options = getOptions(location);
this.props.pushRoute( navigate(
buildUrl({ ...options, supportImmutable: !options.supportImmutable }) buildUrl({ ...options, supportImmutable: !options.supportImmutable })
); );
}; };
toggleTheme = () => { const toggleTheme = () => {
const options = getOptions(this.props.router.location); const options = getOptions(location);
this.props.pushRoute(buildUrl({ ...options, dark: !options.dark })); navigate(buildUrl({ ...options, dark: !options.dark }));
}; };
setTheme = (options: Options, theme: string) => { const setTheme = (options: Options, theme: string) => {
this.props.pushRoute(buildUrl({ ...options, theme })); navigate(buildUrl({ ...options, theme }));
}; };
toggleTimeoutUpdate = () => { const toggleTimeoutUpdate = () => {
const enabled = !this.props.timeoutUpdateEnabled; const enabled = !props.timeoutUpdateEnabled;
this.props.toggleTimeoutUpdate(enabled); props.toggleTimeoutUpdate(enabled);
if (enabled) { if (enabled) {
this.timeout = window.setInterval(this.props.timeoutUpdate, 1000); timeout.current = window.setInterval(props.timeoutUpdate, 1000);
} else { } else {
clearTimeout(this.timeout); clearTimeout(timeout.current);
} }
}; };
const options = getOptions(location);
return (
<div style={styles.wrapper}>
<h1 style={styles.header}>
{pkg.name || <span style={styles.muted}>Package Name</span>}
</h1>
<h5>
{pkg.description || (
<span style={styles.muted}>Package Description</span>
)}
</h5>
<div style={styles.links}>
<div style={styles.input}>
<Form>
<FormGroup as={Row}>
<Col as={FormLabel} sm={3}>
Theme:
</Col>
<Col sm={9}>
<InputGroup>
<FormControl
as="select"
onChange={(event) =>
setTheme(options, event.currentTarget.value)
}
>
{themeOptions.map((theme) => (
<option
key={(theme && theme.label) || 'empty'}
label={(theme && theme.label) || '──────────'}
value={theme ? theme.value : undefined}
disabled={!theme}
/>
))}
</FormControl>
<a onClick={toggleTheme} style={styles.link}>
{options.dark ? 'Light theme' : 'Dark theme'}
</a>
</InputGroup>
</Col>
</FormGroup>
</Form>
</div>
</div>
<div style={styles.content}>
<div style={styles.buttons}>
<Button onClick={props.increment} style={styles.button}>
Increment
</Button>
<Button onClick={props.push} style={styles.button}>
Push
</Button>
<Button onClick={props.pop} style={styles.button}>
Pop
</Button>
<Button onClick={props.replace} style={styles.button}>
Replace
</Button>
<Button onClick={props.changeNested} style={styles.button}>
Change Nested
</Button>
<Button onClick={props.pushHugeArray} style={styles.button}>
Push Huge Array
</Button>
<Button onClick={props.addHugeObject} style={styles.button}>
Add Huge Object
</Button>
<Button onClick={props.addIterator} style={styles.button}>
Add Iterator
</Button>
<Button onClick={props.addRecursive} style={styles.button}>
Add Recursive
</Button>
<Button onClick={props.addNativeMap} style={styles.button}>
Add Native Map
</Button>
<Button onClick={props.addImmutableMap} style={styles.button}>
Add Immutable Map
</Button>
<Button onClick={props.changeImmutableNested} style={styles.button}>
Change Immutable Nested
</Button>
<Button onClick={props.hugePayload} style={styles.button}>
Huge Payload
</Button>
<Button onClick={props.addFunction} style={styles.button}>
Add Function
</Button>
<Button onClick={props.addSymbol} style={styles.button}>
Add Symbol
</Button>
<Button onClick={toggleTimeoutUpdate} style={styles.button}>
Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
</Button>
<Button onClick={props.shuffleArray} style={styles.button}>
Shuffle Array
</Button>
</div>
</div>
<div style={styles.links}>
<a onClick={toggleExtension} style={styles.link}>
{(options.useExtension ? 'Disable' : 'Enable') +
' Chrome Extension (will reload this page)'}
</a>
<a onClick={toggleImmutableSupport} style={styles.link}>
{(options.supportImmutable ? 'Disable' : 'Enable') +
' Full Immutable Support'}
</a>
</div>
</div>
);
} }
export default connect((state: DemoAppState) => state, { export default connect((state: DemoAppState) => state, {
@ -332,5 +327,4 @@ export default connect((state: DemoAppState) => state, {
addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }), addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }), addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }), shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
pushRoute,
})(DemoApp); })(DemoApp);

15
packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
View File

@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import { DockMonitor } from '@redux-devtools/dock-monitor'; import { DockMonitor } from '@redux-devtools/dock-monitor';
import { Location } from 'history';
import { import {
InspectorMonitor, InspectorMonitor,
base16Themes, base16Themes,
} from '@redux-devtools/inspector-monitor'; } from '@redux-devtools/inspector-monitor';
import { useLocation } from 'react-router-dom';
import getOptions from './getOptions'; import getOptions from './getOptions';
import { DemoAppState } from './reducers';
const CustomComponent = () => ( const CustomComponent = () => (
<div <div
@ -48,13 +46,8 @@ export const getDevTools = (location: { search: string }) =>
</DockMonitor> </DockMonitor>
); );
const UnconnectedDevTools = ({ location }: { location: Location }) => { export function ConnectedDevTools() {
const location = useLocation();
const DevTools = getDevTools(location); const DevTools = getDevTools(location);
return <DevTools />; return <DevTools />;
}; }
const mapStateToProps = (state: DemoAppState) => ({
location: state.router.location,
});
export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);

4
packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts
View File

@ -9,12 +9,12 @@ export default function getOptions(location: { search: string }) {
return { return {
useExtension: location.search.indexOf('ext') !== -1, useExtension: location.search.indexOf('ext') !== -1,
supportImmutable: location.search.indexOf('immutable') !== -1, supportImmutable: location.search.indexOf('immutable') !== -1,
theme: getTheme(), theme: getTheme(location),
dark: location.search.indexOf('dark') !== -1, dark: location.search.indexOf('dark') !== -1,
}; };
} }
function getTheme() { function getTheme(location: { search: string }) {
const match = /theme=([^&]+)/.exec(location.search); const match = /theme=([^&]+)/.exec(location.search);
return match ? match[1] : 'inspector'; return match ? match[1] : 'inspector';
} }

30
packages/redux-devtools-inspector-monitor/demo/src/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { import {
createStore, createStore,
@ -9,12 +9,10 @@ import {
StoreEnhancer, StoreEnhancer,
} from 'redux'; } from 'redux';
import logger from 'redux-logger'; import logger from 'redux-logger';
import { Route } from 'react-router'; import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
import { persistState } from '@redux-devtools/core'; import { persistState } from '@redux-devtools/core';
import DemoApp from './DemoApp'; import DemoApp from './DemoApp';
import createRootReducer from './reducers'; import { rootReducer } from './reducers';
import getOptions from './getOptions'; import getOptions from './getOptions';
import { ConnectedDevTools, getDevTools } from './DevTools'; import { ConnectedDevTools, getDevTools } from './DevTools';
@ -30,14 +28,12 @@ const ROOT =
const DevTools = getDevTools(window.location); const DevTools = getDevTools(window.location);
const history = createBrowserHistory();
const useDevtoolsExtension = const useDevtoolsExtension =
!!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown })
.__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension; .__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension;
const enhancer = compose( const enhancer = compose(
applyMiddleware(logger, routerMiddleware(history)), applyMiddleware(logger),
(next: StoreEnhancerStoreCreator) => { (next: StoreEnhancerStoreCreator) => {
const instrument = useDevtoolsExtension const instrument = useDevtoolsExtension
? ( ? (
@ -51,16 +47,16 @@ const enhancer = compose(
persistState(getDebugSessionKey()) persistState(getDebugSessionKey())
); );
const store = createStore(createRootReducer(history), enhancer); const store = createStore(rootReducer, enhancer);
render( const root = createRoot(document.getElementById('root')!);
root.render(
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={history}> <BrowserRouter>
<Route path={ROOT}> <Routes>
<DemoApp /> <Route path={ROOT} element={<DemoApp />} />
</Route> </Routes>
{!useDevtoolsExtension && <ConnectedDevTools />} {!useDevtoolsExtension && <ConnectedDevTools />}
</ConnectedRouter> </BrowserRouter>
</Provider>, </Provider>
document.getElementById('root')
); );

17
packages/redux-devtools-inspector-monitor/demo/src/reducers.ts
View File

@ -1,12 +1,6 @@
import Immutable from 'immutable'; import Immutable from 'immutable';
import shuffle from 'lodash.shuffle'; import shuffle from 'lodash.shuffle';
import { combineReducers, Reducer } from 'redux'; import { combineReducers, Reducer } from 'redux';
import {
connectRouter,
LocationChangeAction,
RouterState,
} from 'connected-react-router';
import { History } from 'history';
type Nested = { long: { nested: { path: { to: { a: string } } }[] } }; type Nested = { long: { nested: { path: { to: { a: string } } }[] } };
@ -168,11 +162,9 @@ type DemoAppAction =
| HugePayloadAction | HugePayloadAction
| AddFunctionAction | AddFunctionAction
| AddSymbolAction | AddSymbolAction
| ShuffleArrayAction | ShuffleArrayAction;
| LocationChangeAction;
export interface DemoAppState { export interface DemoAppState {
router: RouterState;
timeoutUpdateEnabled: boolean; timeoutUpdateEnabled: boolean;
store: number; store: number;
undefined: { val: undefined }; undefined: { val: undefined };
@ -192,11 +184,8 @@ export interface DemoAppState {
shuffleArray: unknown[]; shuffleArray: unknown[];
} }
const createRootReducer = ( export const rootReducer: Reducer<DemoAppState, DemoAppAction> =
history: History
): Reducer<DemoAppState, DemoAppAction> =>
combineReducers<DemoAppState, DemoAppAction>({ combineReducers<DemoAppState, DemoAppAction>({
router: connectRouter(history) as Reducer<RouterState, DemoAppAction>,
timeoutUpdateEnabled: (state = false, action) => timeoutUpdateEnabled: (state = false, action) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE' action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled ? action.timeoutUpdateEnabled
@ -263,5 +252,3 @@ const createRootReducer = (
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) => shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state, action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
}); });
export default createRootReducer;

44
packages/redux-devtools-inspector-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/inspector-monitor", "name": "@redux-devtools/inspector-monitor",
"version": "2.1.2", "version": "3.0.1",
"description": "Redux DevTools Diff Monitor", "description": "Redux DevTools Diff Monitor",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor",
"bugs": { "bugs": {
@ -35,13 +35,13 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/dragula": "^3.7.1", "@types/dragula": "^3.7.1",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"dateformat": "^4.6.3", "dateformat": "^4.6.3",
"hex-rgba": "^1.0.2", "hex-rgba": "^1.0.2",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"javascript-stringify": "^2.1.0", "javascript-stringify": "^2.1.0",
"jsondiffpatch": "^0.4.1", "jsondiffpatch": "^0.4.1",
"jss": "^10.9.0", "jss": "^10.9.0",
@ -50,40 +50,40 @@
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-base16-styling": "^0.9.1", "react-base16-styling": "^0.9.1",
"react-dragula": "^1.1.17", "react-dragula": "^1.1.17",
"react-json-tree": "^0.16.1", "react-json-tree": "^0.17.0",
"redux-devtools-themes": "^1.0.0" "redux-devtools-themes": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@types/dateformat": "^3.0.1", "@types/dateformat": "^3.0.1",
"@types/hex-rgba": "^1.0.1", "@types/hex-rgba": "^1.0.1",
"@types/history": "^4.7.11", "@types/history": "^4.7.11",
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dragula": "^1.1.0", "@types/react-dragula": "^1.1.0",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"
} }
} }

28
packages/redux-devtools-instrument/package.json
View File

@ -41,30 +41,30 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"lodash": "^4.17.21" "lodash": "^4.17.21"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"jest": "^27.5.1", "jest": "^27.5.1",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rxjs": "^7.5.5", "rxjs": "^7.5.5",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"

20
packages/redux-devtools-log-monitor/CHANGELOG.md
View File

@ -1,5 +1,25 @@
# Change Log # Change Log
## 4.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 4.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- react-json-tree@0.17.0
- @redux-devtools/core@3.13.0
## 3.1.1 ## 3.1.1
### Patch Changes ### Patch Changes

42
packages/redux-devtools-log-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/log-monitor", "name": "@redux-devtools/log-monitor",
"version": "3.1.1", "version": "4.0.1",
"description": "The default tree view monitor for Redux DevTools", "description": "The default tree view monitor for Redux DevTools",
"keywords": [ "keywords": [
"redux", "redux",
@ -41,40 +41,40 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-json-tree": "^0.16.1", "react-json-tree": "^0.17.0",
"redux-devtools-themes": "^1.0.0" "redux-devtools-themes": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0" "redux": "^3.4.0 || ^4.0.0"
} }
} }

3
packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx
View File

@ -1,4 +1,4 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties, ReactNode } from 'react';
import { Base16Theme } from 'redux-devtools-themes'; import { Base16Theme } from 'redux-devtools-themes';
import brighten from './brighten'; import brighten from './brighten';
@ -29,6 +29,7 @@ interface Props {
theme: Base16Theme; theme: Base16Theme;
onClick: () => void; onClick: () => void;
enabled: boolean; enabled: boolean;
children?: ReactNode;
} }
export default class LogMonitorButton extends React.PureComponent< export default class LogMonitorButton extends React.PureComponent<

6
packages/redux-devtools-remote/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# Change Log # Change Log
## 0.7.5
### Patch Changes
- @redux-devtools/utils@2.0.0
## 0.7.4 ## 0.7.4
### Patch Changes ### Patch Changes

30
packages/redux-devtools-remote/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/remote", "name": "@redux-devtools/remote",
"version": "0.7.4", "version": "0.7.5",
"description": "Relay Redux actions to remote Redux DevTools.", "description": "Relay Redux actions to remote Redux DevTools.",
"keywords": [ "keywords": [
"redux", "redux",
@ -41,32 +41,32 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/instrument": "^2.1.0", "@redux-devtools/instrument": "^2.1.0",
"@redux-devtools/utils": "^1.2.1", "@redux-devtools/utils": "^2.0.0",
"jsan": "^3.1.14", "jsan": "^3.1.14",
"querystring": "^0.2.1", "querystring": "^0.2.1",
"rn-host-detect": "^1.2.0", "rn-host-detect": "^1.2.0",
"socketcluster-client": "^14.3.2" "socketcluster-client": "^16.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/rn-host-detect": "^1.2.0", "@types/rn-host-detect": "^1.2.0",
"@types/socketcluster-client": "^13.0.5", "@types/socketcluster-client": "^16.0.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"redux": "^3.5.2 || ^4.0.0" "redux": "^3.5.2 || ^4.0.0"

107
packages/redux-devtools-remote/src/devTools.ts
View File

@ -1,5 +1,5 @@
import { stringify, parse } from 'jsan'; import { stringify, parse } from 'jsan';
import socketCluster, { SCClientSocket } from 'socketcluster-client'; import socketClusterClient, { AGClientSocket } from 'socketcluster-client';
import configureStore from './configureStore'; import configureStore from './configureStore';
import { defaultSocketOptions } from './constants'; import { defaultSocketOptions } from './constants';
import getHostForRN from 'rn-host-detect'; import getHostForRN from 'rn-host-detect';
@ -179,7 +179,7 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
store!: EnhancedStore<S, A, {}>; store!: EnhancedStore<S, A, {}>;
filters: LocalFilter | undefined; filters: LocalFilter | undefined;
instanceId?: string; instanceId?: string;
socket?: SCClientSocket; socket?: AGClientSocket;
sendTo?: string; sendTo?: string;
instanceName: string | undefined; instanceName: string | undefined;
appInstanceId!: string; appInstanceId!: string;
@ -241,7 +241,8 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
) { ) {
const message: MessageToRelay = { const message: MessageToRelay = {
type, type,
id: this.socket!.id, // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
id: this.socket!.id!,
name: this.instanceName, name: this.instanceName,
instanceId: this.appInstanceId, instanceId: this.appInstanceId,
}; };
@ -279,7 +280,8 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
} else if (action) { } else if (action) {
message.action = action as ActionCreatorObject[]; message.action = action as ActionCreatorObject[];
} }
this.socket!.emit(this.socket!.id ? 'log' : 'log-noid', message); // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
void this.socket!.transmit(this.socket!.id ? 'log' : 'log-noid', message);
} }
dispatchRemotely( dispatchRemotely(
@ -300,7 +302,9 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
if ( if (
message.type === 'IMPORT' || message.type === 'IMPORT' ||
(message.type === 'SYNC' && (message.type === 'SYNC' &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
this.socket!.id && this.socket!.id &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
message.id !== this.socket!.id) message.id !== this.socket!.id)
) { ) {
this.store.liftedStore.dispatch({ this.store.liftedStore.dispatch({
@ -387,15 +391,22 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
} }
login() { login() {
this.socket!.emit('login', 'master', (err: Error, channelName: string) => { void (async () => {
if (err) { try {
console.log(err); // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
return; const channelName = (await this.socket!.invoke(
'login',
'master'
)) as string;
this.channel = channelName;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
for await (const data of this.socket!.subscribe(channelName)) {
this.handleMessages(data as Message<S, A>);
}
} catch (error) {
console.log(error);
} }
this.channel = channelName; })();
this.socket!.subscribe(channelName).watch(this.handleMessages);
this.socket!.on(channelName, this.handleMessages);
});
this.started = true; this.started = true;
this.relay('START'); this.relay('START');
} }
@ -404,11 +415,9 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
this.started = false; this.started = false;
this.isMonitored = false; this.isMonitored = false;
if (!this.socket) return; if (!this.socket) return;
this.socket.destroyChannel(this.channel!); void this.socket.unsubscribe(this.channel!);
if (keepConnected) { this.socket.closeChannel(this.channel!);
this.socket.off(this.channel, this.handleMessages); if (!keepConnected) {
} else {
this.socket.off();
this.socket.disconnect(); this.socket.disconnect();
} }
}; };
@ -420,36 +429,48 @@ class DevToolsEnhancer<S, A extends Action<unknown>> {
) )
return; return;
this.socket = socketCluster.create(this.socketOptions); this.socket = socketClusterClient.create(this.socketOptions);
this.socket.on('error', (err) => { void (async () => {
// if we've already had this error before, increment it's counter, otherwise assign it '1' since we've had the error once. // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
// eslint-disable-next-line no-prototype-builtins for await (const data of this.socket!.listener('error')) {
this.errorCounts[err.name] = this.errorCounts.hasOwnProperty(err.name) // if we've already had this error before, increment it's counter, otherwise assign it '1' since we've had the error once.
? this.errorCounts[err.name] + 1 // eslint-disable-next-line no-prototype-builtins,@typescript-eslint/no-unsafe-argument
: 1; this.errorCounts[data.error.name] = this.errorCounts.hasOwnProperty(
data.error.name
)
? this.errorCounts[data.error.name] + 1
: 1;
if (this.suppressConnectErrors) { if (this.suppressConnectErrors) {
if (this.errorCounts[err.name] === 1) { if (this.errorCounts[data.error.name] === 1) {
console.log( console.log(
'remote-redux-devtools: Socket connection errors are being suppressed. ' + 'remote-redux-devtools: Socket connection errors are being suppressed. ' +
'\n' + '\n' +
"This can be disabled by setting suppressConnectErrors to 'false'." "This can be disabled by setting suppressConnectErrors to 'false'."
); );
console.log(err); console.log(data.error);
}
} else {
console.log(data.error);
} }
} else {
console.log(err);
} }
}); })();
this.socket.on('connect', () => {
console.log('connected to remotedev-server'); void (async () => {
this.errorCounts = {}; // clear the errorCounts object, so that we'll log any new errors in the event of a disconnect // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
this.login(); for await (const data of this.socket!.listener('connect')) {
}); console.log('connected to remotedev-server');
this.socket.on('disconnect', () => { this.errorCounts = {}; // clear the errorCounts object, so that we'll log any new errors in the event of a disconnect
this.stop(true); this.login();
}); }
})();
void (async () => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
for await (const data of this.socket!.listener('disconnect')) {
this.stop(true);
}
})();
}; };
checkForReducerErrors = (liftedState = this.getLiftedStateRaw()) => { checkForReducerErrors = (liftedState = this.getLiftedStateRaw()) => {

21
packages/redux-devtools-rtk-query-monitor/CHANGELOG.md
View File

@ -1,5 +1,26 @@
# Change Log # Change Log
## 3.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 3.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- react-json-tree@0.17.0
- @redux-devtools/ui@1.3.0
- @redux-devtools/core@3.13.0
## 2.1.2 ## 2.1.2
### Patch Changes ### Patch Changes

9
packages/redux-devtools-rtk-query-monitor/demo/CHANGELOG.md
View File

@ -1,5 +1,14 @@
# rtk-query-demo # rtk-query-demo
## 0.1.9
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/dock-monitor@3.0.0
- @redux-devtools/rtk-query-monitor@3.0.0
- @redux-devtools/core@3.13.0
## 0.1.8 ## 0.1.8
### Patch Changes ### Patch Changes

76
packages/redux-devtools-rtk-query-monitor/demo/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "rtk-query-demo", "name": "rtk-query-demo",
"version": "0.1.8", "version": "0.1.9",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open", "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open",
@ -10,56 +10,54 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@chakra-ui/react": "^1.8.8", "@chakra-ui/react": "^2.2.1",
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.3",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.9.3",
"@mswjs/data": "^0.10.0", "@mswjs/data": "^0.10.1",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/dock-monitor": "^2.1.1", "@redux-devtools/dock-monitor": "^3.0.0",
"@redux-devtools/rtk-query-monitor": "^2.1.2", "@redux-devtools/rtk-query-monitor": "^3.0.0",
"@reduxjs/toolkit": "^1.8.1", "@reduxjs/toolkit": "^1.8.2",
"framer-motion": "^6.3.3", "framer-motion": "^6.3.15",
"msw": "^0.39.2", "msw": "^0.42.3",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"react-router-dom": "^5.3.1", "react-router-dom": "^6.3.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/copy-webpack-plugin": "^8.0.1", "@types/copy-webpack-plugin": "^8.0.1",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"copy-webpack-plugin": "^9.1.0", "copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
}, },
"msw": { "msw": {
"workerDirectory": "public" "workerDirectory": "public"

12
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useHistory, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { import {
useDeletePostMutation, useDeletePostMutation,
useGetPostQuery, useGetPostQuery,
@ -73,13 +73,13 @@ const PostJsonDetail = ({ id }: { id: string }) => {
export const PostDetail = () => { export const PostDetail = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const history = useHistory(); const navigate = useNavigate();
const toast = useToast(); const toast = useToast();
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const { data: post, isLoading } = useGetPostQuery(id); const { data: post, isLoading } = useGetPostQuery(id!);
const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation(); const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation();
@ -106,7 +106,7 @@ export const PostDetail = () => {
name={post.name} name={post.name}
onUpdate={async (name) => { onUpdate={async (name) => {
try { try {
await updatePost({ id, name }).unwrap(); await updatePost({ id: id!, name }).unwrap();
} catch { } catch {
toast({ toast({
title: 'An error occurred', title: 'An error occurred',
@ -137,9 +137,7 @@ export const PostDetail = () => {
{isUpdating ? 'Updating...' : 'Edit'} {isUpdating ? 'Updating...' : 'Edit'}
</Button> </Button>
<Button <Button
onClick={() => onClick={() => deletePost(id!).then(() => navigate('/posts'))}
deletePost(id).then(() => history.push('/posts'))
}
disabled={isDeleting} disabled={isDeleting}
colorScheme="red" colorScheme="red"
> >

25
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
View File

@ -17,7 +17,7 @@ import {
StatNumber, StatNumber,
useToast, useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { Route, Switch, useHistory } from 'react-router-dom'; import { Route, Routes, useNavigate } from 'react-router-dom';
import { MdBook } from 'react-icons/md'; import { MdBook } from 'react-icons/md';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
@ -88,7 +88,7 @@ const AddPost = () => {
const PostList = () => { const PostList = () => {
const { data: posts, isLoading } = useGetPostsQuery(); const { data: posts, isLoading } = useGetPostsQuery();
const history = useHistory(); const navigate = useNavigate();
if (isLoading) { if (isLoading) {
return <div>Loading</div>; return <div>Loading</div>;
@ -101,7 +101,7 @@ const PostList = () => {
return ( return (
<List spacing={3}> <List spacing={3}>
{posts.map(({ id, name }) => ( {posts.map(({ id, name }) => (
<ListItem key={id} onClick={() => history.push(`/posts/${id}`)}> <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
<ListIcon as={MdBook} color="green.500" /> {name} <ListIcon as={MdBook} color="green.500" /> {name}
</ListItem> </ListItem>
))} ))}
@ -147,14 +147,17 @@ export const PostsManager = () => {
</Box> </Box>
</Box> </Box>
<Box flex={2}> <Box flex={2}>
<Switch> <Routes>
<Route path="/posts/:id" component={PostDetail} /> <Route path="posts/:id" element={<PostDetail />} />
<Route> <Route
<Center h="200px"> index
<Heading size="md">Select a post to edit!</Heading> element={
</Center> <Center h="200px">
</Route> <Heading size="md">Select a post to edit!</Heading>
</Switch> </Center>
}
/>
</Routes>
</Box> </Box>
</Flex> </Flex>
</Box> </Box>

8
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Switch, Route } from 'react-router-dom'; import { Route, Routes } from 'react-router-dom';
import { PostsManager } from '../../features/posts/PostsManager'; import { PostsManager } from '../../features/posts/PostsManager';
import { Box, Heading } from '@chakra-ui/react'; import { Box, Heading } from '@chakra-ui/react';
@ -7,9 +7,9 @@ function PostsView() {
return ( return (
<Box as="section" p="2"> <Box as="section" p="2">
<Heading as="h2">Posts Demo</Heading> <Heading as="h2">Posts Demo</Heading>
<Switch> <Routes>
<Route path="/" component={PostsManager} /> <Route path="/*" element={<PostsManager />} />
</Switch> </Routes>
</Box> </Box>
); );
} }

9
packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { ChakraProvider } from '@chakra-ui/react'; import { ChakraProvider } from '@chakra-ui/react';
import './index.css'; import './index.css';
@ -11,8 +11,8 @@ import { worker } from './mocks/browser';
function renderApp() { function renderApp() {
const rootElement = document.getElementById('root'); const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement!);
ReactDOM.render( root.render(
<Provider store={store}> <Provider store={store}>
<ChakraProvider> <ChakraProvider>
<BrowserRouter> <BrowserRouter>
@ -20,8 +20,7 @@ function renderApp() {
<DevTools /> <DevTools />
</BrowserRouter> </BrowserRouter>
</ChakraProvider> </ChakraProvider>
</Provider>, </Provider>
rootElement
); );
} }

50
packages/redux-devtools-rtk-query-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/rtk-query-monitor", "name": "@redux-devtools/rtk-query-monitor",
"version": "2.1.2", "version": "3.0.1",
"description": "rtk-query monitor for Redux DevTools", "description": "rtk-query monitor for Redux DevTools",
"keywords": [ "keywords": [
"redux", "redux",
@ -43,51 +43,51 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"hex-rgba": "^1.0.2", "hex-rgba": "^1.0.2",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"jss": "^10.9.0", "jss": "^10.9.0",
"jss-preset-default": "^10.9.0", "jss-preset-default": "^10.9.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-base16-styling": "^0.9.1", "react-base16-styling": "^0.9.1",
"react-json-tree": "^0.16.1", "react-json-tree": "^0.17.0",
"redux-devtools-themes": "^1.0.0" "redux-devtools-themes": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@reduxjs/toolkit": "^1.8.1", "@reduxjs/toolkit": "^1.8.2",
"@types/hex-rgba": "^1.0.1", "@types/hex-rgba": "^1.0.1",
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@reduxjs/toolkit": "^1.8.1", "@reduxjs/toolkit": "^1.8.2",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0", "redux": "^3.4.0 || ^4.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
} }

30
packages/redux-devtools-serialize/package.json
View File

@ -37,30 +37,30 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"jsan": "^3.1.14" "jsan": "^3.1.14"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"immutable": "^4.0.0" "immutable": "^4.1.0"
} }
} }

20
packages/redux-devtools-slider-monitor/CHANGELOG.md
View File

@ -1,5 +1,25 @@
# Change Log # Change Log
## 4.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 4.0.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/ui@1.3.0
- @redux-devtools/core@3.13.0
## 3.1.2 ## 3.1.2
### Patch Changes ### Patch Changes

10
packages/redux-devtools-slider-monitor/examples/todomvc/CHANGELOG.md
View File

@ -1,5 +1,15 @@
# slider-todomvc # slider-todomvc
## 0.1.11
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/dock-monitor@3.0.0
- @redux-devtools/log-monitor@4.0.0
- @redux-devtools/slider-monitor@4.0.0
- @redux-devtools/core@3.13.0
## 0.1.10 ## 0.1.10
### Patch Changes ### Patch Changes

55
packages/redux-devtools-slider-monitor/examples/todomvc/package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "slider-todomvc", "name": "slider-todomvc",
"version": "0.1.10", "version": "0.1.11",
"description": "TodoMVC example for redux", "description": "TodoMVC example for redux",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
@ -15,49 +15,48 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.0",
"@redux-devtools/dock-monitor": "^2.1.1", "@redux-devtools/dock-monitor": "^3.0.0",
"@redux-devtools/log-monitor": "^3.1.1", "@redux-devtools/log-monitor": "^4.0.0",
"@redux-devtools/slider-monitor": "^3.1.2", "@redux-devtools/slider-monitor": "^4.0.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"react-redux": "^7.2.8", "react-redux": "^8.0.2",
"redux": "^4.2.0", "redux": "^4.2.0",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"todomvc-app-css": "^2.4.2" "todomvc-app-css": "^2.4.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/classnames": "^2.3.1", "@types/classnames": "^2.3.1",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.5",
"@types/react-redux": "^7.1.24",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@types/webpack-env": "^1.16.4", "@types/webpack-env": "^1.17.0",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^7.2.11", "fork-ts-checker-webpack-plugin": "^7.2.11",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-node": "^10.7.0", "ts-node": "^10.8.1",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0", "webpack": "^5.73.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.0" "webpack-dev-server": "^4.9.2"
} }
} }

5
packages/redux-devtools-slider-monitor/examples/todomvc/src/index.tsx
View File

@ -1,10 +1,11 @@
import 'todomvc-app-css/index.css'; import 'todomvc-app-css/index.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom/client';
import configureStore from './store/configureStore'; import configureStore from './store/configureStore';
import Root from './containers/Root'; import Root from './containers/Root';
const store = configureStore(); const store = configureStore();
const rootEl = document.getElementById('root'); const rootEl = document.getElementById('root');
ReactDOM.render(<Root store={store} />, rootEl); const root = ReactDOM.createRoot(rootEl!);
root.render(<Root store={store} />);

47
packages/redux-devtools-slider-monitor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/slider-monitor", "name": "@redux-devtools/slider-monitor",
"version": "3.1.2", "version": "4.0.1",
"description": "A custom monitor for replaying Redux actions that works similarly to a video player", "description": "A custom monitor for replaying Redux actions that works similarly to a video player",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-slider-monitor", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-slider-monitor",
"bugs": { "bugs": {
@ -32,8 +32,8 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/ui": "^1.2.1", "@redux-devtools/ui": "^1.3.0",
"@types/prop-types": "^15.7.5", "@types/prop-types": "^15.7.5",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
@ -41,34 +41,35 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-babel": "^5.3.1",
"@types/react": "^17.0.45", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@types/react": "^18.0.14",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"eslint": "^8.15.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"react": "^17.0.2", "react": "^18.2.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.72.1", "rollup": "^2.75.7",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.32.1",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"redux": "^3.4.0 || ^4.0.0", "redux": "^3.4.0 || ^4.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
} }

6
packages/redux-devtools-ui/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# Change Log # Change Log
## 1.3.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
## 1.2.2 ## 1.2.2
### Patch Changes ### Patch Changes

67
packages/redux-devtools-ui/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/ui", "name": "@redux-devtools/ui",
"version": "1.2.2", "version": "1.3.0",
"description": "Reusable React components for building DevTools monitors and apps.", "description": "Reusable React components for building DevTools monitors and apps.",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-ui", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-ui",
"bugs": { "bugs": {
@ -42,7 +42,7 @@
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@rjsf/core": "^4.2.0", "@rjsf/core": "^4.2.0",
"@types/base16": "^1.0.2", "@types/base16": "^1.0.2",
"@types/codemirror": "^5.60.5", "@types/codemirror": "^5.60.5",
@ -51,60 +51,61 @@
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"@types/simple-element-resize-detector": "^1.3.0", "@types/simple-element-resize-detector": "^1.3.0",
"base16": "^1.0.0", "base16": "^1.0.0",
"codemirror": "^5.65.3", "codemirror": "^5.65.6",
"color": "^4.2.3", "color": "^4.2.3",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-icons": "^4.3.1", "react-icons": "^4.4.0",
"react-select": "^5.3.2", "react-select": "^5.3.2",
"redux-devtools-themes": "^1.0.0", "redux-devtools-themes": "^1.0.0",
"simple-element-resize-detector": "^1.3.0" "simple-element-resize-detector": "^1.3.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@storybook/addon-essentials": "^6.4.22", "@storybook/addon-essentials": "^6.5.9",
"@storybook/react": "^6.4.22", "@storybook/react": "^6.5.9",
"@testing-library/dom": "^8.13.0", "@testing-library/dom": "^8.14.0",
"@testing-library/react": "^12.1.5", "@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^14.2.1",
"@types/color": "^3.0.3", "@types/color": "^3.0.3",
"@types/jest": "^27.5.0", "@types/jest": "^27.5.2",
"@types/react": "^17.0.45", "@types/react": "^18.0.14",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"csstype": "^3.0.11", "csstype": "^3.1.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.5", "eslint-plugin-jest": "^26.5.3",
"eslint-plugin-react": "~7.28.0", "eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.6.0",
"jest": "^27.5.1", "jest": "^27.5.1",
"ncp": "^2.0.0", "ncp": "^2.0.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-is": "^17.0.2", "react-is": "^18.2.0",
"require-from-string": "^2.0.2",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"stylelint": "^14.8.2", "stylelint": "^14.9.1",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^25.0.0", "stylelint-config-standard": "^25.0.0",
"stylelint-config-styled-components": "^0.1.1", "stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0", "stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "^27.1.4", "ts-jest": "^27.1.5",
"typescript": "~4.6.4", "typescript": "~4.7.4",
"webpack": "^5.72.0" "webpack": "^5.73.0"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"react": "^16.3.0 || ^17.0.0", "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
} }
} }

4
packages/redux-devtools-ui/test/Button.test.tsx
View File

@ -9,11 +9,11 @@ describe('Button', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the click event', () => { it('should handle the click event', async () => {
const onClick = jest.fn(); const onClick = jest.fn();
render(<Button onClick={onClick}>ClickMe</Button>); render(<Button onClick={onClick}>ClickMe</Button>);
userEvent.click(screen.getByRole('button')); await userEvent.click(screen.getByRole('button'));
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

4
packages/redux-devtools-ui/test/ContextMenu.test.tsx
View File

@ -18,13 +18,13 @@ describe('ContextMenu', function () {
); );
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the click event', () => { it('should handle the click event', async () => {
const onClick = jest.fn(); const onClick = jest.fn();
render( render(
<ContextMenu items={items} onClick={onClick} x={100} y={100} visible /> <ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
); );
userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' })); await userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

8
packages/redux-devtools-ui/test/Dialog.test.tsx
View File

@ -52,7 +52,7 @@ describe('Dialog', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle dismiss event', () => { it('should handle dismiss event', async () => {
const onDismiss = jest.fn(); const onDismiss = jest.fn();
render( render(
<Dialog <Dialog
@ -64,11 +64,11 @@ describe('Dialog', function () {
/> />
); );
userEvent.click(screen.getByRole('button', { name: 'Cancel' })); await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
expect(onDismiss).toHaveBeenCalled(); expect(onDismiss).toHaveBeenCalled();
}); });
it('should handle submit event', () => { it('should handle submit event', async () => {
const onSubmit = jest.fn(); const onSubmit = jest.fn();
render( render(
<Dialog <Dialog
@ -80,7 +80,7 @@ describe('Dialog', function () {
/> />
); );
userEvent.click(screen.getByRole('button', { name: 'Submit' })); await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalled(); expect(onSubmit).toHaveBeenCalled();
}); });
}); });

4
packages/redux-devtools-ui/test/Form.test.tsx
View File

@ -44,7 +44,7 @@ describe('Form', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the submit event', () => { it('should handle the submit event', async () => {
const onSubmit = jest.fn(); const onSubmit = jest.fn();
render( render(
<Form <Form
@ -55,7 +55,7 @@ describe('Form', function () {
/> />
); );
userEvent.click(screen.getByRole('button', { name: 'Submit' })); await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalled(); expect(onSubmit).toHaveBeenCalled();
}); });
}); });

4
packages/redux-devtools-ui/test/Notification.test.tsx
View File

@ -23,11 +23,11 @@ describe('Notification', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the click event', () => { it('should handle the click event', async () => {
const onClose = jest.fn(); const onClose = jest.fn();
render(<Notification onClose={onClose}>Message</Notification>); render(<Notification onClose={onClose}>Message</Notification>);
userEvent.click(screen.getByRole('button')); await userEvent.click(screen.getByRole('button'));
expect(onClose).toHaveBeenCalled(); expect(onClose).toHaveBeenCalled();
}); });
}); });

4
packages/redux-devtools-ui/test/SegmentedControl.test.tsx
View File

@ -17,7 +17,7 @@ describe('SegmentedControl', function () {
); );
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the click event', () => { it('should handle the click event', async () => {
const onClick = jest.fn(); const onClick = jest.fn();
render( render(
<SegmentedControl <SegmentedControl
@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
/> />
); );
userEvent.click(screen.getByRole('button', { name: 'Button1' })); await userEvent.click(screen.getByRole('button', { name: 'Button1' }));
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

12
packages/redux-devtools-ui/test/Select.test.tsx
View File

@ -37,27 +37,27 @@ describe('Select', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should select another option', () => { it('should select another option', async () => {
const onChange = jest.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Select options={options} onChange={onChange} /> <Select options={options} onChange={onChange} />
); );
userEvent.type(screen.getByRole('combobox'), 'two'); await userEvent.type(screen.getByRole('combobox'), 'two');
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
userEvent.type(screen.getByRole('combobox'), '{enter}'); await userEvent.type(screen.getByRole('combobox'), '{enter}');
expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalled();
}); });
it("shouldn't find any results", () => { it("shouldn't find any results", async () => {
const onChange = jest.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Select options={options} onChange={onChange} /> <Select options={options} onChange={onChange} />
); );
userEvent.type(screen.getByRole('combobox'), 'text'); await userEvent.type(screen.getByRole('combobox'), 'text');
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
userEvent.type(screen.getByRole('combobox'), '{enter}'); await userEvent.type(screen.getByRole('combobox'), '{enter}');
expect(onChange).not.toHaveBeenCalled(); expect(onChange).not.toHaveBeenCalled();
}); });
}); });

4
packages/redux-devtools-ui/test/Tabs.test.tsx
View File

@ -43,11 +43,11 @@ describe('Tabs', function () {
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should select tab', () => { it('should select tab', async () => {
const onClick = jest.fn(); const onClick = jest.fn();
render(<Tabs tabs={tabs} onClick={onClick} />); render(<Tabs tabs={tabs} onClick={onClick} />);
userEvent.click(screen.getByRole('button', { name: 'Tab1' })); await userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

15
packages/redux-devtools-utils/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# Change Log # Change Log
## 2.0.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
- Updated dependencies [a55ba302]
- @redux-devtools/core@3.13.1
## 2.0.0
### Patch Changes
- Updated dependencies [8a7eae4]
- @redux-devtools/core@3.13.0
## 1.2.1 ## 1.2.1
### Patch Changes ### Patch Changes

32
packages/redux-devtools-utils/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@redux-devtools/utils", "name": "@redux-devtools/utils",
"version": "1.2.1", "version": "2.0.1",
"description": "Reusable functions of Redux DevTools", "description": "Reusable functions of Redux DevTools",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-utils", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-utils",
"bugs": { "bugs": {
@ -32,12 +32,12 @@
"prepublish": "pnpm run type-check && pnpm run lint" "prepublish": "pnpm run type-check && pnpm run lint"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.9", "@babel/runtime": "^7.18.3",
"@redux-devtools/core": "^3.12.0", "@redux-devtools/core": "^3.13.1",
"@redux-devtools/serialize": "^0.4.1", "@redux-devtools/serialize": "^0.4.1",
"@types/get-params": "^0.1.0", "@types/get-params": "^0.1.0",
"get-params": "^0.1.2", "get-params": "^0.1.2",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"jsan": "^3.1.14", "jsan": "^3.1.14",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"nanoid": "^3.3.4", "nanoid": "^3.3.4",
@ -45,24 +45,24 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10", "@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.17.0", "@babel/eslint-parser": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.17.10", "@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.17.10", "@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.16.7", "@babel/preset-typescript": "^7.17.12",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/lodash": "^4.14.182", "@types/lodash": "^4.14.182",
"@types/node": "^16.11.33", "@types/node": "^16.11.41",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.29.0",
"eslint": "^8.15.0", "eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.6.4" "typescript": "~4.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.13.1",
"immutable": "^4.0.0", "immutable": "^4.1.0",
"redux": "^4.2.0" "redux": "^4.2.0"
} }
} }

12
packages/redux-devtools/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# Change Log # Change Log
## 3.13.1
### Patch Changes
- a55ba302: Fix peer dependencies on @redux-devtools/core
## 3.13.0
### Minor Changes
- 8a7eae4: Add React 18 to peerDependencies range
## 3.12.0 ## 3.12.0
### Minor Changes ### Minor Changes

Some files were not shown because too many files have changed in this diff Show More