Add basic support for Signals

Author: marvinhagemeister

package.json

@@ -50,7 +50,7 @@
 		"@parcel/css": "^1.12.2",
 		"@playwright/test": "^1.25.1",
 		"@preact/preset-vite": "^2.3.0",
-		"@preact/signals": "^0.0.3",
+		"@preact/signals": "^1.0.1",
 		"@testing-library/preact": "^2.0.0",
 		"@types/archiver": "^5.3.1",
 		"@types/babel__core": "^7.1.19",

src/adapter/adapter/filter.ts

@@ -7,10 +7,16 @@ export interface RawFilterState {
 		dom: boolean;
 		hoc?: boolean;
 		root?: boolean;
+		textSignal?: boolean;
 	};
 }
 
-export type TypeFilterValue = "dom" | "fragment" | "hoc" | "root";
+export type TypeFilterValue =
+	| "dom"
+	| "fragment"
+	| "hoc"
+	| "root"
+	| "textSignal";
 
 export interface FilterState {
 	regex: RegExp[];
@@ -31,7 +37,7 @@ export type Filter = RegexFilter | TypeFilter;
 
 export const DEFAULT_FIlTERS: FilterState = {
 	regex: [],
-	type: new Set(["dom", "fragment", "root", "hoc"]),
+	type: new Set(["dom", "fragment", "root", "hoc", "textSignal"]),
 };
 
 export function parseFilters(raw: RawFilterState): FilterState {
@@ -40,6 +46,7 @@ export function parseFilters(raw: RawFilterState): FilterState {
 	if (raw.type.dom) type.add("dom");
 	if (raw.type.hoc) type.add("hoc");
 	if (raw.type.root) type.add("root");
+	if (raw.type.textSignal) type.add("textSignal");
 
 	return {
 		regex: raw.regex.filter(x => x.enabled).map(x => new RegExp(x.value, "gi")),

src/adapter/shared/inspectVNode.ts

@@ -6,6 +6,7 @@ import { cleanContext, cleanProps, serialize } from "./serialize";
 import { PreactBindings, SharedVNode } from "./bindings";
 import { InspectData } from "../adapter/adapter";
 import { ID } from "../../view/store/types";
+import { getSignalTextName } from "./utils";
 
 /**
  * Serialize all properties/attributes of a `VNode` like `props`, `context`,
@@ -33,7 +34,11 @@ export function inspectVNode<T extends SharedVNode>(
 		c.state != null &&
 		Object.keys(c.state).length > 0;
 
-	const hasHooks = c != null && bindings.getComponentHooks(vnode) != null;
+	const isSignalTextNode =
+		typeof vnode.type === "function" && vnode.type.displayName === "_st";
+
+	const hasHooks =
+		c != null && !isSignalTextNode && bindings.getComponentHooks(vnode) != null;
 	const hooks =
 		supportsHooks && hasHooks
 			? inspectHooks(config, options, vnode, bindings)
@@ -69,7 +74,7 @@ export function inspectVNode<T extends SharedVNode>(
 		key: vnode.key || null,
 		hooks: supportsHooks ? hooks : !supportsHooks && hasHooks ? [] : null,
 		id,
-		name: bindings.getDisplayName(vnode, config),
+		name: getSignalTextName(bindings.getDisplayName(vnode, config)),
 		props,
 		state,
 		// TODO: We're not using this information anywhere yet

src/adapter/shared/serialize.ts

@@ -1,6 +1,7 @@
 import type { RendererConfig } from "./renderer";
 import type { ObjPath } from "../renderer";
 import type { PreactBindings, SharedVNode } from "./bindings";
+import type { Signal } from "@preact/signals";
 
 export interface SerializedVNode {
 	type: "vnode";
@@ -22,6 +23,19 @@ export function serializeVNode<T extends SharedVNode>(
 	return null;
 }
 
+export function isSignal(x: any): x is Signal {
+	return (
+		x !== null &&
+		typeof x === "object" &&
+		typeof x.peek === "function" &&
+		"value" in x
+	);
+}
+
+export function isReadOnlySignal(signal: Signal): boolean {
+	return (signal as any)._r === true;
+}
+
 export function jsonify(
 	data: any,
 	getVNode: (x: any) => SerializedVNode | null,
@@ -46,6 +60,14 @@ export function jsonify(
 	const vnode = getVNode(data);
 	if (vnode != null) return vnode;
 
+	if (isSignal(data)) {
+		return {
+			type: "signal",
+			name: isReadOnlySignal(data) ? "computed Signal" : "Signal",
+			value: jsonify(data.peek(), getVNode, seen),
+		};
+	}
+
 	if (Array.isArray(data)) {
 		return data.map(x => jsonify(x, getVNode, seen));
 	}
@@ -134,6 +156,11 @@ export function setInCopy<T = any>(
 ): T {
 	if (idx >= path.length) return value;
 
+	// Signals bypass everything
+	if (path[path.length - 1] === "value" && maybeSetSignal(obj, path, value)) {
+		return obj;
+	}
+
 	const updated = clone(obj);
 	if (obj instanceof Set) {
 		const oldValue = Array.from(obj)[+path[idx]];
@@ -179,6 +206,23 @@ export function setIn(obj: Record<string, any>, path: ObjPath, value: any) {
 	}
 }
 
+export function maybeSetSignal(
+	obj: Record<string, any>,
+	path: ObjPath,
+	value: any,
+) {
+	const last = path.pop();
+	const parent = path.reduce((acc, attr) => (acc ? acc[attr] : null), obj);
+	if (parent && last) {
+		if (isSignal(parent)) {
+			parent.value = value;
+			return true;
+		}
+	}
+
+	return false;
+}
+
 export function hasIn(obj: Record<string, any>, path: ObjPath) {
 	let item = obj;
 	for (let i = 0; i < path.length; i++) {

src/adapter/shared/traverse.ts

@@ -19,6 +19,7 @@ import { getDiffType, recordComponentStats } from "./stats";
 import { measureUpdate } from "../adapter/highlightUpdates";
 import { PreactBindings, SharedVNode } from "./bindings";
 import { VNodeTimings } from "./timings";
+import { getSignalTextName } from "./utils";
 
 function getHocName(name: string) {
 	const idx = name.indexOf("(");
@@ -147,16 +148,23 @@ export function shouldFilter<T extends SharedVNode>(
 		return false;
 	} else if (bindings.isElement(vnode) && filters.type.has("dom")) {
 		return true;
-	} else if (filters.type.has("hoc")) {
+	}
+
+	if (filters.type.has("hoc")) {
 		const name = bindings.getDisplayName(vnode, config);
 
 		if (name.indexOf("(") > -1 && !name.startsWith("ForwardRef")) {
 			return true;
 		}
 	}
 
+	if (filters.type.has("textSignal")) {
+		const name = getSignalTextName(bindings.getDisplayName(vnode, config));
+		if (name === "__TextSignal") return true;
+	}
+
 	if (filters.regex.length > 0) {
-		const name = bindings.getDisplayName(vnode, config);
+		const name = getSignalTextName(bindings.getDisplayName(vnode, config));
 		return filters.regex.some(r => {
 			// Regexes with a global flag are stateful in JS :((
 			r.lastIndex = 0;
@@ -202,7 +210,7 @@ function mount<T extends SharedVNode>(
 	const root = bindings.isRoot(vnode, config);
 
 	const skip = shouldFilter(vnode, filters, config, bindings);
-	let name = bindings.getDisplayName(vnode, config);
+	let name = getSignalTextName(bindings.getDisplayName(vnode, config));
 
 	if (filters.type.has("hoc")) {
 		const hocName = getHocName(name);
@@ -433,7 +441,7 @@ function update<T extends SharedVNode>(
 		return;
 	}
 
-	const name = bindings.getDisplayName(vnode, config);
+	const name = getSignalTextName(bindings.getDisplayName(vnode, config));
 	if (filters.type.has("hoc")) {
 		const res = detectHocs(commit, name, id, hocs);
 		hocs = res.hocs;

src/adapter/shared/utils.ts

@@ -1,5 +1,9 @@
 import { PreactBindings, SharedVNode } from "./bindings";
 
+export function getSignalTextName(name: string) {
+	return name === "_st" ? "__TextSignal" : name;
+}
+
 export function traverse<T extends SharedVNode>(
 	vnode: T,
 	fn: (vnode: T) => void,

src/view/components/DataInput/parseValue.ts

@@ -50,6 +50,8 @@ export function genPreview(v: any): string {
 			return `Set(${v.entries.length}) ${truncate(genPreview(v.entries))})`;
 		} else if (v.type === "map") {
 			return `Map(${v.entries.length}) ${truncate(genPreview(v.entries))})`;
+		} else if (v.type === "signal") {
+			return `ƒ ${v.name} (${truncate(genPreview(v.value))})`;
 		}
 
 		if (Array.isArray(v)) {

src/view/components/elements/TreeBar.tsx

@@ -141,6 +141,9 @@ export function FilterPopup() {
 	);
 	const [filterHoc, setFilterHoc] = useState(store.filter.filterHoc.value);
 	const [filterRoot, setFilterRoot] = useState(store.filter.filterRoot.value);
+	const [filterTextSignal, setFilterTextSignal] = useState(
+		store.filter.filterTextSignal.value,
+	);
 	const [filters, setFilters] = useState(store.filter.filters.value);
 
 	return (
@@ -153,6 +156,7 @@ export function FilterPopup() {
 					store.filter.filterFragment.value = filterFragment;
 					store.filter.filterRoot.value = filterRoot;
 					store.filter.filterHoc.value = filterHoc;
+					store.filter.filterTextSignal.value = filterTextSignal;
 
 					store.filter.filters.value = filters;
 
@@ -180,6 +184,11 @@ export function FilterPopup() {
 					onInput={checked => setFilterDom(checked)}
 					checked={filterDom}
 				/>
+				<FilterCheck
+					label="Text Signal nodes"
+					onInput={checked => setFilterTextSignal(checked)}
+					checked={filterDom}
+				/>
 				{/* Custom user filters */}
 				{filters.map((x, i) => {
 					return (

src/view/components/sidebar/inspect/parseProps.ts

@@ -11,6 +11,7 @@ export type PropDataType =
 	| "function"
 	| "bigint"
 	| "vnode"
+	| "signal"
 	| "blob"
 	| "symbol"
 	| "html";
@@ -33,6 +34,7 @@ export function parseProps(
 	depth = 0,
 	name = path,
 	out = new Map<string, PropData>(),
+	forceReadonly = false,
 ): Map<string, PropData> {
 	if (depth >= limit) {
 		out.set(path, {
@@ -63,7 +65,7 @@ export function parseProps(
 		data.forEach((item, i) => {
 			const childPath = `${path}.${i}`;
 			children.push(childPath);
-			parseProps(item, childPath, limit, depth + 1, "" + i, out);
+			parseProps(item, childPath, limit, depth + 1, "" + i, out, forceReadonly);
 		});
 	} else if (typeof data === "object") {
 		if (data === null) {
@@ -134,7 +136,15 @@ export function parseProps(
 				(data.entries as any[]).forEach((item, i) => {
 					const childPath = `${path}.${i}`;
 					children.push(childPath);
-					parseProps(item, childPath, limit, depth + 1, "" + i, out);
+					parseProps(
+						item,
+						childPath,
+						limit,
+						depth + 1,
+						"" + i,
+						out,
+						forceReadonly,
+					);
 				});
 				out.set(path, node);
 			} else if (
@@ -158,7 +168,15 @@ export function parseProps(
 				(data.entries as any[]).forEach((item, i) => {
 					const childPath = `${path}.${i}`;
 					children.push(childPath);
-					parseProps(item, childPath, limit, depth + 1, "" + i, out);
+					parseProps(
+						item,
+						childPath,
+						limit,
+						depth + 1,
+						"" + i,
+						out,
+						forceReadonly,
+					);
 				});
 				out.set(path, node);
 			} else if (
@@ -209,6 +227,36 @@ export function parseProps(
 					children: [],
 					meta: null,
 				});
+			} else if (
+				// Same for Signals
+				maybeCollection &&
+				typeof data.name === "string" &&
+				data.type === "signal"
+			) {
+				const children: string[] = [];
+				const isEditable = data.name === "Signal";
+				const node: PropData = {
+					depth,
+					name,
+					id: path,
+					type: "signal",
+					editable: isEditable,
+					value: data,
+					children,
+					meta: null,
+				};
+				const childPath = `${path}.value`;
+				children.push(childPath);
+				out.set(path, node);
+				parseProps(
+					data.value,
+					childPath,
+					limit,
+					depth + 1,
+					"value",
+					out,
+					!isEditable,
+				);
 			} else {
 				const node: PropData = {
 					depth,
@@ -225,7 +273,15 @@ export function parseProps(
 				Object.keys(data).forEach(key => {
 					const nextPath = `${path}.${key}`;
 					node.children.push(nextPath);
-					parseProps(data[key], nextPath, limit, depth + 1, key, out);
+					parseProps(
+						data[key],
+						nextPath,
+						limit,
+						depth + 1,
+						key,
+						out,
+						forceReadonly,
+					);
 				});
 
 				out.set(path, node);
@@ -238,7 +294,8 @@ export function parseProps(
 			name,
 			id: path,
 			type: type as any,
-			editable: type !== "undefined" && data !== "[[Circular]]",
+			editable:
+				type !== "undefined" && data !== "[[Circular]]" && !forceReadonly,
 			value: data,
 			children: [],
 			meta: null,