Component tracking start

Author: JoviDeCroock

extension/src/components/Graph.tsx

@@ -40,6 +40,7 @@ export function GraphVisualization({
 				type = "computed";
 			}
 
+			console.log(update);
 			// Track depth
 			const currentDepth = update.depth || 0;
 			depthMap.set(update.signalId, currentDepth);
@@ -64,18 +65,6 @@ export function GraphVisualization({
 						source: update.subscribedTo,
 						target: update.signalId,
 					});
-
-					// Also ensure source node exists
-					if (!nodes.has(update.subscribedTo)) {
-						nodes.set(update.subscribedTo, {
-							id: update.subscribedTo,
-							name: update.signalName,
-							type: "signal",
-							x: 0,
-							y: 0,
-							depth: currentDepth - 1,
-						});
-					}
 				}
 			}
 		});
@@ -182,7 +171,9 @@ export function GraphVisualization({
 									className="graph-text"
 									x={node.x}
 									y={node.y}
-									textLength="40"
+									textLength={
+										8 * (node.name.length > 8 ? 11 : node.name.length)
+									}
 									lengthAdjust="spacingAndGlyphs"
 								>
 									{node.name.length > 8

extension/src/models/UpdatesModel.ts

@@ -8,6 +8,7 @@ const createUpdatesModel = () => {
 	const addUpdate = (
 		update: SignalUpdate | Divider | Array<SignalUpdate | Divider>
 	) => {
+		console.log("Adding update:", update);
 		if (Array.isArray(update)) {
 			update.forEach(item => {
 				if (item.type !== "divider") item.receivedAt = Date.now();

packages/debug/src/devtools.ts

@@ -2,24 +2,32 @@ import { UpdateInfo } from "./internal";
 
 // Communication layer for Chrome DevTools Extension
 export interface DevToolsMessage {
-	type: "SIGNALS_UPDATE" | "SIGNALS_INIT" | "SIGNALS_CONFIG";
+	type:
+		| "SIGNALS_UPDATE"
+		| "SIGNALS_INIT"
+		| "SIGNALS_CONFIG"
+		| "ENTER_COMPONENT"
+		| "EXIT_COMPONENT";
 	payload: any;
 	timestamp: number;
 }
 
-interface SignalsDevToolsAPI {
+export interface SignalsDevToolsAPI {
 	onUpdate: (callback: (updateInfo: UpdateInfo[]) => void) => () => void;
 	onInit: (callback: () => void) => () => void;
 	sendConfig: (config: any) => void;
 	sendUpdate: (updateInfo: UpdateInfo[]) => void;
 	isConnected: () => boolean;
+	enterComponent: (name: string) => void;
+	exitComponent: () => void;
 }
 
 class DevToolsCommunicator {
 	public listeners: Map<string, Set<Function>> = new Map();
 	public isExtensionConnected = false;
 	public messageQueue: DevToolsMessage[] = [];
 	public readonly maxQueueSize = 100;
+	public componentName: string | null = null;
 
 	constructor() {
 		this.setupCommunication();
@@ -139,6 +147,14 @@ class DevToolsCommunicator {
 		};
 	}
 
+	public enterComponent(name: string) {
+		this.componentName = name;
+	}
+
+	public exitComponent() {
+		this.componentName = null;
+	}
+
 	public getSignalName(signal: any): string {
 		// Try to get a meaningful name for the signal
 		if (signal.displayName) return signal.displayName;
@@ -182,10 +198,16 @@ if (typeof window !== "undefined") {
 		sendConfig: config => getDevToolsCommunicator().sendConfig(config),
 		sendUpdate: updateInfo => getDevToolsCommunicator().sendUpdate(updateInfo),
 		isConnected: () => getDevToolsCommunicator().isConnected(),
+		enterComponent: name => {
+			getDevToolsCommunicator().enterComponent(name);
+		},
+		exitComponent: () => {
+			getDevToolsCommunicator().exitComponent();
+		},
 	};
 
 	// Expose API globally for the Chrome extension to use
-	(window as any).__PREACT_SIGNALS_DEVTOOLS__ = api;
+	window.__PREACT_SIGNALS_DEVTOOLS__ = api;
 
 	// Announce availability to Chrome extension
 	if (window.postMessage) {
@@ -210,3 +232,9 @@ if (typeof window !== "undefined") {
 		}, 100);
 	}
 }
+
+declare global {
+	interface Window {
+		__PREACT_SIGNALS_DEVTOOLS__: SignalsDevToolsAPI;
+	}
+}

packages/preact/src/index.ts

@@ -171,6 +171,14 @@ Object.defineProperties(Signal.prototype, {
 
 /** Inject low-level property/attribute bindings for Signals into Preact's diff */
 hook(OptionsTypes.DIFF, (old, vnode) => {
+	if (
+		typeof vnode.type === "function" &&
+		typeof window !== "undefined" &&
+		window.__PREACT_SIGNALS_DEVTOOLS__
+	) {
+		window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
+	}
+
 	if (typeof vnode.type === "string") {
 		let signalProps: Record<string, any> | undefined;
 
@@ -192,6 +200,16 @@ hook(OptionsTypes.DIFF, (old, vnode) => {
 
 /** Set up Updater before rendering a component */
 hook(OptionsTypes.RENDER, (old, vnode) => {
+	if (
+		typeof vnode.type === "function" &&
+		typeof window !== "undefined" &&
+		window.__PREACT_SIGNALS_DEVTOOLS__
+	) {
+		window.__PREACT_SIGNALS_DEVTOOLS__.enterComponent(
+			vnode.type.displayName || vnode.type.name || "Unknown"
+		);
+	}
+
 	// Ignore the Fragment inserted by preact.createElement().
 	if (vnode.type !== Fragment) {
 		setCurrentUpdater();
@@ -220,13 +238,25 @@ hook(OptionsTypes.RENDER, (old, vnode) => {
 
 /** Finish current updater if a component errors */
 hook(OptionsTypes.CATCH_ERROR, (old, error, vnode, oldVNode) => {
+	if (typeof window !== "undefined" && window.__PREACT_SIGNALS_DEVTOOLS__) {
+		window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
+	}
+
 	setCurrentUpdater();
 	currentComponent = undefined;
 	old(error, vnode, oldVNode);
 });
 
 /** Finish current updater after rendering any VNode */
 hook(OptionsTypes.DIFFED, (old, vnode) => {
+	if (
+		typeof vnode.type === "function" &&
+		typeof window !== "undefined" &&
+		window.__PREACT_SIGNALS_DEVTOOLS__
+	) {
+		window.__PREACT_SIGNALS_DEVTOOLS__.exitComponent();
+	}
+
 	setCurrentUpdater();
 	currentComponent = undefined;
 

packages/preact/src/internal.d.ts

@@ -1,5 +1,6 @@
 import { Component } from "preact";
 import { Signal } from "@preact/signals-core";
+import type { SignalsDevToolsAPI } from "../../debug/src/devtools";
 
 export interface Effect {
 	_sources: object | undefined;
@@ -62,3 +63,9 @@ export type HookFn<T extends keyof OptionsType> = (
 	old: OptionsType[T],
 	...a: Parameters<OptionsType[T]>
 ) => ReturnType<OptionsType[T]>;
+
+declare global {
+	interface Window {
+		__PREACT_SIGNALS_DEVTOOLS__: SignalsDevToolsAPI;
+	}
+}