From cd277a6e95693fff1bba8682bc30c56a6d139c26 Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Mon, 30 Dec 2024 21:57:48 +0100 Subject: [PATCH] Remove createEventHub from controller.tsx --- packages/frontend/src/controller.tsx | 71 ++++++++++++++++++---------- packages/frontend/src/dgraph.tsx | 14 ++++-- packages/frontend/src/inspector.tsx | 14 ++++-- packages/frontend/src/structure.tsx | 4 +- 4 files changed, 69 insertions(+), 34 deletions(-) diff --git a/packages/frontend/src/controller.tsx b/packages/frontend/src/controller.tsx index 9f2426d1..ca13adb8 100644 --- a/packages/frontend/src/controller.tsx +++ b/packages/frontend/src/controller.tsx @@ -1,5 +1,5 @@ import {SECOND} from '@solid-primitives/date' -import {type EventBus, createEventBus, createEventHub} from '@solid-primitives/event-bus' +import {createEventBus} from '@solid-primitives/event-bus' import {debounce} from '@solid-primitives/scheduled' import {defer} from '@solid-primitives/utils' import {type Debugger, DebuggerModule, DevtoolsMainView, type NodeID} from '@solid-devtools/debugger/types' @@ -10,41 +10,50 @@ import createInspector from './inspector.tsx' import {type Structure} from './structure.tsx' import * as ui from './ui/index.ts' -// TODO: add to solid-primitives/event-bus -type ToEventBusChannels> = { - [K in keyof T]: EventBus -} - -export type InputMessage = { +export type Input_Message = { [K in keyof Debugger.OutputChannels]: { name: K, details: Debugger.OutputChannels[K], } }[keyof Debugger.OutputChannels] -export type InputListener = (e: InputMessage) => void +export type Input_Listener = (e: Input_Message) => void + +export type Output_Message = { + [K in keyof Debugger.InputChannels]: { + name: K, + details: Debugger.InputChannels[K], + } +}[keyof Debugger.InputChannels] +export type Output_Listener = (e: Output_Message) => void function createDebuggerBridge() { - const output = createEventHub>($ => ({ - ResetState: $(), - InspectNode: $(), - InspectValue: $(), - HighlightElementChange: $(), - OpenLocation: $(), - TreeViewModeChange: $(), - ViewChange: $(), - ToggleModule: $(), - })) + let output_listeners: Output_Listener[] = [] + const output = { + listen(listener: Output_Listener) { + output_listeners.push(listener) + s.onCleanup(() => { + mutate_remove(output_listeners, listener) + }) + }, + emit(e: Output_Message) { + s.batch(() => { + for (let fn of output_listeners) { + fn(e) + } + }) + }, + } - let input_listeners: InputListener[] = [] + let input_listeners: Input_Listener[] = [] const input = { - listen(listener: InputListener) { + listen(listener: Input_Listener) { input_listeners.push(listener) s.onCleanup(() => { mutate_remove(input_listeners, listener) }) }, - emit(e: InputMessage) { + emit(e: Input_Message) { s.batch(() => { for (let fn of input_listeners) { fn(e) @@ -163,9 +172,12 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) { const locatorEnabled = () => devtoolsLocatorEnabled() || clientLocatorEnabled() // send devtools locator state - s.createEffect(defer(devtoolsLocatorEnabled, enabled => - bridge.output.ToggleModule.emit({module: DebuggerModule.Locator, enabled}), - )) + s.createEffect(defer(devtoolsLocatorEnabled, enabled => { + bridge.output.emit({ + name: 'ToggleModule', + details: {module: DebuggerModule.Locator, enabled} + }) + })) function setClientLocatorState(enabled: boolean) { s.batch(() => { @@ -184,7 +196,12 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) { } | null>(null, {equals: (a, b) => a?.id === b?.id}) // highlight hovered element - s.createEffect(defer(extHoveredNode, bridge.output.HighlightElementChange.emit)) + s.createEffect(defer(extHoveredNode, node => { + bridge.output.emit({ + name: 'HighlightElementChange', + details: node, + }) + })) const hoveredId = s.createMemo(() => { const extNode = extHoveredNode() @@ -213,7 +230,9 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) { setOpenedView(view) } - s.createEffect(defer(openedView, bridge.output.ViewChange.emit)) + s.createEffect(defer(openedView, view => { + bridge.output.emit({name: 'ViewChange', details: view}) + })) // // Node updates - signals and computations updating diff --git a/packages/frontend/src/dgraph.tsx b/packages/frontend/src/dgraph.tsx index 343dfa3c..142f3024 100644 --- a/packages/frontend/src/dgraph.tsx +++ b/packages/frontend/src/dgraph.tsx @@ -20,10 +20,16 @@ export function createDependencyGraph() { } }) - bridge.output.ToggleModule.emit({module: debug.DebuggerModule.Dgraph, enabled: true}) - s.onCleanup(() => - bridge.output.ToggleModule.emit({module: debug.DebuggerModule.Dgraph, enabled: false}), - ) + bridge.output.emit({ + name: 'ToggleModule', + details: {module: debug.DebuggerModule.Dgraph, enabled: true}, + }) + s.onCleanup(() => { + bridge.output.emit({ + name: 'ToggleModule', + details: {module: debug.DebuggerModule.Dgraph, enabled: false}, + }) + }) function inspectNode(id: debug.NodeID) { const node = graph()?.[id] diff --git a/packages/frontend/src/inspector.tsx b/packages/frontend/src/inspector.tsx index 731e197c..976f9ca5 100644 --- a/packages/frontend/src/inspector.tsx +++ b/packages/frontend/src/inspector.tsx @@ -200,7 +200,9 @@ export default function createInspector({bridge}: {bridge: DebuggerBridge}) { } // sync inspected node with the debugger - s.createEffect(defer(inspectedNode, bridge.output.InspectNode.emit)) + s.createEffect(defer(inspectedNode, node => { + bridge.output.emit({name: 'InspectNode', details: node}) + })) // // Inspector state @@ -344,14 +346,20 @@ export default function createInspector({bridge}: {bridge: DebuggerBridge}) { function inspectValueItem(item: Inspector.ValueItem, selected?: boolean): void { if (selected !== undefined && item.extended === selected) return selected = item.setExtended(p => selected ?? !p) - bridge.output.InspectValue.emit({id: item.itemId, selected}) + bridge.output.emit({ + name: 'InspectValue', + details: {id: item.itemId, selected}, + }) } // // LOCATION // function openComponentLocation(): void { - bridge.output.OpenLocation.emit() + bridge.output.emit({ + name: 'OpenLocation', + details: undefined, + }) } return { diff --git a/packages/frontend/src/structure.tsx b/packages/frontend/src/structure.tsx index 5749cd47..f22aa86d 100644 --- a/packages/frontend/src/structure.tsx +++ b/packages/frontend/src/structure.tsx @@ -162,7 +162,9 @@ export function createStructure() { }) // TREE VIEW MODE - s.createEffect(defer(mode, bridge.output.TreeViewModeChange.emit)) + s.createEffect(defer(mode, mode => { + bridge.output.emit({name: 'TreeViewModeChange', details: mode}) + })) return { state,