Types

extension/src/background/store/apiMiddleware.ts

@@ -151,7 +151,7 @@ interface SerializedStateMessage<S, A extends Action<string>> {
   readonly committedState: boolean;
 }
 
-type UpdateStateRequest<S, A extends Action<string>> =
+export type UpdateStateRequest<S, A extends Action<string>> =
   | InitMessage<S, A>
   | LiftedMessage
   | SerializedPartialStateMessage
@@ -169,6 +169,30 @@ interface UpdateStateAction<S, A extends Action<string>> {
   readonly id: string | number;
 }
 
+type SplitUpdateStateRequestStart<S, A extends Action<string>> = {
+  split: 'start';
+} & Partial<UpdateStateRequest<S, A>>;
+
+interface SplitUpdateStateRequestChunk {
+  readonly split: 'chunk';
+  readonly chunk: [string, string];
+}
+
+interface SplitUpdateStateRequestEnd {
+  readonly split: 'end';
+}
+
+export type SplitUpdateStateRequest<S, A extends Action<string>> =
+  | SplitUpdateStateRequestStart<S, A>
+  | SplitUpdateStateRequestChunk
+  | SplitUpdateStateRequestEnd;
+
+interface SplitUpdateStateAction<S, A extends Action<string>> {
+  readonly type: typeof UPDATE_STATE;
+  request: SplitUpdateStateRequest<S, A>;
+  readonly id: string | number;
+}
+
 export type TabMessage =
   | StartAction
   | StopAction
@@ -177,11 +201,16 @@ export type TabMessage =
   | ImportAction
   | ActionAction
   | ExportAction;
-export type PanelMessage<S, A extends Action<string>> =
+export type PanelMessageWithoutNA<S, A extends Action<string>> =
-  | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>
   | SetPersistAction;
+export type PanelMessage<S, A extends Action<string>> =
+  | PanelMessageWithoutNA<S, A>
+  | NAAction;
+export type PanelMessageWithSplitAction<S, A extends Action<string>> =
+  | PanelMessage<S, A>
+  | SplitUpdateStateAction<S, A>;
 export type MonitorMessage =
   | NAAction
   | ErrorMessage
@@ -193,7 +222,7 @@ type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
 };
 type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: <S, A extends Action<string>>(
-    message: PanelMessage<S, A>,
+    message: PanelMessageWithSplitAction<S, A>,
   ) => void;
 };
 type MonitorPort = Omit<chrome.runtime.Port, 'postMessage'> & {
@@ -258,7 +287,9 @@ function toMonitors<S, A extends Action<string>>(
         throw err;
       }
 
-      const splitMessageStart = { split: 'start' };
+      const splitMessageStart: SplitUpdateStateRequestStart<S, A> = {
+        split: 'start',
+      };
       const toSplit: [string, string][] = [];
       let size = 0;
       for (const [key, value] of Object.entries(
@@ -272,7 +303,8 @@ function toMonitors<S, A extends Action<string>>(
           }
         }
 
-        splitMessageStart[key] = value;
+        (splitMessageStart as any)[key as keyof typeof splitMessageStart] =
+          value;
       }
 
       panelPort.postMessage({ ...action, request: splitMessageStart });

extension/src/devpanel/index.tsx

@@ -12,7 +12,12 @@ import App from '../app/App';
 import configureStore from './store/panelStore';
 
 import { Action, Store } from 'redux';
-import type { PanelMessage } from '../background/store/apiMiddleware';
+import {
+  PanelMessageWithoutNA,
+  PanelMessageWithSplitAction,
+  SplitUpdateStateRequest,
+  UpdateStateRequest,
+} from '../background/store/apiMiddleware';
 import type { StoreStateWithoutSocket } from './store/panelReducer';
 import { PersistGate } from 'redux-persist/integration/react';
 
@@ -94,7 +99,7 @@ function renderNA() {
   }, 3500);
 }
 
-let splitMessage;
+let splitMessage: SplitUpdateStateRequest<unknown, Action<string>>;
 
 function init(id: number) {
   renderNA();
@@ -102,39 +107,50 @@ function init(id: number) {
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
-    <S, A extends Action<string>>(message: PanelMessage<S, A>) => {
+    <S, A extends Action<string>>(
+      message: PanelMessageWithSplitAction<S, A>,
+    ) => {
       if (message.type === 'NA') {
         if (message.id === id) renderNA();
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
       } else {
         if (!rendered) renderDevTools();
 
-        if (message.type === UPDATE_STATE && message.request.split) {
+        if (
-          if (message.request.split === 'start') {
+          message.type === UPDATE_STATE &&
-            splitMessage = message.request;
+          (message.request as SplitUpdateStateRequest<S, A>).split
+        ) {
+          const request = message.request as SplitUpdateStateRequest<S, A>;
+
+          if (request.split === 'start') {
+            splitMessage = request;
             return;
           }
 
-          if (message.request.split === 'chunk') {
+          if (request.split === 'chunk') {
-            if (splitMessage[message.request.chunk[0]]) {
+            if ((splitMessage as Record<string, unknown>)[request.chunk[0]]) {
-              splitMessage[message.request.chunk[0]] +=
+              (splitMessage as Record<string, unknown>)[request.chunk[0]] +=
-                message.request.chunk[1];
+                request.chunk[1];
             } else {
-              splitMessage[message.request.chunk[0]] = message.request.chunk[1];
+              (splitMessage as Record<string, unknown>)[request.chunk[0]] =
+                request.chunk[1];
             }
             return;
           }
 
-          if (message.request.split === 'end') {
+          if (request.split === 'end') {
-            store!.dispatch({ ...message, request: splitMessage });
+            store!.dispatch({
+              ...message,
+              request: splitMessage as UpdateStateRequest<S, A>,
+            });
             return;
           }
 
           throw new Error(
-            `Unable to process split message with type: ${message.request.split}`,
+            `Unable to process split message with type: ${(request as any).split}`,
           );
         } else {
-          store!.dispatch(message);
+          store!.dispatch(message as PanelMessageWithoutNA<S, A>);
         }
       }
     },