diff --git a/.changeset/perfect-turkeys-drop.md b/.changeset/perfect-turkeys-drop.md new file mode 100644 index 00000000..b58c7098 --- /dev/null +++ b/.changeset/perfect-turkeys-drop.md @@ -0,0 +1,5 @@ +--- +"@solid-devtools/frontend": patch +--- + +Display owner "value" as a signal only if it can change. diff --git a/.changeset/rare-keys-doubt.md b/.changeset/rare-keys-doubt.md new file mode 100644 index 00000000..df62d050 --- /dev/null +++ b/.changeset/rare-keys-doubt.md @@ -0,0 +1,6 @@ +--- +"@solid-devtools/debugger": patch +"@solid-devtools/frontend": patch +--- + +Add "hmr" field to OwnerDetails. diff --git a/packages/debugger/src/inspector/inspector.ts b/packages/debugger/src/inspector/inspector.ts index a174b046..1bdf3370 100644 --- a/packages/debugger/src/inspector/inspector.ts +++ b/packages/debugger/src/inspector/inspector.ts @@ -292,14 +292,19 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function ( let checkProxyProps: ReturnType['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)) diff --git a/packages/debugger/src/main/types.ts b/packages/debugger/src/main/types.ts index ad00920a..b31df7c0 100644 --- a/packages/debugger/src/main/types.ts +++ b/packages/debugger/src/main/types.ts @@ -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 } } diff --git a/packages/frontend/src/SidePanel.tsx b/packages/frontend/src/SidePanel.tsx index 01855106..a2828770 100644 --- a/packages/frontend/src/SidePanel.tsx +++ b/packages/frontend/src/SidePanel.tsx @@ -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 diff --git a/packages/frontend/src/inspector.tsx b/packages/frontend/src/inspector.tsx index 9bf6f088..af5a96b2 100644 --- a/packages/frontend/src/inspector.tsx +++ b/packages/frontend/src/inspector.tsx @@ -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 @@ -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 = { @@ -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) => { @@ -358,6 +361,7 @@ function ListSignals(props: {when: T; title: s.JSX.Element; children: s.JSX.E } export function InspectorView(): s.JSX.Element { + const {inspector, hovered} = useController() const {state} = inspector @@ -386,83 +390,79 @@ export function InspectorView(): s.JSX.Element { title={<>Props {state.props!.proxy && PROXY}} > - {(name, value) => ( - inspector.inspectValueItem(value())} - onElementHover={hovered.toggleHoveredElement} - isSignal={value().getter !== false} - isStale={value().getter === debug.PropGetterState.Stale} - /> - )} + {(name, value) => ( + inspector.inspectValueItem(value())} + onElementHover={hovered.toggleHoveredElement} + isSignal={value().getter !== false} + isStale={value().getter === debug.PropGetterState.Stale} + /> + )} - {store => ( - inspector.inspectValueItem(store)} - onElementHover={hovered.toggleHoveredElement} - /> - )} + {store => ( + inspector.inspectValueItem(store)} + onElementHover={hovered.toggleHoveredElement} + /> + )} - {signal => ( - 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 => ( + 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') + }) + }, + }]} + /> + )} - {memo => ( - 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 => ( + inspector.inspectValueItem(memo)} + onElementHover={hovered.toggleHoveredElement} + isSignal + actions={[{ + icon: 'Graph', + title: 'Open in Graph panel', + onClick() { + s.batch(() => { + inspector.setInspectedOwner(memo.id) + setOpenPanel('dgraph') + }) + }, + }]} + /> + )} @@ -472,12 +472,22 @@ export function InspectorView(): s.JSX.Element { {state.value && ( 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 && (