Add UNOWNED Root with top-level signals (#330)

Author: thetarnav

.changeset/slimy-apricots-design.md

@@ -0,0 +1,8 @@
+---
+"@solid-devtools/debugger": minor
+"@solid-devtools/frontend": minor
+"@solid-devtools/shared": minor
+---
+
+Add UNOWNED Root with top-level signals
+ -> Show signals created outside of reactive context (Closes #209)

examples/sandbox/src/App.tsx

@@ -119,6 +119,8 @@ const createComponent = (content: () => s.JSX.Element) => {
     return Content
 }
 
+const [someUnusedTopLevelSignal, setSomeUnusedTopLevelSignal] = s.createSignal(123)
+
 const App: s.Component = () => {
 
     s.DEV?.registerGraph({value: {foo: 123}, name: 'my_custom_value'})

packages/debugger/src/dependency/index.ts

@@ -4,10 +4,9 @@ import {defer} from '@solid-primitives/utils'
 import {msg} from '@solid-devtools/shared/utils'
 import {DevtoolsMainView, NodeType} from '../main/constants.ts'
 import {ObjectType, getObjectById} from '../main/id.ts'
-import {type NodeID, type Solid} from '../main/types.ts'
+import {type InspectedState, type NodeID, type OutputEmit, type Solid} from '../main/types.ts'
 import {getNodeType} from '../main/utils.ts'
 import {type OnNodeUpdate, type SerializedDGraph, collectDependencyGraph} from './collect.ts'
-import {type OutputEmit, type InspectedState} from '../main/index.ts'
 
 export {type SerializedDGraph} from './collect.ts'
 

packages/debugger/src/index.ts

@@ -6,7 +6,7 @@ export {
     observeValueUpdate,
     removeValueUpdateObserver,
 } from './main/observe.ts'
-export {attachDebugger, unobserveAllRoots} from './main/roots.ts'
+export {attachDebugger} from './main/roots.ts'
 export {
     getNodeName,
     getNodeType,

packages/debugger/src/inspector/index.ts

@@ -1,11 +1,12 @@
-import {msg, warn} from '@solid-devtools/shared/utils'
+import * as s from 'solid-js'
 import {scheduleIdle, throttle} from '@solid-primitives/scheduled'
-import {type Accessor, createEffect, onCleanup} from 'solid-js'
-import {type OutputEmit} from '../main/index.ts'
+import {msg, warn} from '@solid-devtools/shared/utils'
 import {ObjectType, getObjectById} from '../main/id.ts'
 import {addSolidUpdateListener} from '../main/observe.ts'
-import {type Mapped, type NodeID, type Solid, type ValueItemID} from '../main/types.ts'
+import {type InspectedState, type Mapped, type NodeID, type OutputEmit, type Solid, type ValueItemID} from '../main/types.ts'
 import {onOwnerDispose} from '../main/utils.ts'
+import setup from '../main/setup.ts'
+import {UNOWNED_ROOT} from '../main/roots.ts'
 import {type ObservedPropsMap, ValueNodeMap, clearOwnerObservers, collectOwnerDetails} from './inspector.ts'
 import {encodeValue} from './serialize.ts'
 import {type StoreNodeProperty, type StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate} from './store.ts'
@@ -19,8 +20,8 @@ export type ToggleInspectedValueData = {id: ValueItemID; selected: boolean}
  * Plugin module
  */
 export function createInspector(props: {
-    inspectedOwnerId:   Accessor<NodeID | null>
-    enabled:            Accessor<boolean>
+    inspectedState:     s.Accessor<InspectedState>
+    enabled:            s.Accessor<boolean>
     resetInspectedNode: VoidFunction
     emit:               OutputEmit
 }) {
@@ -146,46 +147,63 @@ export function createInspector(props: {
 
     let clearPrevDisposeListener: VoidFunction | undefined
 
-    createEffect(() => {
-        if (!props.enabled()) return
-        const id = props.inspectedOwnerId()
-
-        queueMicrotask(() => {
-            const owner = id && getObjectById(id, ObjectType.Owner)
-            inspectedOwner && clearOwnerObservers(inspectedOwner, propsMap)
-            inspectedOwner = owner
-            valueMap.reset()
-            clearUpdates()
-
-            if (owner) {
-                const result = collectOwnerDetails(owner, {
-                    onValueUpdate: pushValueUpdate,
-                    onPropStateChange: pushPropState,
-                    observedPropsMap: propsMap,
-                })
-
-                props.emit(msg('InspectedNodeDetails', result.details))
-
-                valueMap        = result.valueMap
-                lastDetails     = result.details
-                checkProxyProps = result.checkProxyProps || null
-            } else {
-                lastDetails     = undefined
-                checkProxyProps = null
-            }
+    
+
+    function inspectOwnerId(id: NodeID | null): void {
+    
+        const owner = id && getObjectById(id, ObjectType.Owner)
+        if (inspectedOwner) clearOwnerObservers(inspectedOwner, propsMap)
+        inspectedOwner = owner
+    
+        valueMap.reset()
+        clearUpdates()
+    
+        if (owner) {
+            const result = collectOwnerDetails(owner, {
+                onValueUpdate:     pushValueUpdate,
+                onPropStateChange: pushPropState,
+                observedPropsMap:  propsMap,
+            })
+    
+            props.emit(msg('InspectedNodeDetails', result.details))
+    
+            valueMap        = result.valueMap
+            lastDetails     = result.details
+            checkProxyProps = result.checkProxyProps || null
+        } else {
+            lastDetails     = undefined
+            checkProxyProps = null
+        }
+    
+        clearPrevDisposeListener?.()
+        clearPrevDisposeListener = owner
+            ? onOwnerDispose(owner, props.resetInspectedNode)
+            : undefined
+    }
 
-            clearPrevDisposeListener?.()
-            clearPrevDisposeListener = owner
-                ? onOwnerDispose(owner, props.resetInspectedNode)
-                : undefined
-        })
+    const inspectedOwnerId = s.createMemo(
+        () => props.enabled()
+            ? props.inspectedState().ownerId
+            : null
+    )
+    s.createEffect(() => {
+        let id = inspectedOwnerId()
+        s.untrack(() => inspectOwnerId(id))
     })
 
-    createEffect(() => {
+    function onUnownedRootChange() {
+        if (inspectedOwner === UNOWNED_ROOT) {
+            inspectOwnerId(inspectedOwnerId())
+        }
+    }
+    setup.unowned.onSignalAdded   = onUnownedRootChange
+    setup.unowned.onSignalRemoved = onUnownedRootChange
+
+    s.createEffect(() => {
         if (!props.enabled()) return
 
         // Check if proxy props have changed keys after each update queue
-        onCleanup(addSolidUpdateListener(() => checkProxyProps && triggerPropsCheck()))
+        s.onCleanup(addSolidUpdateListener(() => checkProxyProps && triggerPropsCheck()))
     })
 
     return {

packages/debugger/src/inspector/inspector.ts

@@ -1,12 +1,12 @@
 import {misc} from '@nothing-but/utils'
-import {untrackedCallback} from '@solid-devtools/shared/primitives'
 import {parseLocationString, type SourceLocation} from '../locator/index.ts'
 import {NodeType, ValueItemType} from '../main/constants.ts'
 import {ObjectType, getSdtId} from '../main/id.ts'
 import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe.ts'
 import setup from '../main/setup.ts'
 import type {Mapped, NodeID, Solid, ValueItemID} from '../main/types.ts'
 import * as utils from '../main/utils.ts'
+import {UNOWNED_ROOT} from '../main/roots.ts'
 import {encodeValue} from './serialize.ts'
 import {type InspectorUpdateMap, PropGetterState} from './types.ts'
 
@@ -250,14 +250,17 @@ function mapProps(props: Solid.Component['props']) {
     return {props: {proxy: isProxy, record}, checkProxyProps}
 }
 
-export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
-    owner: Solid.Owner,
-    config: {
-        onPropStateChange: Inspector.OnPropStateChange
-        onValueUpdate: Inspector.OnValueUpdate
-        observedPropsMap: ObservedPropsMap
-    },
+export type CollectDetailsConfig = {
+    onPropStateChange: Inspector.OnPropStateChange
+    onValueUpdate:     Inspector.OnValueUpdate
+    observedPropsMap:  ObservedPropsMap
+}
+
+export function collectOwnerDetails(
+    owner:  Solid.Owner,
+    config: CollectDetailsConfig,
 ) {
+
     const {onValueUpdate} = config
 
     // Set globals
@@ -279,8 +282,8 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
         owned = null
         const symbols = Object.getOwnPropertySymbols(owner.context)
         /*
-            since 1.8 context keys from parent are cloned to child context
-            the last key should be the added value
+         since 1.8 context keys from parent are cloned to child context
+         the last key should be the added value
         */
         const context_value = owner.context[symbols[symbols.length - 1]!]
         getValue = () => context_value
@@ -329,18 +332,28 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
         onValueUpdate(`${ValueItemType.Signal}:${signalId}`)
 
     // map signals
-    if (sourceMap) {
-        for (const signal of sourceMap) {
-            const mapped = mapSourceValue(signal, onSignalUpdate)
-            mapped && details.signals.push(mapped)
-        }
+    if (sourceMap) for (let signal of sourceMap) {
+        let mapped = mapSourceValue(signal, onSignalUpdate)
+        if (mapped) details.signals.push(mapped)
     }
 
     // map memos
-    if (owned) {
-        for (const node of owned) {
-            const mapped = mapSourceValue(node, onSignalUpdate)
-            mapped && details.signals.push(mapped)
+    if (owned) for (let node of owned) {
+        let mapped = mapSourceValue(node, onSignalUpdate)
+        if (mapped) details.signals.push(mapped)
+    }
+
+    /* Handle the fake unowned root */
+    if (owner === UNOWNED_ROOT) {
+        for (let signal_ref of setup.unowned.signals) {
+
+            let signal = signal_ref.deref()
+            if (signal == null) continue
+    
+            let mapped = mapSourceValue(signal, onSignalUpdate)
+            if (mapped == null) continue
+            
+            details.signals.push(mapped)
         }
     }
 
@@ -356,4 +369,4 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
     ValueMap = OnValueUpdate = OnPropStateChange = PropsMap = undefined!
 
     return result
-})
+}

packages/debugger/src/inspector/test/index.test.tsx

@@ -73,7 +73,7 @@ describe('collectOwnerDetails', () => {
                         type: NodeType.Signal,
                         id: getSdtId(signalB, ObjectType.Signal),
                         name: 'element',
-                        value: [[ValueType.Element, '#4:div']],
+                        value: [[ValueType.Element, '#3:div']],
                     },
                     {
                         type: NodeType.Memo,
@@ -88,7 +88,7 @@ describe('collectOwnerDetails', () => {
             expect(valueMap.get(`signal:${getSdtId(signalB, ObjectType.Signal)}`)).toBeTruthy()
             expect(valueMap.get(`signal:${getSdtId(innerMemo, ObjectType.Owner)}`)).toBeTruthy()
 
-            expect(getObjectById('#4', ObjectType.Element)).toBe(div)
+            expect(getObjectById('#3', ObjectType.Element)).toBe(div)
 
             dispose()
         })
@@ -124,11 +124,11 @@ describe('collectOwnerDetails', () => {
             dispose()
 
             expect(details).toEqual({
-                id: '#1',
+                id: '#0',
                 name: 'TestComponent',
                 type: NodeType.Component,
                 signals: [],
-                value: [[ValueType.Element, '#2:div']],
+                value: [[ValueType.Element, '#1:div']],
                 props: {
                     proxy: false,
                     record: {
@@ -148,7 +148,7 @@ describe('collectOwnerDetails', () => {
                 },
             } satisfies Mapped.OwnerDetails)
 
-            expect(getObjectById('#2', ObjectType.Element)).toBeInstanceOf(HTMLDivElement)
+            expect(getObjectById('#1', ObjectType.Element)).toBeInstanceOf(HTMLDivElement)
         })
     })
 
@@ -181,11 +181,11 @@ describe('collectOwnerDetails', () => {
             })
 
             expect(details).toEqual({
-                id: '#1',
+                id: '#0',
                 name: 'Button',
                 type: NodeType.Component,
                 signals: [],
-                value: [[ValueType.Element, '#2:button']],
+                value: [[ValueType.Element, '#1:button']],
                 props: {
                     proxy: true,
                     record: {
@@ -201,7 +201,7 @@ describe('collectOwnerDetails', () => {
                 },
             } satisfies Mapped.OwnerDetails)
 
-            expect(getObjectById('#2', ObjectType.Element)).toBeInstanceOf(HTMLButtonElement)
+            expect(getObjectById('#1', ObjectType.Element)).toBeInstanceOf(HTMLButtonElement)
 
             dispose()
         })

packages/debugger/src/locator/index.ts

@@ -5,11 +5,10 @@ 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 {type OutputEmit} from '../main/index.ts'
 import * as registry from '../main/component-registry.ts'
 import {ObjectType, getObjectById} from '../main/id.ts'
 import SolidAPI from '../main/setup.ts'
-import {type NodeID} from '../main/types.ts'
+import {type NodeID, type OutputEmit} from '../main/types.ts'
 import {createElementsOverlay} from './element-overlay.tsx'
 import {
     type LocatorComponent,