Merge branch 'main' into main

.changeset/early-poets-enjoy.md

@@ -1,5 +0,0 @@
----
-'@redux-devtools/cli': major
----
-
-Dropped support for Node.js 14.

.changeset/plenty-gifts-watch.md

@@ -1,7 +0,0 @@
----
-'remotedev-redux-devtools-extension': minor
-'@redux-devtools/inspector-monitor': minor
----
-
-Option to sort State Tree keys alphabetically
-Option to disable collapsing of object keys

.github/workflows/CI.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: nrwl/nx-set-shas@v3
@@ -25,10 +25,10 @@ jobs:
       - name: Check formatting
         run: pnpm run format:check
       - name: Build
-        run: pnpm exec nx affected --target=build --parallel=1
+        run: pnpm run build:all
       - name: Lint
-        run: pnpm exec nx affected --target=lint --parallel=1
+        run: pnpm run lint:all
       - name: Test
-        uses: GabrielBB/xvfb-action@v1
+        uses: coactions/setup-xvfb@v1
         with:
-          run: pnpm exec nx affected --target=test --parallel=1
+          run: pnpm run test:all

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0

docs/Walkthrough.md

@@ -52,7 +52,7 @@ const DevTools = createDevTools(
     defaultIsVisible={true}
   >
     <LogMonitor theme="tomorrow" />
-  </DockMonitor>
+  </DockMonitor>,
 );
 
 export default DevTools;
@@ -88,7 +88,7 @@ const enhancer = compose(
   // Middleware you want to use in development:
   applyMiddleware(d1, d2, d3),
   // Required! Enable Redux DevTools with the monitors you chose
-  DevTools.instrument()
+  DevTools.instrument(),
 );
 
 export default function configureStore(initialState) {
@@ -100,8 +100,8 @@ export default function configureStore(initialState) {
   if (module.hot) {
     module.hot.accept('../reducers', () =>
       store.replaceReducer(
-        require('../reducers') /*.default if you use Babel 6+ */
+        require('../reducers') /*.default if you use Babel 6+ */,
-      )
+      ),
     );
   }
 
@@ -121,7 +121,7 @@ const enhancer = compose(
   // Required! Enable Redux DevTools with the monitors you chose
   DevTools.instrument(),
   // Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions
-  persistState(getDebugSessionKey())
+  persistState(getDebugSessionKey()),
 );
 
 function getDebugSessionKey() {
@@ -200,7 +200,7 @@ const enhancer = compose(
   // Required! Enable Redux DevTools with the monitors you chose
   DevTools.instrument(),
   // Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions
-  persistState(getDebugSessionKey())
+  persistState(getDebugSessionKey()),
 );
 
 function getDebugSessionKey() {
@@ -219,8 +219,8 @@ export default function configureStore(initialState) {
   if (module.hot) {
     module.hot.accept('../reducers', () =>
       store.replaceReducer(
-        require('../reducers') /*.default if you use Babel 6+ */
+        require('../reducers') /*.default if you use Babel 6+ */,
-      )
+      ),
     );
   }
 
@@ -333,7 +333,7 @@ render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 if (process.env.NODE_ENV !== 'production') {
@@ -353,7 +353,7 @@ export default function showDevTools(store) {
   const popup = window.open(
     null,
     'Redux DevTools',
-    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no',
   );
   // Reload in case it already exists
   popup.location.reload();
@@ -362,7 +362,7 @@ export default function showDevTools(store) {
     popup.document.write('<div id="react-devtools-root"></div>');
     render(
       <DevTools store={store} />,
-      popup.document.getElementById('react-devtools-root')
+      popup.document.getElementById('react-devtools-root'),
     );
   }, 10);
 }

eslintrc.ts.base.json

@@ -3,15 +3,29 @@
   "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "prettier"
   ],
   "rules": {
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.jest.base.json

@@ -2,9 +2,8 @@
   "plugins": ["jest"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:jest/recommended",
     "plugin:jest/style",
     "prettier"
@@ -13,6 +12,21 @@
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.react.base.json

@@ -8,9 +8,8 @@
   "plugins": ["@typescript-eslint", "react"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "prettier"
@@ -32,6 +31,21 @@
           "attributes": false
         }
       }
-    ]
+    ],
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

eslintrc.ts.react.jest.base.json

@@ -2,9 +2,8 @@
   "plugins": ["jest"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:jest/recommended",
@@ -15,6 +14,21 @@
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off"
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/no-base-to-string": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/no-duplicate-type-constituents": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/prefer-function-type": "off"
   }
 }

extension/CHANGELOG.md

@@ -1,5 +1,43 @@
 # remotedev-redux-devtools-extension
 
+## 3.1.4
+
+### Patch Changes
+
+- Updated dependencies [e57bcb39]
+  - @redux-devtools/app@4.0.0
+
+## 3.1.3
+
+### Patch Changes
+
+- bca76009: Fix missing CSS for code editor
+
+## 3.1.2
+
+### Patch Changes
+
+- 64ed81b0: Fix extension in Firefox and Chrome Incognito
+
+## 3.1.1
+
+### Patch Changes
+
+- d18525b5: Increase min-width of popup
+- Updated dependencies [57751ff9]
+  - @redux-devtools/app@3.0.0
+
+## 3.1.0
+
+### Minor Changes
+
+- d54adb76: Option to sort State Tree keys alphabetically
+  Option to disable collapsing of object keys
+
+### Patch Changes
+
+- @redux-devtools/app@2.2.2
+
 ## 3.0.19
 
 ### Patch Changes

extension/README.md

@@ -105,7 +105,7 @@ const composeEnhancers =
     : compose;
 
 const enhancer = composeEnhancers(
-  applyMiddleware(...middleware)
+  applyMiddleware(...middleware),
   // other store enhancers if any
 );
 const store = createStore(reducer, enhancer);
@@ -130,9 +130,9 @@ import { composeWithDevTools } from '@redux-devtools/extension';
 const store = createStore(
   reducer,
   composeWithDevTools(
-    applyMiddleware(...middleware)
+    applyMiddleware(...middleware),
     // other store enhancers if any
-  )
+  ),
 );
 ```
 
@@ -148,9 +148,9 @@ const composeEnhancers = composeWithDevTools({
 const store = createStore(
   reducer,
   /* preloadedState, */ composeEnhancers(
-    applyMiddleware(...middleware)
+    applyMiddleware(...middleware),
     // other store enhancers if any
-  )
+  ),
 );
 ```
 
@@ -164,7 +164,7 @@ import { devToolsEnhancer } from '@redux-devtools/extension';
 
 const store = createStore(
   reducer,
-  /* preloadedState, */ devToolsEnhancer()
+  /* preloadedState, */ devToolsEnhancer(),
   // Specify name here, actionsDenylist, actionsCreators and other options if needed
 );
 ```
@@ -181,7 +181,7 @@ import { devToolsEnhancerLogOnlyInProduction } from '@redux-devtools/extension';
 
 const store = createStore(
   reducer,
-  /* preloadedState, */ devToolsEnhancerLogOnlyInProduction()
+  /* preloadedState, */ devToolsEnhancerLogOnlyInProduction(),
   // options like actionSanitizer, stateSanitizer
 );
 ```
@@ -198,9 +198,9 @@ const composeEnhancers = composeWithDevToolsLogOnlyInProduction({
 const store = createStore(
   reducer,
   /* preloadedState, */ composeEnhancers(
-    applyMiddleware(...middleware)
+    applyMiddleware(...middleware),
     // other store enhancers if any
-  )
+  ),
 );
 ```
 

extension/build.mjs

@@ -0,0 +1,71 @@
+import * as fs from 'node:fs';
+import * as esbuild from 'esbuild';
+import pug from 'pug';
+
+const args = process.argv.slice(2);
+const prod = !args.includes('--dev');
+
+const commonEsbuildOptions = {
+  bundle: true,
+  logLevel: 'info',
+  outdir: 'dist',
+  minify: prod,
+  sourcemap: !prod,
+  define: {
+    'process.env.NODE_ENV': prod ? '"production"' : '"development"',
+    'process.env.BABEL_ENV': prod ? '"production"' : '"development"',
+  },
+};
+
+await esbuild.build({
+  ...commonEsbuildOptions,
+  entryPoints: [
+    { out: 'background.bundle', in: 'src/background/index.ts' },
+    { out: 'options.bundle', in: 'src/options/index.tsx' },
+    { out: 'window.bundle', in: 'src/window/index.tsx' },
+    { out: 'remote.bundle', in: 'src/remote/index.tsx' },
+    { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' },
+    { out: 'devtools.bundle', in: 'src/devtools/index.ts' },
+    { out: 'content.bundle', in: 'src/contentScript/index.ts' },
+    { out: 'page.bundle', in: 'src/pageScript/index.ts' },
+    ...(prod ? [] : [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }]),
+  ],
+  loader: {
+    '.woff2': 'file',
+  },
+});
+
+if (prod) {
+  await esbuild.build({
+    ...commonEsbuildOptions,
+    entryPoints: [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }],
+    loader: {
+      '.js': 'text',
+    },
+  });
+}
+
+console.log();
+
+console.log('Creating HTML files...');
+const htmlFiles = ['devpanel', 'devtools', 'options', 'remote', 'window'];
+for (const htmlFile of htmlFiles) {
+  fs.writeFileSync(
+    `dist/${htmlFile}.html`,
+    pug.renderFile(`src/${htmlFile}/${htmlFile}.pug`),
+  );
+}
+
+console.log('Copying manifest.json...');
+fs.copyFileSync('chrome/manifest.json', 'dist/manifest.json');
+
+console.log('Copying assets...');
+fs.cpSync('src/assets', 'dist', { recursive: true });
+
+console.log('Copying dist for each browser...');
+fs.cpSync('dist', 'chrome/dist', { recursive: true });
+fs.copyFileSync('chrome/manifest.json', 'chrome/dist/manifest.json');
+fs.cpSync('dist', 'edge/dist', { recursive: true });
+fs.copyFileSync('edge/manifest.json', 'edge/dist/manifest.json');
+fs.cpSync('dist', 'firefox/dist', { recursive: true });
+fs.copyFileSync('firefox/manifest.json', 'firefox/dist/manifest.json');

extension/chrome/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.19",
+  "version": "3.1.3",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/docs/API/Arguments.md

@@ -5,18 +5,18 @@ Use with
 - `window.__REDUX_DEVTOOLS_EXTENSION__([options])`
 - `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()`
 - `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])`
-- `redux-devtools-extension` npm package:
+- `@redux-devtools/extension` npm package:
 
 ```js
-import { composeWithDevTools } from 'redux-devtools-extension';
+import { composeWithDevTools } from '@redux-devtools/extension';
 
 const composeEnhancers = composeWithDevTools(options);
 const store = createStore(
   reducer,
   /* preloadedState, */ composeEnhancers(
-    applyMiddleware(...middleware)
+    applyMiddleware(...middleware),
     // other store enhancers if any
-  )
+  ),
 );
 ```
 
@@ -70,7 +70,7 @@ _boolean_ or _object_ which contains:
               },
             },
           },
-        })
+        }),
     );
     ```
 
@@ -87,7 +87,7 @@ _boolean_ or _object_ which contains:
           replacer: (key, value) =>
             value && mori.isMap(value) ? mori.toJs(value) : value,
         },
-      })
+      }),
   );
   ```
 
@@ -109,7 +109,7 @@ _boolean_ or _object_ which contains:
             }
           },
         },
-      })
+      }),
   );
   ```
 
@@ -134,7 +134,7 @@ _boolean_ or _object_ which contains:
             }
           },
         },
-      })
+      }),
   );
   ```
 
@@ -174,7 +174,7 @@ _boolean_ or _object_ which contains:
           immutable: Immutable,
           refs: [ABRecord],
         },
-      })
+      }),
   );
   ```
 
@@ -185,7 +185,7 @@ In the example bellow it will always send `{ component: '[React]' }`, regardless
 ```js
 function component(
   state = { component: null, toJSON: () => ({ component: '[React]' }) },
-  action
+  action,
 ) {
   switch (action.type) {
     case 'ADD_COMPONENT':
@@ -206,7 +206,7 @@ function counter(
       return { conter: this.count * 10 };
     },
   },
-  action
+  action,
 ) {
   switch (action.type) {
     case 'INCREMENT':
@@ -236,7 +236,7 @@ const store = createStore(
       actionSanitizer,
       stateSanitizer: (state) =>
         state.data ? { ...state, data: '<<LONG_BLOB>>' } : state,
-    })
+    }),
 );
 ```
 
@@ -254,7 +254,7 @@ createStore(
     actionsDenylist: 'SOME_ACTION',
     // or actionsDenylist: ['SOME_ACTION', 'SOME_OTHER_ACTION']
     // or just actionsDenylist: 'SOME_' to omit both
-  })
+  }),
 );
 ```
 
@@ -270,7 +270,7 @@ const store = createStore(
     window.__REDUX_DEVTOOLS_EXTENSION__({
       predicate: (state, action) =>
         state.dev.logLevel === VERBOSE && !action.forwarded,
-    })
+    }),
 );
 ```
 

extension/docs/Integrations.md

@@ -32,7 +32,7 @@ import { inspectProps } from 'react-inspect-props';
 
 compose(
   withState('count', 'setCount', 0),
-  inspectProps('Counter inspector')
+  inspectProps('Counter inspector'),
 )(Counter);
 ```
 
@@ -167,7 +167,7 @@ run(App, {
         { id: newId(), num: 0 },
         { id: newId(), num: 0 },
       ],
-    })
+    }),
   ),
 });
 ```

extension/docs/Recipes.md

@@ -28,7 +28,7 @@ type WindowWithDevTools = Window & {
 };
 
 const isReduxDevtoolsExtenstionExist = (
-  arg: Window | WindowWithDevTools
+  arg: Window | WindowWithDevTools,
 ): arg is WindowWithDevTools => {
   return '__REDUX_DEVTOOLS_EXTENSION__' in arg;
 };
@@ -40,7 +40,7 @@ const store = createStore(
   initialState,
   isReduxDevtoolsExtenstionExist(window)
     ? window.__REDUX_DEVTOOLS_EXTENSION__()
-    : undefined
+    : undefined,
 );
 ```
 
@@ -72,7 +72,7 @@ const store = createStore(
       instaceID: 2,
       name: 'Allowlisted',
       actionsAllowlist: '...',
-    })
+    }),
-  )
+  ),
 );
 ```

extension/docs/Troubleshooting.md

@@ -35,8 +35,8 @@ const store = createStore(
     window.__REDUX_DEVTOOLS_EXTENSION__
       ? window.__REDUX_DEVTOOLS_EXTENSION__()
       : (noop) => noop,
-    batchedSubscribe(/* ... */)
+    batchedSubscribe(/* ... */),
-  )
+  ),
 );
 ```
 
@@ -60,7 +60,7 @@ const store = createStore(
       actionSanitizer,
       stateSanitizer: (state) =>
         state.data ? { ...state, data: '<<LONG_BLOB>>' } : state,
-    })
+    }),
 );
 ```
 
@@ -124,7 +124,7 @@ const store = Redux.createStore(
   window.__REDUX_DEVTOOLS_EXTENSION__ &&
     window.__REDUX_DEVTOOLS_EXTENSION__({
       serialize: true,
-    })
+    }),
 );
 ```
 

extension/edge/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.19",
+  "version": "3.1.3",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/examples/counter/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Redux counter example</title>

extension/examples/counter/index.js

@@ -10,5 +10,5 @@ render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

extension/examples/counter/server.js

@@ -11,7 +11,7 @@ app.use(
   webpackDevMiddleware(compiler, {
     noInfo: true,
     publicPath: config.output.publicPath,
-  })
+  }),
 );
 app.use(webpackHotMiddleware(compiler));
 
@@ -26,7 +26,7 @@ app.listen(port, function (error) {
     console.info(
       '==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.',
       port,
-      port
+      port,
     );
   }
 });

extension/examples/counter/store/configureStore.js

@@ -14,7 +14,7 @@ export default function configureStore(preloadedState) {
   const store = createStore(
     reducer,
     preloadedState,
-    composeEnhancers(applyMiddleware(invariant(), thunk))
+    composeEnhancers(applyMiddleware(invariant(), thunk)),
   );
 
   if (module.hot) {

extension/examples/counter/test/actions/counter.spec.js

@@ -37,7 +37,7 @@ function mockStore(getState, expectedActions, onLastAction) {
   }
 
   const mockStoreWithMiddleware = applyMiddleware(...middlewares)(
-    mockStoreWithoutMiddleware
+    mockStoreWithoutMiddleware,
   );
 
   return mockStoreWithMiddleware();

extension/examples/counter/test/components/Counter.spec.js

@@ -11,7 +11,7 @@ function setup() {
     decrement: expect.createSpy(),
   };
   const component = TestUtils.renderIntoDocument(
-    <Counter counter={1} {...actions} />
+    <Counter counter={1} {...actions} />,
   );
   return {
     component: component,

extension/examples/counter/test/containers/App.spec.js

@@ -10,7 +10,7 @@ function setup(initialState) {
   const app = TestUtils.renderIntoDocument(
     <Provider store={store}>
       <App />
-    </Provider>
+    </Provider>,
   );
   return {
     app: app,

extension/examples/react-counter-messaging/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>React counter example</title>

extension/examples/router/components/MainSection.js

@@ -69,7 +69,7 @@ class MainSection extends Component {
     const filteredTodos = todos.filter(TODO_FILTERS[filter]);
     const completedCount = todos.reduce(
       (count, todo) => (todo.completed ? count + 1 : count),
-      0
+      0,
     );
 
     return (

extension/examples/router/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Redux TodoMVC example</title>

extension/examples/router/index.js

@@ -12,5 +12,5 @@ render(
   <Provider store={store}>
     <Root />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

extension/examples/router/reducers/todos.js

@@ -34,14 +34,14 @@ export default function todos(state = initialState, action) {
       return state.map((todo) =>
         todo.id === action.id
           ? Object.assign({}, todo, { text: action.text })
-          : todo
+          : todo,
       );
 
     case COMPLETE_TODO:
       return state.map((todo) =>
         todo.id === action.id
           ? Object.assign({}, todo, { completed: !todo.completed })
-          : todo
+          : todo,
       );
 
     case COMPLETE_ALL:
@@ -49,7 +49,7 @@ export default function todos(state = initialState, action) {
       return state.map((todo) =>
         Object.assign({}, todo, {
           completed: !areAllMarked,
-        })
+        }),
       );
 
     case CLEAR_COMPLETED:

extension/examples/router/server.js

@@ -11,7 +11,7 @@ app.use(
   webpackDevMiddleware(compiler, {
     noInfo: true,
     publicPath: config.output.publicPath,
-  })
+  }),
 );
 app.use(webpackHotMiddleware(compiler));
 
@@ -26,7 +26,7 @@ app.listen(port, function (error) {
     console.info(
       '==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.',
       port,
-      port
+      port,
     );
   }
 });

extension/examples/router/store/configureStore.js

@@ -11,7 +11,7 @@ import rootReducer from '../reducers';
 export default function configureStore(initialState) {
   let finalCreateStore = compose(
     reduxReactRouter({ createHistory }),
-    global.devToolsExtension ? global.devToolsExtension() : (f) => f
+    global.devToolsExtension ? global.devToolsExtension() : (f) => f,
   )(createStore);
 
   const store = finalCreateStore(rootReducer, initialState);

extension/examples/router/test/components/Footer.spec.js

@@ -13,7 +13,7 @@ function setup(propOverrides) {
       onClearCompleted: expect.createSpy(),
       onShow: expect.createSpy(),
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();
@@ -72,7 +72,7 @@ describe('components', () => {
             0: 'All',
             1: 'Active',
             2: 'Completed',
-          }[i]
+          }[i],
         );
       });
     });

extension/examples/router/test/components/MainSection.spec.js

@@ -29,7 +29,7 @@ function setup(propOverrides) {
         clearCompleted: expect.createSpy(),
       },
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();

extension/examples/router/test/components/TodoTextInput.spec.js

@@ -12,7 +12,7 @@ function setup(propOverrides) {
       editing: false,
       newTodo: false,
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();

extension/examples/router/test/reducers/todos.spec.js

@@ -18,7 +18,7 @@ describe('todos reducer', () => {
       todos([], {
         type: types.ADD_TODO,
         text: 'Run the tests',
-      })
+      }),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -39,8 +39,8 @@ describe('todos reducer', () => {
         {
           type: types.ADD_TODO,
           text: 'Run the tests',
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -71,8 +71,8 @@ describe('todos reducer', () => {
         {
           type: types.ADD_TODO,
           text: 'Fix the tests',
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Fix the tests',
@@ -110,8 +110,8 @@ describe('todos reducer', () => {
         {
           type: types.DELETE_TODO,
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Use Redux',
@@ -140,8 +140,8 @@ describe('todos reducer', () => {
           type: types.EDIT_TODO,
           text: 'Fix the tests',
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Fix the tests',
@@ -174,8 +174,8 @@ describe('todos reducer', () => {
         {
           type: types.COMPLETE_TODO,
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -207,8 +207,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.COMPLETE_ALL,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -239,8 +239,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.COMPLETE_ALL,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -272,8 +272,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.CLEAR_COMPLETED,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Use Redux',
@@ -308,7 +308,7 @@ describe('todos reducer', () => {
           completed: false,
           text: 'Write tests',
         },
-      ])
+      ]),
     ).toEqual([
       {
         text: 'Write more tests',

extension/examples/saga-counter/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

extension/examples/saga-counter/src/main.js

@@ -20,7 +20,7 @@ const composeEnhancers =
   compose;
 const store = createStore(
   reducer,
-  composeEnhancers(applyMiddleware(sagaMiddleware))
+  composeEnhancers(applyMiddleware(sagaMiddleware)),
 );
 sagaMiddleware.run(rootSaga);
 
@@ -35,7 +35,7 @@ function render() {
       onIncrementIfOdd={() => action('INCREMENT_IF_ODD')}
       onIncrementAsync={() => action('INCREMENT_ASYNC')}
     />,
-    document.getElementById('root')
+    document.getElementById('root'),
   );
 }
 

extension/examples/todomvc/components/MainSection.js

@@ -70,7 +70,7 @@ class MainSection extends Component {
     const filteredTodos = todos.filter(TODO_FILTERS[filter]);
     const completedCount = todos.reduce(
       (count, todo) => (todo.completed ? count + 1 : count),
-      0
+      0,
     );
 
     return (

extension/examples/todomvc/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Redux TodoMVC example</title>

extension/examples/todomvc/index.js

@@ -12,5 +12,5 @@ render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

extension/examples/todomvc/reducers/todos.js

@@ -36,7 +36,7 @@ export default function todos(state = initialState, action) {
       return state.map((todo) =>
         todo.id === action.id
           ? Object.assign({}, todo, { text: action.text, modified: new Date() })
-          : todo
+          : todo,
       );
 
     case COMPLETE_TODO:
@@ -46,7 +46,7 @@ export default function todos(state = initialState, action) {
               completed: !todo.completed,
               modified: new Date(),
             })
-          : todo
+          : todo,
       );
 
     case COMPLETE_ALL:
@@ -55,7 +55,7 @@ export default function todos(state = initialState, action) {
         Object.assign({}, todo, {
           completed: !areAllMarked,
           modified: new Date(),
-        })
+        }),
       );
 
     case CLEAR_COMPLETED:

extension/examples/todomvc/server.js

@@ -11,7 +11,7 @@ app.use(
   webpackDevMiddleware(compiler, {
     noInfo: true,
     publicPath: config.output.publicPath,
-  })
+  }),
 );
 app.use(webpackHotMiddleware(compiler));
 
@@ -26,7 +26,7 @@ app.listen(port, function (error) {
     console.info(
       '==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.',
       port,
-      port
+      port,
     );
   }
 });

extension/examples/todomvc/store/configureStore.js

@@ -13,7 +13,7 @@ export default function configureStore(preloadedState) {
   if (!enhancer) {
     console.warn(
       'Install Redux DevTools Extension to inspect the app state: ' +
-        'https://github.com/zalmoxisus/redux-devtools-extension#installation'
+        'https://github.com/zalmoxisus/redux-devtools-extension#installation',
     );
   }
 

extension/examples/todomvc/test/components/Footer.spec.js

@@ -13,7 +13,7 @@ function setup(propOverrides) {
       onClearCompleted: expect.createSpy(),
       onShow: expect.createSpy(),
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();
@@ -72,7 +72,7 @@ describe('components', () => {
             0: 'All',
             1: 'Active',
             2: 'Completed',
-          }[i]
+          }[i],
         );
       });
     });

extension/examples/todomvc/test/components/MainSection.spec.js

@@ -29,7 +29,7 @@ function setup(propOverrides) {
         clearCompleted: expect.createSpy(),
       },
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();

extension/examples/todomvc/test/components/TodoTextInput.spec.js

@@ -12,7 +12,7 @@ function setup(propOverrides) {
       editing: false,
       newTodo: false,
     },
-    propOverrides
+    propOverrides,
   );
 
   const renderer = TestUtils.createRenderer();

extension/examples/todomvc/test/reducers/todos.spec.js

@@ -18,7 +18,7 @@ describe('todos reducer', () => {
       todos([], {
         type: types.ADD_TODO,
         text: 'Run the tests',
-      })
+      }),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -39,8 +39,8 @@ describe('todos reducer', () => {
         {
           type: types.ADD_TODO,
           text: 'Run the tests',
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -71,8 +71,8 @@ describe('todos reducer', () => {
         {
           type: types.ADD_TODO,
           text: 'Fix the tests',
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Fix the tests',
@@ -110,8 +110,8 @@ describe('todos reducer', () => {
         {
           type: types.DELETE_TODO,
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Use Redux',
@@ -140,8 +140,8 @@ describe('todos reducer', () => {
           type: types.EDIT_TODO,
           text: 'Fix the tests',
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Fix the tests',
@@ -174,8 +174,8 @@ describe('todos reducer', () => {
         {
           type: types.COMPLETE_TODO,
           id: 1,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -207,8 +207,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.COMPLETE_ALL,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -239,8 +239,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.COMPLETE_ALL,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Run the tests',
@@ -272,8 +272,8 @@ describe('todos reducer', () => {
         ],
         {
           type: types.CLEAR_COMPLETED,
-        }
+        },
-      )
+      ),
     ).toEqual([
       {
         text: 'Use Redux',
@@ -308,7 +308,7 @@ describe('todos reducer', () => {
           completed: false,
           text: 'Write tests',
         },
-      ])
+      ]),
     ).toEqual([
       {
         text: 'Write more tests',

extension/firefox/manifest.json

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

extension/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)',
+    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)',
   ],
 };

extension/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.0.19",
+  "version": "3.1.4",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",
@@ -11,12 +11,8 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack --env development --watch",
+    "build": "pnpm run build:extension && pnpm run type-check",
-    "build": "pnpm run build:extension && pnpm run build:chrome && pnpm run build:edge && pnpm run build:firefox",
+    "build:extension": "node build.mjs",
-    "build:extension": "webpack --env production && webpack --config wrap.webpack.config.js",
-    "build:chrome": "cpy . ../chrome/dist --cwd dist && cpy manifest.json dist --cwd chrome",
-    "build:edge": "cpy . ../edge/dist --cwd dist && cpy manifest.json dist --cwd edge",
-    "build:firefox": "cpy . ../firefox/dist --cwd dist && cpy manifest.json dist --cwd firefox",
     "build:examples": "babel-node examples/buildAll.js",
     "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
@@ -28,69 +24,60 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@redux-devtools/app": "^2.2.1",
+    "@redux-devtools/app": "^4.0.0",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/instrument": "^2.1.0",
     "@redux-devtools/serialize": "^0.4.1",
     "@redux-devtools/slider-monitor": "^4.0.0",
     "@redux-devtools/ui": "^1.3.0",
     "@redux-devtools/utils": "^2.0.0",
-    "@types/jsan": "^3.1.2",
+    "@types/jsan": "^3.1.3",
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.9.0",
+    "react-icons": "^4.11.0",
     "react-is": "^18.2.0",
     "react-json-tree": "^0.18.0",
-    "react-redux": "^8.0.7",
+    "react-redux": "^8.1.2",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.0",
-    "@babel/register": "^7.21.0",
+    "@babel/register": "^7.22.15",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/chrome": "^0.0.237",
+    "@types/chrome": "^0.0.246",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.199",
-    "@types/react": "^18.2.8",
+    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.4",
+    "@types/react-dom": "^18.2.8",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.28",
-    "babel-loader": "^9.1.2",
+    "chromedriver": "^116.0.0",
-    "chromedriver": "^112.0.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
+    "electron": "^26.2.2",
-    "electron": "^24.4.1",
+    "esbuild": "^0.19.3",
-    "eslint": "^8.42.0",
+    "eslint": "^8.50.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "file-loader": "^6.2.0",
+    "immutable": "^4.3.4",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "jest": "^29.7.0",
-    "immutable": "^4.3.0",
+    "jest-environment-jsdom": "^29.7.0",
-    "jest": "^29.5.0",
+    "pug": "^3.0.2",
-    "jest-environment-jsdom": "^29.5.0",
+    "rimraf": "^5.0.5",
-    "pug-html-loader": "^1.1.5",
+    "selenium-webdriver": "^4.13.0",
-    "raw-loader": "^4.0.2",
-    "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.4",
-    "rimraf": "^5.0.1",
-    "selenium-webdriver": "^4.9.2",
     "sinon-chrome": "^3.0.1",
-    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.1",
-    "ts-jest": "^29.1.0",
+    "typescript": "~5.2.2",
-    "typescript": "~5.0.4",
+    "webpack": "^5.88.2",
-    "webpack": "^5.85.0",
+    "webpack-cli": "^5.1.4"
-    "webpack-cli": "^5.1.3"
   }
 }

extension/src/app/Actions.tsx

@@ -17,7 +17,7 @@ import {
   StoreState,
   TopButtons,
 } from '@redux-devtools/app';
-import { GoRadioTower } from 'react-icons/go';
+import { GoBroadcast } from 'react-icons/go';
 import { MdBorderBottom, MdBorderLeft, MdBorderRight } from 'react-icons/md';
 import type { Position } from '../pageScript/api/openWindow';
 import type { SingleMessage } from '../background/store/apiMiddleware';
@@ -131,7 +131,7 @@ class Actions extends Component<Props> {
                 this.openWindow('remote');
               }}
             >
-              <GoRadioTower />
+              <GoBroadcast />
             </Button>
           )}
         </Toolbar>

extension/src/background/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import { Store } from 'redux';
 import configureStore, { BackgroundAction } from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';

extension/src/background/logging.ts

@@ -3,7 +3,7 @@ import { LIFTED_ACTION } from '@redux-devtools/app';
 export function getReport(
   reportId: string,
   tabId: string | number,
-  instanceId: number
+  instanceId: number,
 ) {
   chrome.storage.local.get(['s:hostname', 's:port', 's:secure'], (options) => {
     if (!options['s:hostname'] || !options['s:port']) return;

extension/src/background/openWindow.ts

@@ -12,7 +12,7 @@ export default function openDevToolsWindow(position: DevToolsPosition) {
   function popWindow(
     action: string,
     url: string,
-    customOptions: chrome.windows.CreateData & chrome.windows.UpdateInfo
+    customOptions: chrome.windows.CreateData & chrome.windows.UpdateInfo,
   ) {
     function focusIfExist(callback: () => void) {
       if (!windows[position]) {
@@ -37,7 +37,7 @@ export default function openDevToolsWindow(position: DevToolsPosition) {
       };
       if (action === 'open') {
         options.url = chrome.extension.getURL(
-          url + '#' + position.substr(position.indexOf('-') + 1)
+          url + '#' + position.substr(position.indexOf('-') + 1),
         );
         chrome.windows.create(options, (win) => {
           windows[position] = win!.id;

extension/src/background/store/apiMiddleware.ts

@@ -193,7 +193,7 @@ type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
 };
 type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: <S, A extends Action<unknown>>(
-    message: PanelMessage<S, A>
+    message: PanelMessage<S, A>,
   ) => void;
 };
 type MonitorPort = Omit<chrome.runtime.Port, 'postMessage'> & {
@@ -232,13 +232,13 @@ type MonitorAction<S, A extends Action<unknown>> =
 function toMonitors<S, A extends Action<unknown>>(
   action: MonitorAction<S, A>,
   tabId?: string | number,
-  verbose?: boolean
+  verbose?: boolean,
 ) {
   Object.keys(connections.monitor).forEach((id) => {
     connections.monitor[id].postMessage(
       verbose || action.type === 'ERROR' || action.type === SET_PERSIST
         ? action
-        : { type: UPDATE_STATE }
+        : { type: UPDATE_STATE },
     );
   });
   Object.keys(connections.panel).forEach((id) => {
@@ -267,7 +267,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         message,
         instanceId,
         action as AppDispatchAction,
-        state
+        state,
       ),
       id: instanceId.toString().replace(/^[^\/]+\//, ''),
     });
@@ -281,7 +281,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         message,
         instanceId,
         action as unknown as AppDispatchAction,
-        state
+        state,
       ),
       id: instanceId.toString().replace(/^[^\/]+\//, ''),
     });
@@ -295,7 +295,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         message,
         instanceId,
         action as unknown as AppDispatchAction,
-        state
+        state,
       ),
       id: instanceId.toString().replace(/^[^\/]+\//, ''),
     });
@@ -309,7 +309,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         message,
         instanceId,
         action as unknown as AppDispatchAction,
-        state
+        state,
       ),
       id: instanceId.toString().replace(/^[^\/]+\//, ''),
     });
@@ -323,7 +323,7 @@ function toContentScript(messageBody: ToContentScriptMessage) {
         message,
         instanceId,
         action as AppDispatchAction,
-        state
+        state,
       ),
       id: (instanceId as number).toString().replace(/^[^\/]+\//, ''),
     });
@@ -397,7 +397,7 @@ type BackgroundStoreResponse = { readonly options: Options };
 function messaging<S, A extends Action<unknown>>(
   request: BackgroundStoreMessage<S, A>,
   sender: chrome.runtime.MessageSender,
-  sendResponse?: (response?: BackgroundStoreResponse) => void
+  sendResponse?: (response?: BackgroundStoreResponse) => void,
 ) {
   let tabId = getId(sender);
   if (!tabId) return;
@@ -427,7 +427,7 @@ function messaging<S, A extends Action<unknown>>(
     let position: DevToolsPosition = 'devtools-left';
     if (
       ['remote', 'panel', 'left', 'right', 'bottom'].indexOf(
-        request.position
+        request.position,
       ) !== -1
     ) {
       position = ('devtools-' + request.position) as DevToolsPosition;
@@ -489,7 +489,7 @@ function messaging<S, A extends Action<unknown>>(
 function disconnect(
   type: 'tab' | 'monitor' | 'panel',
   id: number | string,
-  listener?: (message: any, port: chrome.runtime.Port) => void
+  listener?: (message: any, port: chrome.runtime.Port) => void,
 ) {
   return function disconnectListener() {
     const p = connections[type][id];
@@ -537,7 +537,7 @@ function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
             instanceId,
             state: stringifyJSON(
               persistedState,
-              state.instances.options[instanceId].serialize
+              state.instances.options[instanceId].serialize,
             ),
           });
         }
@@ -588,7 +588,7 @@ declare global {
 window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 
 export default function api(
-  store: MiddlewareAPI<Dispatch<BackgroundAction>, BackgroundState>
+  store: MiddlewareAPI<Dispatch<BackgroundAction>, BackgroundState>,
 ) {
   return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);

extension/src/background/store/backgroundStore.ts

@@ -60,7 +60,7 @@ export type BackgroundAction =
   | DisconnectedAction;
 
 export default function configureStore(
-  preloadedState?: PreloadedState<BackgroundState>
+  preloadedState?: PreloadedState<BackgroundState>,
 ) {
   return createStore(rootReducer, preloadedState, applyMiddleware(api));
   /*

extension/src/contentScript/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import {
   injectOptions,
   getOptionsFromBg,
@@ -205,9 +206,11 @@ export type SplitMessage =
 
 function tryCatch<S, A extends Action<unknown>>(
   fn: (
-    args: PageScriptToContentScriptMessageWithoutDisconnect<S, A> | SplitMessage
+    args:
+      | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
+      | SplitMessage,
   ) => void,
-  args: PageScriptToContentScriptMessageWithoutDisconnect<S, A>
+  args: PageScriptToContentScriptMessageWithoutDisconnect<S, A>,
 ) {
   try {
     return fn(args);
@@ -273,7 +276,7 @@ export type ContentScriptToBackgroundMessage<S, A extends Action<unknown>> =
   | RelayMessage<S, A>;
 
 function postToBackground<S, A extends Action<unknown>>(
-  message: ContentScriptToBackgroundMessage<S, A>
+  message: ContentScriptToBackgroundMessage<S, A>,
 ) {
   bg!.postMessage(message);
 }
@@ -281,7 +284,7 @@ function postToBackground<S, A extends Action<unknown>>(
 function send<S, A extends Action<unknown>>(
   message:
     | PageScriptToContentScriptMessageWithoutDisconnect<S, A>
-    | SplitMessage
+    | SplitMessage,
 ) {
   if (!connected) connect();
   if (message.type === 'INIT_INSTANCE') {
@@ -294,7 +297,7 @@ function send<S, A extends Action<unknown>>(
 
 // Resend messages from the page to the background script
 function handleMessages<S, A extends Action<unknown>>(
-  event: MessageEvent<PageScriptToContentScriptMessage<S, A>>
+  event: MessageEvent<PageScriptToContentScriptMessage<S, A>>,
 ) {
   if (!isAllowed()) return;
   if (!event || event.source !== window || typeof event.data !== 'object') {

extension/src/devpanel/devpanel.pug

@@ -12,4 +12,5 @@ html
 
   body
     #root
+    link(href='/devpanel.bundle.css', rel='stylesheet')
     script(src='/devpanel.bundle.js')

extension/src/devpanel/index.tsx

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import React, { CSSProperties, ReactNode } from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
@@ -6,7 +7,6 @@ import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
 import App from '../app/App';
 import configureStore from './store/panelStore';
 
-import './devpanel.pug';
 import { Action, Store } from 'redux';
 import type { PanelMessage } from '../background/store/apiMiddleware';
 import type { StoreStateWithoutSocket } from './store/panelReducer';
@@ -42,7 +42,7 @@ function renderDevTools() {
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
       </PersistGate>
-    </Provider>
+    </Provider>,
   );
   rendered = true;
 }
@@ -104,7 +104,7 @@ function init(id: number) {
         if (!rendered) renderDevTools();
         store!.dispatch(message);
       }
-    }
+    },
   );
 }
 

extension/src/devpanel/store/panelReducer.ts

@@ -12,6 +12,8 @@ import {
   ReportsState,
   section,
   SectionState,
+  StateTreeSettings,
+  stateTreeSettings,
   StoreAction,
   theme,
   ThemeState,
@@ -25,6 +27,7 @@ export interface StoreStateWithoutSocket {
   readonly instances: InstancesState;
   readonly reports: ReportsState;
   readonly notification: NotificationState;
+  readonly stateTreeSettings: StateTreeSettings;
 }
 
 const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
@@ -36,6 +39,7 @@ const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
     section,
     theme,
     connection,
+    stateTreeSettings,
   });
 
 export default rootReducer;

extension/src/devpanel/store/panelStore.ts

@@ -16,11 +16,11 @@ const persistedReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
 
 export default function configureStore(
   position: string,
-  bgConnection: chrome.runtime.Port
+  bgConnection: chrome.runtime.Port,
 ) {
   const enhancer = applyMiddleware(
     exportStateMiddleware,
-    panelDispatcher(bgConnection)
+    panelDispatcher(bgConnection),
   );
   const store = createStore(persistedReducer, enhancer);
   const persistor = persistStore(store);

extension/src/devtools/index.ts

@@ -1,11 +1,9 @@
-import './devtools.pug';
-
 function createPanel(url: string) {
   chrome.devtools.panels.create(
     'Redux',
     'img/logo/scalable.png',
     url,
-    function () {}
+    function () {},
   );
 }
 

extension/src/options/Options.tsx

@@ -10,7 +10,7 @@ export interface OptionsProps {
   readonly options: Options;
   readonly saveOption: <K extends keyof Options>(
     name: K,
-    value: Options[K]
+    value: Options[K],
   ) => void;
 }
 

extension/src/options/index.tsx

@@ -1,10 +1,9 @@
+import '../chromeApiMock';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
-import './options.pug';
-
 chrome.runtime.getBackgroundPage((background) => {
   const syncOptions = background!.syncOptions;
 

extension/src/options/syncOptions.ts

@@ -93,7 +93,7 @@ const get = (callback: (options: Options) => void) => {
       function (items) {
         options = migrateOldOptions(items as OldOrNewOptions);
         callback(options);
-      }
+      },
     );
   }
 };
@@ -125,8 +125,8 @@ export const injectOptions = (newOptions: Options) => {
     document.createTextNode(
       'window.devToolsOptions = Object.assign(window.devToolsOptions||{},' +
         JSON.stringify(options) +
-        ');'
+        ');',
-    )
+    ),
   );
   (document.head || document.documentElement).appendChild(s);
   s.parentNode!.removeChild(s);

extension/src/pageScript/Monitor.ts

@@ -11,7 +11,7 @@ declare global {
 export default class Monitor<S, A extends Action<unknown>> {
   update: (
     liftedState?: LiftedState<S, A, unknown> | undefined,
-    libConfig?: LibConfig
+    libConfig?: LibConfig,
   ) => void;
   active?: boolean;
   paused?: boolean;
@@ -21,8 +21,8 @@ export default class Monitor<S, A extends Action<unknown>> {
   constructor(
     update: (
       liftedState?: LiftedState<S, A, unknown> | undefined,
-      libConfig?: LibConfig
+      libConfig?: LibConfig,
-    ) => void
+    ) => void,
   ) {
     this.update = update;
   }

extension/src/pageScript/api/filters.ts

@@ -23,7 +23,7 @@ export const noFiltersApplied = (localFilter: LocalFilter | undefined) =>
 
 export function isFiltered<A extends Action<unknown>>(
   action: A | string,
-  localFilter: LocalFilter | undefined
+  localFilter: LocalFilter | undefined,
 ) {
   if (
     noFiltersApplied(localFilter) ||
@@ -43,7 +43,7 @@ export function isFiltered<A extends Action<unknown>>(
 
 function filterActions<A extends Action<unknown>>(
   actionsById: { [p: number]: PerformAction<A> },
-  actionSanitizer: ((action: A, id: number) => A) | undefined
+  actionSanitizer: ((action: A, id: number) => A) | undefined,
 ): { [p: number]: PerformAction<A> } {
   if (!actionSanitizer) return actionsById;
   return mapValues(actionsById, (action, id) => ({
@@ -54,7 +54,7 @@ function filterActions<A extends Action<unknown>>(
 
 function filterStates<S>(
   computedStates: { state: S; error?: string | undefined }[],
-  stateSanitizer: ((state: S, index: number) => S) | undefined
+  stateSanitizer: ((state: S, index: number) => S) | undefined,
 ) {
   if (!stateSanitizer) return computedStates;
   return computedStates.map((state, idx) => ({
@@ -68,7 +68,7 @@ export function filterState<S, A extends Action<unknown>>(
   localFilter: LocalFilter | undefined,
   stateSanitizer: ((state: S, index: number) => S) | undefined,
   actionSanitizer: ((action: A, id: number) => A) | undefined,
-  predicate: ((state: S, action: A) => boolean) | undefined
+  predicate: ((state: S, action: A) => boolean) | undefined,
 ): LiftedState<S, A, unknown> {
   if (predicate || !noFiltersApplied(localFilter)) {
     const filteredStagedActionIds: number[] = [];
@@ -94,7 +94,7 @@ export function filterState<S, A extends Action<unknown>>(
       filteredComputedStates.push(
         stateSanitizer
           ? { ...liftedState, state: stateSanitizer(currState, idx) }
-          : liftedState
+          : liftedState,
       );
       if (actionSanitizer) {
         sanitizedActionsById![id] = {
@@ -139,7 +139,7 @@ export function startingFrom<S, A extends Action<unknown>>(
     | undefined,
   predicate:
     | (<S, A extends Action<unknown>>(state: S, action: A) => boolean)
-    | undefined
+    | undefined,
 ): LiftedState<S, A, unknown> | PartialLiftedState<S, A> | undefined {
   const stagedActionIds = state.stagedActionIds;
   if (sendingActionId <= stagedActionIds[1]) return state;
@@ -178,7 +178,7 @@ export function startingFrom<S, A extends Action<unknown>>(
     newComputedStates.push(
       !stateSanitizer
         ? currState
-        : { ...currState, state: stateSanitizer(currState.state, i) }
+        : { ...currState, state: stateSanitizer(currState.state, i) },
     );
   }
 

extension/src/pageScript/api/importState.ts

@@ -10,7 +10,7 @@ interface SerializeWithRequiredImmutable extends SerializeWithImmutable {
 }
 
 function isSerializeWithImmutable(
-  serialize: boolean | SerializeWithImmutable
+  serialize: boolean | SerializeWithImmutable,
 ): serialize is SerializeWithRequiredImmutable {
   return !!(serialize as SerializeWithImmutable).immutable;
 }
@@ -20,7 +20,7 @@ interface SerializeWithRequiredReviver extends SerializeWithImmutable {
 }
 
 function isSerializeWithReviver(
-  serialize: boolean | SerializeWithImmutable
+  serialize: boolean | SerializeWithImmutable,
 ): serialize is SerializeWithRequiredReviver {
   return !!(serialize as SerializeWithImmutable).immutable;
 }
@@ -32,7 +32,7 @@ interface ParsedSerializedLiftedState {
 
 export default function importState<S, A extends Action<unknown>>(
   state: string | undefined,
-  { serialize }: Config
+  { serialize }: Config,
 ) {
   if (!state) return undefined;
   let parse = jsan.parse;
@@ -45,8 +45,8 @@ export default function importState<S, A extends Action<unknown>>(
             serialize.immutable,
             serialize.refs,
             serialize.replacer,
-            serialize.reviver
+            serialize.reviver,
-          ).reviver
+          ).reviver,
         );
     } else if (isSerializeWithReviver(serialize)) {
       parse = (v) => jsan.parse(v, serialize.reviver);

extension/src/pageScript/api/index.ts

@@ -56,7 +56,7 @@ function stringify(obj: unknown, serialize?: Serialize | undefined) {
     // 16 MB
     /* eslint-disable no-console */
     console.warn(
-      'Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://github.com/reduxjs/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu on how to configure it.'
+      'Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://github.com/reduxjs/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu on how to configure it.',
     );
     /* eslint-enable no-console */
     stringifyWarned = true;
@@ -80,7 +80,7 @@ export function getSerializeParameter(config: Config) {
         serialize.immutable,
         serialize.refs,
         serialize.replacer,
-        serialize.reviver
+        serialize.reviver,
       );
       return {
         replacer: immutableSerializer.replacer,
@@ -183,7 +183,7 @@ interface OpenMessage {
 
 export type PageScriptToContentScriptMessageForwardedToMonitors<
   S,
-  A extends Action<unknown>
+  A extends Action<unknown>,
 > =
   | InitMessage<S, A>
   | LiftedMessage
@@ -194,7 +194,7 @@ export type PageScriptToContentScriptMessageForwardedToMonitors<
 
 export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
   S,
-  A extends Action<unknown>
+  A extends Action<unknown>,
 > =
   | PageScriptToContentScriptMessageForwardedToMonitors<S, A>
   | ErrorMessage
@@ -204,7 +204,7 @@ export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<
 
 export type PageScriptToContentScriptMessageWithoutDisconnect<
   S,
-  A extends Action<unknown>
+  A extends Action<unknown>,
 > =
   | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<S, A>
   | InitInstancePageScriptToContentScriptMessage
@@ -215,14 +215,14 @@ export type PageScriptToContentScriptMessage<S, A extends Action<unknown>> =
   | DisconnectMessage;
 
 function post<S, A extends Action<unknown>>(
-  message: PageScriptToContentScriptMessage<S, A>
+  message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');
 }
 
 function getStackTrace(
   config: Config,
-  toExcludeFromTrace: Function | undefined
+  toExcludeFromTrace: Function | undefined,
 ) {
   if (!config.trace) return undefined;
   if (typeof config.trace === 'function') return config.trace();
@@ -265,7 +265,7 @@ function amendActionType<A extends Action<unknown>>(
     | StructuralPerformAction<A>[]
     | string,
   config: Config,
-  toExcludeFromTrace: Function | undefined
+  toExcludeFromTrace: Function | undefined,
 ): StructuralPerformAction<A> {
   let timestamp = Date.now();
   let stack = getStackTrace(config, toExcludeFromTrace);
@@ -383,7 +383,7 @@ type ToContentScriptMessage<S, A extends Action<unknown>> =
 export function toContentScript<S, A extends Action<unknown>>(
   message: ToContentScriptMessage<S, A>,
   serializeState?: Serialize | undefined,
-  serializeAction?: Serialize | undefined
+  serializeAction?: Serialize | undefined,
 ) {
   if (message.type === 'ACTION') {
     post({
@@ -430,7 +430,7 @@ export function sendMessage<S, A extends Action<unknown>>(
   state: LiftedState<S, A, unknown>,
   config: Config,
   instanceId?: number,
-  name?: string
+  name?: string,
 ) {
   let amendedAction = action;
   if (typeof config !== 'object') {
@@ -450,7 +450,7 @@ export function sendMessage<S, A extends Action<unknown>>(
         instanceId: config.instanceId || instanceId || 1,
       },
       config.serialize as Serialize | undefined,
-      config.serialize as Serialize | undefined
+      config.serialize as Serialize | undefined,
     );
   } else {
     toContentScript<S, A>(
@@ -464,7 +464,7 @@ export function sendMessage<S, A extends Action<unknown>>(
         instanceId: config.instanceId || instanceId || 1,
       },
       config.serialize as Serialize | undefined,
-      config.serialize as Serialize | undefined
+      config.serialize as Serialize | undefined,
     );
   }
 }
@@ -489,7 +489,7 @@ function handleMessages(event: MessageEvent<ContentScriptToPageScriptMessage>) {
 
 export function setListener(
   onMessage: (message: ContentScriptToPageScriptMessage) => void,
-  instanceId: number
+  instanceId: number,
 ) {
   listeners[instanceId] = onMessage;
   window.addEventListener('message', handleMessages, false);
@@ -498,7 +498,7 @@ export function setListener(
 const liftListener =
   <S, A extends Action<unknown>>(
     listener: (message: ListenerMessage<S, A>) => void,
-    config: Config
+    config: Config,
   ) =>
   (message: ContentScriptToPageScriptMessage) => {
     if (message.type === 'IMPORT') {
@@ -522,15 +522,15 @@ 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
+    listener: (message: ListenerMessage<S, A>) => void,
   ) => (() => void) | undefined;
   unsubscribe: () => void;
   send: <S, A extends Action<unknown>>(
     action: A,
-    state: LiftedState<S, A, unknown>
+    state: LiftedState<S, A, unknown>,
   ) => void;
   error: (payload: string) => void;
 }
@@ -575,12 +575,12 @@ export function connect(preConfig: Config): ConnectResponse {
   listeners[id] = [rootListener];
 
   const subscribe = <S, A extends Action<unknown>>(
-    listener: (message: ListenerMessage<S, A>) => void
+    listener: (message: ListenerMessage<S, A>) => void,
   ) => {
     if (!listener) return undefined;
     const liftedListener = liftListener(listener, config);
     const listenersForId = listeners[id] as ((
-      message: ContentScriptToPageScriptMessage
+      message: ContentScriptToPageScriptMessage,
     ) => void)[];
     listenersForId.push(liftedListener);
 
@@ -602,7 +602,7 @@ export function connect(preConfig: Config): ConnectResponse {
 
   const send = <S, A extends Action<unknown>>(
     action: A,
-    state: LiftedState<S, A, unknown>
+    state: LiftedState<S, A, unknown>,
   ) => {
     if (
       isPaused ||
@@ -639,13 +639,13 @@ export function connect(preConfig: Config): ConnectResponse {
     sendMessage(
       amendedAction as StructuralPerformAction<A>,
       amendedState,
-      config
+      config,
     );
   };
 
   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',

extension/src/pageScript/api/notifyErrors.ts

@@ -26,7 +26,7 @@ function postError(message: string) {
       type: 'ERROR',
       message: message,
     },
-    '*'
+    '*',
   );
 }
 

extension/src/pageScript/api/openWindow.ts

@@ -4,7 +4,7 @@ import type { PageScriptToContentScriptMessage } from './index';
 export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
 
 function post<S, A extends Action<unknown>>(
-  message: PageScriptToContentScriptMessage<S, A>
+  message: PageScriptToContentScriptMessage<S, A>,
 ) {
   window.postMessage(message, '*');
 }

extension/src/pageScript/enhancerStore.ts

@@ -5,7 +5,7 @@ import type { ConfigWithExpandedMaxAge } from './index';
 
 export function getUrlParam(key: string) {
   const matches = window.location.href.match(
-    new RegExp(`[?&]${key}=([^&#]+)\\b`)
+    new RegExp(`[?&]${key}=([^&#]+)\\b`),
   );
   return matches && matches.length > 0 ? matches[1] : null;
 }
@@ -20,11 +20,11 @@ export default function configureStore<
   S,
   A extends Action<unknown>,
   MonitorState,
-  MonitorAction extends Action<unknown>
+  MonitorAction extends Action<unknown>,
 >(
   next: StoreEnhancerStoreCreator,
   monitorReducer: Reducer<MonitorState, MonitorAction>,
-  config: ConfigWithExpandedMaxAge
+  config: ConfigWithExpandedMaxAge,
 ) {
   return compose(
     instrument(monitorReducer, {
@@ -37,6 +37,6 @@ export default function configureStore<
       shouldStartLocked: config.shouldStartLocked,
       pauseActionType: config.pauseActionType || '@@PAUSED',
     }),
-    persistState(getUrlParam('debug_session'))
+    persistState(getUrlParam('debug_session')),
   )(next);
 }

extension/src/pageScript/index.ts

@@ -57,7 +57,7 @@ import type { ContentScriptToPageScriptMessage } from '../contentScript';
 type EnhancedStoreWithInitialDispatch<
   S,
   A extends Action<unknown>,
-  MonitorState
+  MonitorState,
 > = EnhancedStore<S, A, MonitorState> & { initialDispatch: Dispatch<A> };
 
 const source = '@devtools-page';
@@ -73,7 +73,7 @@ let reportId: string | null | undefined;
 function deprecateParam(oldParam: string, newParam: string) {
   /* eslint-disable no-console */
   console.warn(
-    `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md`
+    `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md`,
   );
   /* eslint-enable no-console */
 }
@@ -99,18 +99,18 @@ export interface ConfigWithExpandedMaxAge {
   readonly stateSanitizer?: <S>(state: S, index?: number) => S;
   readonly actionSanitizer?: <A extends Action<unknown>>(
     action: A,
-    id?: number
+    id?: number,
   ) => A;
   readonly predicate?: <S, A extends Action<unknown>>(
     state: S,
-    action: A
+    action: A,
   ) => boolean;
   readonly latency?: number;
   readonly maxAge?:
     | number
     | (<S, A extends Action<unknown>>(
         currentLiftedAction: LiftedAction<S, A, unknown>,
-        previousLiftedState: LiftedState<S, A, unknown> | undefined
+        previousLiftedState: LiftedState<S, A, unknown> | undefined,
       ) => number);
   readonly trace?: boolean | (() => string | undefined);
   readonly traceLimit?: number;
@@ -142,11 +142,11 @@ interface ReduxDevtoolsExtension {
     state: LiftedState<S, A, unknown>,
     config: Config,
     instanceId?: number,
-    name?: string
+    name?: string,
   ) => void;
   listen: (
     onMessage: (message: ContentScriptToPageScriptMessage) => void,
-    instanceId: number
+    instanceId: number,
   ) => void;
   connect: (preConfig: Config) => ConnectResponse;
   disconnect: () => void;
@@ -159,7 +159,7 @@ declare global {
 }
 
 function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
-  config?: Config
+  config?: Config,
 ): StoreEnhancer {
   /* eslint-disable no-param-reassign */
   if (typeof config !== 'object') config = {};
@@ -188,7 +188,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   const relayState = throttle(
     (
       liftedState?: LiftedState<S, A, unknown> | undefined,
-      libConfig?: LibConfig
+      libConfig?: LibConfig,
     ) => {
       relayAction.cancel();
       const state = liftedState || store.liftedStore.getState();
@@ -201,17 +201,17 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
             localFilter,
             stateSanitizer,
             actionSanitizer,
-            predicate
+            predicate,
           ),
           source,
           instanceId,
           libConfig,
         },
         serializeState,
-        serializeAction
+        serializeAction,
       );
     },
-    latency
+    latency,
   );
 
   const monitor = new Monitor(relayState);
@@ -233,7 +233,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
         instanceId,
       },
       serializeState,
-      serializeAction
+      serializeAction,
     );
   }
 
@@ -269,13 +269,13 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
             ? liftedState.actionsById[nextActionId - 1]
             : actionSanitizer(
                 liftedState.actionsById[nextActionId - 1].action,
-                nextActionId - 1
+                nextActionId - 1,
               ),
           maxAge: getMaxAge(),
           nextActionId,
         },
         serializeState,
-        serializeAction
+        serializeAction,
       );
       return;
     }
@@ -287,7 +287,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
       localFilter,
       stateSanitizer,
       actionSanitizer,
-      predicate
+      predicate,
     );
     sendingActionId = nextActionId;
     if (typeof payload === 'undefined') return;
@@ -300,13 +300,13 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
             localFilter,
             stateSanitizer,
             actionSanitizer,
-            predicate
+            predicate,
           ),
           source,
           instanceId,
         },
         serializeState,
-        serializeAction
+        serializeAction,
       );
       return;
     }
@@ -319,7 +319,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
         maxAge: getMaxAge(),
       },
       serializeState,
-      serializeAction
+      serializeAction,
     );
   }, latency);
 
@@ -337,7 +337,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
           instanceId,
         },
         serializeState,
-        serializeAction
+        serializeAction,
       );
     }
   }
@@ -357,7 +357,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
           instanceId,
         },
         serializeState,
-        serializeAction
+        serializeAction,
       );
     }
   }
@@ -419,7 +419,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
               instanceId,
             },
             serializeState,
-            serializeAction
+            serializeAction,
           );
           reportId = null;
         }
@@ -437,7 +437,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
               instanceId,
             },
             serializeState,
-            serializeAction
+            serializeAction,
           );
         }
     }
@@ -446,7 +446,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   const filteredActionIds: number[] = []; // simple circular buffer of non-excluded actions with fixed maxAge-1 length
   const getMaxAge = (
     liftedAction?: LiftedAction<S, A, unknown>,
-    liftedState?: LiftedState<S, A, unknown> | undefined
+    liftedState?: LiftedState<S, A, unknown> | undefined,
   ) => {
     let m = (config && config.maxAge) || window.devToolsOptions.maxAge || 50;
     if (
@@ -497,7 +497,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
         instanceId,
       },
       serializeState,
-      serializeAction
+      serializeAction,
     );
     store.subscribe(handleChange);
 
@@ -529,11 +529,11 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   const enhance =
     (): StoreEnhancer =>
     <NextExt, NextStateExt>(
-      next: StoreEnhancerStoreCreator<NextExt, NextStateExt>
+      next: StoreEnhancerStoreCreator<NextExt, NextStateExt>,
     ): any => {
       return <S2 extends S, A2 extends A>(
         reducer_: Reducer<S2, A2>,
-        initialState_?: PreloadedState<S2>
+        initialState_?: PreloadedState<S2>,
       ) => {
         if (!isAllowed(window.devToolsOptions)) {
           return next(reducer_, initialState_);
@@ -545,7 +545,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
           {
             ...config,
             maxAge: getMaxAge as any,
-          }
+          },
         )(reducer_, initialState_) as any;
 
         if (isInIframe()) setTimeout(init, 3000);
@@ -593,7 +593,7 @@ const preEnhancer =
 
 export type InferComposedStoreExt<StoreEnhancers> = StoreEnhancers extends [
   infer HeadStoreEnhancer,
-  ...infer RestStoreEnhancers
+  ...infer RestStoreEnhancers,
 ]
   ? HeadStoreEnhancer extends StoreEnhancer<infer StoreExt>
     ? StoreExt & InferComposedStoreExt<RestStoreEnhancers>
@@ -611,13 +611,15 @@ const extensionCompose =
       return [preEnhancer(instanceId), ...funcs].reduceRight(
         // @ts-ignore FIXME
         (composed, f) => f(composed),
-        __REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args)
+        __REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args),
       );
     };
   };
 
 interface ReduxDevtoolsExtensionCompose {
-  (config: Config): <StoreEnhancers extends readonly StoreEnhancer<unknown>[]>(
+  (
+    config: Config,
+  ): <StoreEnhancers extends readonly StoreEnhancer<unknown>[]>(
     ...funcs: StoreEnhancers
   ) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;
   <StoreEnhancers extends readonly StoreEnhancer<unknown>[]>(
@@ -632,12 +634,12 @@ declare global {
 }
 
 function reduxDevtoolsExtensionCompose(
-  config: Config
+  config: Config,
 ): <StoreEnhancers extends readonly StoreEnhancer<unknown>[]>(
   ...funcs: StoreEnhancers
 ) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;
 function reduxDevtoolsExtensionCompose<
-  StoreEnhancers extends readonly StoreEnhancer<unknown>[]
+  StoreEnhancers extends readonly StoreEnhancer<unknown>[],
 >(
   ...funcs: StoreEnhancers
 ): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;

extension/src/pageScriptWrap.ts

@@ -1,8 +1,10 @@
+// @ts-ignore
+import script from '../dist/page.bundle.js';
+
 let s = document.createElement('script');
 s.type = 'text/javascript';
 
 if (process.env.NODE_ENV === 'production') {
-  const { default: script } = require('raw-loader!../dist/page.bundle.js');
   s.appendChild(document.createTextNode(script));
   (document.head || document.documentElement).appendChild(s);
   s.parentNode!.removeChild(s);
@@ -10,7 +12,7 @@ if (process.env.NODE_ENV === 'production') {
   s.src = chrome.extension.getURL('page.bundle.js');
   s.onload = function () {
     (this as HTMLScriptElement).parentNode!.removeChild(
-      this as HTMLScriptElement
+      this as HTMLScriptElement,
     );
   };
   (document.head || document.documentElement).appendChild(s);

extension/src/remote/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
-import './remote.pug';
-
 chrome.storage.local.get(
   {
     'select-monitor': 'InspectorMonitor',
@@ -31,7 +29,7 @@ chrome.storage.local.get(
               }
             : undefined
         }
-      />
+      />,
     );
-  }
+  },
 );

extension/src/remote/remote.pug

@@ -8,4 +8,5 @@ html
 
   body
     #root
+    link(href='/remote.bundle.css', rel='stylesheet')
     script(src='/remote.bundle.js')

extension/src/window/index.tsx

@@ -7,8 +7,6 @@ import App from '../app/App';
 import configureStore from './store/windowStore';
 import type { MonitorMessage } from '../background/store/apiMiddleware';
 
-import './window.pug';
-
 const position = location.hash;
 
 chrome.runtime.getBackgroundPage((window) => {
@@ -31,8 +29,9 @@ chrome.runtime.getBackgroundPage((window) => {
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
       </PersistGate>
-    </Provider>
+    </Provider>,
   );
 });
 
+if (position === '#popup') document.body.style.minWidth = '760px';
 if (position !== '#popup') document.body.style.minHeight = '100%';

extension/src/window/store/instanceSelectorMiddleware.ts

@@ -9,7 +9,7 @@ import {
 function selectInstance(
   tabId: number,
   store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>,
-  next: Dispatch<StoreAction>
+  next: Dispatch<StoreAction>,
 ) {
   const instances = store.getState().instances;
   if (instances.current === 'default') return;
@@ -29,12 +29,12 @@ function getCurrentTabId(next: (tabId: number) => void) {
       const tab = tabs[0];
       if (!tab) return;
       next(tab.id!);
-    }
+    },
   );
 }
 
 export default function popupSelector(
-  store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>
+  store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>,
 ) {
   return (next: Dispatch<StoreAction>) => (action: StoreAction) => {
     const result = next(action);

extension/src/window/store/instancesReducer.ts

@@ -13,7 +13,7 @@ import type {
 
 export default function instances(
   state = instancesInitialState,
-  action: WindowStoreAction
+  action: WindowStoreAction,
 ) {
   switch (action.type) {
     case UPDATE_STATE:

extension/src/window/store/windowStore.ts

@@ -45,12 +45,12 @@ const persistConfig = {
 
 const persistedReducer: Reducer<StoreState, WindowStoreAction> = persistReducer(
   persistConfig,
-  rootReducer
+  rootReducer,
 ) as any;
 
 export default function configureStore(
   baseStore: Store<BackgroundState, BackgroundAction>,
-  position: string
+  position: string,
 ) {
   let enhancer: StoreEnhancer;
   const middlewares = [exportStateMiddleware, api, syncStores(baseStore)];
@@ -65,7 +65,7 @@ export default function configureStore(
       applyMiddleware(...middlewares),
       window.__REDUX_DEVTOOLS_EXTENSION__
         ? window.__REDUX_DEVTOOLS_EXTENSION__()
-        : (noop: unknown) => noop
+        : (noop: unknown) => noop,
     );
   }
   const store = createStore(persistedReducer, enhancer);

extension/src/window/window.pug

@@ -14,4 +14,5 @@ html
           height=300, width=350,
           style='position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -175px;'
         )
+    link(href='/window.bundle.css', rel='stylesheet')
     script(src='/window.bundle.js')

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

@@ -25,7 +25,7 @@ describe('App container', () => {
     render(
       <Provider store={store}>
         <App position="devtools-left" />
-      </Provider>
+      </Provider>,
     );
     expect(screen.getByTestId('inspector')).toBeDefined();
   });
@@ -34,11 +34,9 @@ describe('App container', () => {
     render(
       <Provider store={store}>
         <App position="devtools-left" />
-      </Provider>
+      </Provider>,
     );
     const actionList = screen.getByTestId('actionList');
-    expect(
+    expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();
-      within(actionList).getByTestId('actionListRows')
-    ).toBeEmptyDOMElement();
   });
 });

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

@@ -50,7 +50,7 @@ describe('API', () => {
       window.__REDUX_DEVTOOLS_EXTENSION__.send(
         { type: 'hi' },
         { counter: 1 },
-        1
+        1,
       );
     });
     expect(message).toMatchObject({
@@ -66,7 +66,7 @@ describe('API', () => {
       window.__REDUX_DEVTOOLS_EXTENSION__.send(
         { type: 'hi' },
         { counter: 1 },
-        1
+        1,
       );
     });
     expect(message).toMatchObject({

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

@@ -19,7 +19,7 @@ describe('Redux enhancer', () => {
     const message = await listenMessage(() => {
       window.store = createStore(
         counter,
-        window.__REDUX_DEVTOOLS_EXTENSION__()
+        window.__REDUX_DEVTOOLS_EXTENSION__(),
       );
       expect(typeof window.store).toBe('object');
     });
@@ -37,7 +37,7 @@ describe('Redux enhancer', () => {
     message = await listenMessage();
     expect(message.type).toBe('STATE');
     expect(message.actionsById).toMatch(
-      /{"0":{"type":"PERFORM_ACTION","action":{"type":"@@INIT"},"/
+      /{"0":{"type":"PERFORM_ACTION","action":{"type":"@@INIT"},"/,
     );
     expect(message.computedStates).toBe('[{"state":0}]');
   });
@@ -49,7 +49,7 @@ describe('Redux enhancer', () => {
     });
     expect(message.type).toBe('ACTION');
     expect(message.action).toMatch(
-      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/,
     );
     expect(message.payload).toBe('1');
 
@@ -59,7 +59,7 @@ describe('Redux enhancer', () => {
     });
     expect(message.type).toBe('ACTION');
     expect(message.action).toMatch(
-      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/,
     );
     expect(message.payload).toBe('2');
   });
@@ -72,7 +72,7 @@ describe('Redux enhancer', () => {
           payload: "{ type: 'INCREMENT' }",
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('ACTION');
@@ -80,7 +80,7 @@ describe('Redux enhancer', () => {
     message = await listenMessage();
     expect(message.type).toBe('ACTION');
     expect(message.action).toMatch(
-      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/
+      /{"type":"PERFORM_ACTION","action":{"type":"INCREMENT"},/,
     );
     expect(message.payload).toBe('3');
   });
@@ -93,7 +93,7 @@ describe('Redux enhancer', () => {
           payload: { type: 'TOGGLE_ACTION', id: 1 },
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('DISPATCH');
@@ -109,7 +109,7 @@ describe('Redux enhancer', () => {
           payload: { type: 'TOGGLE_ACTION', id: 1 },
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('DISPATCH');
@@ -127,7 +127,7 @@ describe('Redux enhancer', () => {
           payload: { type: 'JUMP_TO_STATE', index: 2, actionId: 2 },
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('DISPATCH');
@@ -140,7 +140,7 @@ describe('Redux enhancer', () => {
           payload: { type: 'JUMP_TO_STATE', index: 3, actionId: 3 },
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('DISPATCH');
@@ -167,7 +167,7 @@ describe('Redux enhancer', () => {
           }),
           source: '@devtools-extension',
         },
-        '*'
+        '*',
       );
     });
     expect(message.type).toBe('IMPORT');
@@ -182,7 +182,7 @@ describe('Redux enhancer', () => {
         counter,
         window.__REDUX_DEVTOOLS_EXTENSION__({
           actionsDenylist: ['SOME_ACTION'],
-        })
+        }),
       );
       expect(typeof window.store).toBe('object');
     });
@@ -204,7 +204,7 @@ describe('Redux enhancer', () => {
     const message = await listenMessage(() => {
       window.store = createStore(
         counter,
-        compose(testEnhancer, window.__REDUX_DEVTOOLS_EXTENSION__())
+        compose(testEnhancer, window.__REDUX_DEVTOOLS_EXTENSION__()),
       );
       expect(typeof window.store).toBe('object');
     });

extension/test/chrome/extension.spec.js

@@ -19,7 +19,7 @@ describe('Chrome extension', function () {
     driver = new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
       .setChromeOptions(
-        new chrome.Options().addArguments(`load-extension=${path}`)
+        new chrome.Options().addArguments(`load-extension=${path}`),
       )
       .forBrowser('chrome')
       .build();
@@ -52,14 +52,14 @@ describe('Chrome extension', function () {
   it('should contain an empty actions list', async () => {
     const val = await driver
       .findElement(
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
+        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
       )
       .getText();
     expect(val).toBe('');
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it(description, () => switchMonitorTests[description](driver))
+    it(description, () => switchMonitorTests[description](driver)),
   );
 
   it('should get actions list', async () => {
@@ -77,14 +77,14 @@ describe('Chrome extension', function () {
     const result = await driver.wait(
       driver
         .findElement(
-          webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
+          webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
         )
         .getText()
         .then((val) => {
           return actionsPattern.test(val);
         }),
       15000,
-      "it doesn't match actions pattern"
+      "it doesn't match actions pattern",
     );
     expect(result).toBeTruthy();
   });

extension/test/electron/devpanel.spec.js

@@ -20,7 +20,7 @@ describe('DevTools panel for Electron', function () {
       .setChromeOptions(
         new chrome.Options()
           .setChromeBinaryPath(electronPath)
-          .addArguments(`app=${join(__dirname, 'fixture')}`)
+          .addArguments(`app=${join(__dirname, 'fixture')}`),
       )
       .forBrowser('chrome')
       .build();
@@ -44,7 +44,7 @@ describe('DevTools panel for Electron', function () {
       }
     }
     expect(await driver.getCurrentUrl()).toMatch(
-      /devtools:\/\/devtools\/bundled\/devtools_app.html/
+      /devtools:\/\/devtools\/bundled\/devtools_app.html/,
     );
 
     const id = await driver.executeAsyncScript(function (callback) {
@@ -81,8 +81,8 @@ describe('DevTools panel for Electron', function () {
       .switchTo()
       .frame(
         driver.findElement(
-          webdriver.By.xpath(`//iframe[@src='${devPanelPath}']`)
+          webdriver.By.xpath(`//iframe[@src='${devPanelPath}']`),
-        )
+        ),
       );
     await delay(1000);
   });
@@ -90,10 +90,10 @@ describe('DevTools panel for Electron', function () {
   it('should contain INIT action', async () => {
     const element = await driver.wait(
       webdriver.until.elementLocated(
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
+        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
       ),
       5000,
-      'Element not found'
+      'Element not found',
     );
     const val = await element.getText();
     expect(val).toMatch(/@@INIT/);
@@ -107,7 +107,7 @@ describe('DevTools panel for Electron', function () {
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it(description, () => switchMonitorTests[description](driver))
+    it(description, () => switchMonitorTests[description](driver)),
   );
 
   /*  it('should be no logs in console of main window', async () => {

extension/test/electron/fixture/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

extension/test/electron/fixture/main.js

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

extension/test/electron/fixture/src/renderer.js

@@ -19,7 +19,7 @@ const store = createStore(
   initialState,
   window.__REDUX_DEVTOOLS_EXTENSION__
     ? window.__REDUX_DEVTOOLS_EXTENSION__()
-    : (noop) => noop
+    : (noop) => noop,
 );
 
 const el = document.getElementById('counter');

extension/test/perf/send.spec.js

@@ -9,7 +9,7 @@ function test(title, data, maxTime = 100) {
     await listenMessage(() => {
       window.__REDUX_DEVTOOLS_EXTENSION__.send(
         { type: 'TEST_ACTION', data },
-        data
+        data,
       );
     });
     const ms = new Date() - start;

extension/test/utils/e2e.js

@@ -15,8 +15,8 @@ export const switchMonitorTests = {
     await delay(500);
     await driver.findElement(
       webdriver.By.xpath(
-        '//div[div[button[text()="Reset"]] and .//div[button[text()="Revert"]]]'
+        '//div[div[button[text()="Reset"]] and .//div[button[text()="Revert"]]]',
-      )
+      ),
     );
     await delay(500);
   },
@@ -31,7 +31,7 @@ export const switchMonitorTests = {
       .click();
     await delay(500);
     await driver.findElement(
-      webdriver.By.xpath('//*[@class="nodeText" and text()="state"]')
+      webdriver.By.xpath('//*[@class="nodeText" and text()="state"]'),
     );
     await delay(500); // Wait till menu is closed
   },

extension/webpack.config.js

@@ -1,81 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const CopyPlugin = require('copy-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = function (env) {
-  return {
-    mode: env.production ? 'production' : 'development',
-    devtool: env.production ? undefined : 'eval-source-map',
-    entry: {
-      background: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/background/index'),
-      ],
-      options: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/options/index'),
-      ],
-      window: [path.resolve(__dirname, 'src/window/index')],
-      remote: [path.resolve(__dirname, 'src/remote/index')],
-      devpanel: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/devpanel/index'),
-      ],
-      devtools: path.resolve(__dirname, 'src/devtools/index'),
-      content: [
-        path.resolve(__dirname, 'src/chromeApiMock'),
-        path.resolve(__dirname, 'src/contentScript/index'),
-      ],
-      page: path.join(__dirname, 'src/pageScript'),
-      ...(env.production
-        ? {}
-        : { pagewrap: path.resolve(__dirname, 'src/pageScriptWrap') }),
-    },
-    output: {
-      filename: '[name].bundle.js',
-    },
-    plugins: [
-      new webpack.DefinePlugin({
-        'process.env.BABEL_ENV': JSON.stringify(process.env.NODE_ENV),
-      }),
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          configFile: 'tsconfig.json',
-        },
-      }),
-      new CopyPlugin({
-        patterns: [
-          {
-            from: path.join(__dirname, 'chrome/manifest.json'),
-            to: path.join(__dirname, 'dist/manifest.json'),
-          },
-          {
-            from: path.join(__dirname, 'src/assets'),
-            to: path.join(__dirname, 'dist'),
-          },
-        ],
-      }),
-    ],
-    resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.(js|ts)x?$/,
-          use: 'babel-loader',
-          exclude: /node_modules/,
-        },
-        {
-          test: /\.css?$/,
-          use: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.pug$/,
-          use: ['file-loader?name=[name].html', 'pug-html-loader'],
-        },
-      ],
-    },
-  };
-};

extension/wrap.webpack.config.js

@@ -1,31 +0,0 @@
-const path = require('path');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'),
-  },
-  output: {
-    filename: '[name].bundle.js',
-  },
-  plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        configFile: 'tsconfig.json',
-      },
-    }),
-  ],
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts)x?$/,
-        use: 'babel-loader',
-        exclude: /(node_modules|dist\/page\.bundle)/,
-      },
-    ],
-  },
-};

package.json

@@ -1,21 +1,21 @@
 {
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.23.0",
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/eslint-parser": "^7.22.15",
-    "@changesets/cli": "^2.26.1",
+    "@changesets/cli": "^2.26.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^6.7.3",
-    "eslint": "^8.42.0",
+    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.4.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
-    "typescript": "~5.0.4",
+    "typescript": "~5.2.2",
-    "nx": "^16.3.2",
+    "nx": "^16.9.1",
-    "@nrwl/nx-cloud": "^16.0.5"
+    "@nrwl/nx-cloud": "^16.4.0"
   },
   "scripts": {
     "format": "prettier --write .",
@@ -39,10 +39,5 @@
     "packages/redux-devtools-rtk-query-monitor/demo",
     "packages/redux-devtools-slider-monitor/examples/todomvc"
   ],
-  "packageManager": "pnpm@8.6.0",
+  "packageManager": "pnpm@8.8.0"
-  "pnpm": {
-    "overrides": {
-      "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
-    }
-  }
 }

packages/d3-state-visualizer/.eslintrc.js

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

packages/d3-state-visualizer/examples/tree/.eslintrc.js

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

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

@@ -29,22 +29,22 @@
     "map2tree": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.0",
-    "@types/node": "^18.16.16",
+    "@types/node": "^18.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^6.7.3",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.42.0",
+    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.5.3",
     "ts-node": "^10.9.1",
-    "typescript": "~5.0.4",
+    "typescript": "~5.2.2",
-    "webpack": "^5.85.0",
+    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.3",
+    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.0"
+    "webpack-dev-server": "^4.15.1"
   }
 }

packages/d3-state-visualizer/package.json

@@ -40,8 +40,8 @@
     "prepublish": "pnpm run type-check && pnpm run lint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.3",
+    "@babel/runtime": "^7.23.1",
-    "@types/d3": "^7.4.0",
+    "@types/d3": "^7.4.1",
     "d3": "^7.8.5",
     "d3tooltip": "^3.0.0",
     "deepmerge": "^4.3.1",
@@ -49,17 +49,17 @@
     "ramda": "^0.29.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
+    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.23.0",
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.0",
-    "@types/ramda": "^0.29.2",
+    "@types/ramda": "^0.29.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^6.7.3",
-    "eslint": "^8.42.0",
+    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
-    "typescript": "~5.0.4"
+    "typescript": "~5.2.2"
   }
 }

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

@@ -189,14 +189,14 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
       zoom.on('zoom', (event) => {
         const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
         vis.attr('transform', transform.toString());
-      })
+      }),
     )
     .append('g')
     .attr(
       'transform',
       `translate(${margin.left + nodeStyleOptions.radius}, ${
         margin.top
-      }) scale(${initialZoom})`
+      }) scale(${initialZoom})`,
     );
 
   // previousNodePositionsById stores node x and y
@@ -217,7 +217,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
   function findParentNodePosition(
     nodePositionsById: { [nodeId: string | number]: NodePosition },
     nodeId: string | number,
-    filter: (nodePosition: NodePosition) => boolean
+    filter: (nodePosition: NodePosition) => boolean,
   ) {
     let currentPosition = nodePositionsById[nodeId];
     while (currentPosition) {
@@ -264,7 +264,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
               c.id = `${node.id || ''}|${c.name}`;
               return c;
             })
-          : null
+          : null,
     );
 
     update();
@@ -291,7 +291,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
       const rootNode = d3.hierarchy(data);
       if (isSorted) {
         rootNode.sort((a, b) =>
-          b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1
+          b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1,
         );
       }
 
@@ -300,7 +300,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
 
       rootPointNode.each(
         (node) =>
-          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff)),
       );
 
       const nodes = rootPointNode.descendants();
@@ -327,7 +327,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
           const position = findParentNodePosition(
             nodePositionsById,
             d.data.id,
-            (n) => !!previousNodePositionsById[n.id]
+            (n) => !!previousNodePositionsById[n.id],
           );
           const previousPosition =
             (position && previousNodePositionsById[position.id]) ||
@@ -358,7 +358,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
             ...tooltipOptions,
             root,
             text: (d) => getTooltipString(d.data, tooltipOptions),
-          })
+          }),
         );
       }
 
@@ -402,7 +402,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
             ? nodeStyleOptions.colors.collapsed
             : d.data.children && d.data.children.length > 0
             ? nodeStyleOptions.colors.parent
-            : nodeStyleOptions.colors.default
+            : nodeStyleOptions.colors.default,
         );
 
       // transition nodes to their new position
@@ -433,7 +433,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
           this: SVGGElement & {
             __oldData__?: HierarchyPointNode<InternalNode>;
           },
-          d
+          d,
         ) {
           // test whether the relevant properties of d match
           // the equivalent property of the oldData
@@ -458,7 +458,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
           const position = findParentNodePosition(
             previousNodePositionsById,
             d.data.id,
-            (n) => !!nodePositionsById[n.id]
+            (n) => !!nodePositionsById[n.id],
           );
           const futurePosition =
             (position && nodePositionsById[position.id]) ||
@@ -474,7 +474,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
       // update the links
       const link = vis
         .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
-          'path.link'
+          'path.link',
         )
         .data(links, (d) => d.target.data.id);
 
@@ -487,7 +487,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
           const position = findParentNodePosition(
             nodePositionsById,
             d.target.data.id,
-            (n) => !!previousNodePositionsById[n.id]
+            (n) => !!previousNodePositionsById[n.id],
           );
           const previousPosition =
             (position && previousNodePositionsById[position.id]) ||
@@ -519,7 +519,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
           const position = findParentNodePosition(
             previousNodePositionsById,
             d.target.data.id,
-            (n) => !!nodePositionsById[n.id]
+            (n) => !!nodePositionsById[n.id],
           );
           const futurePosition =
             (position && nodePositionsById[position.id]) ||