feat(extension): display first component parent in render info (#750)

* feat(extension): display first component parent in render info

* feat: show hierarchy only for text nodes

* fix: allow string types in parent/child

* chore: accept string components

Author: 43081j

packages/debug/src/devtools.ts

@@ -1,3 +1,4 @@
+import { VNode } from "../../preact/src/internal";
 import { UpdateInfo } from "./internal";
 
 // Communication layer for Chrome DevTools Extension
@@ -18,11 +19,30 @@ export interface SignalsDevToolsAPI {
 	sendConfig: (config: any) => void;
 	sendUpdate: (updateInfo: UpdateInfo[]) => void;
 	isConnected: () => boolean;
-	enterComponent: (name: string) => void;
+	enterComponent: (node: VNode | string) => void;
 	exitComponent: () => void;
 	trackSignalOwnership: (signal: any) => void;
 }
 
+function getComponentName(vnode: VNode | string): string {
+	let name;
+
+	if (typeof vnode === "string") {
+		return vnode;
+	}
+
+	if (typeof vnode.type === "string") {
+		name = vnode.type;
+	} else {
+		name = vnode.type.displayName || vnode.type.name || "Unknown";
+	}
+
+	if (name === "ReactiveTextNode" && vnode.__) {
+		return `${getComponentName(vnode.__)} > ${name}`;
+	}
+	return name;
+}
+
 class DevToolsCommunicator {
 	public listeners: Map<string, Set<Function>> = new Map();
 	public isExtensionConnected = false;
@@ -153,8 +173,8 @@ class DevToolsCommunicator {
 		};
 	}
 
-	public enterComponent(name: string) {
-		this.componentName = name;
+	public enterComponent(node: VNode | string) {
+		this.componentName = getComponentName(node);
 	}
 
 	public exitComponent() {
@@ -220,8 +240,8 @@ if (typeof window !== "undefined") {
 		isConnected: () => getDevToolsCommunicator().isConnected(),
 		trackSignalOwnership: signal =>
 			getDevToolsCommunicator().trackSignalOwnership(signal),
-		enterComponent: name => {
-			getDevToolsCommunicator().enterComponent(name);
+		enterComponent: node => {
+			getDevToolsCommunicator().enterComponent(node);
 		},
 		exitComponent: () => {
 			getDevToolsCommunicator().exitComponent();

packages/preact/src/index.ts

@@ -206,9 +206,7 @@ hook(OptionsTypes.RENDER, (old, vnode) => {
 		typeof window !== "undefined" &&
 		window.__PREACT_SIGNALS_DEVTOOLS__
 	) {
-		window.__PREACT_SIGNALS_DEVTOOLS__.enterComponent(
-			vnode.type.displayName || vnode.type.name || "Unknown"
-		);
+		window.__PREACT_SIGNALS_DEVTOOLS__.enterComponent(vnode);
 	}
 
 	// Ignore the Fragment inserted by preact.createElement().