refactor!: Change the message structure from {name, details} to {kind, data}

Author: thetarnav

.changeset/fair-dryers-repair.md

@@ -0,0 +1,9 @@
+---
+"@solid-devtools/debugger": minor
+"@solid-devtools/frontend": minor
+"@solid-devtools/overlay": minor
+"@solid-devtools/shared": minor
+"@solid-devtools/extension": minor
+---
+
+Change the message structure from {name, details} to {kind, data}

extension/src/background.ts

@@ -245,9 +245,9 @@ function on_message(port: Port, e: Message) {
         assert(content)
 
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-        switch (e.name) {
+        switch (e.kind) {
         case 'Detected': {
-            content.detection = e.details
+            content.detection = e.data
 
             if (popup) {
                 port_post_message_obj(popup.port, e)
@@ -258,7 +258,7 @@ function on_message(port: Port, e: Message) {
             break
         }
         case 'Versions': {
-            content.versions = e.details
+            content.versions = e.data
 
             if (popup) {
                 port_post_message_obj(popup.port, e)
@@ -297,7 +297,7 @@ function on_message(port: Port, e: Message) {
         if (content) {
             port_post_message_obj(content.port, e)
         } else {
-            error(`Cannot forward ${Place_Name.Panel} -> ${Place_Name.Content} - ${e.name}:`, e.details)
+            error(`Cannot forward ${Place_Name.Panel} -> ${Place_Name.Content} - ${e.kind}:`, e.data)
         }
 
         break

extension/src/content.ts

@@ -73,9 +73,9 @@ let devtools_opened = false
 /* From Background */
 port_on_message(port, e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-    switch (e.name) {
+    switch (e.kind) {
     case 'DevtoolsOpened':
-        devtools_opened = e.details
+        devtools_opened = e.data
         window_post_message_obj(e)
         break
     default:
@@ -87,7 +87,7 @@ port_on_message(port, e => {
 /* From Client / Detector_Real_World */
 window_on_message(e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-    switch (e.name) {
+    switch (e.kind) {
     case 'Debugger_Connected': {
 
         // eslint-disable-next-line no-console
@@ -98,9 +98,9 @@ window_on_message(e => {
         )
 
         port_post_message(port, 'Versions', {
-            client:         e.details.client,
-            solid:          e.details.solid,
-            extension:      extension_version,
+            client:          e.data.client,
+            solid:           e.data.solid,
+            extension:       extension_version,
             client_expected: import.meta.env.EXPECTED_CLIENT,
         })
 

extension/src/devtools.ts

@@ -31,7 +31,7 @@ let panel: Panel | undefined
 port_on_message(port, e => {
 
     // "Versions" mean that devtools client is on the page
-    if (e.name === 'Versions' && e.details && !panel_creating && !panel) {
+    if (e.kind === 'Versions' && e.data && !panel_creating && !panel) {
         panel_creating = true
 
         log('Debugger connected -> Creating Devtools_Panel...')

extension/src/panel.tsx

@@ -50,9 +50,9 @@ function App() {
     const port = chrome.runtime.connect({name: ConnectionName.Panel})
     port_on_message(port, e => {
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-        switch (e.name) {
+        switch (e.kind) {
         case 'Versions':
-            setVersions(e.details ?? empty_versions)
+            setVersions(e.data ?? empty_versions)
             break
         default:
             /* Client -> Devtools */
@@ -65,14 +65,14 @@ function App() {
 
     devtools.output.listen(e => {
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-        switch (e.name) {
+        switch (e.kind) {
         case 'ConsoleInspectValue': {
             /*
              `chrome.devtools.inspectedWindow.eval` runs in a devtools console
              so the value can be additionally inspected with `inspect()`
             */
             let get_value = `window[${JSON.stringify(debug.GLOBAL_GET_VALUE)}]`
-            let value_id = JSON.stringify(e.details)
+            let value_id = JSON.stringify(e.data)
 
             chrome.devtools.inspectedWindow.eval(
                 /*js*/`typeof ${get_value} === 'function' && (() => {

extension/src/popup.tsx

@@ -26,12 +26,12 @@ const [detectionState, setDetectionState] = s.createSignal(empty_detection_state
 
 port_on_message(port, e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-    switch (e.name) {
+    switch (e.kind) {
     case 'Detected':
-        setDetectionState(e.details ?? empty_detection_state)
+        setDetectionState(e.data ?? empty_detection_state)
         break
     case 'Versions':
-        setVersions(e.details)
+        setVersions(e.data)
         break
     }
 })

extension/src/real_world.ts

@@ -97,13 +97,13 @@ async function attach_debugger() {
     /* From Content */
     window_on_message(e => {
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
-        switch (e.name) {
+        switch (e.kind) {
         case 'DevtoolsOpened':
-            instance.toggleEnabled(e.details)
+            instance.toggleEnabled(e.data)
             break
         default:
             /* Content -> Debugger */
-            instance.emit(e.name as any, e.details)
+            instance.emit(e as any)
         }
     })
 

extension/src/shared.ts

@@ -5,6 +5,7 @@ File for utilities, constants and types related to the communication between the
 */
 
 import * as debug from '@solid-devtools/debugger/types'
+import {type Union} from '@solid-devtools/shared/utils'
 
 
 export const ICON_SOLID_BLUE_16  = 'solid-normal-16.png'
@@ -54,9 +55,9 @@ export const enum ConnectionName {
 }
 
 export type DetectionState = {
-    solid:    boolean
+    solid:     boolean
     solid_dev: boolean
-    setup: boolean
+    setup:     boolean
 }
 
 export type Versions = {
@@ -87,15 +88,10 @@ export type Channels = debug.InputChannels
               & debug.OutputChannels
               & GeneralChannels
 
-export type Message = {
-    [K in keyof Channels]: {
-        name:    K,
-        details: Channels[K],
-    }
-}[keyof Channels]
+export type Message = Union<Channels>
 
 export function to_message(e: any): Message | null {
-    return e && typeof e === 'object' && typeof e['name'] === 'string'
+    return e && typeof e === 'object' && typeof e['kind'] === 'string'
         ? e
         : null
 }
@@ -110,9 +106,9 @@ export function port_on_message(port: Port, cb: (e: Message) => void) {
 }
 
 export function port_post_message<K extends keyof Channels>(
-    port: Port, name: K, details: Channels[K],
+    port: Port, kind: K, data: Channels[K],
 ) {
-    port.postMessage({name, details})
+    port.postMessage({kind, data})
 }
 export function port_post_message_obj(port: Port, e: Message) {
     port.postMessage(e)
@@ -126,9 +122,9 @@ export function window_on_message(cb: (e: Message) => void) {
 }
 
 export function window_post_message<K extends keyof Channels>(
-    name: K, details: Channels[K],
+    kind: K, data: Channels[K],
 ) {
-    postMessage({name, details})
+    postMessage({kind, data})
 }
 export function window_post_message_obj(e: Message) {
     postMessage(e)

packages/debugger/src/dependency/index.ts

@@ -1,6 +1,7 @@
+import * as s from 'solid-js'
 import {throttle} from '@solid-primitives/scheduled'
 import {defer} from '@solid-primitives/utils'
-import {type Accessor, createEffect, createMemo} from 'solid-js'
+import {msg} from '@solid-devtools/shared/utils'
 import {DevtoolsMainView, NodeType} from '../main/constants.ts'
 import {ObjectType, getObjectById} from '../main/id.ts'
 import {type NodeID, type Solid} from '../main/types.ts'
@@ -13,8 +14,8 @@ export {type SerializedDGraph} from './collect.ts'
 export type DGraphUpdate = SerializedDGraph.Graph | null
 
 export function createDependencyGraph(props: {
-    enabled:        Accessor<boolean>
-    inspectedState: Accessor<InspectedState>
+    enabled:        s.Accessor<boolean>
+    inspectedState: s.Accessor<InspectedState>
     onNodeUpdate:   (nodeId: NodeID) => void
     emit:           OutputEmit
 }) {
@@ -30,7 +31,7 @@ export function createDependencyGraph(props: {
         })
     }
 
-    const inspectedNode = createMemo(() => {
+    const inspectedNode = s.createMemo(() => {
         const state = props.inspectedState()
 
         if (state.signalId) {
@@ -57,19 +58,19 @@ export function createDependencyGraph(props: {
             type === NodeType.Context
         ) {
             clearListeners = null
-            props.emit('DgraphUpdate', null)
+            props.emit(msg('DgraphUpdate', null))
             return
         }
 
         const dgraph = collectDependencyGraph(node as Solid.Computation | Solid.Signal, {
             onNodeUpdate,
         })
         clearListeners = dgraph.clearListeners
-        props.emit('DgraphUpdate', dgraph.graph)
+        props.emit(msg('DgraphUpdate', dgraph.graph))
     }
     const triggerInspect = throttle(inspectDGraph, 200)
 
-    createEffect(
+    s.createEffect(
         defer([props.enabled, inspectedNode], () => {
             queueMicrotask(inspectDGraph)
         }),

packages/debugger/src/inspector/index.ts

@@ -1,4 +1,4 @@
-import {warn} from '@solid-devtools/shared/utils'
+import {msg, warn} from '@solid-devtools/shared/utils'
 import {scheduleIdle, throttle} from '@solid-primitives/scheduled'
 import {type Accessor, createEffect, onCleanup} from 'solid-js'
 import {type OutputEmit} from '../main/index.ts'
@@ -99,7 +99,7 @@ export function createInspector(props: {
 
                 // Emit updates
                 if (batchedUpdates.length) {
-                    props.emit('InspectorUpdate', batchedUpdates)
+                    props.emit(msg('InspectorUpdate', batchedUpdates))
                 }
             })
 
@@ -164,7 +164,7 @@ export function createInspector(props: {
                     observedPropsMap: propsMap,
                 })
 
-                props.emit('InspectedNodeDetails', result.details)
+                props.emit(msg('InspectedNodeDetails', result.details))
 
                 valueMap        = result.valueMap
                 lastDetails     = result.details