Merge branch 'main' into renovate/framer-motion-5.x

.yarnrc.yml

@@ -1,4 +1,4 @@
-yarnPath: .yarn/releases/yarn-3.0.2.cjs
+yarnPath: .yarn/releases/yarn-3.1.0.cjs
 
 packageExtensions:
   'http-proxy-middleware@^2.0.0':

eslintrc.ts.react.base.json

@@ -12,6 +12,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "prettier"
   ],
   "settings": {

eslintrc.ts.react.jest.base.json

@@ -6,6 +6,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:jest/recommended",
     "plugin:jest/style",
     "prettier"

extension/package.json

@@ -1,6 +1,7 @@
 {
+  "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "2.17.2",
+  "version": "3.0.0-rc.1",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
@@ -34,13 +35,13 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@redux-devtools/app": "^1.0.0-8",
+    "@redux-devtools/app": "^1.0.0-9",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/instrument": "^1.11.0",
+    "@redux-devtools/instrument": "^1.11.1",
-    "@redux-devtools/serialize": "^0.3.0",
+    "@redux-devtools/serialize": "^0.3.1",
-    "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@redux-devtools/slider-monitor": "^2.0.0-9",
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
-    "@redux-devtools/utils": "^1.0.0-6",
+    "@redux-devtools/utils": "^1.0.0-7",
     "@types/jsan": "^3.1.2",
     "jsan": "^3.1.13",
     "localforage": "^1.10.0",
@@ -49,7 +50,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-is": "^17.0.2",
-    "react-json-tree": "^0.15.0",
+    "react-json-tree": "^0.15.1",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
@@ -61,12 +62,12 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@babel/register": "^7.16.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
-    "@types/chrome": "^0.0.162",
+    "@types/chrome": "^0.0.163",
     "@types/lodash": "^4.14.176",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/styled-components": "^5.1.15",
     "babel-loader": "^8.2.3",
@@ -74,7 +75,7 @@
     "chromedriver": "^94.0.0",
     "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "electron": "^15.3.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -98,7 +99,7 @@
     "style-loader": "^3.3.1",
     "ts-jest": "^27.0.7",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1"
   }
 }

extension/src/app/api/importState.ts

@@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import jsan from 'jsan';
 import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize';
 import {
@@ -9,13 +8,6 @@ import Immutable from 'immutable';
 import { LiftedState } from '@redux-devtools/instrument';
 import { Action } from 'redux';
 
-function deprecate(param: string) {
-  // eslint-disable-next-line no-console
-  console.warn(
-    `\`${param}\` parameter for Redux DevTools Extension is deprecated. Use \`serialize\` parameter instead: https://github.com/zalmoxisus/redux-devtools-extension/releases/tag/v2.12.1`
-  );
-}
-
 interface SerializeWithRequiredImmutable extends SerializeWithImmutable {
   readonly immutable: typeof Immutable;
 }
@@ -43,7 +35,7 @@ interface ParsedSerializedLiftedState {
 
 export default function importState<S, A extends Action<unknown>>(
   state: string | undefined,
-  { deserializeState, deserializeAction, serialize }: Config
+  { serialize }: Config
 ) {
   if (!state) return undefined;
   let parse = jsan.parse;
@@ -82,35 +74,6 @@ export default function importState<S, A extends Action<unknown>>(
           unknown
         >)
       : parsedSerializedLiftedState;
-  if (deserializeState) {
-    deprecate('deserializeState');
-    if (typeof nextLiftedState.computedStates !== 'undefined') {
-      nextLiftedState.computedStates = nextLiftedState.computedStates.map(
-        (computedState) => ({
-          ...computedState,
-          state: deserializeState(computedState.state),
-        })
-      );
-    }
-    if (typeof nextLiftedState.committedState !== 'undefined') {
-      nextLiftedState.committedState = deserializeState(
-        nextLiftedState.committedState
-      );
-    }
-    if (typeof preloadedState !== 'undefined') {
-      preloadedState = deserializeState(preloadedState);
-    }
-  }
-  if (deserializeAction) {
-    deprecate('deserializeAction');
-    nextLiftedState.actionsById = mapValues(
-      nextLiftedState.actionsById,
-      (liftedAction) => ({
-        ...liftedAction,
-        action: deserializeAction(liftedAction.action),
-      })
-    );
-  }
 
   return { nextLiftedState, preloadedState };
 }

extension/src/app/api/index.ts

@@ -8,11 +8,7 @@ import importState from './importState';
 import generateId from './generateInstanceId';
 import { Config } from '../../browser/extension/inject/pageScript';
 import { Action } from 'redux';
-import {
+import { LiftedState, PerformAction } from '@redux-devtools/instrument';
-  EnhancedStore,
-  LiftedState,
-  PerformAction,
-} from '@redux-devtools/instrument';
 import { LibConfig } from '@redux-devtools/app/lib/actions';
 import {
   ContentScriptToPageScriptMessage,
@@ -76,10 +72,7 @@ export interface Serialize {
   readonly options?: Options | boolean;
 }
 
-export function getSerializeParameter(
+export function getSerializeParameter(config: Config) {
-  config: Config,
-  param?: 'serializeState' | 'serializeAction'
-) {
   const serialize = config.serialize;
   if (serialize) {
     if (serialize === true) return { options: true };
@@ -109,16 +102,7 @@ export function getSerializeParameter(
     };
   }
 
-  const value = config[param!];
+  return undefined;
-  if (typeof value === 'undefined') return undefined;
-  // eslint-disable-next-line no-console
-  console.warn(
-    `\`${param}\` parameter for Redux DevTools Extension is deprecated. Use \`serialize\` parameter instead: https://github.com/zalmoxisus/redux-devtools-extension/releases/tag/v2.12.1`
-  );
-
-  if (typeof value === 'boolean') return { options: value };
-  if (typeof value === 'function') return { replacer: value };
-  return value;
 }
 
 interface InitInstancePageScriptToContentScriptMessage {
@@ -539,7 +523,7 @@ export function disconnect() {
 export interface ConnectResponse {
   init: <S, A extends Action<unknown>>(
     state: S,
-    liftedData: LiftedState<S, A, unknown>
+    liftedData?: LiftedState<S, A, unknown>
   ) => void;
   subscribe: <S, A extends Action<unknown>>(
     listener: (message: ListenerMessage<S, A>) => void
@@ -662,7 +646,7 @@ export function connect(preConfig: Config): ConnectResponse {
 
   const init = <S, A extends Action<unknown>>(
     state: S,
-    liftedData: LiftedState<S, A, unknown>
+    liftedData?: LiftedState<S, A, unknown>
   ) => {
     const message: InitMessage<S, A> = {
       type: 'INIT',
@@ -707,25 +691,6 @@ export function connect(preConfig: Config): ConnectResponse {
   };
 }
 
-export function updateStore<S, A extends Action<unknown>>(stores: {
-  [K in string | number]: EnhancedStore<S, A, unknown>;
-}) {
-  return function (newStore: EnhancedStore<S, A, unknown>, instanceId: number) {
-    /* eslint-disable no-console */
-    console.warn(
-      '`__REDUX_DEVTOOLS_EXTENSION__.updateStore` is deprecated, remove it and just use ' +
-        "`__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` instead of the extension's store enhancer: " +
-        'https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup'
-    );
-    /* eslint-enable no-console */
-    const store = stores[instanceId || Object.keys(stores)[0]];
-    // Mutate the store in order to keep the reference
-    store.liftedStore = newStore.liftedStore;
-    store.getState = newStore.getState;
-    store.dispatch = newStore.dispatch;
-  };
-}
-
 export function isInIframe() {
   try {
     return window.self !== window.top;

extension/src/app/stores/enhancerStore.ts

@@ -37,10 +37,6 @@ export default function configureStore<
       shouldStartLocked: config.shouldStartLocked,
       pauseActionType: config.pauseActionType || '@@PAUSED',
     }),
-    persistState(
+    persistState(getUrlParam('debug_session'))
-      getUrlParam('debug_session'),
-      config.deserializeState,
-      config.deserializeAction
-    )
   )(next);
 }

extension/src/browser/extension/inject/deprecatedWarn.ts

@@ -1,7 +0,0 @@
-// Deprecated warning for inject.bundle.js
-/* eslint-disable no-console */
-console.warn(
-  "Using Redux DevTools inside extensions is deprecated and won't be supported in the next major version. " +
-    'Please use https://github.com/zalmoxisus/remote-redux-devtools instead.'
-);
-/* eslint-enable no-console */

extension/src/browser/extension/inject/index.ts

@@ -1,22 +0,0 @@
-// Include this script in Chrome apps and extensions for remote debugging
-// <script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.bundle.js"></script>
-
-import { Options } from '../options/syncOptions';
-
-window.devToolsExtensionID = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
-require('./contentScript');
-require('./pageScript');
-
-chrome.runtime.sendMessage(
-  window.devToolsExtensionID,
-  { type: 'GET_OPTIONS' },
-  function (response: { readonly options: Options }) {
-    if (!response.options.inject) {
-      const urls = response.options.urls.split('\n').filter(Boolean).join('|');
-      if (!location.href.match(new RegExp(urls))) return;
-    }
-
-    window.devToolsOptions = response.options;
-    window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors();
-  }
-);

extension/src/browser/extension/inject/pageScript.ts

@@ -10,13 +10,11 @@ import {
   Dispatch,
   PreloadedState,
   Reducer,
-  Store,
   StoreEnhancer,
   StoreEnhancerStoreCreator,
 } from 'redux';
 import Immutable from 'immutable';
 import { EnhancedStore, PerformAction } from '@redux-devtools/instrument';
-import createStore from '../../../app/stores/createStore';
 import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';
 import { isAllowed, Options } from '../options/syncOptions';
 import Monitor from '../../../app/service/Monitor';
@@ -31,7 +29,6 @@ import importState from '../../../app/api/importState';
 import openWindow, { Position } from '../../../app/api/openWindow';
 import generateId from '../../../app/api/generateInstanceId';
 import {
-  updateStore,
   toContentScript,
   sendMessage,
   setListener,
@@ -95,19 +92,6 @@ export interface ConfigWithExpandedMaxAge {
   readonly actionsDenylist?: string | readonly string[];
   readonly actionsAllowlist?: string | readonly string[];
   serialize?: boolean | SerializeWithImmutable;
-  readonly serializeState?:
-    | boolean
-    | ((key: string, value: unknown) => unknown)
-    | Serialize;
-  readonly serializeAction?:
-    | boolean
-    | ((key: string, value: unknown) => unknown)
-    | Serialize;
-  readonly statesFilter?: <S>(state: S, index?: number) => S;
-  readonly actionsFilter?: <A extends Action<unknown>>(
-    action: A,
-    id?: number
-  ) => A;
   readonly stateSanitizer?: <S>(state: S, index?: number) => S;
   readonly actionSanitizer?: <A extends Action<unknown>>(
     action: A,
@@ -118,9 +102,6 @@ export interface ConfigWithExpandedMaxAge {
     action: A
   ) => boolean;
   readonly latency?: number;
-  readonly getMonitor?: <S, A extends Action<unknown>>(
-    monitor: Monitor<S, A>
-  ) => void;
   readonly maxAge?:
     | number
     | (<S, A extends Action<unknown>>(
@@ -134,8 +115,6 @@ export interface ConfigWithExpandedMaxAge {
   readonly shouldRecordChanges?: boolean;
   readonly shouldStartLocked?: boolean;
   readonly pauseActionType?: unknown;
-  readonly deserializeState?: <S>(state: S) => S;
-  readonly deserializeAction?: <A extends Action<unknown>>(action: A) => A;
   name?: string;
   readonly autoPause?: boolean;
   readonly features?: Features;
@@ -151,17 +130,8 @@ export interface Config extends ConfigWithExpandedMaxAge {
 }
 
 interface ReduxDevtoolsExtension {
-  <S, A extends Action<unknown>>(
-    reducer: Reducer<S, A>,
-    preloadedState?: PreloadedState<S>,
-    config?: Config
-  ): Store<S, A>;
   (config?: Config): StoreEnhancer;
   open: (position?: Position) => void;
-  updateStore: (
-    newStore: EnhancedStore<unknown, Action<unknown>, unknown>,
-    instanceId: number
-  ) => void;
   notifyErrors: (onError?: () => boolean) => void;
   send: <S, A extends Action<unknown>>(
     action: StructuralPerformAction<A> | StructuralPerformAction<A>[],
@@ -185,21 +155,10 @@ declare global {
 }
 
 function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
-  reducer?: Reducer<S, A>,
-  preloadedState?: PreloadedState<S>,
   config?: Config
-): Store<S, A>;
+): StoreEnhancer {
-function __REDUX_DEVTOOLS_EXTENSION__(config: Config): StoreEnhancer;
-function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
-  reducer?: Reducer<S, A> | Config | undefined,
-  preloadedState?: PreloadedState<S>,
-  config?: Config
-): Store<S, A> | StoreEnhancer {
   /* eslint-disable no-param-reassign */
-  if (typeof reducer === 'object') {
+  if (typeof config !== 'object') config = {};
-    config = reducer;
-    reducer = undefined;
-  } else if (typeof config !== 'object') config = {};
   /* eslint-enable no-param-reassign */
   if (!window.devToolsOptions) window.devToolsOptions = {} as any;
 
@@ -210,16 +169,9 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   let sendingActionId = 1;
   const instanceId = generateId(config.instanceId);
   const localFilter = getLocalFilter(config);
-  const serializeState = getSerializeParameter(config, 'serializeState');
+  const serializeState = getSerializeParameter(config);
-  const serializeAction = getSerializeParameter(config, 'serializeAction');
+  const serializeAction = getSerializeParameter(config);
-  let {
+  let { stateSanitizer, actionSanitizer, predicate, latency = 500 } = config;
-    statesFilter,
-    actionsFilter,
-    stateSanitizer,
-    actionSanitizer,
-    predicate,
-    latency = 500,
-  } = config;
 
   // Deprecate actionsWhitelist and actionsBlacklist
   if (config.actionsWhitelist) {
@@ -229,16 +181,6 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
     deprecateParam('actionsBlacklist', 'actionsDenylist');
   }
 
-  // Deprecate statesFilter and actionsFilter
-  if (statesFilter) {
-    deprecateParam('statesFilter', 'stateSanitizer');
-    stateSanitizer = statesFilter; // eslint-disable-line no-param-reassign
-  }
-  if (actionsFilter) {
-    deprecateParam('actionsFilter', 'actionSanitizer');
-    actionSanitizer = actionsFilter; // eslint-disable-line no-param-reassign
-  }
-
   const relayState = throttle(
     (
       liftedState?: LiftedState<S, A, unknown> | undefined,
@@ -269,17 +211,6 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   );
 
   const monitor = new Monitor(relayState);
-  if (config.getMonitor) {
-    /* eslint-disable no-console */
-    console.warn(
-      "Redux DevTools extension's `getMonitor` parameter is deprecated and will be not " +
-        'supported in the next version, please remove it and just use ' +
-        '`__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` instead: ' +
-        'https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup'
-    );
-    /* eslint-enable no-console */
-    config.getMonitor(monitor);
-  }
 
   function exportState() {
     const liftedState = store.liftedStore.getState();
@@ -616,13 +547,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
       };
     };
 
-  if (!reducer) return enhance();
+  return enhance();
-  /* eslint-disable no-console */
-  console.warn(
-    'Creating a Redux store directly from DevTools extension is discouraged and will not be supported in future major version. For more details see: https://git.io/fphCe'
-  );
-  /* eslint-enable no-console */
-  return createStore(reducer, preloadedState, enhance);
 }
 
 declare global {
@@ -634,7 +559,6 @@ declare global {
 // noinspection JSAnnotator
 window.__REDUX_DEVTOOLS_EXTENSION__ = __REDUX_DEVTOOLS_EXTENSION__ as any;
 window.__REDUX_DEVTOOLS_EXTENSION__.open = openWindow;
-window.__REDUX_DEVTOOLS_EXTENSION__.updateStore = updateStore(stores);
 window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors = notifyErrors;
 window.__REDUX_DEVTOOLS_EXTENSION__.send = sendMessage;
 window.__REDUX_DEVTOOLS_EXTENSION__.listen = setListener;
@@ -661,30 +585,41 @@ const preEnhancer =
 
 const extensionCompose =
   (config: Config) =>
-  (...funcs: StoreEnhancer[]) => {
+  (...funcs: StoreEnhancer[]): StoreEnhancer => {
-    return (...args: any[]) => {
+    return (...args) => {
       const instanceId = generateId(config.instanceId);
       return [preEnhancer(instanceId), ...funcs].reduceRight(
         (composed, f) => f(composed),
-        (__REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId }) as any)(
+        __REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args)
-          ...args
-        )
       );
     };
   };
 
+interface ReduxDevtoolsExtensionCompose {
+  (config: Config): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+  (...funcs: StoreEnhancer[]): StoreEnhancer;
+}
+
 declare global {
   interface Window {
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: unknown;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: ReduxDevtoolsExtensionCompose;
   }
 }
 
-window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = (...funcs: any[]) => {
+function reduxDevtoolsExtensionCompose(
+  config: Config
+): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+function reduxDevtoolsExtensionCompose(
+  ...funcs: StoreEnhancer[]
+): StoreEnhancer;
+function reduxDevtoolsExtensionCompose(...funcs: [Config] | StoreEnhancer[]) {
   if (funcs.length === 0) {
     return __REDUX_DEVTOOLS_EXTENSION__();
   }
   if (funcs.length === 1 && typeof funcs[0] === 'object') {
     return extensionCompose(funcs[0]);
   }
-  return extensionCompose({})(...funcs);
+  return extensionCompose({})(...(funcs as StoreEnhancer[]));
-};
+}
+
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = reduxDevtoolsExtensionCompose;

extension/src/browser/extension/manifest.json

@@ -52,11 +52,7 @@
     }
   ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": [
+  "web_accessible_resources": ["page.bundle.js"],
-    "page.bundle.js",
-    "inject.bundle.js",
-    "redux-devtools-extension.bundle.js"
-  ],
   "externally_connectable": {
     "ids": ["*"]
   },

extension/src/browser/firefox/manifest.json

@@ -49,11 +49,7 @@
     }
   ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": [
+  "web_accessible_resources": ["page.bundle.js"],
-    "page.bundle.js",
-    "inject.bundle.js",
-    "redux-devtools-extension.bundle.js"
-  ],
   "permissions": [
     "notifications",
     "contextMenus",

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

@@ -4,6 +4,20 @@ import { Provider } from 'react-redux';
 import configureStore from '../../../src/app/stores/windowStore';
 import App from '../../../src/app/containers/App';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 const { store } = configureStore(store);
 
 describe('App container', () => {

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

@@ -182,8 +182,6 @@ describe('Redux enhancer', () => {
         counter,
         window.__REDUX_DEVTOOLS_EXTENSION__({
           actionsDenylist: ['SOME_ACTION'],
-          statesFilter: (state) => state,
-          serializeState: (key, value) => value,
         })
       );
       expect(typeof window.store).toBe('object');

extension/webpack/base.config.js

@@ -18,11 +18,6 @@ const baseConfig = (params) => ({
     devtools: [`${extpath}devtools/index`],
     content: [mock, `${extpath}inject/contentScript`],
     pagewrap: [`${extpath}inject/pageScriptWrap`],
-    'redux-devtools-extension': [
-      `${extpath}inject/index`,
-      `${extpath}inject/deprecatedWarn`,
-    ],
-    inject: [`${extpath}inject/index`, `${extpath}inject/deprecatedWarn`],
     ...params.inputExtra,
   },
   output: {

lerna.json

@@ -5,7 +5,7 @@
   "useWorkspaces": true,
   "command": {
     "publish": {
-      "allowBranch": "master"
+      "allowBranch": "main"
     }
   },
   "ignoreChanges": ["**/test/**", "**/examples/**", "**/*.md"]

package.json

@@ -1,12 +1,13 @@
 {
   "private": true,
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "lerna": "^4.0.0",
     "prettier": "2.4.1",
@@ -35,5 +36,5 @@
   "resolutions": {
     "@babel/highlight/chalk": "Methuselah96/chalk#head=v2-without-process"
   },
-  "packageManager": "yarn@3.0.2"
+  "packageManager": "yarn@3.1.0"
 }

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "d3-state-visualizer-tree-example",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Visualize your app state as a tree",
   "keywords": [
     "d3",
@@ -25,8 +25,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "d3-state-visualizer": "^1.4.0",
+    "d3-state-visualizer": "^1.4.1",
-    "map2tree": "^1.5.0"
+    "map2tree": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -35,8 +35,8 @@
     "@types/node": "^16.11.6",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -44,7 +44,7 @@
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/d3-state-visualizer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3-state-visualizer",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Visualize your app state with a range of reusable charts",
   "keywords": [
     "d3",
@@ -41,9 +41,9 @@
   "dependencies": {
     "@types/d3": "^3.5.46",
     "d3": "^3.5.17",
-    "d3tooltip": "^1.3.0",
+    "d3tooltip": "^1.3.1",
     "deepmerge": "^4.2.2",
-    "map2tree": "^1.5.0",
+    "map2tree": "^1.5.1",
     "ramda": "^0.27.1"
   },
   "devDependencies": {
@@ -54,15 +54,15 @@
     "@types/node": "^16.11.6",
     "@types/ramda": "^0.27.46",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "rimraf": "^3.0.2",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1"
   }
 }

packages/d3tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d3tooltip",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A highly configurable tooltip for d3",
   "keywords": [
     "d3",
@@ -47,8 +47,8 @@
     "@types/node": "^16.11.6",
     "@types/ramda": "^0.27.46",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "d3": "^3.5.17",
     "eslint": "^7.32.0",
@@ -56,7 +56,7 @@
     "rimraf": "^3.0.2",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1"
   },
   "peerDependencies": {

packages/map2tree/package.json

@@ -1,6 +1,6 @@
 {
   "name": "map2tree",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Utility for mapping maps to trees",
   "keywords": [
     "map2tree",
@@ -51,19 +51,19 @@
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "immutable": "^4.0.0",
     "jest": "^27.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1"
   }
 }

packages/react-base16-styling/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-base16-styling",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "React styling with base16 color scheme support",
   "keywords": [
     "react",
@@ -51,11 +51,11 @@
     "@types/color": "^3.0.2",
     "@types/jest": "^27.0.2",
     "@types/lodash.curry": "^4.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "jest": "^27.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",

packages/react-dock/demo/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-dock-demo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "scripts": {
     "start": "webpack serve --open",
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-bootstrap": "^2.0.1",
+    "react-bootstrap": "^2.0.2",
-    "react-dock": "^0.4.0",
+    "react-dock": "^0.4.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-is": "^17.0.2",
@@ -24,22 +24,23 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.15",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/react-dock/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dock",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Resizable dockable react component",
   "keywords": [
     "react",
@@ -49,14 +49,15 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/jest": "^27.0.2",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-test-renderer": "^17.0.2",

packages/react-json-tree/examples/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-json-tree-example",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React-Json-Tree example",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples",
   "bugs": {
@@ -21,9 +21,9 @@
   "dependencies": {
     "immutable": "^4.0.0",
     "react": "^17.0.2",
-    "react-base16-styling": "^0.8.0",
+    "react-base16-styling": "^0.8.1",
     "react-dom": "^17.0.2",
-    "react-json-tree": "^0.15.0"
+    "react-json-tree": "^0.15.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -31,21 +31,22 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/react-json-tree/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-json-tree",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "React JSON Viewer Component, Extracted from redux-devtools",
   "keywords": [
     "react",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@types/prop-types": "^15.7.4",
     "prop-types": "^15.7.2",
-    "react-base16-styling": "^0.8.0"
+    "react-base16-styling": "^0.8.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -55,16 +55,17 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/react-test-renderer": "^17.0.1",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-test-renderer": "^17.0.2",
@@ -72,7 +73,7 @@
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1"
   },
   "peerDependencies": {

packages/redux-devtools-app/README.md

@@ -2,7 +2,7 @@
 
 ![Demo](https://raw.githubusercontent.com/zalmoxisus/remote-redux-devtools/master/demo.gif)
 
-Web, Electron and Chrome app for monitoring [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools). Can be accessed on [`remotedev.io`](http://remotedev.io/local).
+Web, Electron and Chrome app for monitoring [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools).
 
 Also it's a react component you can use to build amazing monitor applications like:
 

packages/redux-devtools-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/app",
-  "version": "1.0.0-8",
+  "version": "1.0.0-9",
   "description": "Redux DevTools app",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app",
   "bugs": {
@@ -35,18 +35,18 @@
     "prepublish": "yarn run type-check && yarn run lint && yarn run test"
   },
   "dependencies": {
-    "@redux-devtools/chart-monitor": "^1.9.0",
+    "@redux-devtools/chart-monitor": "^1.9.1",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@redux-devtools/inspector-monitor": "^1.0.1",
-    "@redux-devtools/inspector-monitor-test-tab": "^0.7.2",
+    "@redux-devtools/inspector-monitor-test-tab": "^0.7.3",
-    "@redux-devtools/inspector-monitor-trace-tab": "^0.2.2",
+    "@redux-devtools/inspector-monitor-trace-tab": "^0.2.3",
-    "@redux-devtools/log-monitor": "^2.3.0",
+    "@redux-devtools/log-monitor": "^2.3.1",
-    "@redux-devtools/rtk-query-monitor": "^1.0.0",
+    "@redux-devtools/rtk-query-monitor": "^1.0.1",
-    "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@redux-devtools/slider-monitor": "^2.0.0-9",
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
     "@reduxjs/toolkit": "^1.6.2",
     "@types/prop-types": "^15.7.4",
-    "d3-state-visualizer": "^1.4.0",
+    "d3-state-visualizer": "^1.4.1",
     "javascript-stringify": "^2.1.0",
     "jsan": "^3.1.13",
     "jsondiffpatch": "^0.4.1",
@@ -67,15 +67,15 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@rjsf/core": "^3.2.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
     "@types/json-schema": "^7.0.9",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/socketcluster-client": "^13.0.5",
     "@types/styled-components": "^5.1.15",
@@ -83,17 +83,18 @@
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
-    "html-loader": "^3.0.0",
+    "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.3.1",
     "path-browserify": "^1.0.1",
@@ -106,7 +107,7 @@
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   },

packages/redux-devtools-app/src/actions/index.ts

@@ -66,7 +66,7 @@ export function changeSection(section: string): ChangeSectionAction {
 interface ChangeThemeFormData {
   readonly theme: Theme;
   readonly scheme: Scheme;
-  readonly dark: boolean;
+  readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 interface ChangeThemeData {
   readonly formData: ChangeThemeFormData;
@@ -75,7 +75,7 @@ export interface ChangeThemeAction {
   readonly type: typeof CHANGE_THEME;
   readonly theme: Theme;
   readonly scheme: Scheme;
-  readonly dark: boolean;
+  readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 export function changeTheme(data: ChangeThemeData): ChangeThemeAction {
   return { type: CHANGE_THEME, ...data.formData };

packages/redux-devtools-app/src/components/Settings/Themes.tsx

@@ -15,7 +15,7 @@ export class Themes extends Component<Props> {
     const formData = {
       theme: theme.theme,
       scheme: theme.scheme,
-      dark: !theme.light,
+      colorPreference: theme.colorPreference,
     };
 
     return (
@@ -33,8 +33,10 @@ export class Themes extends Component<Props> {
                 type: 'string',
                 enum: listSchemes(),
               },
-              dark: {
+              colorPreference: {
-                type: 'boolean',
+                title: 'theme color',
+                type: 'string',
+                enum: ['auto', 'light', 'dark'],
               },
             },
           }}

packages/redux-devtools-app/src/reducers/theme.ts

@@ -5,14 +5,14 @@ import { StoreAction } from '../actions';
 export interface ThemeState {
   readonly theme: Theme;
   readonly scheme: Scheme;
-  readonly light: boolean;
+  readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 
 export default function theme(
   state: ThemeState = {
-    theme: 'default' as const,
+    theme: 'default',
-    scheme: 'default' as const,
+    scheme: 'default',
-    light: true,
+    colorPreference: 'auto',
   },
   action: StoreAction
 ) {
@@ -20,7 +20,7 @@ export default function theme(
     return {
       theme: action.theme,
       scheme: action.scheme,
-      light: !action.dark,
+      colorPreference: action.colorPreference,
     };
   }
   return state;

packages/redux-devtools-app/test/app.spec.tsx

@@ -9,6 +9,20 @@ import rootReducer from '../src/reducers';
 import { DATA_TYPE_KEY } from '../src/constants/dataTypes';
 import stringifyJSON from '../src/utils/stringifyJSON';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 const store = createStore(rootReducer, applyMiddleware(exportState, api));
 
 describe('App container', () => {

packages/redux-devtools-chart-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/chart-monitor",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Chart monitor for Redux DevTools",
   "keywords": [
     "redux",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@types/prop-types": "^15.7.4",
     "@types/redux-devtools-themes": "^1.0.0",
-    "d3-state-visualizer": "^1.4.0",
+    "d3-state-visualizer": "^1.4.1",
     "deepmerge": "^4.2.2",
     "prop-types": "^15.7.2",
     "redux-devtools-themes": "^1.0.0"
@@ -49,13 +49,14 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/cli",
-  "version": "1.0.0-9",
+  "version": "1.0.0-10",
   "description": "CLI for remote debugging with Redux DevTools.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-cli",
   "bugs": {
@@ -40,9 +40,9 @@
     "node": ">=14.15.0"
   },
   "dependencies": {
-    "@redux-devtools/app": "^1.0.0-8",
+    "@redux-devtools/app": "^1.0.0-9",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "apollo-server-express": "^3.4.0",
+    "apollo-server-express": "^3.5.0",
     "body-parser": "^1.19.0",
     "chalk": "^4.1.2",
     "cors": "^2.8.5",
@@ -51,7 +51,7 @@
     "express": "^4.17.1",
     "getport": "^0.1.0",
     "graphql": "^15.7.2",
-    "knex": "^0.95.12",
+    "knex": "^0.95.13",
     "lodash": "^4.17.21",
     "minimist": "^1.2.5",
     "morgan": "^1.10.0",
@@ -81,11 +81,11 @@
     "@types/styled-components": "^5.1.15",
     "@types/supertest": "^2.0.11",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "jest": "^27.3.1",
     "ncp": "^2.0.0",
     "rimraf": "^3.0.2",

packages/redux-devtools-dock-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/dock-monitor",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A resizable and movable dock for Redux DevTools monitors",
   "keywords": [
     "redux",
@@ -41,7 +41,7 @@
     "@types/prop-types": "^15.7.4",
     "parse-key": "^0.2.1",
     "prop-types": "^15.7.2",
-    "react-dock": "^0.4.0"
+    "react-dock": "^0.4.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -49,14 +49,15 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
     "@types/parse-key": "^0.2.0",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-extension/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+}

packages/redux-devtools-extension/.eslintignore

@@ -0,0 +1 @@
+lib

packages/redux-devtools-extension/.eslintrc.js

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

packages/redux-devtools-extension/README.md

@@ -7,14 +7,14 @@
 Install:
 
 ```
-npm install --save redux-devtools-extension
+yarn add @redux-devtools/extension
 ```
 
 and use like that:
 
 ```js
 import { createStore, applyMiddleware } from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension';
+import { composeWithDevTools } from '@redux-devtools/extension';
 
 const store = createStore(
   reducer,
@@ -25,11 +25,11 @@ const store = createStore(
 );
 ```
 
-or if needed to apply [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):
+or if needed to apply [extension’s options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md):
 
 ```js
 import { createStore, applyMiddleware } from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension';
+import { composeWithDevTools } from '@redux-devtools/extension';
 
 const composeEnhancers = composeWithDevTools({
   // Specify here name, actionsDenylist, actionsCreators and other options
@@ -43,7 +43,7 @@ const store = createStore(
 );
 ```
 
-There’re just [few lines of code](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/index.js). If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.
+There’re just [few lines of code](https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/index.ts). If you don’t want to allow the extension in production, just use ‘@redux-devtools/extension/lib/developmentOnly’ instead of ‘@redux-devtools/extension’.
 
 ## License
 

packages/redux-devtools-extension/developmentOnly.d.ts

@@ -1 +0,0 @@
-export * from 'redux-devtools-extension';

packages/redux-devtools-extension/developmentOnly.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var compose = require('redux').compose;
-
-exports.__esModule = true;
-exports.composeWithDevTools =
-  process.env.NODE_ENV !== 'production' &&
-  typeof window !== 'undefined' &&
-  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    : function () {
-        if (arguments.length === 0) return undefined;
-        if (typeof arguments[0] === 'object') return compose;
-        return compose.apply(null, arguments);
-      };
-
-exports.devToolsEnhancer =
-  process.env.NODE_ENV !== 'production' &&
-  typeof window !== 'undefined' &&
-  window.__REDUX_DEVTOOLS_EXTENSION__
-    ? window.__REDUX_DEVTOOLS_EXTENSION__
-    : function () {
-        return function (noop) {
-          return noop;
-        };
-      };

packages/redux-devtools-extension/index.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var compose = require('redux').compose;
-
-exports.__esModule = true;
-exports.composeWithDevTools =
-  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    : function () {
-        if (arguments.length === 0) return undefined;
-        if (typeof arguments[0] === 'object') return compose;
-        return compose.apply(null, arguments);
-      };
-
-exports.devToolsEnhancer =
-  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
-    ? window.__REDUX_DEVTOOLS_EXTENSION__
-    : function () {
-        return function (noop) {
-          return noop;
-        };
-      };

packages/redux-devtools-extension/logOnly.d.ts

@@ -1 +0,0 @@
-export * from 'redux-devtools-extension';

packages/redux-devtools-extension/logOnly.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var assign = require('./utils/assign');
-var compose = require('redux').compose;
-
-function enhancer() {
-  var config = arguments[0] || {};
-  config.features = { pause: true, export: true, test: true };
-  config.type = 'redux';
-  if (config.autoPause === undefined) config.autoPause = true;
-  if (config.latency === undefined) config.latency = 500;
-
-  return function (createStore) {
-    return function (reducer, preloadedState, enhancer) {
-      var store = createStore(reducer, preloadedState, enhancer);
-      var origDispatch = store.dispatch;
-
-      var devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(config);
-      devTools.init(store.getState());
-
-      var dispatch = function (action) {
-        var r = origDispatch(action);
-        devTools.send(action, store.getState());
-        return r;
-      };
-
-      if (Object.assign) return Object.assign(store, { dispatch: dispatch });
-      return assign(store, 'dispatch', dispatch);
-    };
-  };
-}
-
-function composeWithEnhancer(config) {
-  return function () {
-    return compose(compose.apply(null, arguments), enhancer(config));
-  };
-}
-
-exports.__esModule = true;
-exports.composeWithDevTools = function () {
-  if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
-    if (arguments.length === 0) return enhancer();
-    if (typeof arguments[0] === 'object')
-      return composeWithEnhancer(arguments[0]);
-    return composeWithEnhancer().apply(null, arguments);
-  }
-
-  if (arguments.length === 0) return undefined;
-  if (typeof arguments[0] === 'object') return compose;
-  return compose.apply(null, arguments);
-};
-
-exports.devToolsEnhancer =
-  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
-    ? enhancer
-    : function () {
-        return function (noop) {
-          return noop;
-        };
-      };

packages/redux-devtools-extension/logOnlyInProduction.d.ts

@@ -1 +0,0 @@
-export * from 'redux-devtools-extension';

packages/redux-devtools-extension/logOnlyInProduction.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var compose = require('redux').compose;
-var logOnly = require('./logOnly');
-
-exports.__esModule = true;
-exports.composeWithDevTools =
-  process.env.NODE_ENV === 'production'
-    ? logOnly.composeWithDevTools
-    : typeof window !== 'undefined' &&
-      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-    : function () {
-        if (arguments.length === 0) return undefined;
-        if (typeof arguments[0] === 'object') return compose;
-        return compose.apply(null, arguments);
-      };
-
-exports.devToolsEnhancer =
-  process.env.NODE_ENV === 'production'
-    ? logOnly.devToolsEnhancer
-    : typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
-    ? window.__REDUX_DEVTOOLS_EXTENSION__
-    : function () {
-        return function (noop) {
-          return noop;
-        };
-      };

packages/redux-devtools-extension/package.json

@@ -1,15 +1,43 @@
 {
-  "name": "redux-devtools-extension",
+  "name": "@redux-devtools/extension",
-  "version": "2.13.9",
+  "version": "3.0.0-rc.1",
   "description": "Wrappers for Redux DevTools Extension.",
-  "main": "index.js",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-extension",
+  "license": "MIT",
+  "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zalmoxisus/redux-devtools-extension"
+    "url": "https://github.com/reduxjs/redux-devtools"
+  },
+  "scripts": {
+    "build": "yarn run build:types && yarn run build:js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline",
+    "clean": "rimraf lib",
+    "lint": "eslint . --ext .ts",
+    "type-check": "tsc --noEmit",
+    "prepack": "yarn run clean && yarn run build",
+    "prepublish": "yarn run type-check && yarn run lint"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "redux": "^4.1.2",
+    "rimraf": "^3.0.2",
+    "typescript": "~4.4.4"
   },
-  "homepage": "https://github.com/zalmoxisus/redux-devtools-extension",
-  "author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
-  "license": "MIT",
   "peerDependencies": {
     "redux": "^3.1.0 || ^4.0.0"
   }

packages/redux-devtools-extension/src/developmentOnly.ts

@@ -0,0 +1,36 @@
+import { compose, StoreEnhancer } from 'redux';
+import { Config, EnhancerOptions } from './index';
+
+declare const process: {
+  env: {
+    NODE_ENV: string;
+  };
+};
+
+function extensionComposeStub(
+  config: Config
+): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
+function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
+  if (funcs.length === 0) return undefined;
+  if (typeof funcs[0] === 'object') return compose;
+  return compose(...(funcs as StoreEnhancer[]));
+}
+
+export const composeWithDevTools =
+  process.env.NODE_ENV !== 'production' &&
+  typeof window !== 'undefined' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : extensionComposeStub;
+
+export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
+  process.env.NODE_ENV !== 'production' &&
+  typeof window !== 'undefined' &&
+  window.__REDUX_DEVTOOLS_EXTENSION__
+    ? window.__REDUX_DEVTOOLS_EXTENSION__
+    : function () {
+        return function (noop) {
+          return noop;
+        };
+      };

packages/redux-devtools-extension/src/index.ts

@@ -1,4 +1,4 @@
-import { Action, ActionCreator, StoreEnhancer, compose } from 'redux';
+import { Action, ActionCreator, compose, StoreEnhancer } from 'redux';
 
 export interface EnhancerOptions {
   /**
@@ -43,6 +43,7 @@ export interface EnhancerOptions {
         symbol?: boolean;
         map?: boolean;
         set?: boolean;
+        // eslint-disable-next-line @typescript-eslint/ban-types
         function?: boolean | Function;
       };
   /**
@@ -179,8 +180,52 @@ export interface EnhancerOptions {
   traceLimit?: number;
 }
 
-export function composeWithDevTools<StoreExt, StateExt>(
+export interface Config extends EnhancerOptions {
-  ...funcs: Array<StoreEnhancer<StoreExt>>
+  type?: string;
-): StoreEnhancer<StoreExt>;
+}
-export function composeWithDevTools(options: EnhancerOptions): typeof compose;
+
-export function devToolsEnhancer(options: EnhancerOptions): StoreEnhancer<any>;
+interface ConnectResponse {
+  init: (state: unknown) => void;
+  send: (action: Action<unknown>, state: unknown) => void;
+}
+
+interface ReduxDevtoolsExtension {
+  (config?: Config): StoreEnhancer;
+  connect: (preConfig: Config) => ConnectResponse;
+}
+
+export interface ReduxDevtoolsExtensionCompose {
+  (config: Config): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+  (...funcs: StoreEnhancer[]): StoreEnhancer;
+}
+
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION__?: ReduxDevtoolsExtension;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: ReduxDevtoolsExtensionCompose;
+  }
+}
+
+function extensionComposeStub(
+  config: Config
+): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
+function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
+  if (funcs.length === 0) return undefined;
+  if (typeof funcs[0] === 'object') return compose;
+  return compose(...(funcs as StoreEnhancer[]));
+}
+
+export const composeWithDevTools: ReduxDevtoolsExtensionCompose =
+  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : extensionComposeStub;
+
+export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
+  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
+    ? window.__REDUX_DEVTOOLS_EXTENSION__
+    : function () {
+        return function (noop) {
+          return noop;
+        };
+      };

packages/redux-devtools-extension/src/logOnly.ts

@@ -0,0 +1,71 @@
+import assign from './utils/assign';
+import {
+  Action,
+  compose,
+  Dispatch,
+  PreloadedState,
+  Reducer,
+  StoreEnhancer,
+} from 'redux';
+import { Config, EnhancerOptions } from './index';
+
+function enhancer(options?: EnhancerOptions): StoreEnhancer {
+  const config: Config = options || {};
+  config.features = { pause: true, export: true, test: true };
+  config.type = 'redux';
+  if (config.autoPause === undefined) config.autoPause = true;
+  if (config.latency === undefined) config.latency = 500;
+
+  return function (createStore) {
+    return function <S, A extends Action<unknown>>(
+      reducer: Reducer<S, A>,
+      preloadedState: PreloadedState<S> | undefined
+    ) {
+      const store = createStore(reducer, preloadedState);
+      const origDispatch = store.dispatch;
+
+      const devTools = window.__REDUX_DEVTOOLS_EXTENSION__!.connect(config);
+      devTools.init(store.getState());
+
+      const dispatch: Dispatch<A> = function (action) {
+        const r = origDispatch(action);
+        devTools.send(action, store.getState());
+        return r;
+      };
+
+      if (Object.assign) return Object.assign(store, { dispatch: dispatch });
+      return assign(store, 'dispatch', dispatch);
+    };
+  };
+}
+
+function composeWithEnhancer(config?: EnhancerOptions) {
+  return function (...funcs: StoreEnhancer[]) {
+    return compose(compose(...funcs), enhancer(config));
+  };
+}
+
+export function composeWithDevTools(
+  config: Config
+): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+export function composeWithDevTools(...funcs: StoreEnhancer[]): StoreEnhancer;
+export function composeWithDevTools(...funcs: [Config] | StoreEnhancer[]) {
+  if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
+    if (funcs.length === 0) return enhancer();
+    if (typeof funcs[0] === 'object') return composeWithEnhancer(funcs[0]);
+    return composeWithEnhancer()(...(funcs as StoreEnhancer[]));
+  }
+
+  if (funcs.length === 0) return undefined;
+  if (typeof funcs[0] === 'object') return compose;
+  return compose(...(funcs as StoreEnhancer[]));
+}
+
+export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
+  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
+    ? enhancer
+    : function () {
+        return function (noop) {
+          return noop;
+        };
+      };

packages/redux-devtools-extension/src/logOnlyInProduction.ts

@@ -0,0 +1,38 @@
+import { compose, StoreEnhancer } from 'redux';
+import * as logOnly from './logOnly';
+import { Config, EnhancerOptions } from './index';
+
+declare const process: {
+  env: {
+    NODE_ENV: string;
+  };
+};
+
+function extensionComposeStub(
+  config: Config
+): (...funcs: StoreEnhancer[]) => StoreEnhancer;
+function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
+function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
+  if (funcs.length === 0) return undefined;
+  if (typeof funcs[0] === 'object') return compose;
+  return compose(...(funcs as StoreEnhancer[]));
+}
+
+export const composeWithDevTools =
+  process.env.NODE_ENV === 'production'
+    ? logOnly.composeWithDevTools
+    : typeof window !== 'undefined' &&
+      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : extensionComposeStub;
+
+export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
+  process.env.NODE_ENV === 'production'
+    ? logOnly.devToolsEnhancer
+    : typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
+    ? window.__REDUX_DEVTOOLS_EXTENSION__
+    : function () {
+        return function (noop) {
+          return noop;
+        };
+      };

packages/redux-devtools-extension/src/utils/assign.ts

@@ -0,0 +1,26 @@
+const objectKeys =
+  Object.keys ||
+  function (obj) {
+    const keys = [];
+    for (const key in obj) {
+      if ({}.hasOwnProperty.call(obj, key)) keys.push(key);
+    }
+    return keys;
+  };
+
+export default function assign<T, K extends keyof T>(
+  obj: T,
+  newKey: K,
+  newValue: T[K]
+): T {
+  const keys = objectKeys(obj);
+  const copy: T = {} as T;
+
+  for (let i = 0, l = keys.length; i < l; i++) {
+    const key = keys[i];
+    copy[key as keyof T] = obj[key as keyof T];
+  }
+
+  copy[newKey] = newValue;
+  return copy;
+}

packages/redux-devtools-extension/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}

packages/redux-devtools-extension/utils/assign.js

@@ -1,24 +0,0 @@
-var objectKeys =
-  Object.keys ||
-  function (obj) {
-    var keys = [];
-    for (var key in obj) {
-      if ({}.hasOwnProperty.call(obj, key)) keys.push(key);
-    }
-    return keys;
-  };
-
-function assign(obj, newKey, newValue) {
-  var keys = objectKeys(obj);
-  var copy = {};
-
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i];
-    copy[key] = obj[key];
-  }
-
-  copy[newKey] = newValue;
-  return copy;
-}
-
-module.exports = assign;

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "test-demo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "scripts": {
     "start": "webpack serve --open",
@@ -10,11 +10,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@redux-devtools/inspector-monitor": "^1.0.1",
-    "@redux-devtools/inspector-monitor-test-tab": "^0.7.2",
+    "@redux-devtools/inspector-monitor-test-tab": "^0.7.3",
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
     "connected-react-router": "^6.9.1",
     "history": "^4.10.1",
     "immutable": "^4.0.0",
@@ -34,26 +34,27 @@
     "@types/history": "^4.7.9",
     "@types/lodash.shuffle": "^4.2.6",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/react-router": "^5.1.17",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

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

@@ -58,7 +58,11 @@ render(
   <Provider store={store}>
     <ConnectedRouter history={history}>
       <Container
-        themeData={{ theme: 'default', scheme: 'default', light: true }}
+        themeData={{
+          theme: 'default',
+          scheme: 'default',
+          colorPreference: 'auto',
+        }}
       >
         <Route path={ROOT}>
           <DemoApp />

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

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/inspector-monitor-test-tab",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Generate tests for redux devtools.",
   "keywords": [
     "redux",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.0",
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
     "@types/prop-types": "^15.7.4",
     "es6template": "^1.0.5",
     "javascript-stringify": "^2.1.0",
@@ -58,21 +58,22 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@redux-devtools/inspector-monitor": "^1.0.1",
     "@testing-library/react": "^12.1.2",
     "@types/es6template": "^1.0.0",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
     "@types/object-path": "^0.11.1",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/simple-diff": "^1.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/inspector-monitor-trace-tab",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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",
   "license": "MIT",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@babel/code-frame": "^7.16.0",
     "@babel/runtime": "^7.16.0",
-    "@types/chrome": "^0.0.162",
+    "@types/chrome": "^0.0.163",
     "anser": "^2.1.0",
     "html-entities": "^2.3.2",
     "path-browserify": "^1.0.1",
@@ -42,21 +42,22 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@redux-devtools/inspector-monitor": "^1.0.1",
     "@testing-library/react": "^12.1.2",
     "@types/babel__code-frame": "^7.0.3",
     "@types/html-entities": "^1.3.4",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/source-map": "0.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "inspector-demo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "scripts": {
     "start": "webpack serve --open",
@@ -10,16 +10,16 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@redux-devtools/inspector-monitor": "^1.0.1",
     "base16": "^1.0.0",
     "connected-react-router": "^6.9.1",
     "history": "^4.10.1",
     "immutable": "^4.0.0",
     "lodash.shuffle": "^4.2.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.0.1",
+    "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.1",
@@ -35,24 +35,25 @@
     "@types/history": "^4.7.9",
     "@types/lodash.shuffle": "^4.2.6",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/react-router": "^5.1.17",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/redux-devtools-inspector-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/inspector-monitor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Redux DevTools Diff Monitor",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor",
   "bugs": {
@@ -45,9 +45,9 @@
     "jss-preset-default": "^10.8.2",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
-    "react-base16-styling": "^0.8.0",
+    "react-base16-styling": "^0.8.1",
     "react-dragula": "^1.1.17",
-    "react-json-tree": "^0.15.0",
+    "react-json-tree": "^0.15.1",
     "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {
@@ -57,19 +57,20 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
     "@types/dateformat": "^3.0.1",
     "@types/hex-rgba": "^1.0.1",
     "@types/history": "^4.7.9",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/react-dragula": "^1.1.0",
     "@types/redux-devtools-themes": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-instrument/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/instrument",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Redux DevTools instrumentation",
   "keywords": [
     "redux",
@@ -48,11 +48,11 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "jest": "^27.3.1",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-log-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/log-monitor",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "The default tree view monitor for Redux DevTools",
   "keywords": [
     "redux",
@@ -43,7 +43,7 @@
     "@types/redux-devtools-themes": "^1.0.0",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
-    "react-json-tree": "^0.15.0",
+    "react-json-tree": "^0.15.1",
     "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {
@@ -52,13 +52,14 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-remote/README.md

@@ -141,8 +141,8 @@ For React Native you can use [remotedev-rn-debugger](https://github.com/jhen0409
 | `port`                  | _Number_ used to specify host's port for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli).                                                                                                                                                              |
 | `secure`                | _Boolean_ specifies whether to use `https` protocol for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli).                                                                                                                                               |
 | `maxAge`                | _Number_ of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`.                                                                                                                                                                 |
-| `actionsBlacklist`      | _array_ of actions to be hidden in DevTools. Overwrites corresponding global setting in the options page. See the example bellow.                                                                                                                                                                             |
+| `actionsDenylist`       | _array_ of actions to be hidden in DevTools. Overwrites corresponding global setting in the options page. See the example bellow.                                                                                                                                                                             |
-| `actionsWhitelist`      | _array_ of actions to be shown. All other actions will be hidden in DevTools.                                                                                                                                                                                                                                 |
+| `actionsAllowlist`      | _array_ of actions to be shown. All other actions will be hidden in DevTools.                                                                                                                                                                                                                                 |
 | `actionSanitizer`       | _Function_ which takes action object and id number as arguments, and should return action object back. See the example bellow.                                                                                                                                                                                |
 | `stateSanitizer`        | _Function_ which takes state object and index as arguments, and should return state object back. See the example bellow.                                                                                                                                                                                      |
 | `startOn`               | _String_ or _Array of strings_ indicating an action or a list of actions, which should start remote monitoring (when `realtime` is `false`).                                                                                                                                                                  |
@@ -157,7 +157,7 @@ For React Native you can use [remotedev-rn-debugger](https://github.com/jhen0409
 | `id`                    | _String_ to identify the instance when sending the history triggered by `sendOn`. You can use, for example, user id here, to know who sent the data.                                                                                                                                                          |
 | `suppressConnectErrors` | _Boolean_ - if set to `false`, all socket errors thrown while trying to connect will be printed to the console, regardless of if they've been thrown before. This is primarily for suppressing `SocketProtocolError` errors, which get repeatedly thrown when trying to make a connection. Default is `true`. |
 
-All parameters are optional. You have to provide at least `port` property to use `localhost` instead of `remotedev.io` server.
+All parameters are optional. You have to provide the `port` property to use the `hostname` or `secure` properties.
 
 Example:
 
@@ -172,7 +172,7 @@ export default function configureStore(preloadedState) {
       hostname: 'localhost',
       port: 8000,
       maxAge: 30,
-      actionsBlacklist: ['EFFECT_RESOLVED'],
+      actionsDenylist: ['EFFECT_RESOLVED'],
       actionSanitizer: (action) =>
         action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data
           ? { ...action, data: '<<LONG_BLOB>>' }

packages/redux-devtools-remote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/remote",
-  "version": "0.5.16",
+  "version": "0.6.0",
   "description": "Relay Redux actions to remote Redux DevTools.",
   "keywords": [
     "redux",
@@ -39,8 +39,8 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
-    "@redux-devtools/instrument": "^1.11.0",
+    "@redux-devtools/instrument": "^1.11.1",
-    "@redux-devtools/utils": "^1.0.0-6",
+    "@redux-devtools/utils": "^1.0.0-7",
     "jsan": "^3.1.13",
     "querystring": "^0.2.1",
     "rn-host-detect": "^1.2.0",
@@ -53,11 +53,10 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/jsan": "^3.1.2",
     "@types/socketcluster-client": "^13.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.26.1",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",
     "typescript": "~4.4.4"

packages/redux-devtools-remote/src/constants.ts

@@ -1,7 +1,7 @@
 export const defaultSocketOptions = {
-  secure: true,
+  secure: false,
-  hostname: 'remotedev.io',
+  hostname: 'localhost',
-  port: 443,
+  port: 8000,
   autoReconnect: true,
   autoReconnectOptions: {
     randomness: 30000,

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "rtk-query-demo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "scripts": {
     "start": "webpack serve --open",
@@ -11,13 +11,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.0",
-    "@chakra-ui/react": "^1.6.10",
+    "@chakra-ui/react": "^1.6.12",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mswjs/data": "^0.7.0",
+    "@mswjs/data": "^0.7.1",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/rtk-query-monitor": "^1.0.0",
+    "@redux-devtools/rtk-query-monitor": "^1.0.1",
     "@reduxjs/toolkit": "^1.6.2",
     "framer-motion": "^5.2.1",
     "msw": "^0.35.0",
@@ -35,26 +35,27 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.2",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   },

packages/redux-devtools-rtk-query-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/rtk-query-monitor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "rtk-query monitor for Redux DevTools",
   "keywords": [
     "redux",
@@ -40,7 +40,7 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
     "@types/prop-types": "^15.7.4",
     "@types/redux-devtools-themes": "^1.0.0",
     "hex-rgba": "^1.0.2",
@@ -49,8 +49,8 @@
     "jss-preset-default": "^10.8.2",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
-    "react-base16-styling": "^0.8.0",
+    "react-base16-styling": "^0.8.1",
-    "react-json-tree": "^0.15.0",
+    "react-json-tree": "^0.15.1",
     "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {
@@ -59,16 +59,17 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
     "@reduxjs/toolkit": "^1.6.2",
     "@types/hex-rgba": "^1.0.1",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx

@@ -1,4 +1,4 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
 import { Action, AnyAction } from 'redux';
 import { emptyRecord, identity } from '../utils/object';
@@ -12,7 +12,11 @@ export interface QueryPreviewActionsProps {
 const keySep = ' - ';
 
 export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps> {
-  selectFormattedActions = createSelector<
+  selectFormattedActions: Selector<
+    AnyAction[],
+    Record<string, AnyAction>,
+    never
+  > = createSelector<
     [(actions: AnyAction[]) => AnyAction[]],
     Record<string, AnyAction>
   >(identity, (actions) => {

packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx

@@ -1,4 +1,4 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ComponentProps, ReactNode } from 'react';
 import JSONTree from 'react-json-tree';
 import { Base16Theme, StylingFunction } from 'react-base16-styling';
@@ -36,12 +36,20 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
     },
   };
 
-  readonly selectLabelRenderer = createSelector<
+  readonly selectLabelRenderer: Selector<
+    StylingFunction,
+    ReturnType<typeof createTreeItemLabelRenderer>,
+    never
+  > = createSelector<
     [(stylingFunction: StylingFunction) => StylingFunction],
     ReturnType<typeof createTreeItemLabelRenderer>
   >(identity, createTreeItemLabelRenderer);
 
-  readonly selectGetItemString = createSelector<
+  readonly selectGetItemString: Selector<
+    StylingFunction,
+    (type: string, data: unknown) => ReactNode,
+    never
+  > = createSelector<
     [(stylingFunction: StylingFunction) => StylingFunction],
     (type: string, data: unknown) => ReactNode
   >(
@@ -50,7 +58,11 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
       getItemString(styling, type, data, DATA_TYPE_KEY, false)
   );
 
-  readonly selectTheme = createSelector<
+  readonly selectTheme: Selector<
+    Base16Theme,
+    ReturnType<typeof getJsonTreeTheme>,
+    never
+  > = createSelector<
     [(base16Theme: Base16Theme) => Base16Theme],
     ReturnType<typeof getJsonTreeTheme>
   >(identity, getJsonTreeTheme);

packages/redux-devtools-serialize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/serialize",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Serialize unserializable data and parse it back.",
   "keywords": [
     "redux",
@@ -39,11 +39,11 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "immutable": "^4.0.0",
     "jest": "^27.3.1",
     "rimraf": "^3.0.2",

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "slider-todomvc",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "TodoMVC example for redux",
   "license": "MIT",
   "repository": {
@@ -15,10 +15,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/log-monitor": "^2.3.0",
+    "@redux-devtools/log-monitor": "^2.3.1",
-    "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@redux-devtools/slider-monitor": "^2.0.0-9",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -35,24 +35,25 @@
     "@types/classnames": "^2.3.1",
     "@types/node": "^16.11.6",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/redux-devtools-slider-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/slider-monitor",
-  "version": "2.0.0-8",
+  "version": "2.0.0-9",
   "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",
   "bugs": {
@@ -29,7 +29,7 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
-    "@redux-devtools/ui": "^1.0.0-9",
+    "@redux-devtools/ui": "^1.0.0-10",
     "@types/prop-types": "^15.7.4",
     "@types/redux-devtools-themes": "^1.0.0",
     "prop-types": "^15.7.2",
@@ -41,13 +41,14 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^17.0.2",
     "redux": "^4.1.2",
     "rimraf": "^3.0.2",

packages/redux-devtools-ui/.storybook/preview.tsx

@@ -13,6 +13,7 @@ export const globalTypes = {
     defaultValue: 'default',
     toolbar: {
       items: listThemes(),
+      showName: true,
     },
   },
   scheme: {
@@ -21,6 +22,7 @@ export const globalTypes = {
     defaultValue: 'default',
     toolbar: {
       items: listSchemes(),
+      showName: true,
     },
   },
   color: {
@@ -28,7 +30,8 @@ export const globalTypes = {
     description: 'Global color for components',
     defaultValue: 'light',
     toolbar: {
-      items: ['light', 'dark'],
+      items: ['auto', 'light', 'dark'],
+      showName: true,
     },
   },
 };
@@ -38,7 +41,7 @@ const withThemeProvider = (Story, context) => (
     themeData={{
       theme: context.globals.theme,
       scheme: context.globals.scheme,
-      light: context.globals.color === 'light',
+      colorPreference: context.globals.color,
     }}
   >
     <Story {...context} />

packages/redux-devtools-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/ui",
-  "version": "1.0.0-9",
+  "version": "1.0.0-10",
   "description": "Reusable React components for building DevTools monitors and apps.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-ui",
   "bugs": {
@@ -46,7 +46,7 @@
     "color": "^3.2.1",
     "prop-types": "^15.7.2",
     "react-icons": "^4.3.1",
-    "react-select": "^5.1.0",
+    "react-select": "^5.2.1",
     "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0"
   },
@@ -58,21 +58,22 @@
     "@babel/preset-typescript": "^7.16.0",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/react": "^6.3.12",
-    "@testing-library/dom": "^8.10.1",
+    "@testing-library/dom": "^8.11.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.2",
     "@types/jest": "^27.0.2",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "csstype": "^3.0.9",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -86,7 +87,7 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.7",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0"
+    "webpack": "^5.62.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0",

packages/redux-devtools-ui/src/Container/index.tsx

@@ -1,10 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from 'styled-components';
-import { getTheme, ThemeData } from '../utils/theme';
+import { useTheme, ThemeData } from '../utils/theme';
 import { MainContainerWrapper, ContainerWrapper } from './styles';
 import { Theme } from '../themes/default';
 
+interface ContainerFromThemeDataProps {
+  children?: React.ReactNode;
+  themeData: ThemeData;
+  className?: string;
+}
+
+const ContainerFromThemeData: React.FunctionComponent<ContainerFromThemeDataProps> =
+  ({ themeData, className, children }) => {
+    const theme = useTheme(themeData);
+    return (
+      <ThemeProvider theme={theme}>
+        <MainContainerWrapper className={className}>
+          {children}
+        </MainContainerWrapper>
+      </ThemeProvider>
+    );
+  };
+
 interface Props {
   children?: React.ReactNode;
   themeData?: ThemeData;
@@ -27,11 +45,9 @@ const Container: React.FunctionComponent<Props> = ({
   }
 
   return (
-    <ThemeProvider theme={getTheme(themeData)}>
+    <ContainerFromThemeData themeData={themeData} className={className}>
-      <MainContainerWrapper className={className}>
+      {children}
-        {children}
+    </ContainerFromThemeData>
-      </MainContainerWrapper>
-    </ThemeProvider>
   );
 };
 

packages/redux-devtools-ui/src/utils/theme.ts

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from 'react';
 import * as themes from '../themes';
 import { nicinabox as defaultDarkScheme } from 'redux-devtools-themes';
 import * as baseSchemes from 'base16';
@@ -15,7 +16,7 @@ export type Scheme = keyof typeof schemes;
 export interface ThemeData {
   theme: keyof typeof themes;
   scheme: keyof typeof schemes;
-  light: boolean;
+  colorPreference: 'auto' | 'light' | 'dark';
 }
 
 export interface ThemeFromProvider extends ThemeBase {
@@ -23,11 +24,11 @@ export interface ThemeFromProvider extends ThemeBase {
   light: boolean;
 }
 
-export const getTheme = ({
+const getTheme = (
-  theme: type,
+  type: keyof typeof themes,
-  scheme,
+  scheme: keyof typeof schemes,
-  light,
+  light: boolean
-}: ThemeData): ThemeFromProvider => {
+): ThemeFromProvider => {
   let colors;
   if (scheme === 'default') {
     colors = light ? schemes.default : defaultDarkScheme;
@@ -47,3 +48,40 @@ export const getTheme = ({
 
   return theme;
 };
+
+export const useTheme = ({
+  theme: type,
+  scheme,
+  colorPreference,
+}: ThemeData): ThemeFromProvider => {
+  const [prefersDarkColorScheme, setPrefersDarkColorScheme] = useState(
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = ({ matches }: MediaQueryListEvent) => {
+      if (matches && !prefersDarkColorScheme) {
+        setPrefersDarkColorScheme(true);
+      }
+
+      if (!matches && prefersDarkColorScheme) {
+        setPrefersDarkColorScheme(false);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [prefersDarkColorScheme]);
+
+  const light = useMemo(
+    () =>
+      colorPreference === 'auto'
+        ? !prefersDarkColorScheme
+        : colorPreference === 'light',
+    [colorPreference, prefersDarkColorScheme]
+  );
+
+  return getTheme(type, scheme, light);
+};

packages/redux-devtools-ui/tests/Container.test.tsx

@@ -2,11 +2,29 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Container } from '../src';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe('Container', function () {
   it('renders correctly', () => {
     const { container } = render(
       <Container
-        themeData={{ theme: 'default', scheme: 'default', light: false }}
+        themeData={{
+          theme: 'default',
+          scheme: 'default',
+          colorPreference: 'auto',
+        }}
       >
         Text
       </Container>

packages/redux-devtools-ui/tests/__snapshots__/Container.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly 1`] = `
 <div
-  class="sc-bdvvtL gyKeHC"
+  class="sc-bdvvtL bKcxHw"
 >
   Text
 </div>

packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap

@@ -198,7 +198,7 @@ exports[`Form renders correctly 1`] = `
                 id="react-select-2-placeholder"
               />
               <div
-                class=" css-1qx78vi-Input"
+                class=" css-1xl7is7-Input"
                 data-value=""
               >
                 <input
@@ -549,7 +549,7 @@ exports[`Form renders with no button 1`] = `
                 id="react-select-4-placeholder"
               />
               <div
-                class=" css-1qx78vi-Input"
+                class=" css-1xl7is7-Input"
                 data-value=""
               >
                 <input
@@ -891,7 +891,7 @@ exports[`Form renders with primary button 1`] = `
                 id="react-select-3-placeholder"
               />
               <div
-                class=" css-1qx78vi-Input"
+                class=" css-1xl7is7-Input"
                 data-value=""
               >
                 <input

packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`Select renders correctly 1`] = `
         Select...
       </div>
       <div
-        class=" css-1qx78vi-Input"
+        class=" css-1xl7is7-Input"
         data-value=""
       >
         <input
@@ -214,7 +214,7 @@ exports[`Select should select another option 1`] = `
       class=" css-1dzc0nd-ValueContainer"
     >
       <div
-        class=" css-1qx78vi-Input"
+        class=" css-e4ucyw-Input"
         data-value="two"
       >
         <input
@@ -313,7 +313,7 @@ exports[`Select shouldn't find any results 1`] = `
       class=" css-1dzc0nd-ValueContainer"
     >
       <div
-        class=" css-1qx78vi-Input"
+        class=" css-e4ucyw-Input"
         data-value="text"
       >
         <input

packages/redux-devtools-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/utils",
-  "version": "1.0.0-6",
+  "version": "1.0.0-7",
   "description": "Reusable functions of Redux DevTools",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-utils",
   "bugs": {
@@ -30,8 +30,8 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/serialize": "^0.3.0",
+    "@redux-devtools/serialize": "^0.3.1",
     "@types/get-params": "^0.1.0",
     "get-params": "^0.1.2",
     "immutable": "^4.0.0",
@@ -48,8 +48,8 @@
     "@types/jsan": "^3.1.2",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "rimraf": "^3.0.2",

packages/redux-devtools-utils/src/filters.ts

@@ -20,23 +20,23 @@ export function arrToRegex(v: string | string[]) {
 
 function filterActions(
   actionsById: { [actionId: number]: PerformAction<Action<unknown>> },
-  actionsFilter: ((action: Action<unknown>, id: number) => Action) | undefined
+  actionSanitizer: ((action: Action<unknown>, id: number) => Action) | undefined
 ) {
-  if (!actionsFilter) return actionsById;
+  if (!actionSanitizer) return actionsById;
   return mapValues(actionsById, (action, id: number) => ({
     ...action,
-    action: actionsFilter(action.action, id),
+    action: actionSanitizer(action.action, id),
   }));
 }
 
 function filterStates(
   computedStates: { state: unknown; error?: string | undefined }[],
-  statesFilter: (state: unknown, actionId: number) => unknown
+  stateSanitizer: (state: unknown, actionId: number) => unknown
 ) {
-  if (!statesFilter) return computedStates;
+  if (!stateSanitizer) return computedStates;
   return computedStates.map((state, idx) => ({
     ...state,
-    state: statesFilter(state.state, idx),
+    state: stateSanitizer(state.state, idx),
   }));
 }
 

packages/redux-devtools-utils/src/importState.ts

@@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import jsan from 'jsan';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import { Action } from 'redux';
@@ -11,23 +10,11 @@ interface State {
   committedState?: unknown;
 }
 
-function deprecate(param: string) {
-  // eslint-disable-next-line no-console
-  console.warn(
-    `\`${param}\` parameter for Redux DevTools Extension is deprecated. Use \`serialize\` parameter instead:` +
-      ' https://github.com/zalmoxisus/redux-devtools-extension/releases/tag/v2.12.1'
-  );
-}
-
 export default function importState(
   state: string,
   {
-    deserializeState,
-    deserializeAction,
     serialize,
   }: {
-    deserializeState?: (state: string) => unknown;
-    deserializeAction?: (action: string) => Action<unknown>;
     serialize?: {
       immutable?: typeof Immutable;
       refs?: (new (data: any) => unknown)[] | null;
@@ -83,37 +70,6 @@ export default function importState(
       ).payload
     ) as State;
   }
-  if (deserializeState) {
-    deprecate('deserializeState');
-    if (typeof nextLiftedState.computedStates !== 'undefined') {
-      nextLiftedState.computedStates = nextLiftedState.computedStates.map(
-        (computedState) => ({
-          ...computedState,
-          state: deserializeState(computedState.state as string),
-        })
-      );
-    }
-    if (typeof nextLiftedState.committedState !== 'undefined') {
-      nextLiftedState.committedState = deserializeState(
-        nextLiftedState.committedState as string
-      );
-    }
-    if (typeof preloadedState !== 'undefined') {
-      preloadedState = deserializeState(
-        preloadedState as unknown as string
-      ) as State;
-    }
-  }
-  if (deserializeAction) {
-    deprecate('deserializeAction');
-    nextLiftedState.actionsById = mapValues(
-      nextLiftedState.actionsById,
-      (liftedAction) => ({
-        ...liftedAction,
-        action: deserializeAction(liftedAction.action as unknown as string),
-      })
-    );
-  }
 
   return { nextLiftedState, preloadedState };
 }

packages/redux-devtools/examples/counter/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "counter-redux",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Counter example for redux",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/counter",
   "bugs": {
@@ -19,9 +19,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/log-monitor": "^2.3.0",
+    "@redux-devtools/log-monitor": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -36,23 +36,24 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/node": "^16.11.6",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/redux-devtools/examples/todomvc/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "todomvc",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "TodoMVC example for redux",
   "keywords": [
     "react",
@@ -31,9 +31,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@redux-devtools/core": "^3.9.0",
+    "@redux-devtools/core": "^3.9.1",
-    "@redux-devtools/dock-monitor": "^1.4.0",
+    "@redux-devtools/dock-monitor": "^1.4.1",
-    "@redux-devtools/log-monitor": "^2.3.0",
+    "@redux-devtools/log-monitor": "^2.3.1",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -50,24 +50,25 @@
     "@types/classnames": "^2.3.1",
     "@types/node": "^16.11.6",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.4.0",
     "typescript": "~4.4.4",
-    "webpack": "^5.61.0",
+    "webpack": "^5.62.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   }

packages/redux-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redux-devtools/core",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "Redux DevTools with hot reloading and time travel",
   "keywords": [
     "redux",
@@ -38,7 +38,7 @@
     "prepublish": "yarn run type-check && yarn run lint && yarn run test"
   },
   "dependencies": {
-    "@redux-devtools/instrument": "^1.11.0",
+    "@redux-devtools/instrument": "^1.11.1",
     "@types/prop-types": "^15.7.4",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2"
@@ -52,14 +52,15 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.34",
     "@types/react-redux": "^7.1.20",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jest": "^25.2.3",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",