Merge pull request #71 from thetarnav/serialize-values

Improve Signal value previews

Author: thetarnav

.changeset/real-bottles-collect.md

@@ -0,0 +1,8 @@
+---
+"solid-devtools-extension": minor
+"@solid-devtools/ui": minor
+"@solid-devtools/debugger": patch
+"@solid-devtools/shared": patch
+---
+
+Add UI components for displaying signal value previews. Display signalvalue previews in the owener details panel.

.changeset/red-hairs-poke.md

@@ -0,0 +1,6 @@
+---
+"solid-devtools-extension": patch
+"@solid-devtools/extension-adapter": patch
+---
+
+Fix missing graph after reopening devtools.

.changeset/wise-needles-camp.md

@@ -0,0 +1,5 @@
+---
+"@solid-devtools/shared": patch
+---
+
+Add encodePreview for encoding preview values of signals.

packages/debugger/src/index.ts

@@ -39,7 +39,6 @@ export {
   onOwnerCleanup,
   onParentCleanup,
   getFunctionSources,
-  getSafeValue,
   createUnownedRoot,
   createInternalRoot,
 } from "./utils"

packages/debugger/src/plugin.ts

@@ -22,10 +22,11 @@ import {
   ComputationUpdate,
   SignalUpdate,
 } from "@solid-devtools/shared/graph"
-import { createConsumers, createInternalRoot, getSafeValue } from "./utils"
+import { createConsumers, createInternalRoot } from "./utils"
 import { clearOwnerObservers, ComputationUpdateHandler, SignalUpdateHandler } from "./walker"
 import { forceRootUpdate } from "./roots"
 import { throttle } from "@solid-primitives/scheduled"
+import { encodePreview } from "@solid-devtools/shared/serialize"
 
 /*
 DETAILS:
@@ -206,9 +207,9 @@ const exported = createInternalRoot(() => {
       emitSignalUpdates(updates)
     })
 
-    const pushComputationUpdate: SignalUpdateHandler = ({ id, value }) => {
+    const pushComputationUpdate: SignalUpdateHandler = (id, value) => {
       if (!untrack(focusedId)) return
-      signalUpdates.push({ id, value: getSafeValue(value) })
+      signalUpdates.push({ id, value: encodePreview(value) })
       triggerComputationUpdateEmit()
     }
 

packages/debugger/src/server.ts

@@ -6,7 +6,7 @@ import { createRoot } from "solid-js"
 
 export { NodeType, getOwner } from "@solid-devtools/shared/graph"
 
-export { getSafeValue, createUnownedRoot } from "./index"
+export { createUnownedRoot } from "./index"
 
 export const Debugger: typeof API.Debugger = props => props.children
 

packages/debugger/src/utils.ts

@@ -6,7 +6,6 @@ import {
   createSignal,
   runWithOwner,
 } from "solid-js"
-import { JsonValue } from "type-fest"
 import { AnyFunction, AnyObject, noop, warn } from "@solid-primitives/utils"
 import {
   DebuggerContext,
@@ -25,7 +24,8 @@ import { Owner, RootFunction } from "@solid-devtools/shared/solid"
 
 export const isSolidComputation = (o: Readonly<SolidOwner>): o is SolidComputation => "fn" in o
 
-export const isSolidMemo = (o: Readonly<SolidOwner>): o is SolidMemo => _isMemo(o)
+export const isSolidMemo = (o: Readonly<SolidOwner>): o is SolidMemo =>
+  "sdtType" in o ? o.sdtType === NodeType.Memo : _isMemo(o) && !fnMatchesRefresh(o.fn!)
 
 export const isSolidOwner = (o: Readonly<SolidOwner> | SolidSignal): o is SolidOwner => "owned" in o
 
@@ -67,7 +67,7 @@ export const getOwnerType = (o: Readonly<SolidOwner>): NodeType => {
   // Precompiled components do not start with "_Hot$$"
   // we need a way to identify imported (3rd party) vs user components
   if (_isComponent(o)) return NodeType.Component
-  if (isSolidMemo(o)) {
+  if (_isMemo(o)) {
     if (fnMatchesRefresh(o.fn)) return NodeType.Refresh
     return NodeType.Memo
   }
@@ -79,13 +79,6 @@ export const getOwnerType = (o: Readonly<SolidOwner>): NodeType => {
   return NodeType.Computation
 }
 
-const literalTypes = ["bigint", "number", "boolean", "string", "undefined"]
-
-export function getSafeValue(value: unknown): JsonValue {
-  if (literalTypes.includes(typeof value)) return value as JsonValue
-  return value + ""
-}
-
 /**
  * helper to getting to an owner that you want — walking downwards
  */

packages/debugger/src/walker.ts

@@ -9,10 +9,10 @@ import {
   MappedOwnerDetails,
   NodeID,
 } from "@solid-devtools/shared/graph"
+import { encodePreview } from "@solid-devtools/shared/serialize"
 import {
   getNodeName,
   getNodeType,
-  getSafeValue,
   isSolidComputation,
   isSolidMemo,
   markNodeID,
@@ -22,11 +22,7 @@ import {
 } from "./utils"
 import { observeComputationUpdate, observeValueUpdate, removeValueUpdateObserver } from "./update"
 
-export type SignalUpdateHandler = (payload: {
-  value: unknown
-  oldValue: unknown
-  id: NodeID
-}) => void
+export type SignalUpdateHandler = (nodeId: NodeID, value: unknown) => void
 export type ComputationUpdateHandler = (rootId: NodeID, nodeId: NodeID) => void
 
 // Globals set before each walker cycle
@@ -50,7 +46,7 @@ function observeValue(node: SolidSignal) {
   const id = markNodeID(node)
   // OnSignalUpdate will change
   const handler = OnSignalUpdate
-  observeValueUpdate(node, (value, oldValue) => handler({ id, value, oldValue }), WALKER)
+  observeValueUpdate(node, value => handler(id, value), WALKER)
 }
 
 function createSignalNode(node: SolidSignal): MappedSignal {
@@ -59,7 +55,7 @@ function createSignalNode(node: SolidSignal): MappedSignal {
     name: getNodeName(node),
     id: markNodeID(node),
     observers: markNodesID(node.observers),
-    value: getSafeValue(node.value),
+    value: encodePreview(node.value),
   }
 }
 
@@ -112,7 +108,7 @@ function collectOwnerDetails(owner: SolidOwner): void {
   }
 
   if (isSolidComputation(owner)) {
-    details.value = getSafeValue(owner.value)
+    details.value = encodePreview(owner.value)
     details.sources = markNodesID(owner.sources)
     if (isSolidMemo(owner)) {
       details.observers = markNodesID(owner.observers)

packages/debugger/test/walker.test.tsx

@@ -1,4 +1,5 @@
 import { getOwner, NodeType, SolidOwner } from "@solid-devtools/shared/graph"
+import { ValueType } from "@solid-devtools/shared/serialize"
 import { UNNAMED } from "@solid-devtools/shared/variables"
 import {
   createComputed,
@@ -248,10 +249,22 @@ describe("walkSolidTree", () => {
         type: NodeType.Memo,
         path: ["0", "1"],
         signals: [
-          { type: NodeType.Signal, id: "2", name: "count", observers: [], value: 0 },
-          { type: NodeType.Memo, id: "3", name: "memo", observers: ["4"], value: 0 },
+          {
+            type: NodeType.Signal,
+            id: "2",
+            name: "count",
+            observers: [],
+            value: { type: ValueType.Number, value: 0 },
+          },
+          {
+            type: NodeType.Memo,
+            id: "3",
+            name: "memo",
+            observers: ["4"],
+            value: { type: ValueType.Number, value: 0 },
+          },
         ],
-        value: "value",
+        value: { type: ValueType.String, value: "value" },
         sources: ["5"],
         observers: ["1"],
       })

packages/extension-adapter/src/index.ts

@@ -22,7 +22,13 @@ const extensionAdapterFactory: PluginFactory = ({
   postWindowMessage("SolidOnPage")
 
   // update the graph only if the devtools panel is in view
-  onWindowMessage("PanelVisibility", setEnabled)
+  onWindowMessage("PanelVisibility", v => {
+    if (!v) return setEnabled(false)
+    const current = enabled()
+    // the panel might have been closed and opened again—in that case we want to update the graph
+    if (current) forceTriggerUpdate()
+    else setEnabled(true)
+  })
   onWindowMessage("ForceUpdate", forceTriggerUpdate)
   onWindowMessage("SetFocusedOwner", setFocusedOwner)