From 593116277118e37c8938ed656e73e89a81db2732 Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Tue, 17 Dec 2024 20:07:28 +0100 Subject: [PATCH] Log messages received by debugger --- .changeset/modern-chairs-hunt.md | 8 +++ build.ts | 1 + packages/debugger/src/main/index.ts | 74 +++++++++++---------- packages/extension/background/background.ts | 5 +- packages/extension/shared/bridge.ts | 10 +-- packages/main/build.ts | 1 + packages/shared/src/utils.ts | 5 ++ 7 files changed, 61 insertions(+), 43 deletions(-) create mode 100644 .changeset/modern-chairs-hunt.md diff --git a/.changeset/modern-chairs-hunt.md b/.changeset/modern-chairs-hunt.md new file mode 100644 index 00000000..7f5c86c7 --- /dev/null +++ b/.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. diff --git a/build.ts b/build.ts index 612b7e19..a66f7532 100644 --- a/build.ts +++ b/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'], } } diff --git a/packages/debugger/src/main/index.ts b/packages/debugger/src/main/index.ts index 6614ab1a..ba4fc042 100644 --- a/packages/debugger/src/main/index.ts +++ b/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() 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) } }) diff --git a/packages/extension/background/background.ts b/packages/extension/background/background.ts index ff4237f3..c2b1cf84 100644 --- a/packages/extension/background/background.ts +++ b/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 } diff --git a/packages/extension/shared/bridge.ts b/packages/extension/shared/bridge.ts index 41cfa8f9..2268b50e 100644 --- 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} 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) { diff --git a/packages/main/build.ts b/packages/main/build.ts index a1151faf..33992bd2 100644 --- a/packages/main/build.ts +++ b/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]), diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts index 9249eea3..4b11b8f1 100644 --- a/packages/shared/src/utils.ts +++ b/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) +