Skip to content

Commit d1988bc

Browse files
thetarnavthetarnav
committed
Use element interface when serializing values
1 parent e3aadc5 commit d1988bc

5 files changed

Lines changed: 93 additions & 78 deletions

File tree

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export function createInspector(props: {
6262
const encoded = encodeValue(
6363
node.getValue(),
6464
selected,
65+
setup.debugger_options.eli,
6566
selected &&
6667
(storeNode => node.addStoreObserver(observeStoreNode(storeNode))),
6768
)
@@ -79,7 +80,7 @@ export function createInspector(props: {
7980
[
8081
storeProperty,
8182
typeof data === 'object'
82-
? encodeValue(data.value, true, undefined, true)
83+
? encodeValue(data.value, true, setup.debugger_options.eli, undefined, true)
8384
: data ?? null,
8485
],
8586
])
@@ -163,6 +164,7 @@ export function createInspector(props: {
163164
onValueUpdate: pushValueUpdate,
164165
onPropStateChange: pushPropState,
165166
observedPropsMap: propsMap,
167+
eli: setup.debugger_options.eli,
166168
})
167169

168170
props.emit(msg('InspectedNodeDetails', result.details))

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

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import * as s from 'solid-js'
44
import * as test from 'vitest'
55
import {getObjectById, getSdtId, ObjectType} from '../main/id.ts'
66
import setup from '../main/setup.ts'
7-
import {type Mapped, NodeType, PropGetterState, type Solid, ValueType} from '../types.ts'
7+
import {dom_element_interface, type Mapped, NodeType, PropGetterState, type Solid, ValueType} from '../types.ts'
88
import {collectOwnerDetails} from './inspector.ts'
99

10+
const eli = dom_element_interface
11+
1012
test.describe('collectOwnerDetails', () => {
1113
test.it('collects focused owner details', () => {
1214
s.createRoot(dispose => {
@@ -42,13 +44,10 @@ test.describe('collectOwnerDetails', () => {
4244
const [innerMemo] = memo.owned as [Solid.Memo, Solid.Computation]
4345

4446
const {details, valueMap} = collectOwnerDetails(memo, {
45-
observedPropsMap: new WeakMap(),
46-
onPropStateChange: () => {
47-
/**/
48-
},
49-
onValueUpdate: () => {
50-
/**/
51-
},
47+
observedPropsMap: new WeakMap(),
48+
onPropStateChange: () => {/**/},
49+
onValueUpdate: () => {/**/},
50+
eli: eli,
5251
})
5352

5453
test.expect(details).toEqual({
@@ -109,13 +108,10 @@ test.describe('collectOwnerDetails', () => {
109108
))
110109

111110
const {details} = collectOwnerDetails(owner, {
112-
observedPropsMap: new WeakMap(),
113-
onPropStateChange: () => {
114-
/**/
115-
},
116-
onValueUpdate: () => {
117-
/**/
118-
},
111+
observedPropsMap: new WeakMap(),
112+
onPropStateChange: () => {/**/},
113+
onValueUpdate: () => {/**/},
114+
eli: eli,
119115
})
120116

121117
dispose()
@@ -169,13 +165,10 @@ test.describe('collectOwnerDetails', () => {
169165
})
170166

171167
const {details} = collectOwnerDetails(owner, {
172-
observedPropsMap: new WeakMap(),
173-
onPropStateChange: () => {
174-
/**/
175-
},
176-
onValueUpdate: () => {
177-
/**/
178-
},
168+
observedPropsMap: new WeakMap(),
169+
onPropStateChange: () => {/**/},
170+
onValueUpdate: () => {/**/},
171+
eli: eli,
179172
})
180173

181174
test.expect(details).toEqual({
@@ -215,11 +208,10 @@ test.describe('collectOwnerDetails', () => {
215208

216209
const onValueUpdate = test.vi.fn()
217210
collectOwnerDetails(owner, {
218-
observedPropsMap: new WeakMap(),
219-
onPropStateChange: () => {
220-
/**/
221-
},
222-
onValueUpdate: onValueUpdate,
211+
observedPropsMap: new WeakMap(),
212+
onPropStateChange: () => {/**/},
213+
onValueUpdate: onValueUpdate,
214+
eli: eli,
223215
})
224216

225217
test.expect(onValueUpdate).not.toBeCalled()
@@ -249,11 +241,10 @@ test.describe('collectOwnerDetails', () => {
249241

250242
const onValueUpdate = test.vi.fn()
251243
collectOwnerDetails(owner, {
252-
observedPropsMap: new WeakMap(),
253-
onPropStateChange: () => {
254-
/**/
255-
},
256-
onValueUpdate: onValueUpdate,
244+
observedPropsMap: new WeakMap(),
245+
onPropStateChange: () => {/**/},
246+
onValueUpdate: onValueUpdate,
247+
eli: eli,
257248
})
258249

259250
test.expect(onValueUpdate).not.toBeCalled()

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

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {parseLocationString} from '../locator/index.ts'
33
import {ObjectType, getSdtId} from '../main/id.ts'
44
import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe.ts'
55
import setup from '../main/setup.ts'
6-
import {type Mapped, type NodeID, type Solid, type SourceLocation, type ValueItemID, NodeType, ValueItemType} from '../main/types.ts'
6+
import {type ElementInterface, type Mapped, type NodeID, type Solid, type SourceLocation, type ValueItemID, NodeType, ValueItemType} from '../main/types.ts'
77
import * as utils from '../main/utils.ts'
88
import {UNOWNED_ROOT} from '../main/roots.ts'
99
import {encodeValue} from './serialize.ts'
@@ -163,9 +163,10 @@ let PropsMap: ObservedPropsMap
163163

164164
const $INSPECTOR = Symbol('inspector')
165165

166-
function mapSourceValue(
166+
function mapSourceValue<TEl extends object>(
167167
node_raw: Solid.SourceMapValue | Solid.Computation,
168168
handler: (nodeId: NodeID, value: unknown) => void,
169+
eli: ElementInterface<TEl>,
169170
): Mapped.SourceValue | null {
170171

171172
let node = utils.getNode(node_raw)
@@ -194,11 +195,14 @@ function mapSourceValue(
194195
type: node.kind,
195196
name: utils.getNodeName(node.data),
196197
id: id,
197-
value: encodeValue(value, false),
198+
value: encodeValue(value, false, eli),
198199
}
199200
}
200201

201-
function mapProps(props: Solid.Component['props']) {
202+
function mapProps<TEl extends object>(
203+
props: Solid.Component['props'],
204+
eli: ElementInterface<TEl>,
205+
) {
202206
// proxy props need to be checked for changes in keys
203207
const isProxy = !!(props as any)[setup.solid.$PROXY]
204208
const record: Mapped.Props['record'] = {}
@@ -232,14 +236,14 @@ function mapProps(props: Solid.Component['props']) {
232236
const lastValue = getValue()
233237
record[key] = {
234238
getter: isStale ? PropGetterState.Stale : PropGetterState.Live,
235-
value: lastValue !== $NOT_SET ? encodeValue(getValue(), false) : null,
239+
value: lastValue !== $NOT_SET ? encodeValue(getValue(), false, eli) : null,
236240
}
237241
}
238242
// VALUE
239243
else {
240244
record[key] = {
241245
getter: false,
242-
value: encodeValue(desc.value, false),
246+
value: encodeValue(desc.value, false, eli),
243247
}
244248
// non-object props cannot be inspected (won't ever change and aren't deep)
245249
if (Array.isArray(desc.value) || misc.is_plain_object(desc.value))
@@ -251,18 +255,19 @@ function mapProps(props: Solid.Component['props']) {
251255
return {props: {proxy: isProxy, record}, checkProxyProps}
252256
}
253257

254-
export type CollectDetailsConfig = {
258+
export type CollectDetailsConfig<TEl extends object> = {
255259
onPropStateChange: Inspector.OnPropStateChange
256260
onValueUpdate: Inspector.OnValueUpdate
257261
observedPropsMap: ObservedPropsMap
262+
eli: ElementInterface<TEl>,
258263
}
259264

260-
export function collectOwnerDetails(
265+
export function collectOwnerDetails<TEl extends object>(
261266
owner: Solid.Owner,
262-
config: CollectDetailsConfig,
267+
config: CollectDetailsConfig<TEl>,
263268
) {
264269

265-
const {onValueUpdate} = config
270+
const {onValueUpdate, eli} = config
266271

267272
// Set globals
268273
ValueMap = new ValueNodeMap()
@@ -308,7 +313,7 @@ export function collectOwnerDetails(
308313
details.hmr = true
309314
}
310315

311-
;({checkProxyProps, props: details.props} = mapProps(owner.props))
316+
;({checkProxyProps, props: details.props} = mapProps(owner.props, eli))
312317

313318
let location: string | SourceLocation | undefined
314319
if ((
@@ -326,21 +331,21 @@ export function collectOwnerDetails(
326331
observeValueUpdate(owner, () => onValueUpdate(ValueItemType.Value), $INSPECTOR)
327332
}
328333

329-
details.value = encodeValue(getValue(), false)
334+
details.value = encodeValue(getValue(), false, eli)
330335
}
331336

332337
const onSignalUpdate = (signalId: NodeID) =>
333338
onValueUpdate(`${ValueItemType.Signal}:${signalId}`)
334339

335340
// map signals
336341
if (sourceMap) for (let signal of sourceMap) {
337-
let mapped = mapSourceValue(signal, onSignalUpdate)
342+
let mapped = mapSourceValue(signal, onSignalUpdate, eli)
338343
if (mapped) details.signals.push(mapped)
339344
}
340345

341346
// map memos
342347
if (owned) for (let node of owned) {
343-
let mapped = mapSourceValue(node, onSignalUpdate)
348+
let mapped = mapSourceValue(node, onSignalUpdate, eli)
344349
if (mapped) details.signals.push(mapped)
345350
}
346351

@@ -351,7 +356,7 @@ export function collectOwnerDetails(
351356
let signal = signal_ref.deref()
352357
if (signal == null) continue
353358

354-
let mapped = mapSourceValue(signal, onSignalUpdate)
359+
let mapped = mapSourceValue(signal, onSignalUpdate, eli)
355360
if (mapped == null) continue
356361

357362
details.signals.push(mapped)

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import '../setup.ts'
22

3-
import {type Truthy} from '@solid-primitives/utils'
43
import {createMutable, createStore} from 'solid-js/store'
54
import {describe, expect, test, vi} from 'vitest'
65
import {ObjectType, getObjectById} from '../main/id.ts'
7-
import {encodeValue} from './serialize.ts'
6+
import {encodeValue, type HandleStoreCallback} from './serialize.ts'
87
import {type EncodedValue, INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, ValueType} from './types.ts'
8+
import {dom_element_interface} from '../types.ts'
99

1010
type Expectations = [name: string, data: unknown, encoded: EncodedValue[]][]
1111

1212
const div1 = document.createElement('div')
13-
const a1 = document.createElement('a')
13+
const a1 = document.createElement('a')
1414
const div2 = document.createElement('div')
1515

16-
const _testFunction = () => {
17-
/**/
18-
}
16+
const _testFunction = () => {/**/}
1917

2018
const [state] = createStore({a: 1, b: 2, c: 3})
2119
const mutable = createMutable({a: 1, b: 2, c: 3})
2220

21+
const eli = dom_element_interface
22+
2323
describe('encodeValue Preview', () => {
2424

2525
const encodePreviewExpectations: Expectations = [
@@ -72,9 +72,9 @@ describe('encodeValue Preview', () => {
7272
],
7373
]
7474

75-
for (const [testName, value, expectation] of encodePreviewExpectations) {
75+
for (let [testName, value, expectation] of encodePreviewExpectations) {
7676
test(testName, () => {
77-
const s = encodeValue(value, false)
77+
let s = encodeValue(value, false, eli)
7878
expect(s).toEqual(expectation)
7979
expect(JSON.parse(JSON.stringify(s))).toEqual(s)
8080
})
@@ -150,7 +150,7 @@ describe('encodeValue Deep', () => {
150150

151151
for (const [testName, value, expectation] of encodeDeepExpectations) {
152152
test(testName, () => {
153-
const s = encodeValue(value, true)
153+
const s = encodeValue(value, true, eli)
154154
expect(s).toEqual(expectation)
155155
expect(JSON.parse(JSON.stringify(s))).toEqual(s)
156156
})
@@ -174,7 +174,7 @@ describe('save elements to a map', () => {
174174

175175
for (const [testName, value, expectation] of elMapExpectations) {
176176
test(testName, () => {
177-
const s = encodeValue(value, true)
177+
const s = encodeValue(value, true, eli)
178178
expect(s).toEqual(expectation)
179179
expect(JSON.parse(JSON.stringify(s))).toEqual(s)
180180
})
@@ -225,7 +225,7 @@ describe('encodeValue with repeated references', () => {
225225

226226
for (const [testName, value, expectation] of circularExpectations) {
227227
test(testName, () => {
228-
const s = encodeValue(value, true)
228+
const s = encodeValue(value, true, eli)
229229
expect(s).toEqual(expectation)
230230
expect(JSON.parse(JSON.stringify(s))).toEqual(s)
231231
})
@@ -247,7 +247,7 @@ describe('finding stores in values', () => {
247247
name: string,
248248
data: unknown,
249249
encoded: EncodedValue[],
250-
calledWith: Parameters<Truthy<Parameters<typeof encodeValue>[2]>>[],
250+
calledWith: Parameters<HandleStoreCallback>[],
251251
][] = [
252252
[
253253
'Store',
@@ -311,7 +311,7 @@ describe('finding stores in values', () => {
311311
for (const [testName, value, expectation, calledWith] of storeExpectations) {
312312
test(testName, () => {
313313
const onStore = vi.fn()
314-
const s = encodeValue(value, true, onStore)
314+
const s = encodeValue(value, true, eli, onStore)
315315
expect(s).toEqual(expectation)
316316
expect(JSON.parse(JSON.stringify(s))).toEqual(s)
317317
expect(onStore).toBeCalledTimes(calledWith.length)

0 commit comments

Comments
 (0)