Skip to content

Commit

Permalink
Cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@thetarnav
thetarnav committed Dec 28, 2024
1 parent 43338f9 commit 370ddfc
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 64 deletions.
8 changes: 6 additions & 2 deletions .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,17 @@
"name": "HTTP Chrome",
"type": "chrome",
"request": "launch",
"skipFiles": ["${workspaceFolder}/node_modules/**/*.js"],
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"<node_internals>/**",
"${workspaceFolder}/packages/shared/**/*",
],
"sourceMaps": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"pathMapping": {
"/@fs/": ""
}
},
}
]
}
82 changes: 36 additions & 46 deletions packages/frontend/src/controller.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,7 @@ import {SECOND} from '@solid-primitives/date'
import {type EventBus, batchEmits, createEventBus, createEventHub} from '@solid-primitives/event-bus'
import {debounce} from '@solid-primitives/scheduled'
import {defer} from '@solid-primitives/utils'
import {
JSX,
batch,
createContext,
createEffect,
createMemo,
createSelector,
createSignal,
onCleanup,
useContext,
} from 'solid-js'
import * as s from 'solid-js'
import {App} from './App.tsx'
import createInspector from './inspector.tsx'
import {type Structure} from './structure.tsx'
Expand All @@ -26,30 +16,30 @@ type ToEventBusChannels<T extends Record<string, any>> = {

function createDebuggerBridge() {
const output = createEventHub<ToEventBusChannels<Debugger.InputChannels>>($ => ({
ResetState: $(),
InspectNode: $(),
InspectValue: $(),
ResetState: $(),
InspectNode: $(),
InspectValue: $(),
HighlightElementChange: $(),
OpenLocation: $(),
TreeViewModeChange: $(),
ViewChange: $(),
ToggleModule: $(),
OpenLocation: $(),
TreeViewModeChange: $(),
ViewChange: $(),
ToggleModule: $(),
}))

// Listener of the client events (from the debugger) will be called synchronously under `batch`
// to make sure that the state is updated before the effect queue is flushed.
const input = createEventHub<ToEventBusChannels<Debugger.OutputChannels>>($ => ({
DebuggerEnabled: batchEmits($()),
ResetPanel: batchEmits($()),
InspectedState: batchEmits($()),
DebuggerEnabled: batchEmits($()),
ResetPanel: batchEmits($()),
InspectedState: batchEmits($()),
InspectedNodeDetails: batchEmits($()),
StructureUpdates: batchEmits($()),
NodeUpdates: batchEmits($()),
InspectorUpdate: batchEmits($()),
LocatorModeChange: batchEmits($()),
HoveredComponent: batchEmits($()),
InspectedComponent: batchEmits($()),
DgraphUpdate: batchEmits($()),
StructureUpdates: batchEmits($()),
NodeUpdates: batchEmits($()),
InspectorUpdate: batchEmits($()),
LocatorModeChange: batchEmits($()),
HoveredComponent: batchEmits($()),
InspectedComponent: batchEmits($()),
DgraphUpdate: batchEmits($()),
}))

return {input, output}
Expand All @@ -58,8 +48,8 @@ function createDebuggerBridge() {
export type DebuggerBridge = ReturnType<typeof createDebuggerBridge>

export type DevtoolsProps = {
errorOverlayFooter?: JSX.Element
headerSubtitle?: JSX.Element
errorOverlayFooter?: s.JSX.Element
headerSubtitle?: s.JSX.Element
useShortcuts?: boolean
catchWindowErrors?: boolean
}
Expand All @@ -72,11 +62,11 @@ export type DevtoolsOptions = {
useShortcuts: boolean
}

const DevtoolsOptionsCtx = createContext<DevtoolsOptions>(
const DevtoolsOptionsCtx = s.createContext<DevtoolsOptions>(
'DevtoolsOptionsCtx' as any as DevtoolsOptions,
)

export const useDevtoolsOptions = () => useContext(DevtoolsOptionsCtx)
export const useDevtoolsOptions = () => s.useContext(DevtoolsOptionsCtx)

export function devtoolsPropsToOptions(props: DevtoolsProps): DevtoolsOptions {
return {
Expand Down Expand Up @@ -132,7 +122,7 @@ function createViewCache() {
}, 3 * SECOND)

function setCacheGetter<T extends DevtoolsMainView>(view: T, getter: () => CacheDataMap[T]) {
onCleanup(() => {
s.onCleanup(() => {
const data = getter()
nextShortCache = {view: view as any, data: data.short}
longCache.set(view, data.long)
Expand All @@ -157,19 +147,19 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) {
//
// LOCATOR
//
const [devtoolsLocatorEnabled, setDevtoolsLocatorState] = createSignal(false)
const [clientLocatorEnabled, setClientLocator] = createSignal(false)
const [devtoolsLocatorEnabled, setDevtoolsLocatorState] = s.createSignal(false)
const [clientLocatorEnabled, setClientLocator] = s.createSignal(false)
const locatorEnabled = () => devtoolsLocatorEnabled() || clientLocatorEnabled()

// send devtools locator state
createEffect(
s.createEffect(
defer(devtoolsLocatorEnabled, enabled =>
bridge.output.ToggleModule.emit({module: DebuggerModule.Locator, enabled}),
),
)

function setClientLocatorState(enabled: boolean) {
batch(() => {
s.batch(() => {
setClientLocator(enabled)
if (!enabled) setClientHoveredNode(null)
})
Expand All @@ -178,20 +168,20 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) {
//
// HOVERED NODE
//
const [clientHoveredNode, setClientHoveredNode] = createSignal<NodeID | null>(null)
const [extHoveredNode, setExtHoveredNode] = createSignal<{
const [clientHoveredNode, setClientHoveredNode] = s.createSignal<NodeID | null>(null)
const [extHoveredNode, setExtHoveredNode] = s.createSignal<{
type: 'element' | 'node'
id: NodeID
} | null>(null, {equals: (a, b) => a?.id === b?.id})

// highlight hovered element
createEffect(defer(extHoveredNode, bridge.output.HighlightElementChange.emit))
s.createEffect(defer(extHoveredNode, bridge.output.HighlightElementChange.emit))

const hoveredId = createMemo(() => {
const hoveredId = s.createMemo(() => {
const extNode = extHoveredNode()
return extNode ? extNode.id : clientHoveredNode()
})
const isNodeHovered = createSelector<NodeID | null, NodeID>(hoveredId)
const isNodeHovered = s.createSelector<NodeID | null, NodeID>(hoveredId)

function toggleHoveredNode(id: NodeID, type: 'element' | 'node' = 'node', isHovered?: boolean) {
return setExtHoveredNode(p =>
Expand All @@ -207,14 +197,14 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) {
//
// * there is no need for different views now

const [openedView, setOpenedView] = createSignal<DevtoolsMainView>(DevtoolsMainView.Structure)
const [openedView, setOpenedView] = s.createSignal<DevtoolsMainView>(DevtoolsMainView.Structure)
const viewCache = createViewCache()

function openView(view: DevtoolsMainView) {
setOpenedView(view)
}

createEffect(defer(openedView, bridge.output.ViewChange.emit))
s.createEffect(defer(openedView, bridge.output.ViewChange.emit))

//
// Node updates - signals and computations updating
Expand Down Expand Up @@ -275,6 +265,6 @@ function createController(bridge: DebuggerBridge, options: DevtoolsOptions) {

export type Controller = ReturnType<typeof createController>

const ControllerCtx = createContext<Controller>('ControllerCtx' as any as Controller)
const ControllerCtx = s.createContext<Controller>('ControllerCtx' as any as Controller)

export const useController = () => useContext(ControllerCtx)
export const useController = () => s.useContext(ControllerCtx)
39 changes: 23 additions & 16 deletions packages/frontend/src/inspector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {Entries} from '@solid-primitives/keyed'
import {createStaticStore} from '@solid-primitives/static-store'
import {defer} from '@solid-primitives/utils'
import {handleTupleUpdates, createHover, createPingedSignal} from '@solid-devtools/shared/primitives'
import {splitOnColon, warn} from '@solid-devtools/shared/utils'
import {error, splitOnColon} from '@solid-devtools/shared/utils'
import * as debug from '@solid-devtools/debugger/types'
import * as theme from '@solid-devtools/shared/theme'
import {SidePanelCtx} from './SidePanel.tsx'
Expand Down Expand Up @@ -270,31 +270,38 @@ export default function createInspector({bridge}: {bridge: DebuggerBridge}) {
})
})

function getValueItem(valueId: debug.ValueItemID): Inspector.ValueItem | undefined {
const [valueItemType, id] = splitOnColon(valueId)
function getValueItem(value_item_id: debug.ValueItemID): Inspector.ValueItem | undefined {

let valueItem: Inspector.ValueItem | undefined | null
const [type, id] = splitOnColon(value_item_id)

if (valueItemType === debug.ValueItemType.Signal) valueItem = state.signals[id]
else if (valueItemType === debug.ValueItemType.Prop) valueItem = state.props?.record[id]
else valueItem = state.value

return valueItem ?? warn(`ValueItem (${valueId}) not found`)
// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
switch (type) {
case debug.ValueItemType.Signal: return state.signals[id]
case debug.ValueItemType.Prop: return state.props?.record[id]
case debug.ValueItemType.Value: return state.value ?? undefined
}
}

bridge.input.InspectorUpdate.listen(
handleTupleUpdates({
value(update) {
const [valueId, value] = update
const valueItem = getValueItem(valueId)
valueItem?.setValue(decode.decodeValue(value, valueItem.value, storeNodeMap))
let [value_item_id, value] = update
let value_item = getValueItem(value_item_id)
if (value_item != null) {
value_item.setValue(decode.decodeValue(value, value_item.value, storeNodeMap))
}
},
inspectToggle(update) {
const [valueId, value] = update
const valueItem = getValueItem(valueId)
let [value_item_id, value] = update
let value_item = getValueItem(value_item_id)
if (value_item == null) {
error(`ValueItem not found for id ${value_item_id}.`)
return
}

if (valueItem && decode.isObjectType(valueItem.value))
decode.updateCollapsedValue(valueItem.value, value, storeNodeMap)
if (decode.isObjectType(value_item.value)) {
decode.updateCollapsedValue(value_item.value, value, storeNodeMap)
}
},
propKeys(update) {
setState('props', updateProxyProps(update))
Expand Down

0 comments on commit 370ddfc

Please sign in to comment.