Add PortMessanger interface

thetarnav · thetarnav · commit e26633473d09 · 2024-12-17T21:03:58.000+01:00
diff --git a/packages/extension/background/background.ts b/packages/extension/background/background.ts
@@ -160,8 +160,8 @@ chrome.runtime.onConnect.addListener(async port => {
         let data: TabData
 
         const config: TabDataConfig = {
-            toContent: content_messanger.postPortMessage,
-            fromContent: content_messanger.onPortMessage,
+            toContent: content_messanger.post,
+            fromContent: content_messanger.on,
             forwardToDevtools: fn => (forwardHandler = fn),
             forwardToClient: message => port.postMessage(message),
         }
@@ -181,15 +181,15 @@ chrome.runtime.onConnect.addListener(async port => {
         tab_data_map.set(tab_id, data)
 
         // "Versions" from content-script
-        bridge.once(content_messanger.onPortMessage, 'Versions', v => {
+        bridge.once(content_messanger.on, 'Versions', v => {
             data.setVersions(v)
 
             // Change the popup icon to indicate that Solid is present on the page
             chrome.action.setIcon({tabId: tab_id, path: icons.blue})
         })
 
         // "DetectSolid" from content-script (realWorld)
-        content_messanger.onPortMessage('Detected', state => data.set_detected(state))
+        content_messanger.on('Detected', state => data.set_detected(state))
 
         port.onDisconnect.addListener(() => {
             data.disconnected()
@@ -220,7 +220,7 @@ chrome.runtime.onConnect.addListener(async port => {
         const content_messanger = await data.untilContentScriptConnect()
 
         // "Versions" means the devtools client is present
-        data.onVersions(v => devtools_messanger.postPortMessage('Versions', v))
+        data.onVersions(v => devtools_messanger.post('Versions', v))
 
         port.onDisconnect.addListener(() => {
             content_messanger.post('DevtoolsClosed')
@@ -244,16 +244,16 @@ chrome.runtime.onConnect.addListener(async port => {
         const content_messanger = await data.untilContentScriptConnect()
 
         data.onVersions(v => {
-            panel_messanger.postPortMessage('Versions', v)
+            panel_messanger.post('Versions', v)
             // notify the content script that the devtools panel is ready
             content_messanger.post('DevtoolsOpened')
         })
 
         content_messanger.on('ResetPanel', () => {
-            panel_messanger.postPortMessage('ResetPanel')
+            panel_messanger.post('ResetPanel')
         })
         data.onContentScriptDisconnect(() => {
-            panel_messanger.postPortMessage('ResetPanel')
+            panel_messanger.post('ResetPanel')
         })
 
         if (!data.config) {
@@ -273,7 +273,7 @@ chrome.runtime.onConnect.addListener(async port => {
         }
 
         // Forward messages from Panel to Content Script (client)
-        panel_messanger.onForwardMessage(message => {
+        panel_messanger.onForward(message => {
             if (!data.config) {
                 error(`Cannot forward message, no ${bridge.Place_Name.Content_Script} connection.`, message)
             } else {
@@ -296,10 +296,10 @@ chrome.runtime.onConnect.addListener(async port => {
             port)
 
         data.onVersions(v => {
-            popup_messanger.postPortMessage('Versions', v)
+            popup_messanger.post('Versions', v)
         })
         data.onDetected(state => {
-            popup_messanger.postPortMessage('Detected', state)
+            popup_messanger.post('Detected', state)
         })
 
         break
diff --git a/packages/extension/content/content.ts b/packages/extension/content/content.ts
@@ -28,8 +28,7 @@ let devtools_opened = false
 const fromClient = bridge.makeMessageListener(bridge.Place_Name.Content_Script)
 const toClient   = bridge.makePostMessage()
 
-const {postPortMessage: toBackground, onPortMessage: fromBackground} =
-    bridge.createPortMessanger(
+const bg_messanger = bridge.createPortMessanger(
         bridge.Place_Name.Content_Script,
         bridge.Place_Name.Background,
         port)
@@ -74,7 +73,7 @@ window.addEventListener('message', e => {
 
     const state = e.data.state as bridge.DetectionState
 
-    toBackground('Detected', state)
+    bg_messanger.post('Detected', state)
 
     /* Load Debugger_Real_World */
     if (state.Debugger && !debugger_real_world_added) {
@@ -94,26 +93,26 @@ fromClient('Debugger_Connected', versions => {
         'color: #e38b1b',
     )
 
-    toBackground('Versions', {
+    bg_messanger.post('Versions', {
         client:         versions.client,
         solid:          versions.solid,
         extension:      extension_version,
         expectedClient: import.meta.env.EXPECTED_CLIENT,
     })
 
-    fromClient('ResetPanel', () => toBackground('ResetPanel'))
+    fromClient('ResetPanel', () => bg_messanger.post('ResetPanel'))
 
     if (devtools_opened) toClient('DevtoolsOpened')
 })
 
 // After page reload, the content script is reloaded but the background script is not.
 // This means that 'DevtoolsOpened' message will come after the Client is setup.
 // We need to send it after it connects.
-fromBackground('DevtoolsOpened', () => {
+bg_messanger.on('DevtoolsOpened', () => {
     devtools_opened = true
     toClient('DevtoolsOpened')
 })
-fromBackground('DevtoolsClosed', () => toClient('DevtoolsClosed'))
+bg_messanger.on('DevtoolsClosed', () => toClient('DevtoolsClosed'))
 
 fromClient(e => {
     // forward all client messages to the background script in
diff --git a/packages/extension/devtools/devtools.ts b/packages/extension/devtools/devtools.ts
@@ -16,7 +16,7 @@ log(bridge.Place_Name.Devtools_Script+' loaded.')
 // Create a connection to the background page
 const port = chrome.runtime.connect({name: bridge.ConnectionName.Devtools})
 
-const {onPortMessage: fromBackground} = bridge.createPortMessanger(
+const bg_messanger = bridge.createPortMessanger(
     bridge.Place_Name.Devtools_Script,
     bridge.Place_Name.Background,
     port)
@@ -25,7 +25,7 @@ const {onPortMessage: fromBackground} = bridge.createPortMessanger(
 const PATH_PREFIX = import.meta.env.BROWSER === 'firefox' ? '/' : ''
 
 // "Versions" mean that devtools client is on the page
-bridge.once(fromBackground, 'Versions', () => {
+bridge.once(bg_messanger.on, 'Versions', () => {
 
     log('Debugger connected -> Creating Devtools_Panel...')
 
diff --git a/packages/extension/panel/panel.tsx b/packages/extension/panel/panel.tsx
@@ -14,11 +14,11 @@ import '@solid-devtools/frontend/dist/styles.css'
 log(bridge.Place_Name.Panel+' loaded.')
 
 const port = chrome.runtime.connect({name: bridge.ConnectionName.Panel})
-const {postPortMessage: toBackground, onPortMessage: fromBackground} =
-    bridge.createPortMessanger<Debugger.OutputChannels, Debugger.InputChannels>(
-            bridge.Place_Name.Panel,
-            bridge.Place_Name.Background,
-            port)
+const bg_messanger = bridge.createPortMessanger
+    <Debugger.OutputChannels, Debugger.InputChannels>(
+        bridge.Place_Name.Panel,
+        bridge.Place_Name.Background,
+        port)
 
 function App() {
     const [versions, setVersions] = createSignal<bridge.Versions>({
@@ -28,13 +28,13 @@ function App() {
         extension: '',
     })
 
-    bridge.once(fromBackground, 'Versions', setVersions)
+    bridge.once(bg_messanger.on, 'Versions', setVersions)
 
     const devtools = createDevtools()
 
-    devtools.bridge.output.listen(e => toBackground(e.name, e.details))
+    devtools.bridge.output.listen(e => bg_messanger.post(e.name, e.details))
 
-    fromBackground(e => {
+    bg_messanger.on(e => {
         // some events are internal and should not be forwarded to the devtools
         if (!(e.name in devtools.bridge.input)) return
         devtools.bridge.input.emit(e.name as any, e.details)
diff --git a/packages/extension/popup/popup.tsx b/packages/extension/popup/popup.tsx
@@ -11,7 +11,7 @@ log(bridge.Place_Name.Popup+' loaded.')
 
 // Create a connection to the background page
 const port = chrome.runtime.connect({name: bridge.ConnectionName.Popup})
-const {onPortMessage: fromBackground} = bridge.createPortMessanger(
+const bg_messanger = bridge.createPortMessanger(
     bridge.Place_Name.Popup,
     bridge.Place_Name.Background,
     port)
@@ -23,8 +23,8 @@ const [detectionState, setDetectionState] = s.createSignal<bridge.DetectionState
     Debugger: false,
 })
 
-fromBackground('Detected', setDetectionState)
-bridge.once(fromBackground, 'Versions', setVersions)
+bg_messanger.on('Detected', setDetectionState)
+bg_messanger.on('Versions', setVersions)
 
 const App: s.Component = () => {
     return <>
diff --git a/packages/extension/shared/bridge.ts b/packages/extension/shared/bridge.ts
@@ -4,7 +4,7 @@ File for utilities, constants and types related to the communication between the
 
 */
 
-import {log, log_message} from '@solid-devtools/shared/utils'
+import {error, log, log_message} from '@solid-devtools/shared/utils'
 
 export const DEVTOOLS_ID_PREFIX = '[solid-devtools]_'
 
@@ -39,31 +39,35 @@ export type DetectEvent = {
 const LOG_MESSAGES = import.meta.env.DEV
 // const LOG_MESSAGES: boolean = true
 
+export interface PortMessanger<
+    IM extends {[K in string]: any},
+    OM extends {[K in string]: any},
+> {
+    post:      PostMessageFn<OM>
+    on:        OnMessageFn<IM>
+    onForward: (handler: (event: ForwardPayload) => void) => void
+}
+
 export function createPortMessanger<
     IM extends {[K in string]: any},
     OM extends {[K in string]: any},
 >(
     place_name_here: string,
     place_name_conn: string,
-    port: chrome.runtime.Port,
-): {
-    postPortMessage:  PostMessageFn<OM>
-    onPortMessage:    OnMessageFn<IM>
-    onForwardMessage: (handler: (event: ForwardPayload) => void) => void
-} {
+    _port: chrome.runtime.Port,
+): PortMessanger<IM, OM> {
+    let port: chrome.runtime.Port | null = _port
+
     let forwardHandler: ((event: ForwardPayload) => void) | undefined
     let listeners: {[K in any]?: ((event: any) => void)[]} = {}
 
-    let port_name = port.name.replace(DEVTOOLS_ID_PREFIX, '')
-
-    let connected = true
-    if (LOG_MESSAGES) log(`${port_name} port connected.`)
+    if (LOG_MESSAGES) log(`${place_name_here}-${place_name_conn} port connected.`)
 
     port.onDisconnect.addListener(() => {
-        if (LOG_MESSAGES) log(`${port_name} port disconnected.`)
-        connected = false
+        if (LOG_MESSAGES) log(`${place_name_here}-${place_name_conn} port disconnected.`)
         listeners = {}
-        port.onMessage.removeListener(onMessage)
+        _port.onMessage.removeListener(onMessage)
+        port = null
     })
 
     function onMessage(e: any) {
@@ -92,16 +96,20 @@ export function createPortMessanger<
     port.onMessage.addListener(onMessage)
 
     return {
-        postPortMessage: (name, details?: any) => {
-            if (!connected) return
-            port.postMessage({name, details})
+        post: (name, details?: any) => {
+            if (!port) {
+                error(`Trying to post ${String(name)} message to disconnected port ${place_name_here}-${place_name_conn}`)
+            } else {
+                port.postMessage({name, details})
+            }
         },
-        onPortMessage: (...args: [any, any] | [any]) => {
+        on: (...args: [any, any] | [any]) => {
 
             let name    = typeof args[0] === 'string' ? args[0] : '*'
             let handler = typeof args[0] === 'string' ? args[1] : args[0]
 
-            if (!connected) {
+            if (!port) {
+                error(`Trying to listen to disconnected port ${place_name_here}-${place_name_conn}`)
                 return () => {/**/}
             }
 
@@ -110,7 +118,7 @@ export function createPortMessanger<
             
             return () => (listeners[name] = arr.filter(l => l !== handler) as any)
         },
-        onForwardMessage(handler) {
+        onForward(handler) {
             forwardHandler = handler
         },
     }
