From fcfe18c1db993f6b2032530b674bbd2199edfa6a Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 19 Jul 2021 23:15:22 -0400 Subject: [PATCH] More work on types --- .../extension/background/openWindow.ts | 4 ++- .../browser/extension/inject/contentScript.ts | 2 +- .../browser/extension/inject/pageScript.ts | 35 +++++++++++-------- .../extension/inject/pageScriptWrap.ts | 4 ++- .../redux-devtools-app/src/actions/index.ts | 20 ++++++++++- packages/redux-devtools-utils/src/index.ts | 24 ++++++------- 6 files changed, 59 insertions(+), 30 deletions(-) diff --git a/extension/src/browser/extension/background/openWindow.ts b/extension/src/browser/extension/background/openWindow.ts index 0e60a872..2793ff8f 100644 --- a/extension/src/browser/extension/background/openWindow.ts +++ b/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; diff --git a/extension/src/browser/extension/inject/contentScript.ts b/extension/src/browser/extension/inject/contentScript.ts index e960c0d5..8675f1d0 100644 --- a/extension/src/browser/extension/inject/contentScript.ts +++ b/extension/src/browser/extension/inject/contentScript.ts @@ -214,7 +214,7 @@ function tryCatch>( } 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][] = []; diff --git a/extension/src/browser/extension/inject/pageScript.ts b/extension/src/browser/extension/inject/pageScript.ts index 29252275..6b1fff7d 100644 --- a/extension/src/browser/extension/inject/pageScript.ts +++ b/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?: >(action: A) => A; + readonly actionCreators: { + readonly [key: string]: ActionCreator>; + }; } export interface Config extends ConfigWithExpandedMaxAge { @@ -161,7 +169,7 @@ function __REDUX_DEVTOOLS_EXTENSION__>( let store: EnhancedStore; 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__>( } 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.reorder && type === 'REORDER_ACTION') return; - if (!features.import && type === 'IMPORT_STATE') return; - if (!features.lock && type === 'LOCK_CHANGES') return; - if (!features.pause && type === 'PAUSE_RECORDING') return; + if (!features.skip && action.type === 'TOGGLE_ACTION') return; + if (!features.reorder && action.type === 'REORDER_ACTION') return; + if (!features.import && action.type === 'IMPORT_STATE') return; + if (!features.lock && action.type === 'LOCK_CHANGES') 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__>( return; case 'START': monitor.start(true); - if (!actionCreators && config.actionCreators) { - actionCreators = getActionsArray(config.actionCreators); + if (!actionCreators && config!.actionCreators) { + actionCreators = getActionsArray(config!.actionCreators); } relayState(undefined, { name: config!.name || document.title, diff --git a/extension/src/browser/extension/inject/pageScriptWrap.ts b/extension/src/browser/extension/inject/pageScriptWrap.ts index 7f28cfea..3c7f5147 100644 --- a/extension/src/browser/extension/inject/pageScriptWrap.ts +++ b/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); } diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index 12c798ac..4f5d79f5 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/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> + | readonly Action[]; + 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; diff --git a/packages/redux-devtools-utils/src/index.ts b/packages/redux-devtools-utils/src/index.ts index fd4ab9fc..b4af6b8a 100644 --- a/packages/redux-devtools-utils/src/index.ts +++ b/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>; + readonly args: readonly string[]; +} + // eslint-disable-next-line @typescript-eslint/ban-types function flatTree( - obj: { [key: string]: (...args: any[]) => unknown }, + obj: { [key: string]: ActionCreator> }, namespace = '' ) { - let functions: { - name: string; - func: (...args: any[]) => unknown; - args: string[]; - }[] = []; + let functions: ActionCreatorObject[] = []; 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>; }) { 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 }, - actionCreators: { - [selected: string]: { func: (...args: any[]) => Action }; - } + action: string | { args: string[]; rest: string; selected: number }, + actionCreators: readonly ActionCreatorObject[] ) { if (typeof action === 'string') { // eslint-disable-next-line @typescript-eslint/no-implied-eval