Abstract into settings-store and fix component-name assignment (#741)

Author: JoviDeCroock

extension/src/components/Graph.tsx

@@ -45,7 +45,6 @@ export function GraphVisualization({
 					x: 0,
 					y: 0,
 					depth: currentDepth,
-					componentName: update.componentName || undefined,
 				});
 			}
 
@@ -73,7 +72,6 @@ export function GraphVisualization({
 							x: 0,
 							y: 0,
 							depth: currentDepth + 1, // Components are one level deeper than the signal that triggers them
-							componentName: componentName,
 						});
 					}
 

extension/src/components/SettingsPanel.tsx

@@ -1,31 +1,31 @@
-import { Signal, useSignal, useSignalEffect } from "@preact/signals";
+import { useSignal, useSignalEffect } from "@preact/signals";
 import { Button } from "./Button";
 import { Settings } from "../types";
+import { settingsStore } from "../models/SettingsModel";
 
 interface SettingsPanelProps {
-	isVisible: Signal<boolean>;
-	settings: Signal<Settings>;
+	isVisible: boolean;
 	onApply: (settings: Settings) => void;
 	onCancel: () => void;
 }
 
 export function SettingsPanel({
 	isVisible,
-	settings,
 	onApply,
 	onCancel,
 }: SettingsPanelProps) {
-	const localSettings = useSignal<Settings>(settings.value);
+	const settings = settingsStore.settings;
+	const localSettings = useSignal<Settings>(settings);
 
 	useSignalEffect(() => {
-		localSettings.value = settings.value;
+		localSettings.value = settingsStore.settings;
 	});
 
 	const handleApply = () => {
 		onApply(localSettings.value);
 	};
 
-	if (!isVisible.value) {
+	if (!isVisible) {
 		return null;
 	}
 

extension/src/components/UpdateItem.tsx

@@ -34,8 +34,16 @@ export function UpdateItem({ update }: UpdateItemProps) {
 				<div className="update-header">
 					<span className="signal-name">
 						{depth}↪️ {update.signalName}
-						{update.componentName && (
-							<span className="component-name"> in {update.componentName}</span>
+						{update.componentNames && update.componentNames.length > 0 && (
+							<ul class="component-list">
+								<span class="component-name-header">Rerendered</span>
+								{update.componentNames?.map((componentName, i) => (
+									<li key={componentName} class="component-name">
+										{componentName}
+										{i < update.componentNames!.length - 1 ? ", " : ""}
+									</li>
+								))}
+							</ul>
 						)}
 					</span>
 					<span className="update-time">{time}</span>

extension/src/models/ConnectionModel.ts

@@ -42,6 +42,7 @@ const createConnectionModel = () => {
 			switch (type) {
 				case "SIGNALS_AVAILABILITY":
 					isConnected.value = payload.available;
+					connectionStore.isContentScriptConnected = true;
 					break;
 
 				case "CONNECTION_LOST":
@@ -64,9 +65,6 @@ const createConnectionModel = () => {
 				case "CONTENT_SCRIPT_DISCONNECTED":
 					connectionStore.isContentScriptConnected = false;
 					break;
-
-				default:
-					console.log("Unhandled message type:", type);
 			}
 		};
 
@@ -75,8 +73,6 @@ const createConnectionModel = () => {
 	});
 
 	effect(() => {
-		if (isConnected.value) status.value = "connected";
-
 		if (!isBackgroundConnected.value) {
 			status.value = "disconnected";
 		} else if (!isContentScriptConnected.value) {

extension/src/models/SettingsModel.ts

@@ -0,0 +1,69 @@
+import { signal, effect } from "@preact/signals";
+import { Settings } from "../types";
+
+const createSettingsModel = () => {
+	const settings = signal<Settings>({
+		enabled: true,
+		grouped: true,
+		maxUpdatesPerSecond: 60,
+		filterPatterns: [],
+	});
+
+	const showSettings = signal<boolean>(false);
+
+	const applySettings = (newSettings: Settings) => {
+		settings.value = newSettings;
+		window.postMessage(
+			{
+				type: "CONFIGURE_DEBUG",
+				payload: newSettings,
+			},
+			"*"
+		);
+		showSettings.value = false;
+	};
+
+	const toggleSettings = () => {
+		showSettings.value = !showSettings.value;
+	};
+
+	const hideSettings = () => {
+		showSettings.value = false;
+	};
+
+	effect(() => {
+		const handleMessage = (event: MessageEvent) => {
+			// Only accept messages from the same origin (devtools context)
+			if (event.origin !== window.location.origin) return;
+
+			const { type, payload } = event.data;
+
+			switch (type) {
+				case "SIGNALS_CONFIG":
+					settings.value = payload.settings;
+					break;
+			}
+		};
+
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	});
+
+	return {
+		get settings() {
+			return settings.value;
+		},
+		get showSettings() {
+			return showSettings.value;
+		},
+		// Actions
+		set settings(newSettings: Settings) {
+			settings.value = newSettings;
+		},
+		applySettings,
+		toggleSettings,
+		hideSettings,
+	};
+};
+
+export const settingsStore = createSettingsModel();

extension/src/panel.tsx

@@ -1,66 +1,25 @@
 import { render } from "preact";
-import { useSignal, useSignalEffect } from "@preact/signals";
+import { useSignal } from "@preact/signals";
 import { EmptyState } from "./components/EmptyState";
 import { Header } from "./components/Header";
 import { SettingsPanel } from "./components/SettingsPanel";
-import { Settings } from "./types";
 import { GraphVisualization } from "./components/Graph";
 import { updatesStore } from "./models/UpdatesModel";
 import { UpdatesContainer } from "./components/UpdatesContainer";
-import { connectionStore, sendMessage } from "./models/ConnectionModel";
+import { connectionStore } from "./models/ConnectionModel";
+import { settingsStore } from "./models/SettingsModel";
 
 function SignalsDevToolsPanel() {
-	const showSettings = useSignal(false);
 	const activeTab = useSignal<"updates" | "graph">("updates");
 
-	// TODO: settings model
-	const settings = useSignal<Settings>({
-		enabled: true,
-		grouped: true,
-		maxUpdatesPerSecond: 60,
-		filterPatterns: [],
-	});
-
-	const toggleSettings = () => {
-		showSettings.value = !showSettings.value;
-	};
-
-	const applySettings = (newSettings: Settings) => {
-		settings.value = newSettings;
-		sendMessage({
-			type: "CONFIGURE_DEBUG",
-			payload: newSettings,
-		});
-		showSettings.value = false;
-	};
-
-	useSignalEffect(() => {
-		const handleMessage = (event: MessageEvent) => {
-			// Only accept messages from the same origin (devtools context)
-			if (event.origin !== window.location.origin) return;
-
-			const { type, payload } = event.data;
-
-			switch (type) {
-				case "SIGNALS_CONFIG":
-					settings.value = payload.settings;
-					break;
-			}
-		};
-
-		window.addEventListener("message", handleMessage);
-		return () => window.removeEventListener("message", handleMessage);
-	});
-
 	return (
 		<div id="app">
-			<Header onToggleSettings={toggleSettings} />
+			<Header onToggleSettings={settingsStore.toggleSettings} />
 
 			<SettingsPanel
-				isVisible={showSettings}
-				settings={settings}
-				onApply={applySettings}
-				onCancel={() => (showSettings.value = false)}
+				isVisible={settingsStore.showSettings}
+				onApply={settingsStore.applySettings}
+				onCancel={settingsStore.hideSettings}
 			/>
 
 			<main className="main-content">

extension/src/types.ts

@@ -3,8 +3,7 @@ export interface SignalUpdate {
 	signalType: "signal" | "computed" | "effect";
 	signalName: string;
 	signalId?: string;
-	componentName?: string | null;
-	componentNames?: string[];
+	componentNames: string[];
 	prevValue?: any;
 	newValue?: any;
 	timestamp?: number;
@@ -32,7 +31,6 @@ export interface GraphNode {
 	x: number;
 	y: number;
 	depth: number;
-	componentName?: string;
 }
 
 export interface GraphLink {

packages/debug/src/devtools.ts

@@ -117,8 +117,7 @@ class DevToolsCommunicator {
 									: "signal",
 						signalName: this.getSignalName(signal),
 						signalId: this.getSignalId(signal),
-						componentName: owners.length > 0 ? owners[0] : null,
-						componentNames: owners.length > 1 ? owners : undefined,
+						componentNames: owners.length > 0 ? owners : undefined,
 					};
 				}),
 			},