Eliminate relay

extension/src/app/api/filters.ts

@@ -78,17 +78,11 @@ function filterStates(computedStates, stateSanitizer) {
 
 export function filterState<S, A extends Action<unknown>>(
   state: LiftedState<S, A, unknown>,
-  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 }[] =

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<S, A extends Action<unknown>> {
   readonly instanceId: number;
 }
 
+interface ActionMessage<S, A extends Action<unknown>> {
+  readonly type: 'ACTION';
+  readonly payload: S;
+  readonly source: typeof source;
+  readonly instanceId: number;
+  readonly action: PerformAction<A> | A;
+  readonly maxAge: number;
+  readonly nextActionId: number;
+}
+
+interface StateMessage<S, A extends Action<unknown>> {
+  readonly type: 'STATE';
+  readonly payload: LiftedState<S, A, unknown>;
+  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<S, A extends Action<unknown>> =
   | LiftedMessage
   | PartialStateMessage<S, A>
-  | ExportMessage<S, A>;
+  | ExportMessage<S, A>
+  | ActionMessage<S, A>
+  | StateMessage<S, A>
+  | ErrorMessage
+  | InitInstanceMessage
+  | GetReportMessage
+  | StopMessage;
 
 export function toContentScript<S, A extends Action<unknown>>(
   message: ToContentScriptMessage<S, A>,

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

@@ -187,7 +187,23 @@ function __REDUX_DEVTOOLS_EXTENSION__<S, A extends Action<unknown>>(
       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__<S, A extends Action<unknown>>(
     );
   }
 
-  function relay(
-    type: 'ACTION',
-    state: S,
-    action: PerformAction<A>,
-    nextActionId: number
-  ): void;
-  function relay(
-    type: 'STATE',
-    state: LiftedState<S, A, unknown>,
-    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<S, A, unknown> | unknown,
-    action?: PerformAction<A> | 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__<S, A extends Action<unknown>>(
       }
       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__<S, A extends Action<unknown>>(
     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__<S, A extends Action<unknown>>(
       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__<S, A extends Action<unknown>>(
       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__<S, A extends Action<unknown>>(
         });
 
         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__<S, A extends Action<unknown>>(
         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__<S, A extends Action<unknown>>(
       return true;
     });
 
-    relay('INIT_INSTANCE');
+    toContentScript({
+      type: 'INIT_INSTANCE',
+      payload: undefined,
+      source,
+      instanceId,
+    });
     store.subscribe(handleChange);
 
     if (typeof reportId === 'undefined') {