Merge pull request #851 from preactjs/special-component-update

Add special case for component renders

Author: JoviDeCroock

.changeset/dull-walls-bathe.md

@@ -0,0 +1,7 @@
+---
+"@preact/signals-devtools-adapter": minor
+"@preact/signals-devtools-ui": minor
+"@preact/signals-debug": minor
+---
+
+Add special case in devtools-ui for component updates

.changeset/poor-snails-smell.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-debug": minor
+---
+
+Add special copy for component renders

packages/debug/src/devtools.ts

@@ -8,8 +8,8 @@ import {
 
 /** Formatted signal update for external consumers */
 export interface FormattedSignalUpdate {
-	type: "update" | "effect";
-	signalType: "signal" | "computed" | "effect";
+	type: "update" | "effect" | "component";
+	signalType: "signal" | "computed" | "effect" | "component";
 	signalName: string;
 	signalId: string;
 	prevValue?: any;
@@ -24,7 +24,7 @@ export interface FormattedSignalUpdate {
 /** Formatted signal disposal event for external consumers */
 export interface FormattedSignalDisposed {
 	type: "disposed";
-	signalType: "signal" | "computed" | "effect";
+	signalType: "signal" | "computed" | "effect" | "component";
 	signalName: string;
 	signalId: string;
 	timestamp: number;
@@ -144,25 +144,35 @@ class DevToolsCommunicator {
 		}
 
 		const formattedUpdates = updateInfoList.map(({ signal, ...info }) => {
-			return info.type === "value"
-				? {
-						...info,
-						type: "update" as const,
-						newValue: deeplyRemoveFunctions(info.newValue),
-						prevValue: deeplyRemoveFunctions(info.prevValue),
-						signalType: ("_fn" in signal ? "computed" : "signal") as
-							| "signal"
-							| "computed",
-						signalName: this.getSignalName(signal, false),
-						signalId: this.getSignalId(signal),
-					}
-				: {
-						...info,
-						type: "effect" as const,
-						signalType: "effect" as const,
-						signalName: this.getSignalName(signal, true),
-						signalId: this.getSignalId(signal),
-					};
+			if (info.type === "value") {
+				return {
+					...info,
+					type: "update" as const,
+					newValue: deeplyRemoveFunctions(info.newValue),
+					prevValue: deeplyRemoveFunctions(info.prevValue),
+					signalType: ("_fn" in signal ? "computed" : "signal") as
+						| "signal"
+						| "computed",
+					signalName: this.getSignalName(signal, "value"),
+					signalId: this.getSignalId(signal),
+				};
+			} else if (info.type === "component") {
+				return {
+					...info,
+					type: "component" as const,
+					signalType: "component" as const,
+					signalName: this.getSignalName(signal, "component"),
+					signalId: this.getSignalId(signal),
+				};
+			} else {
+				return {
+					...info,
+					type: "effect" as const,
+					signalType: "effect" as const,
+					signalName: this.getSignalName(signal, "effect"),
+					signalId: this.getSignalId(signal),
+				};
+			}
 		});
 
 		// Emit for direct listeners (e.g., DirectAdapter)
@@ -212,8 +222,8 @@ class DevToolsCommunicator {
 		};
 	}
 
-	public getSignalName(signal: any, isEffect: boolean): string {
-		return getSignalName(signal, isEffect);
+	public getSignalName(signal: any, type: any): string {
+		return getSignalName(signal, type);
 	}
 
 	public getSignalId(signal: any): string {
@@ -231,7 +241,10 @@ class DevToolsCommunicator {
 		const disposal: FormattedSignalDisposed = {
 			type: "disposed",
 			signalType,
-			signalName: this.getSignalName(signal, signalType === "effect"),
+			signalName: this.getSignalName(
+				signal,
+				signalType === "signal" ? "value" : signalType
+			),
 			signalId: this.getSignalId(signal),
 			timestamp: Date.now(),
 		};

packages/debug/src/index.ts

@@ -228,7 +228,7 @@ function getAllCurrentDependencies(
 		if (!dependencies.has(id)) {
 			dependencies.set(id, {
 				id,
-				name: getSignalName(source, false),
+				name: getSignalName(source, 'value'),
 				type: "_fn" in source ? "computed" : "signal",
 			});
 		}
@@ -285,7 +285,7 @@ Effect.prototype._debugCallback = function (this: Effect) {
 				signal: this,
 				timestamp: Date.now(),
 				depth: baseSignal.depth,
-				type: "effect",
+				type: "component",
 				subscribedTo: getSignalId(baseSignal.signal),
 				allDependencies: getAllCurrentDependencies(this as any),
 			});
@@ -299,7 +299,24 @@ Effect.prototype._callback = function (this: Effect) {
 	if (!debugEnabled || internalEffects.has(this))
 		return originalEffectCallback.call(this);
 
-	this._debugCallback!();
+	if ("_sources" in this) {
+		const baseSignal = bubbleUpToBaseSignal(this as any);
+		if (baseSignal) {
+			// Track dependency
+			trackDependency(this, baseSignal.signal);
+
+			const updateInfoList = updateInfoMap.get(baseSignal.signal) || [];
+			updateInfoList.push({
+				signal: this,
+				timestamp: Date.now(),
+				depth: baseSignal.depth,
+				type: "effect",
+				subscribedTo: getSignalId(baseSignal.signal),
+				allDependencies: getAllCurrentDependencies(this as any),
+			});
+			updateInfoMap.set(baseSignal.signal, updateInfoList);
+		}
+	}
 
 	return originalEffectCallback.call(this);
 };
@@ -343,10 +360,7 @@ function flushUpdates() {
 		if (typeof window !== "undefined" && !bridge.shouldThrottleUpdate()) {
 			// Filter updates based on signal names
 			const filteredUpdates = updateInfoList.filter(updateInfo => {
-				const signalName = getSignalName(
-					updateInfo.signal,
-					updateInfo.type === "effect"
-				);
+				const signalName = getSignalName(updateInfo.signal, updateInfo.type);
 				return bridge.matchesFilter(signalName);
 			});
 
@@ -375,18 +389,19 @@ function logUpdate(info: UpdateInfo, prevDepth: number) {
 	if (!debugEnabled || !consoleLoggingEnabled) return;
 
 	const { signal, type, depth } = info;
-	const name = getSignalName(signal, type === "effect");
+	const name = getSignalName(signal, type);
 
-	if (type === "effect") {
+	if (type === "effect" || type === "component") {
 		if (prevDepth === depth) {
 			endUpdateGroup();
 		}
 
+		const copy = type === "effect" ? "effect" : "component render";
 		if (isGrouped)
 			console.groupCollapsed(
-				`${" ".repeat(depth * 2)}↪️ Triggered effect: ${name}`
+				`${" ".repeat(depth * 2)}↪️ Triggered ${copy}: ${name}`
 			);
-		else console.log(`${" ".repeat(depth * 2)}↪️ Triggered effect: ${name}`);
+		else console.log(`${" ".repeat(depth * 2)}↪️ Triggered ${copy}: ${name}`);
 		return;
 	}
 

packages/debug/src/internal.ts

@@ -22,7 +22,7 @@ export interface DependencyInfo {
 	type: "signal" | "computed";
 }
 
-export type UpdateInfo = ValueUpdate | EffectUpdate;
+export type UpdateInfo = ValueUpdate | EffectUpdate | ComponentUpdate;
 
 export interface ValueUpdate {
 	type: "value";
@@ -43,3 +43,12 @@ interface EffectUpdate {
 	subscribedTo?: string; // signalId of the signal this effect is subscribed to
 	allDependencies?: DependencyInfo[]; // All dependencies this effect depends on
 }
+
+interface ComponentUpdate {
+	type: "component";
+	timestamp: number;
+	signal: Effect;
+	depth: number;
+	subscribedTo?: string; // signalId of the signal this component is subscribed to
+	allDependencies?: DependencyInfo[]; // All dependencies this component depends on
+}

packages/debug/src/utils.ts

@@ -1,14 +1,17 @@
 import { Effect, Signal } from "@preact/signals-core";
 
-export function getSignalName(signal: any, isEffect: boolean): string {
+export function getSignalName(
+	signal: any,
+	type: "component" | "effect" | "value"
+): string {
 	// Try to get a meaningful name for the signal
 	if (signal.displayName) return signal.displayName;
 	if (signal.name)
 		return signal.name === "sub"
 			? `${(signal as Effect)._sources?._source.name}-subscribe`
 			: signal.name;
 	if (signal._fn && signal._fn.name) return signal._fn.name;
-	if (isEffect) return "effect";
+	if (type === "effect" || type === "component") return type;
 	const signalType = "_fn" in signal ? "computed" : "signal";
 	return `(anonymous ${signalType})`;
 }

packages/debug/test/browser/utils.test.tsx

@@ -184,12 +184,12 @@ describe("formatValue", () => {
 describe("getSignalName", () => {
 	it("should return signal name if present", () => {
 		const sig = signal(0, { name: "counter" });
-		expect(getSignalName(sig, false)).toBe("counter");
+		expect(getSignalName(sig, "value")).toBe("counter");
 	});
 
 	it("should return (anonymous signal) for unnamed signals", () => {
 		const sig = signal(0);
-		expect(getSignalName(sig, false)).toBe("(anonymous signal)");
+		expect(getSignalName(sig, "value")).toBe("(anonymous signal)");
 	});
 
 	it("should return computed name if present", () => {

packages/devtools-adapter/src/types.ts

@@ -11,8 +11,8 @@ export interface DependencyInfo {
  * Represents a signal update event from the debug system
  */
 export interface SignalUpdate {
-	type: "update" | "effect";
-	signalType: "signal" | "computed" | "effect";
+	type: "update" | "effect" | "component";
+	signalType: "signal" | "computed" | "effect" | "component";
 	signalName: string;
 	signalId?: string;
 	prevValue?: any;
@@ -30,7 +30,7 @@ export interface SignalUpdate {
  */
 export interface SignalDisposed {
 	type: "disposed";
-	signalType: "signal" | "computed" | "effect";
+	signalType: "signal" | "computed" | "effect" | "component";
 	signalName: string;
 	signalId: string;
 	timestamp: number;

packages/devtools-ui/src/components/Graph.tsx

@@ -212,7 +212,8 @@ export function GraphVisualization() {
 			if (!update.signalId) continue;
 			if (!showDisposed && disposed.has(update.signalId)) continue;
 
-			const type: "signal" | "computed" | "effect" = update.signalType;
+			const type: "signal" | "computed" | "effect" | "component" =
+				update.signalType;
 
 			if (!nodes.has(update.signalId)) {
 				nodes.set(update.signalId, {
@@ -424,6 +425,9 @@ export function GraphVisualization() {
 				case "effect":
 					lines.push(`  ${id}([${name}])`);
 					break;
+				case "component":
+					lines.push(`  ${id}{{${name}}}`);
+					break;
 			}
 		});
 
@@ -655,6 +659,13 @@ export function GraphVisualization() {
 						></div>
 						<span>Effect</span>
 					</div>
+					<div className="legend-item">
+						<div
+							className="legend-color"
+							style={{ backgroundColor: "#9c27b0" }}
+						></div>
+						<span>Component</span>
+					</div>
 				</div>
 			</div>
 		</div>

packages/devtools-ui/src/components/UpdateItem.tsx

@@ -31,14 +31,17 @@ export function UpdateItem({ update, count, firstUpdate }: UpdateItemProps) {
 		</span>
 	);
 
-	if (update.type === "effect") {
+	if (update.type === "effect" || update.type === "component") {
+		const icon = update.type === "component" ? "🔄" : "↪️";
+		const label = update.type === "component" ? "Component render" : "Effect";
 		return (
 			<div className={`update-item ${update.type}`}>
 				<div className="update-header">
 					<span className="signal-name">
-						↪️ {update.signalName}
+						{icon} {update.signalName}
 						{countLabel}
 					</span>
+					<span className="update-type-badge">{label}</span>
 					<span className="update-time">{time}</span>
 				</div>
 			</div>