Merge pull request #431 from preactjs/signals-2

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": "^1.0.1",
+		"@preact/signals": "^1.1.1",
 		"@testing-library/preact": "^2.0.0",
 		"@types/archiver": "^5.3.1",
 		"@types/babel__core": "^7.1.19",

src/adapter/adapter/adapter.ts

@@ -35,6 +35,7 @@ export interface InspectData {
 	hooks: PropData[] | null;
 	props: Record<string, any> | null;
 	state: Record<string, any> | null;
+	signals: Record<string, any> | null;
 	canSuspend: boolean;
 	/** Only Suspense components have this */
 	suspended: boolean;
@@ -148,6 +149,13 @@ export function createAdapter(
 	listen("update-prop", data => update({ ...data, type: "props" }));
 	listen("update-state", data => update({ ...data, type: "state" }));
 	listen("update-context", data => update({ ...data, type: "context" }));
+	listen("update-signal", data => {
+		getRendererByVNodeId(renderers, data.id)?.updateSignal?.(
+			data.id,
+			+data.path.replace("root.", "").replace(".value", ""),
+			data.value,
+		);
+	});
 	listen("update-hook", data => {
 		if (!data.meta) return;
 

src/adapter/hook.ts

@@ -24,6 +24,7 @@ export interface DevtoolEvents {
 	"update-prop": { id: ID; path: string; value: any };
 	"update-state": { id: ID; path: string; value: any };
 	"update-context": { id: ID; path: string; value: any };
+	"update-signal": { id: ID; path: string; value: any };
 	"update-hook": { id: ID; value: any; meta: any };
 	/**
 	 * @deprecated

src/adapter/protocol/events.test.ts

@@ -229,6 +229,7 @@ describe("applyEvent", () => {
 			name: "Foo",
 			props: null,
 			state: null,
+			signals: null,
 			type: "asd",
 			canSuspend: false,
 			suspended: false,
@@ -257,6 +258,7 @@ describe("applyEvent", () => {
 			name: "Foo",
 			props: null,
 			state: null,
+			signals: null,
 			type: "asd",
 			canSuspend: false,
 			suspended: false,

src/adapter/renderer.ts

@@ -29,6 +29,8 @@ export interface Renderer<T extends SharedVNode = SharedVNode> {
 
 	// Hooks
 	updateHook?(id: ID, index: number, value: any): void; // V3
+	// signals
+	updateSignal?(id: ID, index: number, value: any): void; // V5
 
 	// Component actions
 	suspend?(id: ID, active: boolean): void; // V4

src/adapter/shared/inspectVNode.ts

@@ -50,6 +50,10 @@ export function inspectVNode<T extends SharedVNode>(
 			? serialize(config, bindings, cleanProps(vnode.props))
 			: null;
 	const state = hasState ? serialize(config, bindings, c!.state) : null;
+	const signals =
+		c != null && "__$u" in c
+			? inspectSignalSubscriptions(config, bindings, c.__$u.s)
+			: null;
 
 	let suspended = false;
 	let canSuspend = false;
@@ -77,9 +81,29 @@ export function inspectVNode<T extends SharedVNode>(
 		name: getSignalTextName(bindings.getDisplayName(vnode, config)),
 		props,
 		state,
+		signals,
 		// TODO: We're not using this information anywhere yet
 		type: getDevtoolsType(vnode, bindings),
 		suspended,
 		version,
 	};
 }
+
+function inspectSignalSubscriptions<T extends SharedVNode>(
+	config: RendererConfig,
+	bindings: PreactBindings<T>,
+	node: any,
+) {
+	const out: Record<string, any> = {};
+	let i = 0;
+
+	const seen = new Set();
+	while (node !== null && node !== undefined && !seen.has(node)) {
+		seen.add(node);
+		out[i] = serialize(config, bindings, node.S);
+		node = node.n;
+		i++;
+	}
+
+	return i > 0 ? out : null;
+}

src/adapter/shared/renderer.ts

@@ -356,6 +356,28 @@ export function createRenderer<T extends SharedVNode>(
 			}
 		},
 
+		updateSignal(id, index, value) {
+			const vnode = getVNodeById(ids, id);
+			if (vnode !== null && bindings.isComponent(vnode)) {
+				const c = bindings.getComponent(vnode);
+
+				if (c !== null && "__$u" in c) {
+					let node = c.__$u.s;
+					let i = 0;
+					const seen = new Set();
+					while (node !== null && node !== undefined && !seen.has(node)) {
+						if (i === index) {
+							node.S.value = value;
+							return;
+						}
+						seen.add(node);
+						node = node.n;
+						i++;
+					}
+				}
+			}
+		},
+
 		suspend(id, active) {
 			let vnode = getVNodeById(ids, id);
 			while (vnode !== null) {

src/adapter/shared/serialize.ts

@@ -33,7 +33,12 @@ export function isSignal(x: any): x is Signal {
 }
 
 export function isReadOnlySignal(signal: Signal): boolean {
-	return (signal as any)._r === true;
+	return (
+		// Signals <1.2.0
+		(signal as any)._r === true ||
+		// Signals >=1.2.0
+		("g" in signal && typeof (signal as any).x === "function")
+	);
 }
 
 export function jsonify(

src/adapter/store.test.ts

@@ -83,6 +83,7 @@ describe("Store", () => {
 			name: "Foo",
 			props: null,
 			state: null,
+			signals: null,
 			suspended: false,
 			type: 1,
 			version: "",

src/view/components/sidebar/Sidebar.tsx

@@ -20,7 +20,7 @@ export function Sidebar() {
 		}
 		return null;
 	}).value;
-	const { props: propData, state, context, hooks } = store.sidebar;
+	const { props: propData, state, context, hooks, signals } = store.sidebar;
 	const { emit } = store;
 
 	return (
@@ -42,6 +42,20 @@ export function Sidebar() {
 				onCopy={() => inspect && emit("copy", serializeProps(inspect.props))}
 				canAddNew
 			/>
+			{inspect && inspect.signals !== null && (
+				<PropsPanel
+					label="Signals"
+					items={signals.items}
+					uncollapsed={signals.uncollapsed}
+					onChange={(value, path) => {
+						emit("update-signal", {
+							id: inspect!.id,
+							path,
+							value,
+						});
+					}}
+				/>
+			)}
 			{inspect && inspect.hooks !== null && (
 				<PropsPanel
 					label="Hooks"