stash

package.json

@@ -14,12 +14,15 @@
     "@typescript-eslint/parser": "^3.9.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "cross-env": "^7.0.2",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
+    "html-webpack-plugin": "^4.3.0",
     "jest": "^26.2.2",
     "lerna": "^3.22.1",
     "prettier": "^2.0.5",

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

@@ -142,7 +142,7 @@ const mergeStylings = (
 
 const getStylingByKeys = (
   mergedStyling: StylingConfig,
-  keys: string | string[],
+  keys: (string | false) | (string | false)[],
   ...args: any[]
 ): Styling => {
   if (keys === null) {
@@ -153,7 +153,9 @@ const getStylingByKeys = (
     keys = [keys];
   }
 
-  const styles = keys.map((key) => mergedStyling[key]).filter(Boolean);
+  const styles = keys
+    .map((key) => mergedStyling[key as string])
+    .filter(Boolean);
 
   const props = styles.reduce(
     (obj, s) => {

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

@@ -27,6 +27,6 @@ export type StylingConfig = {
 export type Theme = string | Base16Theme | StylingConfig;
 
 export type StylingFunction = (
-  keys: string | string[],
+  keys: (string | false) | (string | false)[],
   ...rest: any[]
 ) => Styling;

packages/react-dock/demo/src/App.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
 import { hot } from 'react-hot-loader/root';
+import React, { Component } from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { BsX } from 'react-icons/bs';

packages/react-dock/tsconfig.webpack.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "js"
+  },
   "include": ["webpack.config.ts"]
 }

packages/redux-devtools-inspector/.babelrc

@@ -1,9 +1,8 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
-  "plugins": [
+    "@babel/preset-env",
-    "@babel/plugin-transform-runtime",
+    "@babel/preset-react",
-    "@babel/plugin-proposal-class-properties",
+    "@babel/preset-typescript"
-    "@babel/plugin-proposal-export-default-from",
+  ],
-    "@babel/plugin-proposal-do-expressions"
+  "plugins": ["@babel/plugin-proposal-class-properties"]
-  ]
 }

packages/redux-devtools-inspector/.eslintignore

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

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

@@ -0,0 +1,29 @@
+module.exports = {
+  extends: '../../.eslintrc',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['demo/**/*.ts', 'demo/**/*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./demo/tsconfig.json'],
+      },
+    },
+    {
+      files: ['webpack.config.ts'],
+      extends: '../../eslintrc.ts.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.webpack.json'],
+      },
+    },
+  ],
+};

packages/redux-devtools-inspector/.npmignore

@@ -1,8 +0,0 @@
-static
-src
-demo
-.*
-webpack.config.js
-index.html
-*.gif
-*.png

packages/redux-devtools-inspector/demo/src/js/index.js

@@ -1,4 +1,3 @@
-import '@babel/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import DemoApp from './DemoApp';

packages/redux-devtools-inspector/demo/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "include": ["../src", "src"]
+}

packages/redux-devtools-inspector/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'ts-jest',
+};

packages/redux-devtools-inspector/package.json

@@ -2,70 +2,42 @@
   "name": "redux-devtools-inspector",
   "version": "0.13.1",
   "description": "Redux DevTools Diff Monitor",
-  "scripts": {
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector",
-    "build": "npm run build:lib",
+  "bugs": {
-    "build:lib": "cross-env NODE_ENV=production babel src --out-dir lib",
+    "url": "https://github.com/reduxjs/redux-devtools/issues"
-    "build:demo": "cross-env NODE_ENV=production webpack -p",
-    "stats": "webpack --profile --json > stats.json",
-    "start": "webpack-dev-server",
-    "lint": "eslint --ext .jsx,.js --max-warnings 0 src",
-    "preversion": "npm run lint",
-    "version": "npm run build:demo && git add -A .",
-    "postversion": "git push",
-    "prepare": "npm run build:lib",
-    "prepublishOnly": "npm run build:lib",
-    "gh": "git subtree push --prefix demo/dist origin gh-pages"
-  },
-  "main": "lib/index.js",
-  "repository": {
-    "url": "https://github.com/reduxjs/redux-devtools"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-do-expressions": "^7.10.4",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/polyfill": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "base16": "^1.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "connected-react-router": "^6.8.0",
-    "cross-env": "^7.0.2",
-    "history": "^4.10.1",
-    "html-webpack-plugin": "^4.3.0",
-    "immutable": "^4.0.0-rc.12",
-    "lodash.isequalwith": "^4.4.0",
-    "lodash.shuffle": "^4.2.0",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.3.0",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.1",
-    "react-router": "^5.2.0",
-    "react-transform-hmr": "^1.0.4",
-    "redux": "^4.0.5",
-    "redux-devtools": "^3.6.1",
-    "redux-devtools-dock-monitor": "^1.1.4",
-    "redux-logger": "^3.0.6",
-    "seamless-immutable": "^7.1.4",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
   },
+  "license": "MIT",
   "author": "Alexander <alexkuz@gmail.com> (http://kuzya.org/)",
   "contributors": [
     "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)"
   ],
-  "license": "MIT",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "url": "https://github.com/reduxjs/redux-devtools"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "stats": "webpack --profile --json > stats.json",
+    "build:demo": "NODE_ENV=production webpack -p",
+    "build": "npm run build:types && npm run build:js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
+    "clean": "rimraf lib",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "preversion": "npm run type-check && npm run lint",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
+    "@types/dragula": "^3.7.0",
+    "@types/prop-types": "^15.7.3",
     "dateformat": "^3.0.3",
     "hex-rgba": "^1.0.2",
     "javascript-stringify": "^2.0.1",
@@ -77,7 +49,33 @@
     "react-base16-styling": "^0.7.0",
     "react-dragula": "^1.1.17",
     "react-json-tree": "^0.12.1",
-    "react-pure-render": "^1.0.2",
     "redux-devtools-themes": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/dateformat": "^3.0.1",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/react": "^16.9.46",
+    "@types/react-dragula": "^1.1.0",
+    "base16": "^1.0.0",
+    "connected-react-router": "^6.8.0",
+    "history": "^4.10.1",
+    "immutable": "^4.0.0-rc.12",
+    "lodash.isequalwith": "^4.4.0",
+    "lodash.shuffle": "^4.2.0",
+    "react": "^16.13.1",
+    "react-bootstrap": "^1.3.0",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
+    "redux": "^4.0.5",
+    "redux-devtools": "^3.6.1",
+    "redux-devtools-dock-monitor": "^1.1.4",
+    "redux-logger": "^3.0.6",
+    "seamless-immutable": "^7.1.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.3.18",
+    "react": "^16.3.0",
+    "redux": "^3.4.0 || ^4.0.0"
   }
 }

packages/redux-devtools-inspector/src/.noderequirer.json

@@ -1,3 +0,0 @@
-{
-  "import": true
-}

packages/redux-devtools-inspector/src/ActionList.tsx

@@ -1,10 +1,17 @@
-import React, { Component } from 'react';
+import React, { PureComponent, RefCallback } from 'react';
+import { Drake } from 'dragula';
 import dragula from 'react-dragula';
+import { Action } from 'redux';
+import { PerformAction } from 'redux-devtools';
+import { StylingFunction } from 'react-base16-styling';
 import ActionListRow from './ActionListRow';
 import ActionListHeader from './ActionListHeader';
-import shouldPureComponentUpdate from 'react-pure-render/function';
 
-function getTimestamps(actions, actionIds, actionId) {
+function getTimestamps<A extends Action<unknown>>(
+  actions: { [actionId: number]: PerformAction<A> },
+  actionIds: number[],
+  actionId: number
+) {
   const idx = actionIds.indexOf(actionId);
   const prevActionId = actionIds[idx - 1];
 
@@ -14,10 +21,37 @@ function getTimestamps(actions, actionIds, actionId) {
   };
 }
 
-export default class ActionList extends Component {
+interface Props<A extends Action<unknown>> {
-  shouldComponentUpdate = shouldPureComponentUpdate;
+  actions: { [actionId: number]: PerformAction<A> };
+  actionIds: number[];
+  isWideLayout: boolean;
+  searchValue: string | undefined;
+  selectedActionId: number | null;
+  startActionId: number | null;
+  skippedActionIds: number[];
+  draggableActions: boolean;
+  hideMainButtons: boolean | undefined;
+  hideActionButtons: boolean | undefined;
+  styling: StylingFunction;
+  onSearch: (value: string) => void;
+  onSelect: (e: React.MouseEvent<HTMLDivElement>, actionId: number) => void;
+  onToggleAction: (actionId: number) => void;
+  onJumpToState: (actionId: number) => void;
+  onCommit: () => void;
+  onSweep: () => void;
+  onReorderAction: (actionId: number, beforeActionId: number) => void;
+  currentActionId: number;
+  lastActionId: number;
+}
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+export default class ActionList<
+  A extends Action<unknown>
+> extends PureComponent<Props<A>> {
+  node?: HTMLDivElement | null;
+  scrollDown?: boolean;
+  drake?: Drake;
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props<A>) {
     const node = this.node;
     if (!node) {
       this.scrollDown = true;
@@ -35,22 +69,22 @@ export default class ActionList extends Component {
     this.scrollToBottom();
 
     if (!this.props.draggableActions) return;
-    const container = this.node;
+    const container = this.node!;
     this.drake = dragula([container], {
       copy: false,
       copySortSource: false,
       mirrorContainer: container,
       accepts: (el, target, source, sibling) =>
-        !sibling || parseInt(sibling.getAttribute('data-id')),
+        !sibling || !!parseInt(sibling.getAttribute('data-id')!),
       moves: (el, source, handle) =>
-        parseInt(el.getAttribute('data-id')) &&
+        !!parseInt(el!.getAttribute('data-id')!) &&
-        handle.className.indexOf('selectorButton') !== 0,
+        handle!.className.indexOf('selectorButton') !== 0,
     }).on('drop', (el, target, source, sibling) => {
       let beforeActionId = this.props.actionIds.length;
       if (sibling && sibling.className.indexOf('gu-mirror') === -1) {
-        beforeActionId = parseInt(sibling.getAttribute('data-id'));
+        beforeActionId = parseInt(sibling.getAttribute('data-id')!);
       }
-      const actionId = parseInt(el.getAttribute('data-id'));
+      const actionId = parseInt(el.getAttribute('data-id')!);
       this.props.onReorderAction(actionId, beforeActionId);
     });
   }
@@ -69,7 +103,7 @@ export default class ActionList extends Component {
     }
   }
 
-  getRef = (node) => {
+  getRef: RefCallback<HTMLDivElement> = (node) => {
     this.node = node;
   };
 
@@ -97,8 +131,9 @@ export default class ActionList extends Component {
     const filteredActionIds = searchValue
       ? actionIds.filter(
           (id) =>
-            actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !==
+            (actions[id].action.type as string)
-            -1
+              .toLowerCase()
+              .indexOf(lowerSearchValue as string) !== -1
         )
       : actionIds;
 

packages/redux-devtools-inspector/src/ActionListRow.tsx

@@ -1,15 +1,40 @@
-import React, { Component } from 'react';
+import React, { MouseEvent, MouseEventHandler, PureComponent } from 'react';
-import { PropTypes } from 'prop-types';
+import PropTypes from 'prop-types';
-import shouldPureComponentUpdate from 'react-pure-render/function';
 import dateformat from 'dateformat';
 import debounce from 'lodash.debounce';
+import { StylingFunction } from 'react-base16-styling';
+import { Action } from 'redux';
 import RightSlider from './RightSlider';
 
 const BUTTON_SKIP = 'Skip';
 const BUTTON_JUMP = 'Jump';
 
-export default class ActionListRow extends Component {
+type Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;
-  state = { hover: false };
+
+interface Props<A extends Action<unknown>> {
+  styling: StylingFunction;
+  actionId: number;
+  isInitAction: boolean;
+  isSelected: boolean;
+  isInFuture: boolean;
+  onSelect: MouseEventHandler<HTMLDivElement>;
+  timestamps: { current: number; previous: number };
+  action: A;
+  onToggleClick: () => void;
+  onJumpClick: () => void;
+  onCommitClick: () => void;
+  hideActionButtons: boolean | undefined;
+  isSkipped: boolean;
+}
+
+interface State {
+  hover: boolean;
+}
+
+export default class ActionListRow<
+  A extends Action<unknown>
+> extends PureComponent<Props<A>, State> {
+  state: State = { hover: false };
 
   static propTypes = {
     styling: PropTypes.func.isRequired,
@@ -25,8 +50,6 @@ export default class ActionListRow extends Component {
     isSkipped: PropTypes.bool.isRequired,
   };
 
-  shouldComponentUpdate = shouldPureComponentUpdate;
-
   render() {
     const {
       styling,
@@ -44,18 +67,26 @@ export default class ActionListRow extends Component {
     const timeDelta = timestamps.current - timestamps.previous;
     const showButtons = (hover && !isInitAction) || isSkipped;
 
-    const isButtonSelected = (btn) => btn === BUTTON_SKIP && isSkipped;
+    const isButtonSelected = (btn: Button) => btn === BUTTON_SKIP && isSkipped;
 
     let actionType = action.type;
     if (typeof actionType === 'undefined') actionType = '<UNDEFINED>';
     else if (actionType === null) actionType = '<NULL>';
-    else actionType = actionType.toString() || '<EMPTY>';
+    else actionType = (actionType as string).toString() || '<EMPTY>';
 
     return (
       <div
         onClick={onSelect}
-        onMouseEnter={!hideActionButtons && this.handleMouseEnter}
+        onMouseEnter={
-        onMouseLeave={!hideActionButtons && this.handleMouseLeave}
+          (!hideActionButtons && this.handleMouseEnter) as MouseEventHandler<
+            HTMLDivElement
+          >
+        }
+        onMouseLeave={
+          (!hideActionButtons && this.handleMouseLeave) as MouseEventHandler<
+            HTMLDivElement
+          >
+        }
         onMouseDown={this.handleMouseDown}
         onMouseUp={this.handleMouseEnter}
         data-id={actionId}
@@ -76,7 +107,7 @@ export default class ActionListRow extends Component {
             isSkipped && 'actionListItemNameSkipped',
           ])}
         >
-          {actionType}
+          {actionType as string}
         </div>
         {hideActionButtons ? (
           <RightSlider styling={styling} shown>
@@ -103,12 +134,12 @@ export default class ActionListRow extends Component {
             </RightSlider>
             <RightSlider styling={styling} shown={showButtons} rotate>
               <div {...styling('actionListItemSelector')}>
-                {[BUTTON_JUMP, BUTTON_SKIP].map(
+                {([BUTTON_JUMP, BUTTON_SKIP] as const).map(
                   (btn) =>
                     (!isInitAction || btn !== BUTTON_SKIP) && (
                       <div
                         key={btn}
-                        onClick={this.handleButtonClick.bind(this, btn)}
+                        onClick={(e) => this.handleButtonClick(btn, e)}
                         {...styling(
                           [
                             'selectorButton',
@@ -131,7 +162,7 @@ export default class ActionListRow extends Component {
     );
   }
 
-  handleButtonClick(btn, e) {
+  handleButtonClick(btn: Button, e: MouseEvent<HTMLDivElement>) {
     e.stopPropagation();
 
     switch (btn) {
@@ -144,8 +175,8 @@ export default class ActionListRow extends Component {
     }
   }
 
-  handleMouseEnter = (e) => {
+  handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
-    if (this.hover) return;
+    if (this.state.hover) return;
     this.handleMouseLeave.cancel();
     this.handleMouseEnterDebounced(e.buttons);
   };
@@ -160,8 +191,13 @@ export default class ActionListRow extends Component {
     if (this.state.hover) this.setState({ hover: false });
   }, 100);
 
-  handleMouseDown = (e) => {
+  handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
-    if (e.target.className.indexOf('selectorButton') === 0) return;
+    if (
+      ((e.target as unknown) as { className: string[] }).className.indexOf(
+        'selectorButton'
+      ) === 0
+    )
+      return;
     this.handleMouseLeave();
   };
 }

packages/redux-devtools-inspector/src/DevtoolsInspector.tsx

@@ -1,18 +1,30 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
-import { PropTypes } from 'prop-types';
+import PropTypes from 'prop-types';
+import { Base16Theme } from 'redux-devtools-themes';
+import {
+  getBase16Theme,
+  invertTheme,
+  StylingFunction,
+} from 'react-base16-styling';
+import { ActionCreators, LiftedAction, LiftedState } from 'redux-devtools';
+import { Action, Dispatch } from 'redux';
+import { Delta, DiffContext } from 'jsondiffpatch';
 import {
   createStylingFromTheme,
   base16Themes,
 } from './utils/createStylingFromTheme';
-import shouldPureComponentUpdate from 'react-pure-render/function';
 import ActionList from './ActionList';
 import ActionPreview from './ActionPreview';
 import getInspectedState from './utils/getInspectedState';
 import createDiffPatcher from './createDiffPatcher';
-import { getBase16Theme, invertTheme } from 'react-base16-styling';
+import {
-import { reducer, updateMonitorState } from './redux';
+  DevtoolsInspectorAction,
-import { ActionCreators } from 'redux-devtools';
+  DevtoolsInspectorState,
+  reducer,
+  updateMonitorState,
+} from './redux';
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const {
   commit,
   sweep,
@@ -22,21 +34,26 @@ const {
   reorderAction,
 } = ActionCreators;
 
-function getLastActionId(props) {
+function getLastActionId<S, A extends Action<unknown>>(
+  props: DevtoolsInspectorProps<S, A>
+) {
   return props.stagedActionIds[props.stagedActionIds.length - 1];
 }
 
-function getCurrentActionId(props, monitorState) {
+function getCurrentActionId<S, A extends Action<unknown>>(
+  props: DevtoolsInspectorProps<S, A>,
+  monitorState: DevtoolsInspectorState
+) {
   return monitorState.selectedActionId === null
     ? props.stagedActionIds[props.currentStateIndex]
     : monitorState.selectedActionId;
 }
 
-function getFromState(
+function getFromState<S>(
-  actionIndex,
+  actionIndex: number,
-  stagedActionIds,
+  stagedActionIds: number[],
-  computedStates,
+  computedStates: { state: S; error?: string }[],
-  monitorState
+  monitorState: DevtoolsInspectorState
 ) {
   const { startActionId } = monitorState;
   if (startActionId === null) {
@@ -47,7 +64,10 @@ function getFromState(
   return computedStates[fromStateIdx];
 }
 
-function createIntermediateState(props, monitorState) {
+function createIntermediateState<S, A extends Action<unknown>>(
+  props: DevtoolsInspectorProps<S, A>,
+  monitorState: DevtoolsInspectorState
+) {
   const {
     supportImmutable,
     computedStates,
@@ -97,8 +117,10 @@ function createIntermediateState(props, monitorState) {
   };
 }
 
-function createThemeState(props) {
+function createThemeState<S, A extends Action<unknown>>(
-  const base16Theme = getBase16Theme(props.theme, base16Themes);
+  props: DevtoolsInspectorProps<S, A>
+) {
+  const base16Theme = getBase16Theme(props.theme, base16Themes)!;
 
   const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
   const styling = createStylingFromTheme(theme);
@@ -106,15 +128,43 @@ function createThemeState(props) {
   return { base16Theme, styling };
 }
 
-export default class DevtoolsInspector extends Component {
+export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
-  constructor(props) {
+  extends LiftedState<S, A, DevtoolsInspectorState> {
-    super(props);
+  dispatch: Dispatch<
-    this.state = {
+    DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
-      ...createIntermediateState(props, props.monitorState),
+  >;
-      isWideLayout: false,
+  preserveScrollTop?: boolean;
-      themeState: createThemeState(props),
+  draggableActions: boolean;
-    };
+  select: (state: S) => unknown;
-  }
+  theme: keyof typeof base16Themes | Base16Theme;
+  supportImmutable: boolean;
+  diffObjectHash?: (item: unknown, index: number) => string;
+  diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
+  hideMainButtons?: boolean;
+  hideActionButtons?: boolean;
+  invertTheme: boolean;
+  dataTypeKey?: string;
+  tabs: unknown;
+}
+
+interface State<S, A extends Action<unknown>> {
+  delta: Delta | null | undefined | false;
+  nextState: S;
+  action: A;
+  error: string | undefined;
+  isWideLayout: boolean;
+  themeState: { base16Theme: Base16Theme; styling: StylingFunction };
+}
+
+export default class DevtoolsInspector<
+  S,
+  A extends Action<unknown>
+> extends PureComponent<DevtoolsInspectorProps<S, A>, State<S, A>> {
+  state: State<S, A> = {
+    ...createIntermediateState(this.props, this.props.monitorState),
+    isWideLayout: false,
+    themeState: createThemeState(this.props),
+  };
 
   static propTypes = {
     dispatch: PropTypes.func,
@@ -127,7 +177,6 @@ export default class DevtoolsInspector extends Component {
     }),
     preserveScrollTop: PropTypes.bool,
     draggableActions: PropTypes.bool,
-    stagedActions: PropTypes.array,
     select: PropTypes.func.isRequired,
     theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     supportImmutable: PropTypes.bool,
@@ -144,38 +193,42 @@ export default class DevtoolsInspector extends Component {
   static update = reducer;
 
   static defaultProps = {
-    select: (state) => state,
+    select: (state: unknown) => state,
     supportImmutable: false,
     draggableActions: true,
     theme: 'inspector',
     invertTheme: true,
   };
 
-  shouldComponentUpdate = shouldPureComponentUpdate;
+  updateSizeTimeout?: number;
+  inspectorRef?: HTMLDivElement | null;
 
   componentDidMount() {
     this.updateSizeMode();
-    this.updateSizeTimeout = setInterval(this.updateSizeMode.bind(this), 150);
+    this.updateSizeTimeout = window.setInterval(
+      this.updateSizeMode.bind(this),
+      150
+    );
   }
 
   componentWillUnmount() {
     clearTimeout(this.updateSizeTimeout);
   }
 
-  updateMonitorState = (monitorState) => {
+  updateMonitorState = (monitorState: Partial<DevtoolsInspectorState>) => {
     this.props.dispatch(updateMonitorState(monitorState));
   };
 
   updateSizeMode() {
-    const isWideLayout = this.inspectorRef.offsetWidth > 500;
+    const isWideLayout = this.inspectorRef!.offsetWidth > 500;
 
     if (isWideLayout !== this.state.isWideLayout) {
       this.setState({ isWideLayout });
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: DevtoolsInspectorProps<S, A>) {
-    let nextMonitorState = nextProps.monitorState;
+    const nextMonitorState = nextProps.monitorState;
     const monitorState = this.props.monitorState;
 
     if (
@@ -199,7 +252,7 @@ export default class DevtoolsInspector extends Component {
     }
   }
 
-  inspectorCreateRef = (node) => {
+  inspectorCreateRef: React.RefCallback<HTMLDivElement> = (node) => {
     this.inspectorRef = node;
   };
 
@@ -297,11 +350,11 @@ export default class DevtoolsInspector extends Component {
     );
   }
 
-  handleToggleAction = (actionId) => {
+  handleToggleAction = (actionId: number) => {
     this.props.dispatch(toggleAction(actionId));
   };
 
-  handleJumpToState = (actionId) => {
+  handleJumpToState = (actionId: number) => {
     if (jumpToAction) {
       this.props.dispatch(jumpToAction(actionId));
     } else {
@@ -311,7 +364,7 @@ export default class DevtoolsInspector extends Component {
     }
   };
 
-  handleReorderAction = (actionId, beforeActionId) => {
+  handleReorderAction = (actionId: number, beforeActionId: number) => {
     if (reorderAction)
       this.props.dispatch(reorderAction(actionId, beforeActionId));
   };
@@ -324,11 +377,14 @@ export default class DevtoolsInspector extends Component {
     this.props.dispatch(sweep());
   };
 
-  handleSearch = (val) => {
+  handleSearch = (val: string) => {
     this.updateMonitorState({ searchValue: val });
   };
 
-  handleSelectAction = (e, actionId) => {
+  handleSelectAction = (
+    e: React.MouseEvent<HTMLDivElement>,
+    actionId: number
+  ) => {
     const { monitorState } = this.props;
     let startActionId;
     let selectedActionId;
@@ -367,11 +423,14 @@ export default class DevtoolsInspector extends Component {
     this.updateMonitorState({ startActionId, selectedActionId });
   };
 
-  handleInspectPath = (pathType, path) => {
+  handleInspectPath = (
+    pathType: 'inspectedActionPath' | 'inspectedStatePath',
+    path: (string | number)[]
+  ) => {
     this.updateMonitorState({ [pathType]: path });
   };
 
-  handleSelectTab = (tabName) => {
+  handleSelectTab = (tabName: string) => {
     this.updateMonitorState({ tabName });
   };
 }

packages/redux-devtools-inspector/src/RightSlider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PropTypes } from 'prop-types';
+import PropTypes from 'prop-types';
 
 const RightSlider = ({ styling, shown, children, rotate }) => (
   <div

packages/redux-devtools-inspector/tsconfig.json

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

packages/redux-devtools-inspector/tsconfig.webpack.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["webpack.config.ts"]
+}

packages/redux-devtools-inspector/webpack.config.ts

@@ -1,11 +1,11 @@
-var path = require('path');
+import * as path from 'path';
-var webpack = require('webpack');
+import * as webpack from 'webpack';
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+import * as HtmlWebpackPlugin from 'html-webpack-plugin';
-var { CleanWebpackPlugin } = require('clean-webpack-plugin');
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkg = require('./package.json');
 
-var pkg = require('./package.json');
+const isProduction = process.env.NODE_ENV === 'production';
-
-var isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = {
   mode: process.env.NODE_ENV || 'development',

yarn.lock

@@ -3082,6 +3082,16 @@
   dependencies:
     "@types/node" "*"
 
+"@types/dateformat@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-3.0.1.tgz#98d747a2e5e9a56070c6bf14e27bff56204e34cc"
+  integrity sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==
+
+"@types/dragula@*", "@types/dragula@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@types/dragula/-/dragula-3.7.0.tgz#62178f21c3896ab9823a33d08ed844ab9af496af"
+  integrity sha512-Scr3lQ7pDmwic+I4qrzDEIfPVGUhc/qo8S0VJJ9v5pzTyIIJzAXrnFajjsMSL8J84VERIkZUh7wH6wYEisY+TA==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -3291,6 +3301,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dragula@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dragula/-/react-dragula-1.1.0.tgz#c7a6840891c52aa5007a8f8b87b31985fbc3c5b2"
+  integrity sha512-wgRIVV2jo/Gria1PK3K26II7gfRD3VTcMfPYhL0CuIApSeon7xjBTj8Xs8Ln+Vbb/FuRKWfUaJXmF4R3KUGntA==
+  dependencies:
+    "@types/dragula" "*"
+
 "@types/react-native@*":
   version "0.63.8"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.8.tgz#73ec087122c64c309eeaf150b565b8d755f0fb1f"
@@ -10861,7 +10878,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@^4.8.0:
+lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -13233,11 +13250,6 @@ react-color@^2.14.1:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-deep-force-update@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
-  integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
-
 react-dev-utils@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"
@@ -13399,14 +13411,6 @@ react-overlays@^4.1.0:
     uncontrollable "^7.0.0"
     warning "^4.0.3"
 
-react-proxy@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
-  integrity sha1-nb/Z2SdSjDqp9ETkVYw3gwq4wmo=
-  dependencies:
-    lodash "^4.6.1"
-    react-deep-force-update "^1.0.0"
-
 react-pure-render@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-pure-render/-/react-pure-render-1.0.2.tgz#9d8a928c7f2c37513c2d064e57b3e3c356e9fabb"
@@ -13482,14 +13486,6 @@ react-textarea-autosize@^7.0.4:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react-transform-hmr@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
-  integrity sha1-4aQL0Krvxy6N/Xp82gmvhQZjl7s=
-  dependencies:
-    global "^4.3.0"
-    react-proxy "^1.1.7"
-
 react-transition-group@^2.0.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"