Merge pull request #131 from thetarnav/context

Context support

Author: thetarnav

.changeset/sour-geese-tell.md

@@ -0,0 +1,8 @@
+---
+"@solid-devtools/debugger": minor
+"solid-devtools": patch
+"solid-devtools-extension": patch
+"@solid-devtools/shared": patch
+---
+
+Improve displaying the context node on the structure graph and it's value on the inspector.

configs/tsconfig.base.json

@@ -8,7 +8,6 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "noEmit": true,
-    "isolatedModules": true,
     "skipLibCheck": true
   }
 }

packages/debugger/src/inspect.ts

@@ -1,5 +1,5 @@
-import { Mapped, NodeID, Solid, NodeType } from "@solid-devtools/shared/graph"
-import { ElementMap, EncodedValue, encodeValue, ValueType } from "@solid-devtools/shared/serialize"
+import { Mapped, NodeID, Solid, NodeType, ValueUpdateListener } from "@solid-devtools/shared/graph"
+import { ElementMap, encodeValue, ValueType } from "@solid-devtools/shared/serialize"
 import { $PROXY } from "solid-js"
 import { observeValueUpdate, removeValueUpdateObserver } from "./update"
 import {
@@ -16,7 +16,6 @@ import {
 } from "./utils"
 
 export type SignalUpdateHandler = (nodeId: NodeID, value: unknown) => void
-export type ValueUpdateHandler = (value: unknown) => void
 
 // Globals set before collecting the owner details
 let $elementMap!: ElementMap
@@ -74,42 +73,48 @@ export function encodeComponentProps(
   return { proxy, record }
 }
 
-export function encodeOwnerValue(
-  owner: Solid.Owner,
-  deep: boolean,
-  elementMap: ElementMap,
-): EncodedValue<boolean> {
-  let refresh: Solid.Memo | null
-  if (isSolidComponent(owner) && (refresh = getComponentRefreshNode(owner))) {
-    owner = refresh
-  }
-  return encodeValue(owner.value, deep, elementMap)
-}
-
 export function collectOwnerDetails(
   owner: Solid.Owner,
   config: {
     onSignalUpdate: SignalUpdateHandler
-    onValueUpdate: ValueUpdateHandler
+    onValueUpdate: ValueUpdateListener
   },
 ): {
   details: Mapped.OwnerDetails
   signalMap: Record<NodeID, Solid.Signal>
   elementMap: ElementMap
+  getOwnerValue: () => unknown
 } {
   const { onSignalUpdate, onValueUpdate } = config
 
   // Set globals
   $elementMap = new ElementMap()
   $signalMap = {}
 
-  let { sourceMap, owned, value } = owner
+  const type = markOwnerType(owner)
+  let { sourceMap, owned } = owner
+  let getValue = () => owner.value
+
+  // handle context node specially
+  if (type === NodeType.Context) {
+    sourceMap = undefined
+    owned = null
+    const symbols = Object.getOwnPropertySymbols(owner.context)
+    if (symbols.length !== 1) {
+      console.warn("Context field has more than one symbol. This is not expected.")
+      getValue = () => undefined
+    } else {
+      const contextValue = owner.context[symbols[0]]
+      getValue = () => contextValue
+    }
+  }
+
   // marge component with refresh memo
   let refresh: Solid.Memo | null
   if (isSolidComponent(owner) && (refresh = getComponentRefreshNode(owner))) {
     sourceMap = refresh.sourceMap
     owned = refresh.owned
-    value = refresh.value
+    getValue = () => refresh!.value
   }
 
   // map signals
@@ -137,7 +142,7 @@ export function collectOwnerDetails(
   }
 
   if (isSolidComputation(owner)) {
-    details.value = encodeValue(value, false, $elementMap)
+    details.value = encodeValue(getValue(), false, $elementMap)
     observeValueUpdate(owner, onValueUpdate, INSPECTOR)
     details.sources = markNodesID(owner.sources)
     if (isSolidMemo(owner)) {
@@ -148,5 +153,5 @@ export function collectOwnerDetails(
     if (props) details.props = props
   }
 
-  return { details, signalMap: $signalMap, elementMap: $elementMap }
+  return { details, signalMap: $signalMap, elementMap: $elementMap, getOwnerValue: getValue }
 }

packages/debugger/src/plugin.ts

@@ -1,5 +1,10 @@
 import { Accessor, createEffect, createSignal, untrack } from "solid-js"
-import { createSimpleEmitter, Listen } from "@solid-primitives/event-bus"
+import {
+  createEventHub,
+  createSimpleEmitter,
+  EventBus,
+  EventHubOn,
+} from "@solid-primitives/event-bus"
 import { throttle } from "@solid-primitives/scheduled"
 import {
   Mapped,
@@ -17,9 +22,7 @@ import {
   clearOwnerObservers,
   collectOwnerDetails,
   encodeComponentProps,
-  encodeOwnerValue,
   SignalUpdateHandler,
-  ValueUpdateHandler,
 } from "./inspect"
 import { makeSolidUpdateListener } from "./update"
 
@@ -41,52 +44,30 @@ DETAILS:
 
 export type BatchComputationUpdatesHandler = (payload: ComputationUpdate[]) => void
 
+export type EventHubChannels = {
+  ComputationUpdates: EventBus<ComputationUpdate[]>
+  SignalUpdates: EventBus<{ id: NodeID; value: EncodedValue<boolean> }[]>
+  PropsUpdate: EventBus<Mapped.Props>
+  ValueUpdate: EventBus<{ value: EncodedValue<boolean>; update: boolean }>
+  StructureUpdates: EventBus<RootsUpdates>
+}
+
 export type PluginData = {
   readonly triggerUpdate: VoidFunction
   readonly forceTriggerUpdate: VoidFunction
-  readonly handleComputationUpdates: (listener: BatchComputationUpdatesHandler) => VoidFunction
-  readonly handleSignalUpdates: (
-    listener: (payload: { id: NodeID; value: EncodedValue<boolean> }[]) => void,
-  ) => VoidFunction
-  readonly handlePropsUpdate: Listen<Mapped.Props>
-  readonly handleValueUpdate: Listen<EncodedValue<boolean>>
-  readonly handleStructureUpdates: Listen<RootsUpdates>
+  readonly listenTo: EventHubOn<EventHubChannels>
   readonly components: Accessor<Record<NodeID, Mapped.ResolvedComponent[]>>
   readonly findComponent: (rootId: NodeID, nodeId: NodeID) => Mapped.ResolvedComponent | undefined
   readonly inspectedDetails: Accessor<Mapped.OwnerDetails | null>
   readonly setInspectedOwner: (payload: { rootId: NodeID; nodeId: NodeID } | null) => void
   readonly getElementById: (id: NodeID) => HTMLElement | undefined
   readonly setInspectedSignal: (id: NodeID, selected: boolean) => EncodedValue<boolean> | null
   readonly setInspectedProp: (key: NodeID, selected: boolean) => void
-  readonly setInspectedValue: (selected: boolean) => EncodedValue<boolean> | null
+  readonly setInspectedValue: (selected: boolean) => void
 }
 
 type RootUpdate = { removed: NodeID } | { updated: Mapped.Root }
 
-const [handleStructureUpdates, pushStructureUpdate] = (() => {
-  const [handleStructureUpdate, emitStructureUpdate] = createSimpleEmitter<RootsUpdates>()
-  const updates: Mapped.Root[] = []
-  const removedIds = new Set<NodeID>()
-  const trigger = throttle(() => {
-    const updated: Record<NodeID, Mapped.Root> = {}
-    for (let i = updates.length - 1; i >= 0; i--) {
-      const update = updates[i]
-      const { id } = update
-      if (!removedIds.has(id) && !updated[id]) updated[id] = update
-    }
-    emitStructureUpdate({ updated, removed: [...removedIds] })
-    updates.length = 0
-    removedIds.clear()
-  }, 50)
-  const pushStructureUpdate = (update: RootUpdate) => {
-    if ("removed" in update) removedIds.add(update.removed)
-    else if (removedIds.has(update.updated.id)) return
-    else updates.push(update.updated)
-    trigger()
-  }
-  return [handleStructureUpdate, pushStructureUpdate]
-})()
-
 export const debuggerConfig = {
   gatherComponents: false,
 }
@@ -97,6 +78,14 @@ const exported = createInternalRoot(() => {
   /** forced — immediate global update */
   const [onForceUpdate, forceTriggerUpdate] = createSimpleEmitter()
 
+  const eventHub = createEventHub<EventHubChannels>(bus => ({
+    ComputationUpdates: bus(),
+    SignalUpdates: bus(),
+    PropsUpdate: bus(),
+    ValueUpdate: bus(),
+    StructureUpdates: bus(),
+  }))
+
   //
   // Consumers:
   //
@@ -128,6 +117,32 @@ const exported = createInternalRoot(() => {
     pushStructureUpdate({ updated: newRoot })
   }
 
+  //
+  // Structure updates:
+  //
+  const pushStructureUpdate = (() => {
+    const updates: Mapped.Root[] = []
+    const removedIds = new Set<NodeID>()
+    const trigger = throttle(() => {
+      const updated: Record<NodeID, Mapped.Root> = {}
+      for (let i = updates.length - 1; i >= 0; i--) {
+        const update = updates[i]
+        const { id } = update
+        if (!removedIds.has(id) && !updated[id]) updated[id] = update
+      }
+      eventHub.emit("StructureUpdates", { updated, removed: [...removedIds] })
+      updates.length = 0
+      removedIds.clear()
+    }, 50)
+    const pushStructureUpdate = (update: RootUpdate) => {
+      if ("removed" in update) removedIds.add(update.removed)
+      else if (removedIds.has(update.updated.id)) return
+      else updates.push(update.updated)
+      trigger()
+    }
+    return pushStructureUpdate
+  })()
+
   //
   // Inspected Owner details:
   //
@@ -138,38 +153,56 @@ const exported = createInternalRoot(() => {
     signals: new Set<NodeID>(),
     props: new Set<string>(),
     value: false,
+    getValue: () => null as unknown,
   }
 
   const [details, setDetails] = createSignal<Mapped.OwnerDetails | null>(null)
 
   const getElementById = (id: NodeID): HTMLElement | undefined => inspected.elementMap.get(id)
 
-  const [handleSignalUpdates, pushSignalUpdate] = createBatchedUpdateEmitter<{
+  const pushSignalUpdate = createBatchedUpdateEmitter<{
     id: NodeID
     value: EncodedValue<boolean>
-  }>()
+  }>(updates => eventHub.emit("SignalUpdates", updates))
   const onSignalUpdate: SignalUpdateHandler = untrackedCallback((id, value) => {
     if (!enabled() || !inspected.owner) return
     const isSelected = inspected.signals.has(id)
     pushSignalUpdate({ id, value: encodeValue(value, isSelected, inspected.elementMap) })
   })
 
-  const [handleValueUpdate, emitValueUpdate] = createSimpleEmitter<EncodedValue<boolean>>()
-  const onValueUpdate: ValueUpdateHandler = throttle(value => {
-    if (!enabled() || !inspected.owner) return
-    emitValueUpdate(encodeValue(value, inspected.value, inspected.elementMap))
-  })
+  const triggerValueUpdate = (() => {
+    let updateNext = false
+    const forceValueUpdate = () => {
+      if (!enabled() || !inspected.owner) return (updateNext = false)
+      eventHub.emit("ValueUpdate", {
+        value: encodeValue(inspected.getValue(), inspected.value, inspected.elementMap),
+        update: updateNext,
+      })
+      updateNext = false
+    }
+    const triggerValueUpdate = throttle(forceValueUpdate)
+    function handleValueUpdate(update: boolean, force = false) {
+      if (update) updateNext = true
+      if (force) forceValueUpdate()
+      else triggerValueUpdate()
+    }
+    return handleValueUpdate
+  })()
 
   const setInspectedDetails = untrackedCallback((owner: Solid.Owner) => {
     inspected.owner && clearOwnerObservers(inspected.owner)
     inspected.props.clear()
     inspected.signals.clear()
     inspected.owner = owner
     inspected.value = false
-    const result = collectOwnerDetails(owner, { onSignalUpdate, onValueUpdate })
+    const result = collectOwnerDetails(owner, {
+      onSignalUpdate,
+      onValueUpdate: () => triggerValueUpdate(true),
+    })
     setDetails(result.details)
     inspected.signalMap = result.signalMap
     inspected.elementMap = result.elementMap
+    inspected.getValue = result.getOwnerValue
   })
   const clearInspectedDetails = () => {
     inspected.owner && clearOwnerObservers(inspected.owner)
@@ -180,15 +213,13 @@ const exported = createInternalRoot(() => {
     inspected.value = false
   }
 
-  const [handlePropsUpdate, emitPropsUpdate] = createSimpleEmitter<Mapped.Props>()
-
   function updateInspectedProps() {
     if (!inspected.owner) return
     const props = encodeComponentProps(inspected.owner, {
       inspectedProps: inspected.props,
       elementMap: inspected.elementMap,
     })
-    props && emitPropsUpdate(props)
+    props && eventHub.emit("PropsUpdate", props)
   }
 
   createEffect(() => {
@@ -198,7 +229,12 @@ const exported = createInternalRoot(() => {
     else inspected.owner && setInspectedDetails(inspected.owner)
 
     // update the owner details whenever there is a change in solid's internals
-    makeSolidUpdateListener(throttle(updateInspectedProps, 150))
+    makeSolidUpdateListener(
+      throttle(() => {
+        updateInspectedProps()
+        triggerValueUpdate(false)
+      }, 150),
+    )
   })
 
   const setInspectedOwner: PluginData["setInspectedOwner"] = payload => {
@@ -225,24 +261,22 @@ const exported = createInternalRoot(() => {
   }
   const setInspectedValue: PluginData["setInspectedValue"] = selected => {
     if (!inspected.owner) return null
-    return encodeOwnerValue(inspected.owner, (inspected.value = selected), inspected.elementMap)
+    inspected.value = selected
+    triggerValueUpdate(false, true)
   }
 
   //
   // Computation updates:
   //
-  const [handleComputationUpdates, _pushComputationUpdate] =
-    createBatchedUpdateEmitter<ComputationUpdate>()
+  const _pushComputationUpdate = createBatchedUpdateEmitter<ComputationUpdate>(updates =>
+    eventHub.emit("ComputationUpdates", updates),
+  )
   const pushComputationUpdate: ComputationUpdateHandler = (rootId, id) => {
     _pushComputationUpdate({ rootId, id })
   }
 
   const pluginData: PluginData = {
-    handleComputationUpdates,
-    handleSignalUpdates,
-    handlePropsUpdate,
-    handleValueUpdate,
-    handleStructureUpdates,
+    listenTo: eventHub.on,
     components,
     findComponent,
     triggerUpdate,

packages/debugger/src/server.ts

@@ -12,17 +12,14 @@ export const attachDebugger: typeof API.attachDebugger = () => {}
 export const useDebugger: typeof API.useDebugger = () => ({
   triggerUpdate: () => {},
   forceTriggerUpdate: () => {},
-  handleComputationUpdates: () => () => {},
-  handleSignalUpdates: () => () => {},
-  handleStructureUpdates: () => () => {},
+  listenTo: () => () => {},
   components: () => ({}),
   findComponent: () => undefined,
   setInspectedOwner: () => {},
   getElementById: () => undefined,
   handlePropsUpdate: () => () => {},
   setInspectedSignal: () => null,
   setInspectedProp: () => {},
-  handleValueUpdate: () => () => {},
   inspectedDetails: () => null,
   setInspectedValue: () => null,
 })