Refactor the walker to take an element interface object

Author: thetarnav

packages/debugger/src/locator/index.ts

@@ -5,7 +5,7 @@ import {createKeyHold} from '@solid-primitives/keyboard'
 import {scheduleIdle} from '@solid-primitives/scheduled'
 import {makeHoverElementListener} from '@solid-devtools/shared/primitives'
 import {msg, warn} from '@solid-devtools/shared/utils'
-import * as registry from '../main/component-registry.ts'
+import * as walker from '../structure/walker.ts'
 import {ObjectType, getObjectById} from '../main/id.ts'
 import SolidAPI from '../main/setup.ts'
 import {type NodeID, type OutputEmit} from '../main/types.ts'
@@ -27,11 +27,12 @@ export {parseLocationString} from './find-components.ts'
 
 export * from './types.ts'
 
-export function createLocator(props: {
-    locatorEnabled: s.Accessor<boolean>
-    setLocatorEnabledSignal(signal: s.Accessor<boolean>): void
-    onComponentClick(componentId: NodeID, next: VoidFunction): void
-    emit: OutputEmit
+export function createLocator<TEl extends object>(props: {
+    locatorEnabled: s.Accessor<boolean>,
+    setLocatorEnabledSignal(signal: s.Accessor<boolean>): void,
+    onComponentClick(componentId: NodeID, next: VoidFunction): void,
+    emit: OutputEmit,
+    component_registry: walker.ComponentRegistry<TEl>,
 }) {
     const [enabledByPressingSignal, setEnabledByPressingSignal] = s.createSignal((): boolean => false)
     props.setLocatorEnabledSignal(s.createMemo(() => enabledByPressingSignal()()))
@@ -55,7 +56,7 @@ export function createLocator(props: {
 
         // target is an element
         if (target instanceof HTMLElement) {
-            const comp = registry.findComponent(target)
+            const comp = walker.findComponent(props.component_registry, target)
             if (!comp) return []
             return [
                 {
@@ -68,7 +69,7 @@ export function createLocator(props: {
         }
 
         // target is a component or an element of a component (in DOM walker mode)
-        const comp = registry.getComponent(target.id)
+        const comp = walker.getComponent(props.component_registry, target.id)
         if (!comp) return []
         return comp.elements.map(element => ({
             element,
@@ -91,7 +92,7 @@ export function createLocator(props: {
     // notify of component hovered by using the debugger
     s.createEffect((prev: NodeID | undefined) => {
         const target = hoverTarget()
-        const comp = target && registry.findComponent(target)
+        const comp = target && walker.findComponent(props.component_registry, target)
         if (prev) {
             props.emit(msg('HoveredComponent', {nodeId: prev, state: false}))
         }

packages/debugger/src/main/component-registry.ts

@@ -11,7 +11,7 @@ export const enum ObjectType {
 
 type ValueMap = {
     [ObjectType.Owner]:       Solid.Owner
-    [ObjectType.Element]:     Element
+    [ObjectType.Element]:     object
     [ObjectType.Signal]:      Solid.Signal
     [ObjectType.Store]:       Solid.Store
     [ObjectType.StoreNode]:   Solid.StoreNode

packages/debugger/src/main/id.ts

@@ -6,6 +6,7 @@ import {createDependencyGraph} from '../dependency/index.ts'
 import {createInspector} from '../inspector/index.ts'
 import {createLocator} from '../locator/index.ts'
 import {createStructure} from '../structure/index.ts'
+import * as walker from '../structure/walker.ts'
 import {getObjectById, getSdtId, ObjectType} from './id.ts'
 import {initRoots} from './roots.ts'
 import setup from './setup.ts'
@@ -18,6 +19,7 @@ import {
     type NodeID,
     type OutputListener,
     type OutputMessage,
+    dom_element_interface,
 } from './types.ts'
 
 function createDebugger() {
@@ -137,6 +139,9 @@ function createDebugger() {
             })
         }
     }
+
+    let eli = dom_element_interface
+    let component_registry = walker.makeComponentRegistry(eli)
 
     //
     // Structure:
@@ -152,6 +157,7 @@ function createDebugger() {
         },
         onNodeUpdate: pushNodeUpdate,
         enabled: debuggerEnabled,
+        component_registry: component_registry,
     })
 
     //
@@ -190,6 +196,7 @@ function createDebugger() {
             }
         },
         emit: emitOutput,
+        component_registry: component_registry,
     })
 
     // Opens the source code of the inspected component

packages/debugger/src/main/index.ts

@@ -130,6 +130,27 @@ export type OutputListener = (e: OutputMessage) => void
 
 export type OutputEmit = (e: OutputMessage) => void
 
+/**
+ * When using a custom solid renderer, you should provide a custom element interface.
+ * By default the debugger assumes that rendered elements are DOM elements.
+ */
+export type ElementInterface<T extends object> = {
+    isElement:          (obj: object | T) => obj is T,
+    getElementName:     (el: T) => string,
+    getElementChildren: (el: T) => Iterable<T>,
+    getElementAt:       (e: MouseEvent) => T | null,
+}
+
+/**
+ * Implementation of {@link ElementInterface} for {@link Element}
+ */
+export const dom_element_interface: ElementInterface<Element> = {
+    isElement:          obj => obj instanceof Element,
+    getElementName:     el => el.localName,
+    getElementChildren: el => el.children,
+    getElementAt:       e => e.target as Element | null,
+}
+
 //
 // EXPOSED SOLID API
 //

packages/debugger/src/main/types.ts

@@ -2,6 +2,31 @@ import {trimString} from '@solid-devtools/shared/utils'
 import {type Node, type Solid, NodeType} from './types.ts'
 import setup from './setup.ts'
 
+export function* unwrap_each<T>(arr: readonly T[] | null | undefined): ArrayIterator<T> {
+    if (arr != null) {
+        yield* arr.values()
+    }
+}
+
+export function append_array<T>(arr: T[], items: readonly T[]): void {
+    arr.push.apply(arr, items as any)
+}
+export function unwrap_append<T>(arr: T[], item: T | null | undefined): void {
+    if (item != null) {
+        arr.push(item)
+    }
+}
+export function unwrap_append_array<T>(arr: T[], items: readonly T[] | null | undefined): void {
+    if (items != null) {
+        arr.push.apply(arr, items as any)
+    }
+}
+
+export function* owner_each_child(o: Solid.Owner): ArrayIterator<Solid.Owner> {
+    yield* unwrap_each(o.owned)
+    yield* unwrap_each(o.sdtSubRoots)
+}
+
 export const isSolidOwner = (o: Solid.SourceMapValue | Solid.Owner | Solid.Store | Solid.Signal): o is Solid.Owner =>
     'owned' in o
 

packages/debugger/src/main/utils.ts

@@ -1,10 +1,9 @@
 import {throttle} from '@solid-primitives/scheduled'
-import * as registry from '../main/component-registry.ts'
 import {ObjectType, getSdtId} from '../main/id.ts'
 import * as roots from '../main/roots.ts'
 import {type Mapped, type NodeID, type Solid, DEFAULT_WALKER_MODE, DevtoolsMainView, NodeType, TreeWalkerMode} from '../main/types.ts'
 import {isDisposed, markOwnerType} from '../main/utils.ts'
-import {type ComputationUpdateHandler, walkSolidTree} from './walker.ts'
+import * as walker from './walker.ts'
 
 export type StructureUpdates = {
     /** Partial means that the updates are based on the previous structure state */
@@ -43,10 +42,11 @@ function getClosestIncludedOwner(owner: Solid.Owner, mode: TreeWalkerMode): Soli
     return root
 }
 
-export function createStructure(props: {
+export function createStructure<TEl extends object>(props: {
     onStructureUpdate: (updates: StructureUpdates) => void
     onNodeUpdate:      (nodeId: NodeID) => void
     enabled:           () => boolean
+    component_registry: walker.ComponentRegistry<TEl>,
 }) {
 
     let treeWalkerMode: TreeWalkerMode = DEFAULT_WALKER_MODE
@@ -57,7 +57,7 @@ export function createStructure(props: {
     const removedRoots = new Set<NodeID>()
     let shouldUpdateAllRoots = true
 
-    const onComputationUpdate: ComputationUpdateHandler = (
+    const onComputationUpdate: walker.ComputationUpdateHandler = (
         rootId, owner, changedStructure,
     ) => {
         // separate the callback from the computation
@@ -72,9 +72,9 @@ export function createStructure(props: {
     }
 
     function forceFlushRootUpdateQueue(): void {
-        
+
         if (props.enabled()) {
-            
+
             let partial = !shouldUpdateAllRoots
             shouldUpdateAllRoots = false
 
@@ -92,16 +92,17 @@ export function createStructure(props: {
             }
 
             for (let owner of owners) {
-                let rootId = getRootId(owner)
-                let tree = walkSolidTree(owner, {
-                    rootId,
-                    mode: treeWalkerMode,
-                    onComputationUpdate,
-                    registerComponent: registry.registerComponent,
+                let root_id = getRootId(owner)
+                let tree = walker.walkSolidTree(owner, {
+                    rootId:   root_id,
+                    mode:     treeWalkerMode,
+                    onUpdate: onComputationUpdate,
+                    eli:      props.component_registry.eli,
+                    registry: props.component_registry,
                 })
-                let map = updated[rootId]
-                if (map) map[tree.id] = tree
-                else updated[rootId] = {[tree.id]: tree}
+                let map = updated[root_id]
+                if (map != null) map[tree.id] = tree
+                else updated[root_id] = {[tree.id]: tree}
             }
 
             props.onStructureUpdate({partial, updated, removed: [...removedRoots]})
@@ -143,7 +144,7 @@ export function createStructure(props: {
     function setTreeWalkerMode(mode: TreeWalkerMode): void {
         treeWalkerMode = mode
         updateAllRoots()
-        registry.clearComponentRegistry()
+        walker.clearComponentRegistry(props.component_registry)
     }
 
     return {