Merge pull request #428 from preactjs/inspect-signal

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,24 @@ export function setIn(obj: Record<string, any>, path: ObjPath, value: any) {
 	}
 }
 
+export function maybeSetSignal(
+	obj: Record<string, any>,
+	path: ObjPath,
+	value: any,
+) {
+	let current: any = obj;
+	for (let i = 0; i < path.length; i++) {
+		if (isSignal(current)) {
+			current.value = value;
+			return true;
+		}
+
+		current = current[path[i]];
+	}
+
+	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/update.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/adapter/shared/utils.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/DataInput/parseValue.ts

@@ -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={filterTextSignal}
+				/>
 				{/* Custom user filters */}
 				{filters.map((x, i) => {
 					return (