More work on types

extension/src/browser/extension/background/openWindow.ts

@@ -62,7 +62,9 @@ export default function openDevToolsWindow(position: DevToolsPosition) {
   switch (position) {
     case 'devtools-right':
       params.left =
-        window.screen.availLeft + window.screen.availWidth - params.width!;
+        (window.screen as unknown as { availLeft: number }).availLeft +
+        window.screen.availWidth -
+        params.width!;
       break;
     case 'devtools-bottom':
       params.height = 420;

extension/src/browser/extension/inject/contentScript.ts

@@ -214,7 +214,7 @@ function tryCatch<S, A extends Action<unknown>>(
   } catch (err) {
     if (err.message === 'Message length exceeded maximum allowed length.') {
       const instanceId = args.instanceId;
-      const newArgs: SplitMessageStart = {
+      const newArgs = {
         split: 'start',
       };
       const toSplit: [string, string][] = [];

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

@@ -1,7 +1,12 @@
-import { getActionsArray, evalAction } from '@redux-devtools/utils';
+import {
+  getActionsArray,
+  evalAction,
+  ActionCreatorObject,
+} from '@redux-devtools/utils';
 import throttle from 'lodash/throttle';
 import {
   Action,
+  ActionCreator,
   PreloadedState,
   Reducer,
   Store,
@@ -115,6 +120,9 @@ export interface ConfigWithExpandedMaxAge {
   readonly features?: Features;
   readonly type?: string;
   readonly getActionType?: <A extends Action<unknown>>(action: A) => A;
+  readonly actionCreators: {
+    readonly [key: string]: ActionCreator<Action<unknown>>;
+  };
 }
 
 export interface Config extends ConfigWithExpandedMaxAge {
@@ -161,7 +169,7 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   let store: EnhancedStore<S, A, unknown>;
   let errorOccurred = false;
   let maxAge: number | undefined;
-  let actionCreators;
+  let actionCreators: readonly ActionCreatorObject[];
   let sendingActionId = 1;
   const instanceId = generateId(config.instanceId);
   const localFilter = getLocalFilter(config);
@@ -375,26 +383,25 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
   }
 
   function dispatchMonitorAction(action: DispatchAction) {
-    const type = action.type;
+    const features = config!.features;
-    const features = config.features;
     if (features) {
       if (
         !features.jump &&
-        (type === 'JUMP_TO_STATE' || type === 'JUMP_TO_ACTION')
+        (action.type === 'JUMP_TO_STATE' || action.type === 'JUMP_TO_ACTION')
       ) {
         return;
       }
-      if (!features.skip && type === 'TOGGLE_ACTION') return;
+      if (!features.skip && action.type === 'TOGGLE_ACTION') return;
-      if (!features.reorder && type === 'REORDER_ACTION') return;
+      if (!features.reorder && action.type === 'REORDER_ACTION') return;
-      if (!features.import && type === 'IMPORT_STATE') return;
+      if (!features.import && action.type === 'IMPORT_STATE') return;
-      if (!features.lock && type === 'LOCK_CHANGES') return;
+      if (!features.lock && action.type === 'LOCK_CHANGES') return;
-      if (!features.pause && type === 'PAUSE_RECORDING') return;
+      if (!features.pause && action.type === 'PAUSE_RECORDING') return;
     }
-    if (type === 'JUMP_TO_STATE') {
+    if (action.type === 'JUMP_TO_STATE') {
       const liftedState = store.liftedStore.getState();
       const index = liftedState.stagedActionIds.indexOf(action.actionId);
       if (index === -1) return;
-      store.liftedStore.dispatch({ type, index });
+      store.liftedStore.dispatch({ type: action.type, index });
       return;
     }
     store.liftedStore.dispatch(action);
@@ -419,8 +426,8 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
         return;
       case 'START':
         monitor.start(true);
-        if (!actionCreators && config.actionCreators) {
+        if (!actionCreators && config!.actionCreators) {
-          actionCreators = getActionsArray(config.actionCreators);
+          actionCreators = getActionsArray(config!.actionCreators);
         }
         relayState(undefined, {
           name: config!.name || document.title,

extension/src/browser/extension/inject/pageScriptWrap.ts

@@ -9,7 +9,9 @@ if (process.env.NODE_ENV === 'production') {
 } else {
   s.src = chrome.extension.getURL('page.bundle.js');
   s.onload = function () {
-    this.parentNode.removeChild(this);
+    (this as HTMLScriptElement).parentNode!.removeChild(
+      this as HTMLScriptElement
+    );
   };
   (document.head || document.documentElement).appendChild(s);
 }

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

@@ -120,13 +120,28 @@ export interface LockChangesAction {
 }
 export interface ToggleActionAction {
   type: 'TOGGLE_ACTION';
+  id: number;
 }
 export interface RollbackAction {
   type: 'ROLLBACK';
+  timestamp: number;
 }
 export interface SweepAction {
   type: 'SWEEP';
 }
+interface ReorderActionAction {
+  type: 'REORDER_ACTION';
+  actionId: number;
+  beforeActionId: number;
+}
+interface ImportStateAction {
+  type: 'IMPORT_STATE';
+  nextLiftedState:
+    | LiftedState<unknown, Action<unknown>, unknown>
+    | readonly Action<unknown>[];
+  preloadedState?: unknown;
+  noRecompute?: boolean | undefined;
+}
 export type DispatchAction =
   | JumpToStateAction
   | JumpToActionAction
@@ -134,7 +149,9 @@ export type DispatchAction =
   | LockChangesAction
   | ToggleActionAction
   | RollbackAction
-  | SweepAction;
+  | SweepAction
+  | ReorderActionAction
+  | ImportStateAction;
 interface LiftedActionActionBase {
   action?: DispatchAction | string | CustomAction;
   state?: string;
@@ -151,6 +168,7 @@ interface LiftedActionImportAction extends LiftedActionActionBase {
   message: 'IMPORT';
   state: string;
   preloadedState: unknown | undefined;
+  id?: string | number;
 }
 interface LiftedActionActionAction extends LiftedActionActionBase {
   type: typeof LIFTED_ACTION;

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

@@ -3,22 +3,24 @@ import jsan from 'jsan';
 import { nanoid } from 'nanoid/non-secure';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import Immutable from 'immutable';
-import { Action } from 'redux';
+import { Action, ActionCreator } from 'redux';
 
 export function generateId(id: string | undefined) {
   return id || nanoid(7);
 }
 
+export interface ActionCreatorObject {
+  readonly name: string;
+  readonly func: ActionCreator<Action<unknown>>;
+  readonly args: readonly string[];
+}
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 function flatTree(
-  obj: { [key: string]: (...args: any[]) => unknown },
+  obj: { [key: string]: ActionCreator<Action<unknown>> },
   namespace = ''
 ) {
-  let functions: {
+  let functions: ActionCreatorObject[] = [];
-    name: string;
-    func: (...args: any[]) => unknown;
-    args: string[];
-  }[] = [];
   Object.keys(obj).forEach((key) => {
     const prop = obj[key];
     if (typeof prop === 'function') {
@@ -63,7 +65,7 @@ export function getMethods(obj: unknown) {
 }
 
 export function getActionsArray(actionCreators: {
-  [key: string]: (...args: any[]) => unknown;
+  [key: string]: ActionCreator<Action<unknown>>;
 }) {
   if (Array.isArray(actionCreators)) return actionCreators;
   return flatTree(actionCreators);
@@ -81,10 +83,8 @@ function evalArgs(inArgs: string[], restArgs: string) {
 }
 
 export function evalAction(
-  action: string | { args: string[]; rest: string; selected: string },
+  action: string | { args: string[]; rest: string; selected: number },
-  actionCreators: {
+  actionCreators: readonly ActionCreatorObject[]
-    [selected: string]: { func: (...args: any[]) => Action<unknown> };
-  }
 ) {
   if (typeof action === 'string') {
     // eslint-disable-next-line @typescript-eslint/no-implied-eval