@preact/signals-devtools-ui 0.1.0

package/src/components/UpdateItem.tsx

@@ -0,0 +1,75 @@
+import type { SignalUpdate } from "../context";
+
+interface UpdateItemProps {
+	update: SignalUpdate;
+	firstUpdate?: SignalUpdate;
+	count?: number;
+}
+
+export function UpdateItem({ update, count, firstUpdate }: UpdateItemProps) {
+	const time = new Date(
+		update.timestamp || update.receivedAt
+	).toLocaleTimeString();
+
+	const formatValue = (value: any): string => {
+		if (value === null) return "null";
+		if (value === undefined) return "undefined";
+		if (typeof value === "string") return `"${value}"`;
+		if (typeof value === "function") return "function()";
+		if (typeof value === "object") {
+			try {
+				return JSON.stringify(value, null, 0);
+			} catch {
+				return "[Object]";
+			}
+		}
+		return String(value);
+	};
+	const countLabel = count && (
+		<span class="update-count" title="Number of grouped identical updates">
+			x{count}
+		</span>
+	);
+
+	if (update.type === "effect") {
+		return (
+			<div className={`update-item ${update.type}`}>
+				<div className="update-header">
+					<span className="signal-name">
+						↪️ {update.signalName}
+						{countLabel}
+					</span>
+					<span className="update-time">{time}</span>
+				</div>
+			</div>
+		);
+	}
+
+	const prevValue = formatValue(update.prevValue);
+	const newValue = formatValue(update.newValue);
+	const firstValue =
+		firstUpdate !== undefined ? formatValue(firstUpdate.prevValue) : undefined;
+
+	return (
+		<div class={`update-item ${update.type}`}>
+			<div class="update-header">
+				<span class="signal-name">
+					{update.depth === 0 ? "🎯" : "↪️"} {update.signalName}
+					{countLabel}
+				</span>
+				<span class="update-time">{time}</span>
+			</div>
+			<div class="value-change">
+				{firstValue && firstValue !== prevValue && (
+					<>
+						<span class="value-prev">{firstValue}</span>
+						<span class="value-arrow">...</span>
+					</>
+				)}
+				<span class="value-prev">{prevValue}</span>
+				<span class="value-arrow">→</span>
+				<span class="value-new">{newValue}</span>
+			</div>
+		</div>
+	);
+}

package/src/components/UpdateTreeNode.tsx

@@ -0,0 +1,69 @@
+import { useSignal } from "@preact/signals";
+import type { UpdateTreeNode } from "../context";
+import { UpdateItem } from "./UpdateItem";
+
+interface UpdateTreeNodeProps {
+	node: UpdateTreeNode;
+}
+
+export function UpdateTreeNodeComponent({ node }: UpdateTreeNodeProps) {
+	const isCollapsed = useSignal(false);
+
+	const toggleCollapse = () => {
+		isCollapsed.value = !isCollapsed.value;
+	};
+
+	const hasChildren = node.children.length > 0;
+	const nodeCount = node.type === "group" ? node.count : undefined;
+	const firstUpdate = node.type === "group" ? node.firstUpdate : undefined;
+
+	let childrenToRender: UpdateTreeNode[];
+
+	if (node.type === "group" && node.firstChildren) {
+		childrenToRender = node.children.map((lastChild, index) => {
+			const firstChild = node.firstChildren[index];
+			const mergedChild: UpdateTreeNode = {
+				...lastChild,
+				type: "group",
+				firstUpdate: firstChild.update,
+				firstChildren: firstChild.children,
+				count: node.count,
+			};
+			return mergedChild;
+		});
+	} else {
+		childrenToRender = node.children;
+	}
+
+	return (
+		<div className="tree-node">
+			<div className="tree-node-content">
+				{hasChildren && (
+					<button
+						className="collapse-button"
+						onClick={toggleCollapse}
+						aria-label={isCollapsed.value ? "Expand" : "Collapse"}
+					>
+						{isCollapsed.value ? "▶" : "▼"}
+					</button>
+				)}
+				{!hasChildren && <div className="collapse-spacer" />}
+				<div className="update-content">
+					<UpdateItem
+						update={node.update}
+						count={nodeCount}
+						firstUpdate={firstUpdate}
+					/>
+				</div>
+			</div>
+
+			{hasChildren && !isCollapsed.value && (
+				<div className="tree-children">
+					{childrenToRender.map(child => (
+						<UpdateTreeNodeComponent key={child.id} node={child} />
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/components/UpdatesContainer.tsx

@@ -0,0 +1,41 @@
+import { useRef } from "preact/hooks";
+import { useSignalEffect } from "@preact/signals";
+import { UpdateTreeNodeComponent } from "./UpdateTreeNode";
+import { getContext } from "../context";
+
+export function UpdatesContainer() {
+	const { updatesStore } = getContext();
+	const updatesListRef = useRef<HTMLDivElement>(null);
+	const updateTree = updatesStore.collapsedUpdateTree.value;
+
+	useSignalEffect(() => {
+		// Register scroll restoration
+		// When a new update is added we scroll to top
+		// Access the signal to subscribe to updates
+		updatesStore.updateTree.value;
+		if (updatesListRef.current) {
+			updatesListRef.current.scrollTop = 0;
+		}
+	});
+
+	return (
+		<div className="updates-container">
+			<div className="updates-header">
+				<div className="updates-stats">
+					<span>
+						Updates: <strong>{updatesStore.totalUpdates.value}</strong>
+					</span>
+					<span>
+						Signals: <strong>{updatesStore.signalCounts.value.size}</strong>
+					</span>
+				</div>
+			</div>
+
+			<div className="updates-list" ref={updatesListRef}>
+				{updateTree.map(node => (
+					<UpdateTreeNodeComponent key={node.id} node={node} />
+				))}
+			</div>
+		</div>
+	);
+}

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export { Button } from "./Button";
+export { EmptyState } from "./EmptyState";
+export { GraphVisualization } from "./Graph";
+export { Header } from "./Header";
+export { SettingsPanel } from "./SettingsPanel";
+export { StatusIndicator } from "./StatusIndicator";
+export { UpdateItem } from "./UpdateItem";
+export { UpdateTreeNodeComponent } from "./UpdateTreeNode";
+export { UpdatesContainer } from "./UpdatesContainer";

package/src/context.ts

@@ -0,0 +1,359 @@
+import { signal, computed } from "@preact/signals";
+import type {
+	DevToolsAdapter,
+	ConnectionStatus,
+	ConnectionStatusType,
+	Settings,
+	SignalDisposed,
+} from "@preact/signals-devtools-adapter";
+
+export interface DevToolsContext {
+	adapter: DevToolsAdapter;
+	connectionStore: ReturnType<typeof createConnectionStore>;
+	updatesStore: ReturnType<typeof createUpdatesStore>;
+	settingsStore: ReturnType<typeof createSettingsStore>;
+}
+
+let currentContext: DevToolsContext | null = null;
+
+export function getContext(): DevToolsContext {
+	if (!currentContext) {
+		throw new Error(
+			"DevTools context not initialized. Call initDevTools() first."
+		);
+	}
+	return currentContext;
+}
+
+export function createConnectionStore(adapter: DevToolsAdapter) {
+	const status = signal<ConnectionStatusType>("connecting");
+	const message = signal<string>("Connecting...");
+	const isConnected = signal(false);
+
+	// Listen to adapter events
+	adapter.on(
+		"connectionStatusChanged",
+		(connectionStatus: ConnectionStatus) => {
+			status.value = connectionStatus.status;
+			message.value = connectionStatus.message;
+		}
+	);
+
+	adapter.on("signalsAvailable", (available: boolean) => {
+		isConnected.value = available;
+	});
+
+	const refreshConnection = () => {
+		status.value = "connecting";
+		message.value = "Connecting...";
+		adapter.requestState();
+	};
+
+	return {
+		get status() {
+			return status.value;
+		},
+		get message() {
+			return message.value;
+		},
+		get isConnected() {
+			return isConnected.value;
+		},
+		refreshConnection,
+	};
+}
+
+export interface SignalUpdate {
+	type: "update" | "effect";
+	signalType: "signal" | "computed" | "effect";
+	signalName: string;
+	signalId?: string;
+	prevValue?: any;
+	newValue?: any;
+	timestamp?: number;
+	receivedAt: number;
+	depth?: number;
+	subscribedTo?: string;
+}
+
+export type Divider = { type: "divider" };
+
+export interface UpdateTreeNodeBase {
+	id: string;
+	update: SignalUpdate;
+	children: UpdateTreeNode[];
+	depth: number;
+	hasChildren: boolean;
+}
+
+export interface UpdateTreeNodeSingle extends UpdateTreeNodeBase {
+	type: "single";
+}
+
+export interface UpdateTreeNodeGroup extends UpdateTreeNodeBase {
+	type: "group";
+	count: number;
+	firstUpdate: SignalUpdate;
+	firstChildren: UpdateTreeNode[];
+}
+
+export type UpdateTreeNode = UpdateTreeNodeGroup | UpdateTreeNodeSingle;
+
+const nodesAreEqual = (a: UpdateTreeNode, b: UpdateTreeNode): boolean => {
+	return (
+		a.update.signalId === b.update.signalId &&
+		a.children.length === b.children.length &&
+		a.children.every((child, index) => nodesAreEqual(child, b.children[index]))
+	);
+};
+
+const collapseTree = (nodes: UpdateTreeNodeSingle[]): UpdateTreeNode[] => {
+	const tree: UpdateTreeNode[] = [];
+	let lastNode: UpdateTreeNode | undefined;
+
+	for (const node of nodes) {
+		if (lastNode && nodesAreEqual(lastNode, node)) {
+			if (lastNode.type !== "group") {
+				tree.pop();
+				lastNode = {
+					...lastNode,
+					type: "group",
+					count: 2,
+					firstUpdate: node.update,
+					firstChildren: node.children,
+				};
+				tree.push(lastNode);
+			} else {
+				lastNode.count++;
+				lastNode.firstUpdate = node.update;
+				lastNode.firstChildren = node.children;
+			}
+			continue;
+		}
+		tree.push(node);
+		lastNode = node;
+	}
+
+	return tree;
+};
+
+export function createUpdatesStore(
+	adapter: DevToolsAdapter,
+	settingsStore: ReturnType<typeof createSettingsStore>
+) {
+	const updates = signal<(SignalUpdate | Divider)[]>([]);
+	const isPaused = signal<boolean>(false);
+	const disposedSignalIds = signal<Set<string>>(new Set());
+
+	const addUpdate = (
+		update: SignalUpdate | Divider | Array<SignalUpdate | Divider>
+	) => {
+		if (Array.isArray(update)) {
+			update.forEach(item => {
+				if (item.type !== "divider") item.receivedAt = Date.now();
+			});
+		} else if (update.type === "update") {
+			update.receivedAt = Date.now();
+		}
+		updates.value = [
+			...updates.value,
+			...(Array.isArray(update) ? update : [update]),
+		];
+	};
+
+	const addDisposal = (disposal: SignalDisposed | SignalDisposed[]) => {
+		const disposals = Array.isArray(disposal) ? disposal : [disposal];
+		const newDisposed = new Set(disposedSignalIds.value);
+		for (const d of disposals) {
+			if (d.signalId) {
+				newDisposed.add(d.signalId);
+			}
+		}
+		disposedSignalIds.value = newDisposed;
+	};
+
+	const hasUpdates = computed(() => updates.value.length > 0);
+
+	const signalCounts = computed(() => {
+		const counts = new Map<string, number>();
+		updates.value.forEach(update => {
+			if (update.type === "divider") return;
+			const signalName = update.signalName || "Unknown";
+			counts.set(signalName, (counts.get(signalName) || 0) + 1);
+		});
+		return counts;
+	});
+
+	const updateTree = computed(() => {
+		const buildTree = (
+			updates: (SignalUpdate | Divider)[]
+		): UpdateTreeNodeSingle[] => {
+			const tree: UpdateTreeNodeSingle[] = [];
+			const stack: UpdateTreeNodeSingle[] = [];
+
+			const recentUpdates = updates.slice(-100).reverse();
+
+			for (let i = 0; i < recentUpdates.length; i++) {
+				const item = recentUpdates[i];
+
+				if (item.type === "divider") {
+					continue;
+				}
+
+				const update = item as SignalUpdate;
+				const depth = update.depth || 0;
+
+				const nodeId = `${update.signalName}-${update.receivedAt}-${i}`;
+
+				const node: UpdateTreeNodeSingle = {
+					type: "single",
+					id: nodeId,
+					update,
+					children: [],
+					depth,
+					hasChildren: false,
+				};
+
+				while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+					stack.pop();
+				}
+
+				if (stack.length === 0) {
+					tree.push(node);
+				} else {
+					const parent = stack[stack.length - 1];
+					parent.children.push(node);
+					parent.hasChildren = true;
+				}
+
+				stack.push(node);
+			}
+
+			return tree;
+		};
+
+		return buildTree(updates.value);
+	});
+
+	const clearUpdates = () => {
+		updates.value = [];
+		disposedSignalIds.value = new Set();
+	};
+
+	// Listen to adapter events
+	adapter.on("signalUpdate", (signalUpdates: SignalUpdate[]) => {
+		if (isPaused.value) return;
+
+		const updatesArray: Array<SignalUpdate | Divider> = [
+			...signalUpdates,
+		].reverse();
+		updatesArray.push({ type: "divider" });
+
+		addUpdate(updatesArray);
+	});
+
+	// Listen to disposal events
+	adapter.on("signalDisposed", (disposals: SignalDisposed[]) => {
+		if (isPaused.value) return;
+		addDisposal(disposals);
+	});
+
+	const collapsedUpdateTree = computed(() => {
+		const updateTreeValue = updateTree.value;
+		if (settingsStore.settings.grouped) {
+			return collapseTree(updateTreeValue);
+		}
+		return updateTreeValue;
+	});
+
+	return {
+		updates,
+		updateTree,
+		collapsedUpdateTree,
+		totalUpdates: computed(() => Object.keys(updateTree.value).length),
+		signalCounts,
+		disposedSignalIds,
+		addUpdate,
+		clearUpdates,
+		hasUpdates,
+		isPaused,
+	};
+}
+
+export function createSettingsStore(adapter: DevToolsAdapter) {
+	const settings = signal<Settings>({
+		enabled: true,
+		grouped: true,
+		maxUpdatesPerSecond: 60,
+		filterPatterns: [],
+	});
+
+	const showSettings = signal<boolean>(false);
+	const showDisposedSignals = signal<boolean>(false);
+
+	const applySettings = (newSettings: Settings) => {
+		settings.value = newSettings;
+		adapter.sendConfig(newSettings);
+		showSettings.value = false;
+	};
+
+	const toggleSettings = () => {
+		showSettings.value = !showSettings.value;
+	};
+
+	const hideSettings = () => {
+		showSettings.value = false;
+	};
+
+	const toggleShowDisposedSignals = () => {
+		showDisposedSignals.value = !showDisposedSignals.value;
+	};
+
+	// Listen to adapter events
+	adapter.on("configReceived", (config: { settings?: Settings }) => {
+		if (config.settings) {
+			settings.value = config.settings;
+		}
+	});
+
+	return {
+		get settings() {
+			return settings.value;
+		},
+		get showSettings() {
+			return showSettings.value;
+		},
+		get showDisposedSignals() {
+			return showDisposedSignals.value;
+		},
+		set settings(newSettings: Settings) {
+			settings.value = newSettings;
+		},
+		applySettings,
+		toggleSettings,
+		hideSettings,
+		toggleShowDisposedSignals,
+	};
+}
+
+export function initDevTools(adapter: DevToolsAdapter): DevToolsContext {
+	const settingsStore = createSettingsStore(adapter);
+	const updatesStore = createUpdatesStore(adapter, settingsStore);
+	const connectionStore = createConnectionStore(adapter);
+
+	currentContext = {
+		adapter,
+		connectionStore,
+		updatesStore,
+		settingsStore,
+	};
+
+	return currentContext;
+}
+
+export function destroyDevTools(): void {
+	if (currentContext) {
+		currentContext.adapter.disconnect();
+		currentContext = null;
+	}
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+// Main component and mount function
+export {
+	DevToolsPanel,
+	mount,
+	type MountOptions,
+	type DevToolsPanelProps,
+} from "./DevToolsPanel";
+
+// Context and stores
+export {
+	initDevTools,
+	destroyDevTools,
+	getContext,
+	createConnectionStore,
+	createUpdatesStore,
+	createSettingsStore,
+	type DevToolsContext,
+	type SignalUpdate,
+	type UpdateTreeNode,
+	type UpdateTreeNodeSingle,
+	type UpdateTreeNodeGroup,
+	type Divider,
+} from "./context";
+
+// Types
+export type { GraphNode, GraphLink, GraphData } from "./types";
+
+// Components for custom compositions
+export {
+	Button,
+	EmptyState,
+	GraphVisualization,
+	Header,
+	SettingsPanel,
+	StatusIndicator,
+	UpdateItem,
+	UpdateTreeNodeComponent,
+	UpdatesContainer,
+} from "./components";
+
+// Re-export adapter types for convenience
+export type {
+	DevToolsAdapter,
+	Settings,
+	ConnectionStatus,
+	ConnectionStatusType,
+} from "@preact/signals-devtools-adapter";