Skip to content

Commit

Permalink
Display owner "value" as a signal only if it can change.
Browse files Browse the repository at this point in the history
  • Loading branch information
@thetarnav
thetarnav committed Dec 28, 2024
1 parent b8413fa commit f910bc9
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 89 deletions.
5 changes: 5 additions & 0 deletions .changeset/perfect-turkeys-drop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@solid-devtools/frontend": patch
---

Display owner "value" as a signal only if it can change.
6 changes: 6 additions & 0 deletions .changeset/rare-keys-doubt.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@solid-devtools/debugger": patch
"@solid-devtools/frontend": patch
---

Add "hmr" field to OwnerDetails.
9 changes: 7 additions & 2 deletions packages/debugger/src/inspector/inspector.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,14 +292,19 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function (
let checkProxyProps: ReturnType<typeof mapProps>['checkProxyProps']

if (utils.isSolidComputation(owner)) {

// handle Component (props and location)
if (utils.isSolidComponent(owner)) {

// marge component with refresh memo
const refresh = utils.getComponentRefreshNode(owner)
if (refresh) {

sourceMap = refresh.sourceMap
owned = refresh.owned
getValue = () => refresh.value
owned = refresh.owned
getValue = () => refresh.value

details.hmr = true
}

;({checkProxyProps, props: details.props} = mapProps(owner.props))
Expand Down
14 changes: 8 additions & 6 deletions packages/debugger/src/main/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,16 @@ export namespace Mapped {
}

export interface OwnerDetails {
id: NodeID
name?: string
type: NodeType
props?: Props
signals: Signal[]
id: NodeID
name?: string
type: NodeType
props?: Props
signals: Signal[]
/** for computations */
value?: EncodedValue[]
value?: EncodedValue[]
// component with a location
location?: SourceLocation
// component wrapped with a hmr memo?
hmr?: true
}
}
1 change: 1 addition & 0 deletions packages/frontend/src/SidePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const action_button = clsx(hover_background, hover_text, 'w-6 h-6 rounded
export const action_icon = 'w-4 h-4'

export function createSidePanel() {

const ctx = useController()
const {inspector} = ctx
const {state, openComponentLocation, setInspectedOwner} = inspector
Expand Down
172 changes: 91 additions & 81 deletions packages/frontend/src/inspector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ export namespace Inspector {
}

export type State = {
name: string | null
type: debug.NodeType | null
signals: {[key: debug.NodeID]: Signal}
value: ValueItem | null
props: Props | null
name: string | null
type: debug.NodeType | null
signals: {[key: debug.NodeID]: Signal}
value: ValueItem | null
props: Props | null
location: string | null
hmr: boolean
}

export type Module = ReturnType<typeof createInspector>
Expand Down Expand Up @@ -142,12 +143,13 @@ function updateStore(
}

const NULL_STATE = {
name: null,
type: null,
name: null,
type: null,
location: null,
props: null,
signals: {},
value: null,
props: null,
signals: {},
value: null,
hmr: false,
} as const satisfies Inspector.State

const NULL_INSPECTED_NODE = {
Expand Down Expand Up @@ -226,6 +228,7 @@ export default function createInspector({bridge}: {bridge: DebuggerBridge}) {
setState({
name: raw.name,
type: raw.type,
hmr: raw.hmr ?? false,
location: raw.location?.file ?? null,
signals: raw.signals.reduce(
(signals, s) => {
Expand Down Expand Up @@ -358,6 +361,7 @@ function ListSignals<T>(props: {when: T; title: s.JSX.Element; children: s.JSX.E
}

export function InspectorView(): s.JSX.Element {

const {inspector, hovered} = useController()
const {state} = inspector

Expand Down Expand Up @@ -386,83 +390,79 @@ export function InspectorView(): s.JSX.Element {
title={<>Props {state.props!.proxy && <ui.Badge>PROXY</ui.Badge>}</>}
>
<Entries of={state.props!.record}>
{(name, value) => (
<ValueNode
name={name}
value={value().value}
isExtended={value().extended}
onClick={() => inspector.inspectValueItem(value())}
onElementHover={hovered.toggleHoveredElement}
isSignal={value().getter !== false}
isStale={value().getter === debug.PropGetterState.Stale}
/>
)}
{(name, value) => (
<ValueNode
name={name}
value={value().value}
isExtended={value().extended}
onClick={() => inspector.inspectValueItem(value())}
onElementHover={hovered.toggleHoveredElement}
isSignal={value().getter !== false}
isStale={value().getter === debug.PropGetterState.Stale}
/>
)}
</Entries>
</ListSignals>
<ListSignals when={valueItems().stores.length} title="Stores">
<s.For each={valueItems().stores}>
{store => (
<ValueNode
name={store.name}
value={store.value}
isExtended={store.extended}
onClick={() => inspector.inspectValueItem(store)}
onElementHover={hovered.toggleHoveredElement}
/>
)}
{store => (
<ValueNode
name={store.name}
value={store.value}
isExtended={store.extended}
onClick={() => inspector.inspectValueItem(store)}
onElementHover={hovered.toggleHoveredElement}
/>
)}
</s.For>
</ListSignals>
<ListSignals when={valueItems().signals.length} title="Signals">
<s.For each={valueItems().signals}>
{signal => (
<ValueNode
name={signal.name}
value={signal.value}
onClick={() => inspector.inspectValueItem(signal)}
onElementHover={hovered.toggleHoveredElement}
isExtended={signal.extended}
isInspected={inspector.isInspected(signal.id)}
isSignal
actions={[
{
icon: 'Graph',
title: 'Open in Graph panel',
onClick() {
s.batch(() => {
inspector.setInspectedSignal(signal.id)
setOpenPanel('dgraph')
})
},
},
]}
/>
)}
{signal => (
<ValueNode
name={signal.name}
value={signal.value}
onClick={() => inspector.inspectValueItem(signal)}
onElementHover={hovered.toggleHoveredElement}
isExtended={signal.extended}
isInspected={inspector.isInspected(signal.id)}
isSignal
actions={[{
icon: 'Graph',
title: 'Open in Graph panel',
onClick() {
s.batch(() => {
inspector.setInspectedSignal(signal.id)
setOpenPanel('dgraph')
})
},
}]}
/>
)}
</s.For>
</ListSignals>
<ListSignals when={valueItems().memos.length} title="Memos">
<s.For each={valueItems().memos}>
{memo => (
<ValueNode
name={memo.name}
value={memo.value}
isExtended={memo.extended}
onClick={() => inspector.inspectValueItem(memo)}
onElementHover={hovered.toggleHoveredElement}
isSignal
actions={[
{
icon: 'Graph',
title: 'Open in Graph panel',
onClick() {
s.batch(() => {
inspector.setInspectedOwner(memo.id)
setOpenPanel('dgraph')
})
},
},
]}
/>
)}
{memo => (
<ValueNode
name={memo.name}
value={memo.value}
isExtended={memo.extended}
onClick={() => inspector.inspectValueItem(memo)}
onElementHover={hovered.toggleHoveredElement}
isSignal
actions={[{
icon: 'Graph',
title: 'Open in Graph panel',
onClick() {
s.batch(() => {
inspector.setInspectedOwner(memo.id)
setOpenPanel('dgraph')
})
},
}]}
/>
)}
</s.For>
</ListSignals>
<s.Show when={state.value || state.location}>
Expand All @@ -472,12 +472,22 @@ export function InspectorView(): s.JSX.Element {
</GroupTitle>
{state.value && (
<ValueNode
name="value"
value={state.value.value}
isExtended={state.value.extended}
onClick={() => inspector.inspectValueItem(state.value!)}
onElementHover={hovered.toggleHoveredElement}
isSignal
name = "value"
value = {state.value.value}
isExtended = {state.value.extended}
onClick = {() => inspector.inspectValueItem(state.value!)}
onElementHover = {hovered.toggleHoveredElement}
isSignal = {
state.type === debug.NodeType.Computation ||
state.type === debug.NodeType.CatchError ||
state.type === debug.NodeType.Effect ||
state.type === debug.NodeType.Memo ||
state.type === debug.NodeType.Refresh ||
state.type === debug.NodeType.Render ||
state.type === debug.NodeType.Signal ||
state.type === debug.NodeType.Store ||
state.hmr
}
/>
)}
{state.location && (
Expand Down

0 comments on commit f910bc9

Please sign in to comment.