listing decorations

Author: thetarnav

.changeset/sweet-files-sing.md

@@ -0,0 +1,6 @@
+---
+"solid-devtools-extension": patch
+"@solid-devtools/ui": patch
+---
+
+Add memo icon and listing decorations for signals.

packages/extension/src/state/bridge.ts

@@ -11,6 +11,11 @@ import {
 
 export const { onRuntimeMessage, postRuntimeMessage } = createRuntimeMessanger()
 
+// in development — force update the graph on load to work with hot reloading
+if (import.meta.env.DEV) {
+  postRuntimeMessage("ForceUpdate")
+}
+
 onRuntimeMessage("GraphUpdate", update => {
   handleGraphUpdate(update)
   detailsHandleGraphUpdate()

packages/ui/package.json

@@ -39,6 +39,10 @@
     "./animation": {
       "import": "./dist/animation/index.js",
       "require": "./dist/animation/index.cjs"
+    },
+    "./icons": {
+      "import": "./dist/icons/index.js",
+      "require": "./dist/icons/index.cjs"
     }
   },
   "typesVersions": {
@@ -48,6 +52,9 @@
       ],
       "animation": [
         "./dist/animation/index.d.ts"
+      ],
+      "icons": [
+        "./dist/icons/index.d.ts"
       ]
     }
   },

packages/ui/src/icons/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Icons taken from https://phosphoricons.com
+ */
+
+import { Component, JSX, splitProps } from "solid-js"
+
+export type IconProps = {
+  color?: string
+  bgColor?: string
+}
+
+const localPropsKeys = ["color", "bgColor"] as const
+
+export const Memo: Component<JSX.IntrinsicElements["svg"] & IconProps> = props => {
+  const [, attrs] = splitProps(props, localPropsKeys)
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        opacity={props.bgColor ? undefined : "0.2"}
+        d="M10 27V19C10 18.7348 10.1054 18.4804 10.2929 18.2929C10.4804 18.1054 10.7348 18 11 18H21C21.2652 18 21.5196 18.1054 21.7071 18.2929C21.8946 18.4804 22 18.7348 22 19V27H26C26.2652 27 26.5196 26.8946 26.7071 26.7071C26.8946 26.5196 27 26.2652 27 26V11.4125C27.0005 11.2827 26.9753 11.154 26.926 11.0339C26.8766 10.9138 26.8041 10.8046 26.7125 10.7125L21.2875 5.28751C21.1955 5.19591 21.0862 5.12338 20.9661 5.07404C20.846 5.02471 20.7174 4.99955 20.5875 5.00001H6C5.73478 5.00001 5.48043 5.10536 5.29289 5.2929C5.10536 5.48044 5 5.73479 5 6.00001V26C5 26.2652 5.10536 26.5196 5.29289 26.7071C5.48043 26.8946 5.73478 27 6 27H10Z"
+        fill={props.bgColor ?? "currentColor"}
+      />
+      <path
+        d="M27 11.4125V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V6.00001C5 5.73479 5.10536 5.48044 5.29289 5.2929C5.48043 5.10536 5.73478 5.00001 6 5.00001H20.5875C20.7174 4.99955 20.846 5.02471 20.9661 5.07404C21.0862 5.12338 21.1955 5.19591 21.2875 5.28751L26.7125 10.7125C26.8041 10.8046 26.8766 10.9138 26.926 11.0339C26.9753 11.154 27.0005 11.2827 27 11.4125V11.4125Z"
+        stroke={props.color ?? "currentColor"}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 27V19C10 18.7348 10.1054 18.4804 10.2929 18.2929C10.4804 18.1054 10.7348 18 11 18H21C21.2652 18 21.5196 18.1054 21.7071 18.2929C21.8946 18.4804 22 18.7348 22 19V27"
+        stroke={props.color ?? "currentColor"}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19 9H12"
+        stroke={props.color ?? "currentColor"}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}

packages/ui/src/signal/SignalNode.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css"
-import { color, spacing, theme } from "../theme"
+import { centerChild, color, spacing, theme } from "../theme"
 import { CSSPropertiesWithVars } from "@vanilla-extract/css/dist/declarations/src/types"
 
 export const Signals = {
@@ -16,7 +16,20 @@ export const SignalNode = {
     alignItems: "center",
     height: spacing[4.5],
   }),
+  icon: style({
+    height: "100%",
+    width: spacing[4.5],
+    marginRight: spacing[1],
+    ...centerChild,
+  }),
+  signalDot: style({
+    width: spacing[1],
+    height: spacing[1],
+    borderRadius: "50%",
+    backgroundColor: color.amber[400],
+  }),
   name: style({
+    height: "100%",
     minWidth: spacing[24],
     color: color.gray[800],
     fontWeight: 600,
@@ -30,7 +43,7 @@ export const SignalNode = {
 
 export const ValuePreview = style({
   minWidth: spacing[4],
-  height: spacing[4.5],
+  height: "100%",
   color: color.gray[800],
   fontFamily: theme.font.mono,
   fontWeight: 600,

packages/ui/src/signal/SignalNode.tsx

@@ -7,7 +7,8 @@ import {
   EncodedPreviewPayloadMap,
   ValueType,
 } from "@solid-devtools/shared/serialize"
-import { theme } from "../theme"
+import * as Icon from "~/icons"
+import { color, theme } from "~/theme"
 import { HighlightText } from "../highlight/Highlight"
 import * as styles from "./SignalNode.css"
 
@@ -136,6 +137,7 @@ export const Signals: Component<{ each: GraphSignal[] }> = props => {
 }
 
 export const SignalNode: Component<{ signal: GraphSignal }> = ({ signal }) => {
+  const { type } = signal
   const { useUpdatedSelector } = useSignalContext()
 
   const isUpdated = useUpdatedSelector(signal.id)
@@ -148,6 +150,13 @@ export const SignalNode: Component<{ signal: GraphSignal }> = ({ signal }) => {
 
   return (
     <div class={styles.SignalNode.container} {...hoverProps}>
+      <div class={styles.SignalNode.icon}>
+        {type === NodeType.Memo ? (
+          <Icon.Memo bgColor={color.amber[400]} />
+        ) : (
+          <div class={styles.SignalNode.signalDot} />
+        )}
+      </div>
       <div class={styles.SignalNode.name}>
         {signal.name}
         {/* <span class={styles.SignalNode.id}>#{signal.id}</span> */}

packages/ui/tsconfig.json

@@ -1,4 +1,9 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
   "include": ["src/**/*", "../../env.d.ts"]
 }

packages/ui/tsup.config.ts

@@ -4,6 +4,6 @@ import { vanillaExtractPlugin } from "@vanilla-extract/esbuild-plugin"
 export default defineConfig(
   "tsx",
   undefined,
-  ["theme/index.ts", "animation/index.ts"],
+  ["theme/index.ts", "animation/index.ts", "icons/index.tsx"],
   [vanillaExtractPlugin()],
 )