Pre-observe all components props

Author: thetarnav

.changeset/forty-nights-find.md

@@ -0,0 +1,5 @@
+---
+"@solid-devtools/debugger": patch
+---
+
+Pre-observe all components props, to sometimes get actual values when inspected.

packages/debugger/src/inspector/index.ts

@@ -7,9 +7,9 @@ import {type InspectedState, type Mapped, type NodeID, type OutputEmit, type Sol
 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 * as inspector from './inspector.ts'
 import {encodeValue} from './serialize.ts'
-import {type StoreNodeProperty, type StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate} from './store.ts'
+import * as store from './store.ts'
 import {GLOBAL_GET_VALUE, type InspectorUpdate, type InspectorUpdateMap, PropGetterState} from './types.ts'
 
 export * from './types.ts'
@@ -25,11 +25,11 @@ export function createInspector(props: {
     resetInspectedNode: VoidFunction
     emit:               OutputEmit
 }) {
-    
+
     let lastDetails: Mapped.OwnerDetails | undefined
     let inspectedOwner: Solid.Owner | null
-    let valueMap = new ValueNodeMap()
-    const propsMap: ObservedPropsMap = new WeakMap()
+    let valueMap = new inspector.ValueNodeMap()
+    const propsMap: inspector.ObservedPropsMap = new WeakMap()
     /** compare props object with the previous one to see whats changed */
     let checkProxyProps: (() => InspectorUpdateMap['propKeys'] | null) | null
 
@@ -46,7 +46,7 @@ export function createInspector(props: {
     const {pushPropState, pushValueUpdate, pushInspectToggle, triggerPropsCheck, clearUpdates} =
         (() => {
             const valueUpdates = new Map<ValueItemID, boolean | null>()
-            let storeUpdates: [storeProperty: StoreNodeProperty, data: StoreUpdateData][] = []
+            let storeUpdates: [storeProperty: store.StoreNodeProperty, data: store.StoreUpdateData][] = []
             let checkProps = false
             let propStates: InspectorUpdateMap['propState'] = {}
 
@@ -64,7 +64,7 @@ export function createInspector(props: {
                         selected,
                         setup.eli,
                         selected &&
-                            (storeNode => node.addStoreObserver(observeStoreNode(storeNode))),
+                            (storeNode => node.addStoreObserver(store.observeStoreNode(storeNode))),
                     )
                     batchedUpdates.push([
                         toggleChange === null ? 'value' : 'inspectToggle',
@@ -109,7 +109,7 @@ export function createInspector(props: {
 
             // Subscribe to any store updates
             // observed stores are managed by the store.ts module (only stores in selected values get observed)
-            setOnStoreNodeUpdate((...payload) => {
+            store.setOnStoreNodeUpdate((...payload) => {
                 storeUpdates.push(payload)
                 flush()
             })
@@ -148,45 +148,44 @@ export function createInspector(props: {
 
     let clearPrevDisposeListener: VoidFunction | undefined
 
-    
+
 
     function inspectOwnerId(id: NodeID | null): void {
-    
+
         const owner = id && getObjectById(id, ObjectType.Owner)
-        if (inspectedOwner) clearOwnerObservers(inspectedOwner, propsMap)
+        if (inspectedOwner) inspector.clearOwnerObservers(inspectedOwner, propsMap)
         inspectedOwner = owner
-    
+
         valueMap.reset()
         clearUpdates()
-    
+
         if (owner) {
-            const result = collectOwnerDetails(owner, {
+            const result = inspector.collectOwnerDetails(owner, {
                 onValueUpdate:     pushValueUpdate,
                 onPropStateChange: pushPropState,
                 observedPropsMap:  propsMap,
                 eli:               setup.eli,
             })
-    
+
             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
     }
 
-    const inspectedOwnerId = s.createMemo(
-        () => props.enabled()
-            ? props.inspectedState().ownerId
-            : null
+    const inspectedOwnerId = s.createMemo(() => props.enabled()
+        ? props.inspectedState().ownerId
+        : null
     )
     s.createEffect(() => {
         let id = inspectedOwnerId()
@@ -219,6 +218,9 @@ export function createInspector(props: {
         consoleLogValue(value_id: ValueItemID): void {
             // eslint-disable-next-line no-console
             console.log(getValue(value_id))
+        },
+        preObserveComponent(component: Solid.Component): void {
+            inspector.preObserveComponentProps(component, propsMap)
         }
     }
 }

packages/debugger/src/inspector/inspector.ts

@@ -46,11 +46,9 @@ export class ValueNodeMap {
     }
 }
 
-export namespace Inspector {
-    /** Prop becomes stale or live (is being currently listened to reactively or not) */
-    export type OnPropStateChange = (key: string, state: PropGetterState) => void
-    export type OnValueUpdate = (id: ValueItemID) => void
-}
+/** Prop becomes stale or live (is being currently listened to reactively or not) */
+export type OnPropStateChange = (key: string, state: PropGetterState) => void
+export type OnValueUpdate = (id: ValueItemID) => void
 
 export type ObservedPropsMap = WeakMap<Solid.Component['props'], ObservedProps>
 
@@ -63,13 +61,13 @@ const $NOT_SET = Symbol('not-set')
 export class ObservedProps {
     constructor(readonly props: Solid.Component['props']) {}
 
-    private onPropStateChange?: Inspector.OnPropStateChange | undefined
-    private onValueUpdate?: Inspector.OnValueUpdate | undefined
+    private onPropStateChange?: OnPropStateChange | undefined
+    private onValueUpdate?: OnValueUpdate | undefined
     private observedGetters = {} as Record<string, {v: unknown | typeof $NOT_SET; n: number}>
 
     observe(
-        onPropStateChange: Inspector.OnPropStateChange,
-        onValueUpdate: Inspector.OnValueUpdate,
+        onPropStateChange: OnPropStateChange,
+        onValueUpdate: OnValueUpdate,
     ) {
         this.onPropStateChange = onPropStateChange
         this.onValueUpdate = onValueUpdate
@@ -157,8 +155,8 @@ export function clearOwnerObservers(owner: Solid.Owner, observedPropsMap: Observ
 
 // Globals set before collecting the owner details
 let ValueMap!: ValueNodeMap
-let OnValueUpdate: Inspector.OnValueUpdate
-let OnPropStateChange: Inspector.OnPropStateChange
+let OnValueUpdate: OnValueUpdate
+let OnPropStateChange: OnPropStateChange
 let PropsMap: ObservedPropsMap
 
 const $INSPECTOR = Symbol('inspector')
@@ -199,26 +197,48 @@ function mapSourceValue<TEl extends object>(
     }
 }
 
+/**
+ * Pre-observe component props without gathering data.
+ * To get fresh values when the component is later inspected.
+ */
+export function preObserveComponentProps(
+    component: Solid.Component,
+    props_map: ObservedPropsMap,
+): void {
+    let props = component.props
+    
+    // Only observe static shape props (not proxy props)
+    if (utils.is_solid_proxy(props)) return
+    
+    let observed = props_map.get(props)
+    if (!observed) props_map.set(props, (observed = new ObservedProps(props)))
+    
+    // Set up getters for all props to enable tracking
+    for (let [key, desc] of Object.entries(Object.getOwnPropertyDescriptors(props))) {
+        if (desc.get) {
+            let id: ValueItemID = `prop:${key}`
+            observed.observeProp(key, id, desc.get)
+        }
+    }
+}
+
 function mapProps<TEl extends object>(
     props: Solid.Component['props'],
     eli:   ElementInterface<TEl>,
 ) {
     // proxy props need to be checked for changes in keys
-    const isProxy = !!(props as any)[setup.solid.$PROXY]
-    const record: Mapped.Props['record'] = {}
-
+    let is_proxy = utils.is_solid_proxy(props)
     let checkProxyProps: (() => ReturnType<typeof compareProxyPropKeys>) | undefined
+    
+    let record: Mapped.Props['record'] = {}
 
     // PROXY PROPS
-    if (isProxy) {
-        let propsKeys = Object.keys(props)
+    if (is_proxy) {
+        let keys = Object.keys(props)
 
-        for (const key of propsKeys) record[key] = {getter: PropGetterState.Stale, value: null}
+        for (let key of keys) record[key] = {getter: PropGetterState.Stale, value: null}
 
-        checkProxyProps = () => {
-            const _oldKeys = propsKeys
-            return compareProxyPropKeys(_oldKeys, (propsKeys = Object.keys(props)))
-        }
+        checkProxyProps = () => compareProxyPropKeys(keys, (keys = Object.keys(props)))
     }
     // STATIC SHAPE
     else {
@@ -227,13 +247,13 @@ function mapProps<TEl extends object>(
 
         observed.observe(OnPropStateChange, OnValueUpdate)
 
-        for (const [key, desc] of Object.entries(Object.getOwnPropertyDescriptors(props))) {
-            const id: ValueItemID = `prop:${key}`
+        for (let [key, desc] of Object.entries(Object.getOwnPropertyDescriptors(props))) {
+            let id: ValueItemID = `prop:${key}`
             // GETTER
             if (desc.get) {
-                const {getValue, isStale} = observed.observeProp(key, id, desc.get)
+                let {getValue, isStale} = observed.observeProp(key, id, desc.get)
                 ValueMap.add(id, getValue)
-                const lastValue = getValue()
+                let lastValue = getValue()
                 record[key] = {
                     getter: isStale ? PropGetterState.Stale : PropGetterState.Live,
                     value: lastValue !== $NOT_SET ? encodeValue(getValue(), false, eli) : null,
@@ -252,12 +272,12 @@ function mapProps<TEl extends object>(
         }
     }
 
-    return {props: {proxy: isProxy, record}, checkProxyProps}
+    return {props: {proxy: is_proxy, record}, checkProxyProps}
 }
 
 export type CollectDetailsConfig<TEl extends object> = {
-    onPropStateChange: Inspector.OnPropStateChange
-    onValueUpdate:     Inspector.OnValueUpdate
+    onPropStateChange: OnPropStateChange
+    onValueUpdate:     OnValueUpdate
     observedPropsMap:  ObservedPropsMap
     eli:               ElementInterface<TEl>,
 }
@@ -270,10 +290,10 @@ export function collectOwnerDetails<TEl extends object>(
     const {onValueUpdate, eli} = config
 
     // Set globals
-    ValueMap = new ValueNodeMap()
-    OnValueUpdate = onValueUpdate
+    ValueMap          = new ValueNodeMap()
+    OnValueUpdate     = onValueUpdate
     OnPropStateChange = config.onPropStateChange
-    PropsMap = config.observedPropsMap
+    PropsMap          = config.observedPropsMap
 
     const id = getSdtId(owner, ObjectType.Owner)
     const type = utils.markOwnerType(owner)