Skip to content

Commit a5c28a9

Browse files
thetarnavthetarnav
committed
Make UNOWNED root an actual owner object
1 parent e65b19f commit a5c28a9

10 files changed

Lines changed: 138 additions & 115 deletions

File tree

‎examples/sandbox/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ const createComponent = (content: () => s.JSX.Element) => {
119119
return Content
120120
}
121121

122+
const [someUnusedTopLevelSignal, setSomeUnusedTopLevelSignal] = s.createSignal(123)
123+
122124
const App: s.Component = () => {
123125

124126
s.DEV?.registerGraph({value: {foo: 123}, name: 'my_custom_value'})

‎packages/debugger/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export {
66
observeValueUpdate,
77
removeValueUpdateObserver,
88
} from './main/observe.ts'
9-
export {attachDebugger, unobserveAllRoots} from './main/roots.ts'
9+
export {attachDebugger} from './main/roots.ts'
1010
export {
1111
getNodeName,
1212
getNodeType,

‎packages/debugger/src/inspector/index.ts‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import {msg, warn} from '@solid-devtools/shared/utils'
1+
import * as s from 'solid-js'
22
import {scheduleIdle, throttle} from '@solid-primitives/scheduled'
3-
import {type Accessor, createEffect, createMemo, onCleanup} from 'solid-js'
3+
import {msg, warn} from '@solid-devtools/shared/utils'
44
import {ObjectType, getObjectById} from '../main/id.ts'
55
import {addSolidUpdateListener} from '../main/observe.ts'
6-
import {type InspectedState, type Mapped, type OutputEmit, type Solid, type ValueItemID} from '../main/types.ts'
6+
import {type InspectedState, type Mapped, type NodeID, type OutputEmit, type Solid, type ValueItemID} from '../main/types.ts'
77
import {onOwnerDispose} from '../main/utils.ts'
8+
import setup from '../main/setup.ts'
9+
import {UNOWNED_ROOT} from '../main/roots.ts'
810
import {type ObservedPropsMap, ValueNodeMap, clearOwnerObservers, collectOwnerDetails} from './inspector.ts'
911
import {encodeValue} from './serialize.ts'
1012
import {type StoreNodeProperty, type StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate} from './store.ts'
@@ -18,8 +20,8 @@ export type ToggleInspectedValueData = {id: ValueItemID; selected: boolean}
1820
* Plugin module
1921
*/
2022
export function createInspector(props: {
21-
inspectedState: Accessor<InspectedState>
22-
enabled: Accessor<boolean>
23+
inspectedState: s.Accessor<InspectedState>
24+
enabled: s.Accessor<boolean>
2325
resetInspectedNode: VoidFunction
2426
emit: OutputEmit
2527
}) {
@@ -145,49 +147,63 @@ export function createInspector(props: {
145147

146148
let clearPrevDisposeListener: VoidFunction | undefined
147149

148-
const inspectedOwnerId = createMemo(
149-
() => props.enabled()
150-
? props.inspectedState().ownerId
151-
: null
152-
)
153-
createEffect(() => {
154-
const id = inspectedOwnerId()
150+
155151

152+
function inspectOwnerId(id: NodeID | null): void {
153+
156154
const owner = id && getObjectById(id, ObjectType.Owner)
157155
if (inspectedOwner) clearOwnerObservers(inspectedOwner, propsMap)
158156
inspectedOwner = owner
159157

160158
valueMap.reset()
161159
clearUpdates()
162-
160+
163161
if (owner) {
164162
const result = collectOwnerDetails(owner, {
165-
onValueUpdate: pushValueUpdate,
163+
onValueUpdate: pushValueUpdate,
166164
onPropStateChange: pushPropState,
167-
observedPropsMap: propsMap,
165+
observedPropsMap: propsMap,
168166
})
169-
167+
170168
props.emit(msg('InspectedNodeDetails', result.details))
171-
169+
172170
valueMap = result.valueMap
173171
lastDetails = result.details
174172
checkProxyProps = result.checkProxyProps || null
175173
} else {
176174
lastDetails = undefined
177175
checkProxyProps = null
178176
}
179-
177+
180178
clearPrevDisposeListener?.()
181179
clearPrevDisposeListener = owner
182180
? onOwnerDispose(owner, props.resetInspectedNode)
183181
: undefined
182+
}
183+
184+
const inspectedOwnerId = s.createMemo(
185+
() => props.enabled()
186+
? props.inspectedState().ownerId
187+
: null
188+
)
189+
s.createEffect(() => {
190+
let id = inspectedOwnerId()
191+
s.untrack(() => inspectOwnerId(id))
184192
})
185193

186-
createEffect(() => {
194+
function onUnownedRootChange() {
195+
if (inspectedOwner === UNOWNED_ROOT) {
196+
inspectOwnerId(inspectedOwnerId())
197+
}
198+
}
199+
setup.unowned.onSignalAdded = onUnownedRootChange
200+
setup.unowned.onSignalRemoved = onUnownedRootChange
201+
202+
s.createEffect(() => {
187203
if (!props.enabled()) return
188204

189205
// Check if proxy props have changed keys after each update queue
190-
onCleanup(addSolidUpdateListener(() => checkProxyProps && triggerPropsCheck()))
206+
s.onCleanup(addSolidUpdateListener(() => checkProxyProps && triggerPropsCheck()))
191207
})
192208

193209
return {

‎packages/debugger/src/inspector/inspector.ts‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {misc} from '@nothing-but/utils'
2-
import {untrackedCallback} from '@solid-devtools/shared/primitives'
32
import {parseLocationString, type SourceLocation} from '../locator/index.ts'
43
import {NodeType, ValueItemType} from '../main/constants.ts'
54
import {ObjectType, getSdtId} from '../main/id.ts'
65
import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe.ts'
76
import setup from '../main/setup.ts'
87
import type {Mapped, NodeID, Solid, ValueItemID} from '../main/types.ts'
98
import * as utils from '../main/utils.ts'
9+
import {UNOWNED_ROOT} from '../main/roots.ts'
1010
import {encodeValue} from './serialize.ts'
1111
import {type InspectorUpdateMap, PropGetterState} from './types.ts'
1212

@@ -250,14 +250,17 @@ function mapProps(props: Solid.Component['props']) {
250250
return {props: {proxy: isProxy, record}, checkProxyProps}
251251
}
252252

253-
export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
254-
owner: Solid.Owner,
255-
config: {
256-
onPropStateChange: Inspector.OnPropStateChange
257-
onValueUpdate: Inspector.OnValueUpdate
258-
observedPropsMap: ObservedPropsMap
259-
},
253+
export type CollectDetailsConfig = {
254+
onPropStateChange: Inspector.OnPropStateChange
255+
onValueUpdate: Inspector.OnValueUpdate
256+
observedPropsMap: ObservedPropsMap
257+
}
258+
259+
export function collectOwnerDetails(
260+
owner: Solid.Owner,
261+
config: CollectDetailsConfig,
260262
) {
263+
261264
const {onValueUpdate} = config
262265

263266
// Set globals
@@ -279,8 +282,8 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
279282
owned = null
280283
const symbols = Object.getOwnPropertySymbols(owner.context)
281284
/*
282-
since 1.8 context keys from parent are cloned to child context
283-
the last key should be the added value
285+
since 1.8 context keys from parent are cloned to child context
286+
the last key should be the added value
284287
*/
285288
const context_value = owner.context[symbols[symbols.length - 1]!]
286289
getValue = () => context_value
@@ -329,18 +332,28 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
329332
onValueUpdate(`${ValueItemType.Signal}:${signalId}`)
330333

331334
// map signals
332-
if (sourceMap) {
333-
for (const signal of sourceMap) {
334-
const mapped = mapSourceValue(signal, onSignalUpdate)
335-
mapped && details.signals.push(mapped)
336-
}
335+
if (sourceMap) for (let signal of sourceMap) {
336+
let mapped = mapSourceValue(signal, onSignalUpdate)
337+
if (mapped) details.signals.push(mapped)
337338
}
338339

339340
// map memos
340-
if (owned) {
341-
for (const node of owned) {
342-
const mapped = mapSourceValue(node, onSignalUpdate)
343-
mapped && details.signals.push(mapped)
341+
if (owned) for (let node of owned) {
342+
let mapped = mapSourceValue(node, onSignalUpdate)
343+
if (mapped) details.signals.push(mapped)
344+
}
345+
346+
/* Handle the fake unowned root */
347+
if (owner === UNOWNED_ROOT) {
348+
for (let signal_ref of setup.unowned.signals) {
349+
350+
let signal = signal_ref.deref()
351+
if (signal == null) continue
352+
353+
let mapped = mapSourceValue(signal, onSignalUpdate)
354+
if (mapped == null) continue
355+
356+
details.signals.push(mapped)
344357
}
345358
}
346359

@@ -356,4 +369,4 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
356369
ValueMap = OnValueUpdate = OnPropStateChange = PropsMap = undefined!
357370

358371
return result
359-
})
372+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ describe('collectOwnerDetails', () => {
7373
type: NodeType.Signal,
7474
id: getSdtId(signalB, ObjectType.Signal),
7575
name: 'element',
76-
value: [[ValueType.Element, '#4:div']],
76+
value: [[ValueType.Element, '#3:div']],
7777
},
7878
{
7979
type: NodeType.Memo,
@@ -88,7 +88,7 @@ describe('collectOwnerDetails', () => {
8888
expect(valueMap.get(`signal:${getSdtId(signalB, ObjectType.Signal)}`)).toBeTruthy()
8989
expect(valueMap.get(`signal:${getSdtId(innerMemo, ObjectType.Owner)}`)).toBeTruthy()
9090

91-
expect(getObjectById('#4', ObjectType.Element)).toBe(div)
91+
expect(getObjectById('#3', ObjectType.Element)).toBe(div)
9292

9393
dispose()
9494
})
@@ -124,11 +124,11 @@ describe('collectOwnerDetails', () => {
124124
dispose()
125125

126126
expect(details).toEqual({
127-
id: '#1',
127+
id: '#0',
128128
name: 'TestComponent',
129129
type: NodeType.Component,
130130
signals: [],
131-
value: [[ValueType.Element, '#2:div']],
131+
value: [[ValueType.Element, '#1:div']],
132132
props: {
133133
proxy: false,
134134
record: {
@@ -148,7 +148,7 @@ describe('collectOwnerDetails', () => {
148148
},
149149
} satisfies Mapped.OwnerDetails)
150150

151-
expect(getObjectById('#2', ObjectType.Element)).toBeInstanceOf(HTMLDivElement)
151+
expect(getObjectById('#1', ObjectType.Element)).toBeInstanceOf(HTMLDivElement)
152152
})
153153
})
154154

@@ -181,11 +181,11 @@ describe('collectOwnerDetails', () => {
181181
})
182182

183183
expect(details).toEqual({
184-
id: '#1',
184+
id: '#0',
185185
name: 'Button',
186186
type: NodeType.Component,
187187
signals: [],
188-
value: [[ValueType.Element, '#2:button']],
188+
value: [[ValueType.Element, '#1:button']],
189189
props: {
190190
proxy: true,
191191
record: {
@@ -201,7 +201,7 @@ describe('collectOwnerDetails', () => {
201201
},
202202
} satisfies Mapped.OwnerDetails)
203203

204-
expect(getObjectById('#2', ObjectType.Element)).toBeInstanceOf(HTMLButtonElement)
204+
expect(getObjectById('#1', ObjectType.Element)).toBeInstanceOf(HTMLButtonElement)
205205

206206
dispose()
207207
})

‎packages/debugger/src/main/index.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {createLocator} from '../locator/index.ts'
88
import {createStructure} from '../structure/index.ts'
99
import {DebuggerModule, DEFAULT_MAIN_VIEW, DevtoolsMainView} from './constants.ts'
1010
import {getObjectById, getSdtId, ObjectType} from './id.ts'
11+
import {initRoots} from './roots.ts'
1112
import setup from './setup.ts'
1213
import {
1314
INSPECTED_STATE_NULL,
@@ -21,6 +22,8 @@ import {
2122

2223
function createDebugger() {
2324

25+
initRoots()
26+
2427
const _output_listeners: OutputListener[] = []
2528

2629
function listen(listener: OutputListener): (() => void) {
@@ -107,7 +110,7 @@ function createDebugger() {
107110
if (data == null) {
108111
setInspectedState(INSPECTED_STATE_NULL)
109112
} else {
110-
let ownerId = data.ownerId && getObjectById(data.ownerId, ObjectType.Owner) && data.ownerId
113+
let ownerId = data.ownerId && getObjectById(data.ownerId, ObjectType.Owner) && data.ownerId
111114
let signalId = data.signalId && getObjectById(data.signalId, ObjectType.Signal) && data.signalId
112115
let treeWalkerOwnerId = getTreeWalkerOwnerId(ownerId)
113116
setInspectedState({ownerId, signalId, treeWalkerOwnerId})
@@ -199,14 +202,6 @@ function createDebugger() {
199202
s.createEffect(defer(modules.locatorKeyPressSignal, state => {
200203
emitOutput(msg('LocatorModeChange', state))
201204
}))
202-
203-
console.log(setup.unowned.signals)
204-
setup.unowned.onSignalAdded = (ref, idx) => {
205-
console.log('unowned.onSignalAdded', ref.deref(), idx)
206-
}
207-
setup.unowned.onSignalRemoved = (ref, idx) => {
208-
console.log('unowned.onSignalRemoved', ref.deref(), idx)
209-
}
210205

211206
function emitInput(e: InputMessage) {
212207

‎packages/debugger/src/main/observe.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,8 @@ Dev hooks and observing reactive graph nodes
55
*/
66

77
import {chain, tryOnCleanup} from '@solid-primitives/utils'
8-
import {attachDebugger} from './roots.ts'
98
import setup from './setup.ts'
109
import {type Solid, type ValueUpdateListener} from './types.ts'
11-
import {isSolidRoot} from './utils.ts'
12-
13-
for (const e of setup.get_created_owners()) {
14-
attachDebugger(e)
15-
}
16-
17-
//
18-
// AFTER CREATE OWNER
19-
//
20-
21-
setup.solid.hooks.afterCreateOwner = function (owner) {
22-
if (isSolidRoot(owner)) {
23-
attachDebugger(owner)
24-
}
25-
}
2610

2711
//
2812
// AFTER UPDATE

0 commit comments

Comments
 (0)