Skip to content

Commit f910bc9

Browse files
thetarnavthetarnav
committed
Display owner "value" as a signal only if it can change.
1 parent b8413fa commit f910bc9

File tree

6 files changed

+118
-89
lines changed

6 files changed

+118
-89
lines changed

‎.changeset/perfect-turkeys-drop.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@solid-devtools/frontend": patch
3+
---
4+
5+
Display owner "value" as a signal only if it can change.

‎.changeset/rare-keys-doubt.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@solid-devtools/debugger": patch
3+
"@solid-devtools/frontend": patch
4+
---
5+
6+
Add "hmr" field to OwnerDetails.

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,14 +292,19 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
292292
let checkProxyProps: ReturnType<typeof mapProps>['checkProxyProps']
293293

294294
if (utils.isSolidComputation(owner)) {
295+
295296
// handle Component (props and location)
296297
if (utils.isSolidComponent(owner)) {
298+
297299
// marge component with refresh memo
298300
const refresh = utils.getComponentRefreshNode(owner)
299301
if (refresh) {
302+
300303
sourceMap = refresh.sourceMap
301-
owned = refresh.owned
302-
getValue = () => refresh.value
304+
owned = refresh.owned
305+
getValue = () => refresh.value
306+
307+
details.hmr = true
303308
}
304309

305310
;({checkProxyProps, props: details.props} = mapProps(owner.props))

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,16 @@ export namespace Mapped {
114114
}
115115

116116
export interface OwnerDetails {
117-
id: NodeID
118-
name?: string
119-
type: NodeType
120-
props?: Props
121-
signals: Signal[]
117+
id: NodeID
118+
name?: string
119+
type: NodeType
120+
props?: Props
121+
signals: Signal[]
122122
/** for computations */
123-
value?: EncodedValue[]
123+
value?: EncodedValue[]
124124
// component with a location
125125
location?: SourceLocation
126+
// component wrapped with a hmr memo?
127+
hmr?: true
126128
}
127129
}

‎packages/frontend/src/SidePanel.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const action_button = clsx(hover_background, hover_text, 'w-6 h-6 rounded
3131
export const action_icon = 'w-4 h-4'
3232

3333
export function createSidePanel() {
34+
3435
const ctx = useController()
3536
const {inspector} = ctx
3637
const {state, openComponentLocation, setInspectedOwner} = inspector

‎packages/frontend/src/inspector.tsx‎

Lines changed: 91 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,13 @@ export namespace Inspector {
3939
}
4040

4141
export type State = {
42-
name: string | null
43-
type: debug.NodeType | null
44-
signals: {[key: debug.NodeID]: Signal}
45-
value: ValueItem | null
46-
props: Props | null
42+
name: string | null
43+
type: debug.NodeType | null
44+
signals: {[key: debug.NodeID]: Signal}
45+
value: ValueItem | null
46+
props: Props | null
4747
location: string | null
48+
hmr: boolean
4849
}
4950

5051
export type Module = ReturnType<typeof createInspector>
@@ -142,12 +143,13 @@ function updateStore(
142143
}
143144

144145
const NULL_STATE = {
145-
name: null,
146-
type: null,
146+
name: null,
147+
type: null,
147148
location: null,
148-
props: null,
149-
signals: {},
150-
value: null,
149+
props: null,
150+
signals: {},
151+
value: null,
152+
hmr: false,
151153
} as const satisfies Inspector.State
152154

153155
const NULL_INSPECTED_NODE = {
@@ -226,6 +228,7 @@ export default function createInspector({bridge}: {bridge: DebuggerBridge}) {
226228
setState({
227229
name: raw.name,
228230
type: raw.type,
231+
hmr: raw.hmr ?? false,
229232
location: raw.location?.file ?? null,
230233
signals: raw.signals.reduce(
231234
(signals, s) => {
@@ -358,6 +361,7 @@ function ListSignals<T>(props: {when: T; title: s.JSX.Element; children: s.JSX.E
358361
}
359362

360363
export function InspectorView(): s.JSX.Element {
364+
361365
const {inspector, hovered} = useController()
362366
const {state} = inspector
363367

@@ -386,83 +390,79 @@ export function InspectorView(): s.JSX.Element {
386390
title={<>Props {state.props!.proxy && <ui.Badge>PROXY</ui.Badge>}</>}
387391
>
388392
<Entries of={state.props!.record}>
389-
{(name, value) => (
390-
<ValueNode
391-
name={name}
392-
value={value().value}
393-
isExtended={value().extended}
394-
onClick={() => inspector.inspectValueItem(value())}
395-
onElementHover={hovered.toggleHoveredElement}
396-
isSignal={value().getter !== false}
397-
isStale={value().getter === debug.PropGetterState.Stale}
398-
/>
399-
)}
393+
{(name, value) => (
394+
<ValueNode
395+
name={name}
396+
value={value().value}
397+
isExtended={value().extended}
398+
onClick={() => inspector.inspectValueItem(value())}
399+
onElementHover={hovered.toggleHoveredElement}
400+
isSignal={value().getter !== false}
401+
isStale={value().getter === debug.PropGetterState.Stale}
402+
/>
403+
)}
400404
</Entries>
401405
</ListSignals>
402406
<ListSignals when={valueItems().stores.length} title="Stores">
403407
<s.For each={valueItems().stores}>
404-
{store => (
405-
<ValueNode
406-
name={store.name}
407-
value={store.value}
408-
isExtended={store.extended}
409-
onClick={() => inspector.inspectValueItem(store)}
410-
onElementHover={hovered.toggleHoveredElement}
411-
/>
412-
)}
408+
{store => (
409+
<ValueNode
410+
name={store.name}
411+
value={store.value}
412+
isExtended={store.extended}
413+
onClick={() => inspector.inspectValueItem(store)}
414+
onElementHover={hovered.toggleHoveredElement}
415+
/>
416+
)}
413417
</s.For>
414418
</ListSignals>
415419
<ListSignals when={valueItems().signals.length} title="Signals">
416420
<s.For each={valueItems().signals}>
417-
{signal => (
418-
<ValueNode
419-
name={signal.name}
420-
value={signal.value}
421-
onClick={() => inspector.inspectValueItem(signal)}
422-
onElementHover={hovered.toggleHoveredElement}
423-
isExtended={signal.extended}
424-
isInspected={inspector.isInspected(signal.id)}
425-
isSignal
426-
actions={[
427-
{
428-
icon: 'Graph',
429-
title: 'Open in Graph panel',
430-
onClick() {
431-
s.batch(() => {
432-
inspector.setInspectedSignal(signal.id)
433-
setOpenPanel('dgraph')
434-
})
435-
},
436-
},
437-
]}
438-
/>
439-
)}
421+
{signal => (
422+
<ValueNode
423+
name={signal.name}
424+
value={signal.value}
425+
onClick={() => inspector.inspectValueItem(signal)}
426+
onElementHover={hovered.toggleHoveredElement}
427+
isExtended={signal.extended}
428+
isInspected={inspector.isInspected(signal.id)}
429+
isSignal
430+
actions={[{
431+
icon: 'Graph',
432+
title: 'Open in Graph panel',
433+
onClick() {
434+
s.batch(() => {
435+
inspector.setInspectedSignal(signal.id)
436+
setOpenPanel('dgraph')
437+
})
438+
},
439+
}]}
440+
/>
441+
)}
440442
</s.For>
441443
</ListSignals>
442444
<ListSignals when={valueItems().memos.length} title="Memos">
443445
<s.For each={valueItems().memos}>
444-
{memo => (
445-
<ValueNode
446-
name={memo.name}
447-
value={memo.value}
448-
isExtended={memo.extended}
449-
onClick={() => inspector.inspectValueItem(memo)}
450-
onElementHover={hovered.toggleHoveredElement}
451-
isSignal
452-
actions={[
453-
{
454-
icon: 'Graph',
455-
title: 'Open in Graph panel',
456-
onClick() {
457-
s.batch(() => {
458-
inspector.setInspectedOwner(memo.id)
459-
setOpenPanel('dgraph')
460-
})
461-
},
462-
},
463-
]}
464-
/>
465-
)}
446+
{memo => (
447+
<ValueNode
448+
name={memo.name}
449+
value={memo.value}
450+
isExtended={memo.extended}
451+
onClick={() => inspector.inspectValueItem(memo)}
452+
onElementHover={hovered.toggleHoveredElement}
453+
isSignal
454+
actions={[{
455+
icon: 'Graph',
456+
title: 'Open in Graph panel',
457+
onClick() {
458+
s.batch(() => {
459+
inspector.setInspectedOwner(memo.id)
460+
setOpenPanel('dgraph')
461+
})
462+
},
463+
}]}
464+
/>
465+
)}
466466
</s.For>
467467
</ListSignals>
468468
<s.Show when={state.value || state.location}>
@@ -472,12 +472,22 @@ export function InspectorView(): s.JSX.Element {
472472
</GroupTitle>
473473
{state.value && (
474474
<ValueNode
475-
name="value"
476-
value={state.value.value}
477-
isExtended={state.value.extended}
478-
onClick={() => inspector.inspectValueItem(state.value!)}
479-
onElementHover={hovered.toggleHoveredElement}
480-
isSignal
475+
name = "value"
476+
value = {state.value.value}
477+
isExtended = {state.value.extended}
478+
onClick = {() => inspector.inspectValueItem(state.value!)}
479+
onElementHover = {hovered.toggleHoveredElement}
480+
isSignal = {
481+
state.type === debug.NodeType.Computation ||
482+
state.type === debug.NodeType.CatchError ||
483+
state.type === debug.NodeType.Effect ||
484+
state.type === debug.NodeType.Memo ||
485+
state.type === debug.NodeType.Refresh ||
486+
state.type === debug.NodeType.Render ||
487+
state.type === debug.NodeType.Signal ||
488+
state.type === debug.NodeType.Store ||
489+
state.hmr
490+
}
481491
/>
482492
)}
483493
{state.location && (

0 commit comments

Comments
 (0)