From 86c270fa91adaa387b6802e74a98eb43038e0386 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sat, 17 Jul 2021 08:47:05 -0400 Subject: [PATCH] Eliminate relay --- extension/src/app/api/filters.ts | 6 - extension/src/app/api/index.ts | 55 ++++++- .../browser/extension/inject/pageScript.ts | 148 ++++++++++-------- 3 files changed, 138 insertions(+), 71 deletions(-) diff --git a/extension/src/app/api/filters.ts b/extension/src/app/api/filters.ts index f4f6374d..a631281a 100644 --- a/extension/src/app/api/filters.ts +++ b/extension/src/app/api/filters.ts @@ -78,17 +78,11 @@ function filterStates(computedStates, stateSanitizer) { export function filterState>( state: LiftedState, - type, localFilter: LocalFilter | undefined, stateSanitizer: ((state: S, index: number) => S) | undefined, actionSanitizer: ((action: A, id: number) => A) | undefined, - nextActionId: number | undefined, predicate: ((state: S, action: A) => boolean) | undefined ) { - if (type === 'ACTION') { - return !stateSanitizer ? state : stateSanitizer(state, nextActionId - 1); - } else if (type !== 'STATE') return state; - if (predicate || !noFiltersApplied(localFilter)) { const filteredStagedActionIds: number[] = []; const filteredComputedStates: { state: S; error?: string | undefined }[] = diff --git a/extension/src/app/api/index.ts b/extension/src/app/api/index.ts index 24d24e9d..bc740646 100644 --- a/extension/src/app/api/index.ts +++ b/extension/src/app/api/index.ts @@ -8,6 +8,7 @@ import generateId from './generateInstanceId'; import { PageScriptToContentScriptMessage } from '../../browser/extension/inject/contentScript'; import { Config } from '../../browser/extension/inject/pageScript'; import { Action } from 'redux'; +import { LiftedState, PerformAction } from '@redux-devtools/instrument'; const listeners = {}; export const source = '@devtools-page'; @@ -186,10 +187,62 @@ interface ExportMessage> { readonly instanceId: number; } +interface ActionMessage> { + readonly type: 'ACTION'; + readonly payload: S; + readonly source: typeof source; + readonly instanceId: number; + readonly action: PerformAction | A; + readonly maxAge: number; + readonly nextActionId: number; +} + +interface StateMessage> { + readonly type: 'STATE'; + readonly payload: LiftedState; + readonly source: typeof source; + readonly instanceId: number; + readonly libConfig?: unknown; +} + +interface ErrorMessage { + readonly type: 'ERROR'; + readonly payload: unknown; + readonly source: typeof source; + readonly instanceId: number; +} + +interface InitInstanceMessage { + readonly type: 'INIT_INSTANCE'; + readonly payload: undefined; + readonly source: typeof source; + readonly instanceId: number; +} + +interface GetReportMessage { + readonly type: 'GET_REPORT'; + readonly payload: string; + readonly source: typeof source; + readonly instanceId: number; +} + +interface StopMessage { + readonly type: 'STOP'; + readonly payload: undefined; + readonly source: typeof source; + readonly instanceId: number; +} + type ToContentScriptMessage> = | LiftedMessage | PartialStateMessage - | ExportMessage; + | ExportMessage + | ActionMessage + | StateMessage + | ErrorMessage + | InitInstanceMessage + | GetReportMessage + | StopMessage; export function toContentScript>( message: ToContentScriptMessage, diff --git a/extension/src/browser/extension/inject/pageScript.ts b/extension/src/browser/extension/inject/pageScript.ts index 046688a0..a50b0df4 100644 --- a/extension/src/browser/extension/inject/pageScript.ts +++ b/extension/src/browser/extension/inject/pageScript.ts @@ -187,7 +187,23 @@ function __REDUX_DEVTOOLS_EXTENSION__>( relayAction.cancel(); const state = liftedState || store.liftedStore.getState(); sendingActionId = state.nextActionId; - relay('STATE', state, undefined, undefined, libConfig); + toContentScript( + { + type: 'STATE', + payload: filterState( + state, + localFilter, + stateSanitizer, + actionSanitizer, + predicate + ), + source, + instanceId, + libConfig, + }, + serializeState, + serializeAction + ); }, latency ); @@ -226,58 +242,6 @@ function __REDUX_DEVTOOLS_EXTENSION__>( ); } - function relay( - type: 'ACTION', - state: S, - action: PerformAction, - nextActionId: number - ): void; - function relay( - type: 'STATE', - state: LiftedState, - action?: undefined, - nextActionId?: undefined, - libConfig?: unknown - ): void; - function relay(type: 'ERROR', message: unknown): void; - function relay(type: 'INIT_INSTANCE'): void; - function relay(type: 'GET_REPORT', reportId: string): void; - function relay(type: 'STOP'): void; - function relay( - type: string, - state?: S | LiftedState | unknown, - action?: PerformAction | undefined, - nextActionId?: number | undefined, - libConfig?: unknown - ) { - const message = { - type, - payload: filterState( - state, - type, - localFilter, - stateSanitizer, - actionSanitizer, - nextActionId, - predicate - ), - source, - instanceId, - }; - - if (type === 'ACTION') { - message.action = !actionSanitizer - ? action - : actionSanitizer(action.action, nextActionId - 1); - message.maxAge = getMaxAge(); - message.nextActionId = nextActionId; - } else if (libConfig) { - message.libConfig = libConfig; - } - - toContentScript(message, serializeState, serializeAction); - } - const relayAction = throttle(() => { const liftedState = store.liftedStore.getState(); const nextActionId = liftedState.nextActionId; @@ -298,11 +262,25 @@ function __REDUX_DEVTOOLS_EXTENSION__>( } const state = liftedState.computedStates[liftedState.computedStates.length - 1].state; - relay( - 'ACTION', - state, - liftedState.actionsById[nextActionId - 1], - nextActionId + toContentScript( + { + type: 'ACTION', + payload: !stateSanitizer + ? state + : stateSanitizer(state, nextActionId - 1), + source, + instanceId, + action: !actionSanitizer + ? liftedState.actionsById[nextActionId - 1] + : actionSanitizer( + liftedState.actionsById[nextActionId - 1].action, + nextActionId - 1 + ), + maxAge: getMaxAge(), + nextActionId, + }, + serializeState, + serializeAction ); return; } @@ -319,7 +297,22 @@ function __REDUX_DEVTOOLS_EXTENSION__>( sendingActionId = nextActionId; if (typeof payload === 'undefined') return; if ('skippedActionIds' in payload) { - relay('STATE', payload); + toContentScript( + { + type: 'STATE', + payload: filterState( + payload, + localFilter, + stateSanitizer, + actionSanitizer, + predicate + ), + source, + instanceId, + }, + serializeState, + serializeAction + ); return; } toContentScript( @@ -341,7 +334,12 @@ function __REDUX_DEVTOOLS_EXTENSION__>( const result = evalAction(action, actionCreators); (store.initialDispatch || store.dispatch)(result); } catch (e) { - relay('ERROR', e.message); + toContentScript({ + type: 'ERROR', + payload: e.message, + source, + instanceId, + }); } } @@ -352,7 +350,12 @@ function __REDUX_DEVTOOLS_EXTENSION__>( if (!nextLiftedState) return; store.liftedStore.dispatch({ type: 'IMPORT_STATE', ...nextLiftedState }); } catch (e) { - relay('ERROR', e.message); + toContentScript({ + type: 'ERROR', + payload: e.message, + source, + instanceId, + }); } } @@ -413,7 +416,12 @@ function __REDUX_DEVTOOLS_EXTENSION__>( }); if (reportId) { - relay('GET_REPORT', reportId); + toContentScript({ + type: 'GET_REPORT', + payload: reportId, + source, + instanceId, + }); reportId = null; } return; @@ -421,7 +429,14 @@ function __REDUX_DEVTOOLS_EXTENSION__>( monitor.stop(); relayAction.cancel(); relayState.cancel(); - if (!message.failed) relay('STOP'); + if (!message.failed) { + toContentScript({ + type: 'STOP', + payload: undefined, + source, + instanceId, + }); + } } } @@ -471,7 +486,12 @@ function __REDUX_DEVTOOLS_EXTENSION__>( return true; }); - relay('INIT_INSTANCE'); + toContentScript({ + type: 'INIT_INSTANCE', + payload: undefined, + source, + instanceId, + }); store.subscribe(handleChange); if (typeof reportId === 'undefined') {