Merge branch 'main' into renovate/react-bootstrap-2.x

extension/package.json

@@ -93,7 +93,7 @@
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "rimraf": "^3.0.2",
-    "selenium-webdriver": "^3.6.0",
+    "selenium-webdriver": "^4.0.0",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^3.3.0",
     "ts-jest": "^27.0.7",

extension/test/chrome/extension.spec.js

@@ -1,5 +1,6 @@
 import { resolve } from 'path';
 import webdriver from 'selenium-webdriver';
+import chrome from 'selenium-webdriver/chrome';
 import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
@@ -17,11 +18,9 @@ describe('Chrome extension', function () {
     await delay(2000);
     driver = new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
-      .withCapabilities({
+      .setChromeOptions(
-        chromeOptions: {
+        new chrome.Options().addArguments(`load-extension=${path}`)
-          args: [`load-extension=${path}`],
+      )
-        },
-      })
       .forBrowser('chrome')
       .build();
   });
@@ -72,7 +71,6 @@ describe('Chrome extension', function () {
 
     await driver.switchTo().window(tabs[1]);
     expect(await driver.getCurrentUrl()).toMatch(url);
-    await driver.manage().timeouts().pageLoadTimeout(5000);
 
     await driver.switchTo().window(tabs[0]);
 

extension/test/electron/devpanel.spec.js

@@ -1,5 +1,6 @@
 import { join } from 'path';
 import webdriver from 'selenium-webdriver';
+import chrome from 'selenium-webdriver/chrome';
 import electronPath from 'electron';
 import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
@@ -16,15 +17,13 @@ describe('DevTools panel for Electron', function () {
     await delay(1000);
     driver = new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
-      .withCapabilities({
+      .setChromeOptions(
-        chromeOptions: {
+        new chrome.Options()
-          binary: electronPath,
+          .setChromeBinaryPath(electronPath)
-          args: [`app=${join(__dirname, 'fixture')}`],
+          .addArguments(`app=${join(__dirname, 'fixture')}`)
-        },
+      )
-      })
+      .forBrowser('chrome')
-      .forBrowser('electron')
       .build();
-    await driver.manage().timeouts().setScriptTimeout(10000);
   });
 
   afterAll(async () => {
@@ -48,8 +47,6 @@ describe('DevTools panel for Electron', function () {
       /devtools:\/\/devtools\/bundled\/devtools_app.html/
     );
 
-    await driver.manage().timeouts().pageLoadTimeout(5000);
-
     const id = await driver.executeAsyncScript(function (callback) {
       let attempts = 5;
       function showReduxPanel() {

package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

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

@@ -35,8 +35,8 @@
     "@types/node": "^14.17.27",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/d3-state-visualizer/package.json

@@ -54,8 +54,8 @@
     "@types/node": "^14.17.27",
     "@types/ramda": "^0.27.45",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

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

@@ -388,12 +388,12 @@ export default function (
           fill: style.text.colors.default,
           cursor: 'pointer',
         })
-        .on('mouseover', function mouseover(this: any) {
+        .on('mouseover', function mouseover(this: EventTarget) {
           d3.select(this).style({
             fill: style.text.colors.hover,
           });
         })
-        .on('mouseout', function mouseout(this: any) {
+        .on('mouseout', function mouseout(this: EventTarget) {
           d3.select(this).style({
             fill: style.text.colors.default,
           });
@@ -401,7 +401,7 @@ export default function (
 
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
-          d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
+          d3tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
             .text((d, i) => getTooltipString(d, i, tooltipOptions))
             .style(tooltipOptions.style)
         );

packages/d3tooltip/package.json

@@ -47,8 +47,8 @@
     "@types/node": "^14.17.27",
     "@types/ramda": "^0.27.45",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "d3": "^3.5.17",
     "eslint": "^7.32.0",

packages/d3tooltip/src/index.ts

@@ -20,11 +20,40 @@ const defaultOptions: Options<unknown> = {
   root: undefined,
 };
 
+interface Tip<Datum> {
+  (selection: Selection<Datum>): void;
+  attr: (
+    this: this,
+    d:
+      | string
+      | {
+          [key: string]:
+            | Primitive
+            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
+        }
+  ) => this;
+  style: (
+    this: this,
+    d:
+      | string
+      | {
+          [key: string]:
+            | Primitive
+            | ((datum: Datum, index: number, outerIndex: number) => Primitive);
+        }
+      | undefined
+  ) => this;
+  text: (
+    this: this,
+    d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
+  ) => this;
+}
+
 export default function tooltip<Datum>(
   d3: typeof d3Package,
   className = 'tooltip',
   options: Partial<Options<Datum>> = {}
-) {
+): Tip<Datum> {
   const { left, top, offset, root } = {
     ...defaultOptions,
     ...options,
@@ -74,6 +103,7 @@ export default function tooltip<Datum>(
   }
 
   tip.attr = function setAttr(
+    this: typeof tip,
     d:
       | string
       | {
@@ -96,6 +126,7 @@ export default function tooltip<Datum>(
   };
 
   tip.style = function setStyle(
+    this: typeof tip,
     d:
       | string
       | {
@@ -103,6 +134,7 @@ export default function tooltip<Datum>(
             | Primitive
             | ((datum: Datum, index: number, outerIndex: number) => Primitive);
         }
+      | undefined
   ) {
     if (is(Object, d)) {
       styles = {
@@ -118,6 +150,7 @@ export default function tooltip<Datum>(
   };
 
   tip.text = function setText(
+    this: typeof tip,
     d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
   ) {
     text = functor(d);

packages/map2tree/package.json

@@ -51,8 +51,8 @@
     "@types/lodash": "^4.14.176",
     "@types/node": "^14.17.27",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/react-base16-styling/package.json

@@ -51,8 +51,8 @@
     "@types/color": "^3.0.2",
     "@types/jest": "^27.0.2",
     "@types/lodash.curry": "^4.1.6",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

packages/react-base16-styling/src/index.ts

@@ -63,7 +63,7 @@ const mergeStyling = (
             style: defaultStyling as CSS.Properties<string | number>,
           });
         case 'function':
-          return (styling: Styling, ...args: any[]) =>
+          return (styling: Styling, ...args: unknown[]) =>
             merger({
               className: customStyling as string,
             })((defaultStyling as StylingValueFunction)(styling, ...args));
@@ -82,7 +82,7 @@ const mergeStyling = (
             ...(customStyling as CSS.Properties<string | number>),
           };
         case 'function':
-          return (styling: Styling, ...args: any[]) =>
+          return (styling: Styling, ...args: unknown[]) =>
             merger({
               style: customStyling as CSS.Properties<string | number>,
             })((defaultStyling as StylingValueFunction)(styling, ...args));
@@ -143,7 +143,7 @@ const mergeStylings = (
 const getStylingByKeys = (
   mergedStyling: StylingConfig,
   keys: (string | false | undefined) | (string | false | undefined)[],
-  ...args: any[]
+  ...args: unknown[]
 ): Styling => {
   if (keys === null) {
     return mergedStyling as unknown as Styling;

packages/react-base16-styling/src/types.ts

@@ -8,7 +8,7 @@ export interface Styling {
 
 export type StylingValueFunction = (
   styling: Styling,
-  ...rest: any[]
+  ...rest: unknown[]
 ) => Partial<Styling>;
 
 export type StylingValue =
@@ -28,5 +28,5 @@ export type Theme = string | Base16Theme | StylingConfig;
 
 export type StylingFunction = (
   keys: (string | false | undefined) | (string | false | undefined)[],
-  ...rest: any[]
+  ...rest: unknown[]
 ) => Styling;

packages/react-base16-styling/test/index.test.ts

@@ -70,8 +70,8 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
   testStyle: {
     color: base16.base00,
   },
-  testFunc: ({ style }, arg: string) => ({
+  testFunc: ({ style }, arg) => ({
-    className: `testClass--${arg}`,
+    className: `testClass--${arg as string}`,
     style: {
       ...style,
       width: 0,
@@ -84,8 +84,8 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
   additionalStyle: {
     border: 0,
   },
-  testFuncNoStyle: (_, arg: string) => ({
+  testFuncNoStyle: (_, arg) => ({
-    className: `testClass--${arg}`,
+    className: `testClass--${arg as string}`,
   }),
 });
 
@@ -126,15 +126,15 @@ test('createStyling (custom)', () => {
   let customStyling = styling({
     testClass: 'customClass',
     testStyle: { height: 0 },
-    testFunc: (styling: Styling, arg: string) => ({
+    testFunc: (styling: Styling, arg) => ({
-      className: `${styling.className!} customClass--${arg}`,
+      className: `${styling.className!} customClass--${arg as string}`,
       style: {
         ...styling.style,
         border: 0,
       },
     }),
-    testFuncNoStyle: (styling: Styling, arg: string) => ({
+    testFuncNoStyle: (styling: Styling, arg) => ({
-      className: `${styling.className!} customClass--${arg}`,
+      className: `${styling.className!} customClass--${arg as string}`,
       style: {
         ...styling.style,
         border: 0,

packages/react-dock/demo/package.json

@@ -29,8 +29,8 @@
     "@types/styled-components": "^5.1.15",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/react-dock/package.json

@@ -51,8 +51,8 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^16.14.18",
     "@types/react-test-renderer": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

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

@@ -35,8 +35,8 @@
     "@types/react-dom": "^16.9.14",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/react-json-tree/examples/src/App.tsx

@@ -28,7 +28,8 @@ const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
   style: {
     ...style,
     color:
-      !Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
+      !Number.isNaN((keyPath as unknown[])[0]) &&
+      !(parseInt(keyPath as string, 10) % 2)
         ? '#33F'
         : style!.color,
   },

packages/react-json-tree/package.json

@@ -58,8 +58,8 @@
     "@types/react": "^16.14.18",
     "@types/react-test-renderer": "^16.9.5",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/react-json-tree/src/createStylingFromTheme.ts

@@ -55,7 +55,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
       backgroundColor: colors.BACKGROUND_COLOR,
     },
 
-    value: ({ style }, nodeType, keyPath: (string | number)[]) => ({
+    value: ({ style }, nodeType, keyPath) => ({
       style: {
         ...style,
         paddingTop: '0.25em',
@@ -64,7 +64,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
         WebkitUserSelect: 'text',
         MozUserSelect: 'text',
         wordWrap: 'break-word',
-        paddingLeft: keyPath.length > 1 ? '2.125em' : '1.25em',
+        paddingLeft: (keyPath as unknown[]).length > 1 ? '2.125em' : '1.25em',
         textIndent: '-0.5em',
         wordBreak: 'break-all',
       },
@@ -136,18 +136,12 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
       left: '-0.4em',
     },
 
-    nestedNode: (
+    nestedNode: ({ style }, keyPath, nodeType, expanded, expandable) => ({
-      { style },
-      keyPath: (string | number)[],
-      nodeType,
-      expanded,
-      expandable
-    ) => ({
       style: {
         ...style,
         position: 'relative',
         paddingTop: '0.25em',
-        marginLeft: keyPath.length > 1 ? '0.875em' : 0,
+        marginLeft: (keyPath as unknown[]).length > 1 ? '0.875em' : 0,
         paddingLeft: !expandable ? '1.125em' : 0,
       },
     }),

packages/react-json-tree/src/getCollectionEntries.ts

@@ -1,6 +1,7 @@
 function getLength(type: string, collection: any) {
   if (type === 'Object') {
-    return Object.keys(collection).length;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    return Object.keys(collection as {}).length;
   } else if (type === 'Array') {
     return (collection as unknown[]).length;
   }

packages/redux-devtools-app/package.json

@@ -82,8 +82,8 @@
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.4.0",
     "enzyme": "^3.11.0",
@@ -95,7 +95,7 @@
     "eslint-plugin-react": "^7.26.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
-    "html-loader": "^2.1.2",
+    "html-loader": "^3.0.0",
     "html-webpack-plugin": "^5.4.0",
     "jest": "^27.3.1",
     "path-browserify": "^1.0.1",

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { Delta, formatters } from 'jsondiffpatch';
-import styled from 'styled-components';
+import styled, { ThemedStyledProps } from 'styled-components';
 import { effects } from '@redux-devtools/ui';
+import { Theme } from '@redux-devtools/ui/lib/themes/default';
 
 export const StyledContainer = styled.div`
   .jsondiffpatch-delta {
@@ -18,7 +19,8 @@ export const StyledContainer = styled.div`
     padding: 2px 3px;
     border-radius: 3px;
     position: relative;
-    color: ${(props) => props.theme.base07};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
     display: inline-block;
   }
 
@@ -42,20 +44,25 @@ export const StyledContainer = styled.div`
   .jsondiffpatch-modified .jsondiffpatch-right-value:before {
     vertical-align: top;
     padding: 2px;
-    color: ${(props) => props.theme.base0E};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0E};
     content: ' => ';
   }
 
   .jsondiffpatch-added .jsondiffpatch-value pre,
   .jsondiffpatch-modified .jsondiffpatch-right-value pre,
   .jsondiffpatch-textdiff-added {
-    background: ${(props) => effects.color(props.theme.base0B, 'alpha', 0.2)};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    background: ${(props: ThemedStyledProps<{}, Theme>) =>
+      effects.color(props.theme.base0B, 'alpha', 0.2)};
   }
 
   .jsondiffpatch-deleted pre,
   .jsondiffpatch-modified .jsondiffpatch-left-value pre,
   .jsondiffpatch-textdiff-deleted {
-    background: ${(props) => effects.color(props.theme.base08, 'alpha', 0.2)};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    background: ${(props: ThemedStyledProps<{}, Theme>) =>
+      effects.color(props.theme.base08, 'alpha', 0.2)};
     text-decoration: line-through;
   }
 
@@ -122,12 +129,14 @@ export const StyledContainer = styled.div`
     padding: 2px 0;
     padding-right: 5px;
     vertical-align: top;
-    color: ${(props) => props.theme.base0D};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0D};
   }
 
   .jsondiffpatch-property-name:after {
     content: ': ';
-    color: ${(props) => props.theme.base07};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
   }
 
   .jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
@@ -163,7 +172,8 @@ export const StyledContainer = styled.div`
   }
 
   .jsondiffpatch-value pre:after {
-    color: ${(props) => props.theme.base07};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
     content: ',';
   }
 
@@ -186,7 +196,8 @@ export const StyledContainer = styled.div`
 
   .jsondiffpatch-moved .jsondiffpatch-moved-destination {
     display: inline-block;
-    background: ${(props) => props.theme.base0A};
+    ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+    background: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0A};
   }
 
   .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {

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

@@ -129,7 +129,7 @@ function updateState(
           newState = recompute(
             newState,
             request.batched ? payload : (payload as unknown as State[])[i],
-            action[i],
+            action[i] as PerformAction<Action<unknown>>,
             newState.nextActionId + 1,
             maxAge,
             isExcess

packages/redux-devtools-app/src/store/configureStore.ts

@@ -40,7 +40,7 @@ export default function configureStore(
       module.hot.accept('../reducers', () => {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         const nextReducer = require('../reducers'); // eslint-disable-line global-require
-        store.replaceReducer(nextReducer);
+        store.replaceReducer(nextReducer as Reducer<StoreState, StoreAction>);
       });
     }
   }

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

@@ -51,8 +51,8 @@
     "@babel/preset-typescript": "^7.15.0",
     "@redux-devtools/core": "^3.9.0",
     "@types/react": "^16.14.18",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

packages/redux-devtools-cli/package.json

@@ -82,8 +82,8 @@
     "@types/styled-components": "^5.1.15",
     "@types/supertest": "^2.0.11",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

packages/redux-devtools-cli/src/bin/injectServer.ts

@@ -21,7 +21,7 @@ const serverFlags: { [moduleName: string]: { [version: string]: string } } = {
   },
 };
 
-function getModuleVersion(modulePath: string) {
+function getModuleVersion(modulePath: string): string {
   return JSON.parse(
     fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8')
   ).version;
@@ -41,14 +41,14 @@ function getServerFlag(moduleName: string, version: string): string {
 
 export const dir = 'local-cli/server';
 export const file = 'server.js';
-export const fullPath = path.join(exports.dir, exports.file);
+export const fullPath = path.join(dir, file);
 
 export function inject(
   modulePath: string,
   options: Options,
   moduleName: string
 ) {
-  const filePath = path.join(modulePath, exports.fullPath);
+  const filePath = path.join(modulePath, fullPath);
   if (!fs.existsSync(filePath)) return false;
 
   const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));
@@ -85,7 +85,7 @@ export function revert(
   options: Options,
   moduleName: string
 ) {
-  const filePath = path.join(modulePath, exports.fullPath);
+  const filePath = path.join(modulePath, fullPath);
   if (!fs.existsSync(filePath)) return false;
 
   const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));

packages/redux-devtools-cli/src/bin/openApp.ts

@@ -8,7 +8,7 @@ export default async function openApp(app: true | string, options: Options) {
     try {
       const port = options.port ? `--port=${options.port}` : '';
       // eslint-disable-next-line @typescript-eslint/no-var-requires
-      spawn.sync(require('electron'), [
+      spawn.sync(require('electron') as string, [
         path.join(__dirname, '..', '..', 'app'),
         port,
       ]);

packages/redux-devtools-cli/src/bin/redux-devtools.ts

@@ -17,8 +17,8 @@ function readFile(filePath: string) {
 }
 
 if (argv.protocol === 'https') {
-  argv.key = argv.key ? readFile(argv.key) : null;
+  argv.key = argv.key ? readFile(argv.key as string) : null;
-  argv.cert = argv.cert ? readFile(argv.cert) : null;
+  argv.cert = argv.cert ? readFile(argv.cert as string) : null;
 }
 
 function log(pass: boolean, msg: string) {
@@ -76,13 +76,13 @@ function injectRN(type: string, msg: string) {
 
 if (argv.revert) {
   injectRN(
-    argv.revert,
+    argv.revert as string,
     'Revert injection of ReduxDevTools server from React Native local server'
   );
 }
 if (argv.injectserver) {
   injectRN(
-    argv.injectserver,
+    argv.injectserver as string,
     'Inject ReduxDevTools server into React Native local server'
   );
 }
@@ -91,7 +91,7 @@ if (argv.injectserver) {
 server(argv).then(function (r) {
   if (argv.open && argv.open !== 'false') {
     r.on('ready', async function () {
-      await openApp(argv.open, options);
+      await openApp(argv.open as string, options);
     });
   }
 });

packages/redux-devtools-cli/src/db/connector.ts

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

packages/redux-devtools-cli/src/options.ts

@@ -31,7 +31,7 @@ export interface Options {
 export default function getOptions(argv: { [arg: string]: any }): Options {
   let dbOptions = argv.dbOptions;
   if (typeof dbOptions === 'string') {
-    dbOptions = require(path.resolve(process.cwd(), argv.dbOptions));
+    dbOptions = require(path.resolve(process.cwd(), argv.dbOptions as string));
   } else if (typeof dbOptions === 'undefined') {
     dbOptions = require('../defaultDbOptions.json');
   }

packages/redux-devtools-cli/src/routes.ts

@@ -1,11 +1,12 @@
 import path from 'path';
 import express from 'express';
 import morgan from 'morgan';
+import * as http from 'http';
 import bodyParser from 'body-parser';
 import cors from 'cors';
 import { SCServer } from 'socketcluster-server';
 import graphqlMiddleware from './middleware/graphql';
-import { ReportBaseFields, Store } from './store';
+import { AddData, ReportBaseFields, Store } from './store';
 
 const app = express.Router();
 
@@ -27,7 +28,15 @@ function routes(
 
   if (logHTTPRequests) {
     if (typeof logHTTPRequests === 'object')
-      app.use(morgan('combined', logHTTPRequests));
+      app.use(
+        morgan(
+          'combined',
+          logHTTPRequests as morgan.Options<
+            http.IncomingMessage,
+            http.ServerResponse
+          >
+        )
+      );
     else app.use(morgan('combined'));
   }
 
@@ -55,7 +64,7 @@ function routes(
     switch (req.body.op) {
       case 'get':
         store
-          .get(req.body.id)
+          .get(req.body.id as string)
           .then(function (r) {
             res.send(r || {});
           })
@@ -66,7 +75,7 @@ function routes(
         break;
       case 'list':
         store
-          .list(req.body.query, req.body.fields)
+          .list(req.body.query, req.body.fields as string[])
           .then(function (r) {
             res.send(r);
           })
@@ -77,7 +86,7 @@ function routes(
         break;
       default:
         store
-          .add(req.body)
+          .add(req.body as AddData)
           .then(function (r) {
             res.send({
               id: (r as ReportBaseFields).id,

packages/redux-devtools-cli/src/store.ts

@@ -62,7 +62,7 @@ function get(id: string): Promise<Report | { error: string }> {
   return knex(reports).where('id', id).first();
 }
 
-interface AddData {
+export interface AddData {
   type: ReportType | null;
   title: string | null;
   description: string | null;

packages/redux-devtools-cli/src/worker.ts

@@ -60,7 +60,7 @@ class Worker extends SCWorker {
         });
         respond(null, channelToWatch);
       });
-      socket.on('getReport', function (id, respond) {
+      socket.on('getReport', function (id: string, respond) {
         store
           .get(id)
           .then(function (data) {

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

@@ -52,8 +52,8 @@
     "@redux-devtools/core": "^3.9.0",
     "@types/parse-key": "^0.2.0",
     "@types/react": "^16.14.18",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

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

@@ -41,8 +41,8 @@
     "@types/redux-logger": "^3.0.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.4.0",
     "eslint": "^7.32.0",

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

@@ -68,8 +68,8 @@
     "@types/object-path": "^0.11.1",
     "@types/react": "^16.14.18",
     "@types/simple-diff": "^1.6.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",

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

@@ -51,8 +51,8 @@
     "@types/react": "^16.14.18",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/source-map": "0.5.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",

packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts

@@ -118,7 +118,7 @@ export default function openFile(
         typeof editor === 'string' &&
         /^\w{1,30}$/.test(editor)
       ) {
-        openInEditor(editor.toLowerCase(), projectPath, stackFrame);
+        openInEditor(editor.toLowerCase(), projectPath as string, stackFrame);
       } else {
         if (
           chrome.devtools &&

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/getSourceMap.ts

@@ -12,7 +12,7 @@ import { RawSourceMap, SourceMapConsumer } from 'source-map';
  *
  * This exposes methods which will be indifferent to changes made in <code>{@link https://github.com/mozilla/source-map source-map}</code>.
  */
-class SourceMap {
+export class SourceMap {
   __source_map: SourceMapConsumer;
 
   constructor(sourceMap: SourceMapConsumer) {
@@ -74,7 +74,7 @@ class SourceMap {
   }
 }
 
-function extractSourceMapUrl(
+export function extractSourceMapUrl(
   fileUri: string,
   fileContents: string
 ): Promise<string> {
@@ -98,7 +98,7 @@ function extractSourceMapUrl(
  * @param {string} fileUri The URI of the source file.
  * @param {string} fileContents The contents of the source file.
  */
-async function getSourceMap(
+export async function getSourceMap(
   //function getSourceMap(
   fileUri: string,
   fileContents: string
@@ -120,7 +120,7 @@ async function getSourceMap(
     const index = fileUri.lastIndexOf('/');
     const url = fileUri.substring(0, index + 1) + sm;
     const obj = await fetch(url).then((res) => res.json());
-    return new SourceMap(new SourceMapConsumer(obj));
+    return new SourceMap(new SourceMapConsumer(obj as RawSourceMap));
   }
 
   /*
@@ -153,5 +153,4 @@ async function getSourceMap(
       */
 }
 
-export { extractSourceMapUrl, getSourceMap };
 export default getSourceMap;

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/mapper.ts

@@ -6,7 +6,7 @@
  */
 
 import StackFrame from './stack-frame';
-import { getSourceMap } from './getSourceMap';
+import { getSourceMap, SourceMap } from './getSourceMap';
 import { getLinesAround } from './getLinesAround';
 
 /**
@@ -18,7 +18,12 @@ async function map(
   frames: StackFrame[],
   contextLines = 3
 ): Promise<StackFrame[]> {
-  const cache: any = {};
+  const cache: {
+    [fileName: string]: {
+      readonly fileSource: string;
+      readonly map: SourceMap;
+    };
+  } = {};
   const files: string[] = [];
   frames.forEach((frame) => {
     const { fileName } = frame;
@@ -45,7 +50,7 @@ async function map(
     }
     const { source, line, column } = map.getOriginalPosition(
       lineNumber,
-      columnNumber
+      columnNumber!
     );
     const originalSource = source == null ? [] : map.getSource(source) || [];
     return new StackFrame(
@@ -58,7 +63,7 @@ async function map(
       source,
       line,
       column,
-      getLinesAround(line, contextLines, originalSource)
+      getLinesAround(line!, contextLines, originalSource)
     );
   });
 }

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

@@ -42,8 +42,8 @@
     "@types/redux-logger": "^3.0.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

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

@@ -65,8 +65,8 @@
     "@types/react": "^16.14.18",
     "@types/react-dragula": "^1.1.0",
     "@types/redux-devtools-themes": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx

@@ -23,7 +23,8 @@ function getShortTypeString(val: any, diff: boolean | undefined) {
   } else if (val === undefined) {
     return 'undef';
   } else if (typeof val === 'object') {
-    return Object.keys(val).length > 0 ? '{…}' : '{}';
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    return Object.keys(val as {}).length > 0 ? '{…}' : '{}';
   } else if (typeof val === 'function') {
     return 'fn';
   } else if (typeof val === 'string') {
@@ -42,7 +43,8 @@ function getText(
   isDiff: boolean | undefined
 ) {
   if (type === 'Object') {
-    const keys = Object.keys(data);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const keys = Object.keys(data as {});
     if (!isWideLayout) return keys.length ? '{…}' : '{}';
 
     const str = keys

packages/redux-devtools-instrument/package.json

@@ -48,8 +48,8 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.176",
     "@types/node": "^14.17.27",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

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

@@ -54,8 +54,8 @@
     "@babel/preset-typescript": "^7.15.0",
     "@redux-devtools/core": "^3.9.0",
     "@types/react": "^16.14.18",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx

@@ -85,7 +85,11 @@ export default class LogMonitorEntry<
           ) => ({
             style: {
               ...style,
-              backgroundColor: dataIsEqual(data, previousData, keyPath)
+              backgroundColor: dataIsEqual(
+                data,
+                previousData,
+                keyPath as (string | number)[]
+              )
                 ? 'transparent'
                 : this.props.theme.base01,
             },
@@ -93,7 +97,7 @@ export default class LogMonitorEntry<
           const getNestedNodeStyle: StylingValue = ({ style }, keyPath) => ({
             style: {
               ...style,
-              ...(keyPath.length > 1 ? {} : styles.root),
+              ...((keyPath as unknown[]).length > 1 ? {} : styles.root),
             },
           });
           theme = {

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

@@ -41,8 +41,8 @@
     "@types/react-router-dom": "^5.3.1",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.4.0",

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

@@ -72,7 +72,7 @@ const PostJsonDetail = ({ id }: { id: string }) => {
 };
 
 export const PostDetail = () => {
-  const { id } = useParams<{ id: any }>();
+  const { id } = useParams<{ id: string }>();
   const history = useHistory();
 
   const toast = useToast();

packages/redux-devtools-rtk-query-monitor/demo/src/services/posts.ts

@@ -42,7 +42,7 @@ export const postsApi = createApi({
       }),
       invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
     }),
-    deletePost: build.mutation<{ success: boolean; id: number }, number>({
+    deletePost: build.mutation<{ success: boolean; id: number }, string>({
       query(id) {
         return {
           url: `posts/${id}`,

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

@@ -64,8 +64,8 @@
     "@types/hex-rgba": "^1.0.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^16.14.18",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -44,7 +44,8 @@ function getText(
   isDiff: boolean | undefined
 ) {
   if (type === 'Object') {
-    const keys = Object.keys(data);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const keys = Object.keys(data as {});
     if (!previewContent) return keys.length ? '{…}' : '{}';
 
     const str = keys

packages/redux-devtools-serialize/package.json

@@ -39,8 +39,8 @@
     "@babel/preset-typescript": "^7.15.0",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

packages/redux-devtools-serialize/src/helpers/index.ts

@@ -35,13 +35,26 @@ export function extract(data: unknown, type: string): SerializedData {
   };
 }
 
+export function refer(data: unknown, type: string): SerializedData;
 export function refer<K extends string>(
   data: { [key in K]: () => unknown },
   type: string,
-  transformMethod: K | false,
+  transformMethod?: K | false,
+  refs?: (new (data: any) => unknown)[] | null
+): SerializedData;
+export function refer<K extends string>(
+  data: any,
+  type: string,
+  transformMethod?: 'toString' | false,
+  refs?: (new (data: any) => unknown)[] | null
+): SerializedData;
+export function refer<K extends string>(
+  data: { [key in K]: () => unknown } | unknown,
+  type: string,
+  transformMethod?: K | false,
   refs?: (new (data: any) => unknown)[] | null
 ): SerializedData {
-  const r = mark(data, type, transformMethod);
+  const r = mark(data as { [key in K]: () => unknown }, type, transformMethod);
   if (!refs) return r;
   for (let i = 0; i < refs.length; i++) {
     const ref = refs[i];

packages/redux-devtools-serialize/test/helpers.spec.ts

@@ -16,7 +16,9 @@ describe('Helpers', function () {
     const TestClass = function (data: unknown) {
       return data;
     };
-    const testInstance = new (TestClass as any)({ testData: 'test' });
+    const testInstance = new (TestClass as any)({
+      testData: 'test',
+    }) as unknown;
     expect(
       refer(testInstance, 'testType', false, [TestClass as any])
     ).toMatchSnapshot();

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

@@ -40,8 +40,8 @@
     "@types/react-redux": "^7.1.20",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.4.0",
     "eslint": "^7.32.0",

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

@@ -43,8 +43,8 @@
     "@babel/preset-typescript": "^7.15.0",
     "@redux-devtools/core": "^3.9.0",
     "@types/react": "^16.14.18",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",

packages/redux-devtools-ui/package.json

@@ -64,8 +64,8 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^16.14.18",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "csstype": "^3.0.9",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
@@ -80,9 +80,9 @@
     "react-is": "^16.13.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.0.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^23.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.7",

packages/redux-devtools-ui/src/Container/styles/index.ts

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, { ThemedStyledProps } from 'styled-components';
 import color from '../../utils/color';
+import { Theme } from '../../themes/default';
 
 export const MainContainerWrapper = styled.div`
   display: flex;
@@ -7,7 +8,9 @@ export const MainContainerWrapper = styled.div`
   width: 100%;
   flex-flow: column nowrap;
   overflow: auto;
-  background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
+  ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
+  background-color: ${(props: ThemedStyledProps<{}, Theme>) =>
+    color(props.theme.base00, 'lighten', 0.03)};
   color: ${(props) => props.theme.base07};
   font-size: 12px;
 

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

@@ -65,15 +65,15 @@ export default function createStyledComponent<
 ): StyledComponent<C, Theme | Base16Theme, O> {
   return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
     ${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
-      isThemeFromProvider(props.theme)
+      isThemeFromProvider(props.theme as Theme | Base16Theme)
-        ? getStyle(styles, props.theme.type)
+        ? getStyle(styles, props.theme.type as string)
         : // used outside of container (theme provider)
           getStyle(
             styles,
             'default'
           )({
             ...props,
-            theme: getDefaultTheme(props.theme),
+            theme: getDefaultTheme(props.theme as Base16Theme),
           })}
   ` as StyledComponent<C, Theme | Base16Theme, O>;
 }

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

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

packages/redux-devtools-utils/package.json

@@ -48,8 +48,8 @@
     "@types/jsan": "^3.1.2",
     "@types/lodash": "^4.14.176",
     "@types/node": "^14.17.27",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "rimraf": "^3.0.2",

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

@@ -71,14 +71,15 @@ export function getActionsArray(actionCreators: {
   return flatTree(actionCreators);
 }
 
+const interpretArg = (arg: string): unknown =>
   // eslint-disable-next-line @typescript-eslint/no-implied-eval
-const interpretArg = (arg: string) => new Function('return ' + arg)();
+  new Function('return ' + arg)();
 
-function evalArgs(inArgs: string[], restArgs: string) {
+function evalArgs(inArgs: string[], restArgs: string): unknown[] {
   const args = inArgs.map(interpretArg);
   if (!restArgs) return args;
   const rest = interpretArg(restArgs);
-  if (Array.isArray(rest)) return args.concat(...rest);
+  if (Array.isArray(rest)) return args.concat(...(rest as unknown[]));
   throw new Error('rest must be an array');
 }
 

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

@@ -42,8 +42,8 @@
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts

@@ -1,4 +1,10 @@
-import { createStore, applyMiddleware, compose, PreloadedState } from 'redux';
+import {
+  createStore,
+  applyMiddleware,
+  compose,
+  PreloadedState,
+  Reducer,
+} from 'redux';
 import { persistState } from '@redux-devtools/core';
 import thunk from 'redux-thunk';
 import rootReducer, { CounterState } from '../reducers';
@@ -23,7 +29,7 @@ export default function configureStore(
   if (module.hot) {
     module.hot.accept('../reducers', () =>
       // eslint-disable-next-line @typescript-eslint/no-var-requires
-      store.replaceReducer(require('../reducers').default)
+      store.replaceReducer(require('../reducers').default as Reducer)
     );
   }
 

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

@@ -55,8 +55,8 @@
     "@types/react-redux": "^7.1.20",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.4.0",
     "eslint": "^7.32.0",

packages/redux-devtools/package.json

@@ -54,8 +54,8 @@
     "@types/node": "^14.17.27",
     "@types/react": "^16.14.18",
     "@types/react-redux": "^7.1.20",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

packages/redux-devtools/src/persistState.ts

@@ -36,9 +36,9 @@ export default function persistState<
   }
 
   return (next) =>
-    <S, A extends Action<unknown>>(
+    <S2, A2 extends Action<unknown>>(
-      reducer: Reducer<S, A>,
+      reducer: Reducer<S2, A2>,
-      initialState?: PreloadedState<S>
+      initialState?: PreloadedState<S2>
     ) => {
       const key = `redux-dev-session-${sessionId}`;
 
@@ -46,7 +46,9 @@ export default function persistState<
       try {
         const json = localStorage.getItem(key);
         if (json) {
-          finalInitialState = deserialize(JSON.parse(json)) || initialState;
+          finalInitialState =
+            deserialize(JSON.parse(json) as LiftedState<S, A, MonitorState>) ||
+            initialState;
           next(reducer, initialState);
         }
       } catch (e) {
@@ -60,12 +62,12 @@ export default function persistState<
 
       const store = next(
         reducer,
-        finalInitialState as PreloadedState<S> | undefined
+        finalInitialState as PreloadedState<S2> | undefined
       );
 
       return {
         ...store,
-        dispatch<T extends A>(action: T) {
+        dispatch<T extends A2>(action: T) {
           store.dispatch(action);
 
           try {