Fix more type errors

extension/src/app/middlewares/api.ts

@@ -16,8 +16,6 @@ import {
   CustomAction,
   DispatchAction as AppDispatchAction,
   LibConfig,
-  LiftedActionAction,
-  StoreAction,
 } from '@redux-devtools/app/lib/actions';
 import { Action, Dispatch } from 'redux';
 import {
@@ -30,6 +28,10 @@ import {
   PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,
 } from '../api';
 import { LiftedState } from '@redux-devtools/instrument';
+import {
+  BackgroundAction,
+  LiftedActionAction,
+} from '../stores/backgroundStore';
 
 interface TabMessageBase {
   readonly type: string;
@@ -241,6 +243,7 @@ interface ImportMessage {
   readonly id: string | number;
   readonly instanceId: string;
   readonly state: string;
+  readonly action?: never;
 }
 
 type ToContentScriptMessage = ImportMessage | LiftedActionAction;
@@ -252,7 +255,7 @@ function toContentScript({
   instanceId,
   state,
 }: ToContentScriptMessage) {
-  connections.tab[id].postMessage({
+  connections.tab[id!].postMessage({
     type: message,
     action,
     state: nonReduxDispatch(window.store, message, instanceId, action, state),
@@ -471,7 +474,7 @@ function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
     connections.panel[id] = port;
     monitorInstances(true, port.name);
     monitors++;
-    listener = (msg: StoreAction) => {
+    listener = (msg: BackgroundAction) => {
       window.store.dispatch(msg);
     };
     port.onMessage.addListener(listener);
@@ -498,7 +501,7 @@ declare global {
 window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 
 export default function api() {
-  return (next: Dispatch<StoreAction>) => (action: StoreAction) => {
+  return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);
     else if (action.type === 'TOGGLE_PERSIST') togglePersist();
     return next(action);

extension/src/app/middlewares/panelSync.ts

@@ -6,15 +6,17 @@ import {
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { StoreActionWithTogglePersist } from '../stores/windowStore';
 
 function panelDispatcher(bgConnection: chrome.runtime.Port) {
   let autoselected = false;
   const tabId = chrome.devtools.inspectedWindow.tabId;
 
-  return (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
-    (next: Dispatch<StoreAction>) =>
-    (action: StoreAction) => {
+  return (
+      store: MiddlewareAPI<Dispatch<StoreActionWithTogglePersist>, StoreState>
+    ) =>
+    (next: Dispatch<StoreActionWithTogglePersist>) =>
+    (action: StoreActionWithTogglePersist) => {
       const result = next(action);
       if (!autoselected && action.type === UPDATE_STATE && tabId) {
         autoselected = true;

extension/src/app/middlewares/windowSync.ts

@@ -6,12 +6,18 @@ import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
 import { BackgroundState } from '../reducers/background';
 import { StoreAction } from '@redux-devtools/app/lib/actions';
+import {
+  WindowStoreAction,
+  StoreActionWithTogglePersist,
+} from '../stores/windowStore';
+import { StoreState } from '@redux-devtools/app/lib/reducers';
+import { BackgroundAction } from '../stores/backgroundStore';
 
 const syncStores =
-  (baseStore: Store<BackgroundState, StoreAction>) =>
-  (store: MiddlewareAPI<Dispatch<StoreAction>>) =>
-  (next: Dispatch<StoreAction>) =>
-  (action: StoreAction) => {
+  (baseStore: Store<BackgroundState, BackgroundAction>) =>
+  (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
+  (next: Dispatch<WindowStoreAction>) =>
+  (action: StoreActionWithTogglePersist) => {
     if (action.type === UPDATE_STATE) {
       return next({
         ...action,

extension/src/app/reducers/background/index.ts

@@ -1,15 +1,17 @@
-import { combineReducers } from 'redux';
+import { combineReducers, Reducer } from 'redux';
 import instances, {
   InstancesState,
 } from '@redux-devtools/app/lib/reducers/instances';
 import persistStates from './persistStates';
+import { BackgroundAction } from '../../stores/backgroundStore';
 
 export interface BackgroundState {
   readonly instances: InstancesState;
   readonly persistStates: boolean;
 }
 
-const rootReducer = combineReducers({
+const rootReducer: Reducer<BackgroundState, BackgroundAction> =
+  combineReducers<BackgroundState>({
     instances,
     persistStates,
   });

extension/src/app/reducers/background/persistStates.ts

@@ -1,6 +1,6 @@
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { BackgroundAction } from '../../stores/backgroundStore';
 
-export default function persistStates(state = false, action: StoreAction) {
+export default function persistStates(state = false, action: BackgroundAction) {
   if (action.type === 'TOGGLE_PERSIST') return !state;
   return state;
 }

extension/src/app/reducers/panel/index.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers, Reducer } from 'redux';
 import instances from '@redux-devtools/app/lib/reducers/instances';
 import monitor from '@redux-devtools/app/lib/reducers/monitor';
 import notification from '@redux-devtools/app/lib/reducers/notification';
@@ -8,9 +8,10 @@ import theme from '@redux-devtools/app/lib/reducers/theme';
 import connection from '@redux-devtools/app/lib/reducers/connection';
 import socket from '@redux-devtools/app/lib/reducers/socket';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { StoreActionWithTogglePersist } from '../../stores/windowStore';
 
-const rootReducer = combineReducers<StoreState, StoreAction>({
+const rootReducer: Reducer<StoreState, StoreActionWithTogglePersist> =
+  combineReducers<StoreState>({
     instances,
     monitor,
     reports,

extension/src/app/reducers/window/index.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers, Reducer } from 'redux';
 import instances from './instances';
 import monitor from '@redux-devtools/app/lib/reducers/monitor';
 import notification from '@redux-devtools/app/lib/reducers/notification';
@@ -8,9 +8,10 @@ import section from '@redux-devtools/app/lib/reducers/section';
 import theme from '@redux-devtools/app/lib/reducers/theme';
 import connection from '@redux-devtools/app/lib/reducers/connection';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { WindowStoreAction } from '../../stores/windowStore';
 
-const rootReducer = combineReducers<StoreState, StoreAction>({
+const rootReducer: Reducer<StoreState, WindowStoreAction> =
+  combineReducers<StoreState>({
     instances,
     monitor,
     socket,

extension/src/app/reducers/window/instances.ts

@@ -7,9 +7,12 @@ import {
   SELECT_INSTANCE,
   LIFTED_ACTION,
 } from '@redux-devtools/app/lib/constants/actionTypes';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { WindowStoreAction } from '../../stores/windowStore';
 
-export default function instances(state = initialState, action: StoreAction) {
+export default function instances(
+  state = initialState,
+  action: WindowStoreAction
+) {
   switch (action.type) {
     case UPDATE_STATE:
       return { ...action.instances, selected: state.selected };

extension/src/app/service/Monitor.ts

@@ -1,6 +1,6 @@
 import { Action } from 'redux';
 import { LiftedState } from '@redux-devtools/instrument';
-import { LibConfig, StoreAction } from '@redux-devtools/app/lib/actions';
+import { DispatchAction, LibConfig } from '@redux-devtools/app/lib/actions';
 
 declare global {
   interface Window {
@@ -15,6 +15,8 @@ export default class Monitor<S, A extends Action<unknown>> {
   ) => void;
   active?: boolean;
   paused?: boolean;
+  lastAction?: string;
+  waitingTimeout?: number;
 
   constructor(
     update: (
@@ -24,7 +26,7 @@ export default class Monitor<S, A extends Action<unknown>> {
   ) {
     this.update = update;
   }
-  reducer = (state = {}, action: StoreAction) => {
+  reducer = (state = {}, action: DispatchAction) => {
     if (!this.active) return state;
     this.lastAction = action.type;
     if (action.type === 'LOCK_CHANGES') {

extension/src/app/stores/backgroundStore.ts

@@ -1,6 +1,58 @@
 import { createStore, applyMiddleware, PreloadedState } from 'redux';
 import rootReducer, { BackgroundState } from '../reducers/background';
 import api from '../middlewares/api';
+import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes';
+import {
+  CustomAction,
+  DispatchAction,
+  StoreActionWithoutLiftedAction,
+} from '@redux-devtools/app/lib/actions';
+
+interface LiftedActionActionBase {
+  action?: DispatchAction | string | CustomAction;
+  state?: string;
+  toAll?: boolean;
+  readonly instanceId: string | number;
+  readonly id: string | number | undefined;
+}
+interface LiftedActionDispatchAction extends LiftedActionActionBase {
+  type: typeof LIFTED_ACTION;
+  message: 'DISPATCH';
+  action: DispatchAction;
+  toAll?: boolean;
+}
+interface LiftedActionImportAction extends LiftedActionActionBase {
+  type: typeof LIFTED_ACTION;
+  message: 'IMPORT';
+  state: string;
+  preloadedState?: unknown | undefined;
+}
+interface LiftedActionActionAction extends LiftedActionActionBase {
+  type: typeof LIFTED_ACTION;
+  message: 'ACTION';
+  action: string | CustomAction;
+}
+interface LiftedActionExportAction extends LiftedActionActionBase {
+  type: typeof LIFTED_ACTION;
+  message: 'EXPORT';
+  toExport: boolean;
+}
+export type LiftedActionAction =
+  | LiftedActionDispatchAction
+  | LiftedActionImportAction
+  | LiftedActionActionAction
+  | LiftedActionExportAction;
+
+interface TogglePersistAction {
+  readonly type: 'TOGGLE_PERSIST';
+  readonly instanceId: string | number;
+  readonly id: string | number | undefined;
+}
+
+export type BackgroundAction =
+  | StoreActionWithoutLiftedAction
+  | LiftedActionAction
+  | TogglePersistAction;
 
 export default function configureStore(
   preloadedState?: PreloadedState<BackgroundState>

extension/src/app/stores/windowStore.ts

@@ -4,23 +4,45 @@ import {
   applyMiddleware,
   Store,
   PreloadedState,
+  StoreEnhancer,
 } from 'redux';
 import exportState from '@redux-devtools/app/lib/middlewares/exportState';
 import api from '@redux-devtools/app/lib/middlewares/api';
 import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
+import {
+  StoreAction,
+  StoreActionWithoutUpdateState,
+  UpdateStateAction,
+} from '@redux-devtools/app/lib/actions';
+import { InstancesState } from '@redux-devtools/app/lib/reducers/instances';
 import syncStores from '../middlewares/windowSync';
 import instanceSelector from '../middlewares/instanceSelector';
 import rootReducer from '../reducers/window';
 import { BackgroundState } from '../reducers/background';
+import { BackgroundAction } from './backgroundStore';
+
+export interface TogglePersistAction {
+  readonly type: 'TOGGLE_PERSIST';
+}
+
+export type StoreActionWithTogglePersist = StoreAction | TogglePersistAction;
+
+interface ExpandedUpdateStateAction extends UpdateStateAction {
+  readonly instances: InstancesState;
+}
+
+export type WindowStoreAction =
+  | StoreActionWithoutUpdateState
+  | TogglePersistAction
+  | ExpandedUpdateStateAction;
 
 export default function configureStore(
-  baseStore: Store<BackgroundState, StoreAction>,
+  baseStore: Store<BackgroundState, BackgroundAction>,
   position: string,
   preloadedState: PreloadedState<StoreState>
 ) {
-  let enhancer;
+  let enhancer: StoreEnhancer;
   const middlewares = [exportState, api, syncStores(baseStore)];
   if (!position || position === '#popup') {
     // select current tab instance for devPanel and pageAction
@@ -33,7 +55,7 @@ export default function configureStore(
       applyMiddleware(...middlewares),
       window.__REDUX_DEVTOOLS_EXTENSION__
         ? window.__REDUX_DEVTOOLS_EXTENSION__()
-        : (noop) => noop
+        : (noop: unknown) => noop
     );
   }
   const store = createStore(rootReducer, preloadedState, enhancer);

extension/src/browser/extension/background/index.ts

@@ -1,6 +1,7 @@
 import { Store } from 'redux';
-import { StoreAction } from '@redux-devtools/app/lib/actions';
-import configureStore from '../../../app/stores/backgroundStore';
+import configureStore, {
+  BackgroundAction,
+} from '../../../app/stores/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';
 import syncOptions from '../options/syncOptions';
@@ -8,7 +9,7 @@ import { BackgroundState } from '../../../app/reducers/background';
 
 declare global {
   interface Window {
-    store: Store<BackgroundState, StoreAction>;
+    store: Store<BackgroundState, BackgroundAction>;
   }
 }
 

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

@@ -54,7 +54,7 @@ let monitorReducer: (
 ) => unknown;
 let monitorProps: unknown = {};
 
-interface ChangeSectionAction {
+export interface ChangeSectionAction {
   readonly type: typeof CHANGE_SECTION;
   readonly section: string;
 }
@@ -70,7 +70,7 @@ interface ChangeThemeFormData {
 interface ChangeThemeData {
   readonly formData: ChangeThemeFormData;
 }
-interface ChangeThemeAction {
+export interface ChangeThemeAction {
   readonly type: typeof CHANGE_THEME;
   readonly theme: Theme;
   readonly scheme: Scheme;
@@ -163,19 +163,18 @@ export interface LiftedActionDispatchAction extends LiftedActionActionBase {
   action: DispatchAction;
   toAll?: boolean;
 }
-interface LiftedActionImportAction extends LiftedActionActionBase {
+export interface LiftedActionImportAction extends LiftedActionActionBase {
   type: typeof LIFTED_ACTION;
   message: 'IMPORT';
   state: string;
   preloadedState: unknown | undefined;
-  id?: string | number;
 }
-interface LiftedActionActionAction extends LiftedActionActionBase {
+export interface LiftedActionActionAction extends LiftedActionActionBase {
   type: typeof LIFTED_ACTION;
   message: 'ACTION';
   action: string | CustomAction;
 }
-interface LiftedActionExportAction extends LiftedActionActionBase {
+export interface LiftedActionExportAction extends LiftedActionActionBase {
   type: typeof LIFTED_ACTION;
   message: 'EXPORT';
   toExport: boolean;
@@ -211,15 +210,15 @@ export function liftedDispatch(
   } as LiftedActionDispatchAction;
 }
 
-interface SelectInstanceAction {
+export interface SelectInstanceAction {
   type: typeof SELECT_INSTANCE;
-  selected: string;
+  selected: string | number;
 }
 export function selectInstance(selected: string): SelectInstanceAction {
   return { type: SELECT_INSTANCE, selected };
 }
 
-interface SelectMonitorAction {
+export interface SelectMonitorAction {
   type: typeof SELECT_MONITOR;
   monitor: string;
   monitorState?: MonitorStateMonitorState;
@@ -238,7 +237,7 @@ interface NextState {
   subTabName: string;
   inspectedStatePath?: string[];
 }
-interface UpdateMonitorStateAction {
+export interface UpdateMonitorStateAction {
   type: typeof UPDATE_MONITOR_STATE;
   nextState: NextState;
 }
@@ -259,7 +258,7 @@ export function importState(
   return { type: LIFTED_ACTION, message: 'IMPORT', state, preloadedState };
 }
 
-interface ExportAction {
+export interface ExportAction {
   type: typeof EXPORT;
 }
 export function exportState(): ExportAction {
@@ -296,28 +295,28 @@ export function dispatchRemotely(
   return { type: LIFTED_ACTION, message: 'ACTION', action };
 }
 
-interface TogglePersistAction {
+export interface TogglePersistAction {
   type: typeof TOGGLE_PERSIST;
 }
 export function togglePersist(): TogglePersistAction {
   return { type: TOGGLE_PERSIST };
 }
 
-interface ToggleSyncAction {
+export interface ToggleSyncAction {
   type: typeof TOGGLE_SYNC;
 }
 export function toggleSync(): ToggleSyncAction {
   return { type: TOGGLE_SYNC };
 }
 
-interface ToggleSliderAction {
+export interface ToggleSliderAction {
   type: typeof TOGGLE_SLIDER;
 }
 export function toggleSlider(): ToggleSliderAction {
   return { type: TOGGLE_SLIDER };
 }
 
-interface ToggleDispatcherAction {
+export interface ToggleDispatcherAction {
   type: typeof TOGGLE_DISPATCHER;
 }
 export function toggleDispatcher(): ToggleDispatcherAction {
@@ -331,7 +330,7 @@ export interface ConnectionOptions {
   readonly port: number;
   readonly secure: boolean;
 }
-interface ReconnectAction {
+export interface ReconnectAction {
   readonly type: typeof RECONNECT;
   readonly options: ConnectionOptions;
 }
@@ -345,7 +344,7 @@ interface Notification {
   readonly type: 'error';
   readonly message: string;
 }
-interface ShowNotificationAction {
+export interface ShowNotificationAction {
   readonly type: typeof SHOW_NOTIFICATION;
   readonly notification: Notification;
 }
@@ -353,14 +352,14 @@ export function showNotification(message: string): ShowNotificationAction {
   return { type: SHOW_NOTIFICATION, notification: { type: 'error', message } };
 }
 
-interface ClearNotificationAction {
+export interface ClearNotificationAction {
   readonly type: typeof CLEAR_NOTIFICATION;
 }
 export function clearNotification(): ClearNotificationAction {
   return { type: CLEAR_NOTIFICATION };
 }
 
-interface GetReportRequest {
+export interface GetReportRequest {
   readonly type: typeof GET_REPORT_REQUEST;
   readonly report: unknown;
 }
@@ -429,23 +428,23 @@ export type Request =
   | LiftedRequest
   | ExportRequest;
 
-interface UpdateStateAction {
+export interface UpdateStateAction {
   type: typeof UPDATE_STATE;
   request?: Request;
   id?: string | number;
 }
 
-interface SetStateAction {
+export interface SetStateAction {
   type: typeof SET_STATE;
   newState: State;
 }
 
-interface RemoveInstanceAction {
+export interface RemoveInstanceAction {
   type: typeof REMOVE_INSTANCE;
   id: string;
 }
 
-interface ConnectRequestAction {
+export interface ConnectRequestAction {
   type: typeof CONNECT_REQUEST;
   options: ConnectionOptions;
 }
@@ -455,58 +454,58 @@ interface ConnectSuccessPayload {
   authState: AuthStates;
   socketState: States;
 }
-interface ConnectSuccessAction {
+export interface ConnectSuccessAction {
   type: typeof CONNECT_SUCCESS;
   payload: ConnectSuccessPayload;
   error: Error | undefined;
 }
 
-interface ConnectErrorAction {
+export interface ConnectErrorAction {
   type: typeof CONNECT_ERROR;
   error: Error | undefined;
 }
 
-interface AuthRequestAction {
+export interface AuthRequestAction {
   type: typeof AUTH_REQUEST;
 }
 
-interface AuthSuccessAction {
+export interface AuthSuccessAction {
   type: typeof AUTH_SUCCESS;
   baseChannel: string;
 }
 
-interface AuthErrorAction {
+export interface AuthErrorAction {
   type: typeof AUTH_ERROR;
   error: Error;
 }
 
-interface DisconnectedAction {
+export interface DisconnectedAction {
   type: typeof DISCONNECTED;
   code: number;
 }
 
-interface DeauthenticateAction {
+export interface DeauthenticateAction {
   type: typeof DEAUTHENTICATE;
 }
 
-interface SubscribeRequestAction {
+export interface SubscribeRequestAction {
   type: typeof SUBSCRIBE_REQUEST;
   channel: string;
   subscription: typeof UPDATE_STATE | typeof UPDATE_REPORTS;
 }
 
-interface SubscribeSuccessAction {
+export interface SubscribeSuccessAction {
   type: typeof SUBSCRIBE_SUCCESS;
   channel: string;
 }
 
-interface SubscribeErrorAction {
+export interface SubscribeErrorAction {
   type: typeof SUBSCRIBE_ERROR;
   error: Error;
   status: string;
 }
 
-interface UnsubscribeAction {
+export interface UnsubscribeAction {
   type: typeof UNSUBSCRIBE;
   channel: string;
 }
@@ -534,27 +533,27 @@ interface RemoveRequest {
   id: unknown;
 }
 export type UpdateReportsRequest = ListRequest | AddRequest | RemoveRequest;
-interface UpdateReportsAction {
+export interface UpdateReportsAction {
   type: typeof UPDATE_REPORTS;
   request: UpdateReportsRequest;
 }
 
-interface GetReportError {
+export interface GetReportError {
   type: typeof GET_REPORT_ERROR;
   error: Error;
 }
 
-interface GetReportSuccess {
+export interface GetReportSuccess {
   type: typeof GET_REPORT_SUCCESS;
   data: { payload: string };
 }
 
-interface ErrorAction {
+export interface ErrorAction {
   type: typeof ERROR;
   payload: string;
 }
 
-export type StoreAction =
+export type StoreActionWithoutUpdateStateOrLiftedAction =
   | ChangeSectionAction
   | ChangeThemeAction
   | MonitorActionAction
@@ -572,7 +571,6 @@ export type StoreAction =
   | ClearNotificationAction
   | GetReportRequest
   | SetStateAction
-  | UpdateStateAction
   | RemoveInstanceAction
   | ConnectRequestAction
   | ConnectSuccessAction
@@ -591,3 +589,13 @@ export type StoreAction =
   | GetReportError
   | GetReportSuccess
   | ErrorAction;
+
+export type StoreActionWithoutUpdateState =
+  | StoreActionWithoutUpdateStateOrLiftedAction
+  | LiftedActionAction;
+
+export type StoreActionWithoutLiftedAction =
+  | StoreActionWithoutUpdateStateOrLiftedAction
+  | UpdateStateAction;
+
+export type StoreAction = StoreActionWithoutUpdateState | UpdateStateAction;

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

@@ -56,7 +56,7 @@ export interface State {
 }
 
 export interface InstancesState {
-  selected: string | null;
+  selected: string | number | null;
   current: string | number;
   sync: boolean;
   connections: { [id: string]: (string | number)[] };

packages/redux-devtools-app/src/utils/monitorActions.ts

@@ -21,7 +21,10 @@ export function sweep(state: State): State {
 }
 
 export function nonReduxDispatch(
-  store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>,
+  store: MiddlewareAPI<
+    Dispatch<StoreAction>,
+    { readonly instances: InstancesState }
+  >,
   message: string,
   instanceId: string | number,
   action: DispatchAction,