Log messages received by debugger

Author: thetarnav

.changeset/modern-chairs-hunt.md

@@ -0,0 +1,8 @@
+---
+"@solid-devtools/extension": patch
+"@solid-devtools/debugger": patch
+"@solid-devtools/shared": patch
+"solid-devtools": patch
+---
+
+Log messages recieved.

build.ts

@@ -60,6 +60,7 @@ export function get_common_esbuild_options(is_dev: boolean, dist_dirname: string
         treeShaking: !is_dev,
         logLevel:    is_dev ? 'debug' : 'warning',
         color:       true,
+        dropLabels:  [is_dev ? 'PROD' : 'DEV'],
     }
 }
 

packages/debugger/src/main/index.ts

@@ -1,7 +1,8 @@
 import {createEventBus, createGlobalEmitter, type GlobalEmitter} from '@solid-primitives/event-bus'
 import {createStaticStore} from '@solid-primitives/static-store'
 import {defer} from '@solid-primitives/utils'
-import {batch, createComputed, createEffect, createMemo, createSignal} from 'solid-js'
+import * as s from 'solid-js'
+import {log_message} from '@solid-devtools/shared/utils'
 import {createDependencyGraph, type DGraphUpdate} from '../dependency/index.ts'
 import {createInspector, type InspectorUpdate, type ToggleInspectedValueData} from '../inspector/index.ts'
 import {createLocator} from '../locator/index.ts'
@@ -69,14 +70,14 @@ const [modules, toggleModules] = createStaticStore({
 })
 
 // The debugger can be enabled by devtools or by the locator
-const debuggerEnabled = createMemo(() => modules.debugger || modules.locatorKeyPressSignal())
-const dgraphEnabled = createMemo(() => modules.dgraph && debuggerEnabled())
+const debuggerEnabled = s.createMemo(() => modules.debugger || modules.locatorKeyPressSignal())
+const dgraphEnabled = s.createMemo(() => modules.dgraph && debuggerEnabled())
 // locator is enabled if debugger is enabled, and user pressed the key to activate it, or the plugin activated it
-const locatorEnabled = createMemo(
+const locatorEnabled = s.createMemo(
     () => (modules.locatorKeyPressSignal() || modules.locator) && debuggerEnabled(),
 )
 
-createEffect(
+s.createEffect(
     defer(debuggerEnabled, enabled => {
         hub.output.emit('DebuggerEnabled', enabled)
     }),
@@ -90,7 +91,7 @@ let currentView: DevtoolsMainView = DEFAULT_MAIN_VIEW
 const viewChange = createEventBus<DevtoolsMainView>()
 
 function setView(view: DevtoolsMainView) {
-    batch(() => {
+    s.batch(() => {
         // setStructureEnabled(view === DevtoolsMainView.Structure)
         // setDgraphEnabled(view === DevtoolsMainView.Dgraph)
         viewChange.emit((currentView = view))
@@ -125,12 +126,12 @@ const INITIAL_INSPECTED_STATE = {
     treeWalkerOwnerId: null,
 } as const satisfies Debugger.OutputChannels['InspectedState']
 
-const [inspectedState, setInspectedState] = createSignal<
+const [inspectedState, setInspectedState] = s.createSignal<
     Debugger.OutputChannels['InspectedState']
 >(INITIAL_INSPECTED_STATE, {equals: false})
-const inspectedOwnerId = createMemo(() => inspectedState().ownerId)
+const inspectedOwnerId = s.createMemo(() => inspectedState().ownerId)
 
-createEffect(() => hub.output.emit('InspectedState', inspectedState()))
+s.createEffect(() => hub.output.emit('InspectedState', inspectedState()))
 
 function getTreeWalkerOwnerId(ownerId: NodeID | null): NodeID | null {
     const owner = ownerId && getObjectById(ownerId, ObjectType.Owner)
@@ -161,7 +162,7 @@ function setInspectedNode(data: Debugger.InputChannels['InspectNode']): void {
     })
 }
 
-createComputed(
+s.createComputed(
     defer(debuggerEnabled, enabled => {
         if (!enabled) resetInspectedNode()
     }),
@@ -225,36 +226,39 @@ function openInspectedNodeLocation() {
 }
 
 // send the state of the client locator mode
-createEffect(
+s.createEffect(
     defer(modules.locatorKeyPressSignal, state => hub.output.emit('LocatorModeChange', state)),
 )
 
 hub.input.listen(e => {
+
+    DEV: {log_message('Debugger', 'Client', e)}
+
     switch (e.name) {
-        case 'ResetState': {
-            // reset all the internal state
-            batch(() => {
-                resetInspectedNode()
-                currentView = DEFAULT_MAIN_VIEW
-                structure.resetTreeWalkerMode()
-                locator.setDevtoolsHighlightTarget(null)
-            })
-            break
-        }
-        case 'HighlightElementChange':
-            return locator.setDevtoolsHighlightTarget(e.details)
-        case 'InspectNode':
-            return setInspectedNode(e.details)
-        case 'InspectValue':
-            return inspector.toggleValueNode(e.details)
-        case 'OpenLocation':
-            return openInspectedNodeLocation()
-        case 'TreeViewModeChange':
-            return structure.setTreeWalkerMode(e.details)
-        case 'ViewChange':
-            return setView(e.details)
-        case 'ToggleModule':
-            return toggleModule(e.details)
+    case 'ResetState': {
+        // reset all the internal state
+        s.batch(() => {
+            resetInspectedNode()
+            currentView = DEFAULT_MAIN_VIEW
+            structure.resetTreeWalkerMode()
+            locator.setDevtoolsHighlightTarget(null)
+        })
+        break
+    }
+    case 'HighlightElementChange':
+        return locator.setDevtoolsHighlightTarget(e.details)
+    case 'InspectNode':
+        return setInspectedNode(e.details)
+    case 'InspectValue':
+        return inspector.toggleValueNode(e.details)
+    case 'OpenLocation':
+        return openInspectedNodeLocation()
+    case 'TreeViewModeChange':
+        return structure.setTreeWalkerMode(e.details)
+    case 'ViewChange':
+        return setView(e.details)
+    case 'ToggleModule':
+        return toggleModule(e.details)
     }
 })
 

packages/extension/background/background.ts

@@ -165,6 +165,7 @@ let last_disconnected_tab_data: TabData | undefined
 let last_disconnected_tab_id: number | undefined
 
 chrome.runtime.onConnect.addListener(async port => {
+
     switch (port.name) {
     case bridge.ConnectionName.Content: {
         const tab_id = port.sender?.tab?.id
@@ -241,7 +242,9 @@ chrome.runtime.onConnect.addListener(async port => {
         // "Versions" means the devtools client is present
         data.onVersions(v => devtools_messanger.postPortMessage('Versions', v))
 
-        port.onDisconnect.addListener(() => content_messanger.post('DevtoolsClosed'))
+        port.onDisconnect.addListener(() => {
+            content_messanger.post('DevtoolsClosed')
+        })
 
         break
     }

packages/extension/shared/bridge.ts

@@ -4,7 +4,7 @@ File for utilities, constants and types related to the communication between the
 
 */
 
-import {log} from '@solid-devtools/shared/utils'
+import {log, log_message} from '@solid-devtools/shared/utils'
 
 export const DEVTOOLS_ID_PREFIX = '[solid-devtools]_'
 
@@ -75,9 +75,7 @@ export function createPortMessanger<
 
         if (typeof name !== 'string') return
 
-        if (LOG_MESSAGES) {
-            log(`${place_name_here} <- ${place_name_conn} - ${name}:`, details)
-        }
+        if (LOG_MESSAGES) {log_message(place_name_here, place_name_conn, e)}
 
         let arr = listeners[name]
         if (arr) {
@@ -183,9 +181,7 @@ export function makeMessageListener
 
         if (typeof name !== 'string') return
 
-        if (LOG_MESSAGES) {
-            log(`${place_name} <- Window - ${name}:`, details)
-        }
+        if (LOG_MESSAGES) {log_message(place_name, 'Window', e.data)}
 
         let arr = window_listeners[name]
         if (arr) {

packages/main/build.ts

@@ -41,6 +41,7 @@ async function main() {
         },
         external:    external,
         define:      {
+            ...common.define,
             'process.env.CLIENT_VERSION':         JSON.stringify(pkg.version),
             'process.env.SOLID_VERSION':          JSON.stringify(solid_pkg.version),
             'process.env.EXPECTED_SOLID_VERSION': JSON.stringify(pkg.peerDependencies['solid-js'].match(/\d+.\d+.\d+/)![0]),

packages/shared/src/utils.ts

@@ -26,6 +26,11 @@ export function error(...args: any[]): undefined {
     return
 }
 
+export function log_message(to: string, from: string, e: {name: string, details: any}) {
+    // eslint-disable-next-line no-console
+    console.log(...getLogLabel(), `${to.padEnd(20, ' ')} <- ${from.padEnd(14, ' ')} - ${e.name.padEnd(20, ' ')}:`, e.details)
+}
+
 export function formatTime(d: Date = new Date()): string {
     return (
         ('0' + d.getHours()).slice(-2) +