@preact/signals-devtools-ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-devtools-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "DevTools UI components for @preact/signals",
   "keywords": [
@@ -44,21 +44,20 @@
     "README.md"
   ],
   "dependencies": {
-    "@preact/signals-devtools-adapter": "0.1.0"
+    "@preact/signals-devtools-adapter": "0.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.19.103",
-    "@vitest/browser": "^3.2.4",
+    "@types/node": "^20.0.0",
+    "@vitest/browser": "^4.0.0",
     "playwright": "^1.53.1",
     "preact": "^10.26.9",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.4",
-    "@preact/signals": "2.6.0"
+    "vite": "^7.0.0",
+    "vitest": "^4.0.17",
+    "@preact/signals": "2.6.1"
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "provenance": true
   },
   "scripts": {
     "test": "vitest run"

package/src/components/Button.tsx

@@ -1,11 +1,12 @@
 import type { ComponentChildren } from "preact";
 
 interface ButtonProps {
-	onClick: () => void;
+	onClick?: () => void;
 	className?: string;
 	disabled?: boolean;
 	children: ComponentChildren;
 	variant?: "primary" | "secondary";
+	popovertarget?: string;
 	active?: boolean;
 }
 
@@ -15,6 +16,7 @@ export function Button({
 	disabled = false,
 	children,
 	variant = "secondary",
+	popovertarget,
 	active = false,
 }: ButtonProps) {
 	const baseClass = "btn";
@@ -24,7 +26,12 @@ export function Button({
 		`${baseClass} ${variantClass} ${activeClass} ${className}`.trim();
 
 	return (
-		<button onClick={onClick} className={combinedClassName} disabled={disabled}>
+		<button
+			popovertarget={popovertarget}
+			onClick={onClick}
+			className={combinedClassName}
+			disabled={disabled}
+		>
 			{children}
 		</button>
 	);

package/src/components/Header.tsx

@@ -3,9 +3,8 @@ import { Button } from "./Button";
 import { getContext } from "../context";
 
 export function Header() {
-	const { connectionStore, updatesStore, settingsStore } = getContext();
+	const { connectionStore, updatesStore } = getContext();
 
-	const onToggleSettings = settingsStore.toggleSettings;
 	const onTogglePause = () => {
 		updatesStore.isPaused.value = !updatesStore.isPaused.value;
 	};
@@ -30,9 +29,7 @@ export function Header() {
 						{updatesStore.isPaused.value ? "Resume" : "Pause"}
 					</Button>
 				)}
-				{onToggleSettings && (
-					<Button onClick={onToggleSettings}>Settings</Button>
-				)}
+				<Button popovertarget="settings-panel-popover">Settings</Button>
 			</div>
 		</header>
 	);

package/src/components/SettingsPanel.tsx

@@ -2,14 +2,14 @@ import { useSignal, useSignalEffect } from "@preact/signals";
 import { Button } from "./Button";
 import type { Settings } from "@preact/signals-devtools-adapter";
 import { getContext } from "../context";
+import { useRef } from "preact/hooks";
 
 export function SettingsPanel() {
 	const { settingsStore } = getContext();
+	const popover = useRef<HTMLDivElement>(null);
 
-	const onCancel = settingsStore.hideSettings;
 	const onApply = settingsStore.applySettings;
 	const settings = settingsStore.settings;
-	const isVisible = settingsStore.showSettings;
 
 	const localSettings = useSignal<Settings>(settings);
 
@@ -21,12 +21,18 @@ export function SettingsPanel() {
 		onApply(localSettings.value);
 	};
 
-	if (!isVisible) {
-		return null;
-	}
+	const onCancel = () => {
+		// @ts-expect-error
+		popover.current?.hide();
+	};
 
 	return (
-		<div className="settings-panel">
+		<div
+			ref={popover}
+			popover="auto"
+			id="settings-panel-popover"
+			className="settings-panel"
+		>
 			<div className="settings-content">
 				<h3>Debug Configuration</h3>
 
@@ -62,6 +68,26 @@ export function SettingsPanel() {
 					</label>
 				</div>
 
+				<div className="setting-group">
+					<label>
+						<input
+							type="checkbox"
+							checked={localSettings.value.consoleLogging}
+							onChange={e =>
+								(localSettings.value = {
+									...localSettings.value,
+									consoleLogging: (e.target as HTMLInputElement).checked,
+								})
+							}
+						/>
+						Enable console logging
+					</label>
+					<p className="setting-description">
+						When disabled, signal updates will not be logged to the browser
+						console.
+					</p>
+				</div>
+
 				<div className="setting-group">
 					<label htmlFor="maxUpdatesInput">Max updates per second:</label>
 					<input

package/src/context.ts

@@ -284,25 +284,16 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 	const settings = signal<Settings>({
 		enabled: true,
 		grouped: true,
+		consoleLogging: 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 = () => {
@@ -320,9 +311,6 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 		get settings() {
 			return settings.value;
 		},
-		get showSettings() {
-			return showSettings.value;
-		},
 		get showDisposedSignals() {
 			return showDisposedSignals.value;
 		},
@@ -330,8 +318,6 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 			settings.value = newSettings;
 		},
 		applySettings,
-		toggleSettings,
-		hideSettings,
 		toggleShowDisposedSignals,
 	};
 }