Add new devtools demo

docs/demos/devtools.tsx

@@ -0,0 +1,141 @@
+import { useSignal } from "@preact/signals";
+import { Show, For } from "./utils";
+import { computed, signal } from "@preact/signals-core";
+
+type TodoModel = {
+	id: number;
+	get text(): string;
+	get done(): boolean;
+	toggle(): void;
+	updateText(newText: string): void;
+};
+
+const createTodoModel = (id: number, input: string): TodoModel => {
+	const text = signal(input, { name: `todo-${id}-text` });
+	const done = signal(false, { name: `todo-${id}-done` });
+
+	return {
+		id,
+		get text() {
+			return text.value;
+		},
+		get done() {
+			return done.value;
+		},
+		toggle() {
+			done.value = !done.value;
+		},
+		updateText(newText: string) {
+			text.value = newText;
+		},
+	};
+};
+
+const todosModel = (() => {
+	const todos = signal<TodoModel[]>(
+		[
+			createTodoModel(1, "Learn Preact Signals"),
+			createTodoModel(2, "Build something fun"),
+		],
+		{ name: "todos-list" }
+	);
+
+	const allDone = computed(
+		() => todos.value.length > 0 && todos.value.every(t => t.done),
+		{ name: "all-done" }
+	);
+
+	return {
+		todos,
+		allDone,
+		add(text: string) {
+			todos.value = [...todos.value, createTodoModel(Date.now(), text)];
+		},
+	};
+})();
+
+export default function DevToolsDemo() {
+	return (
+		<div>
+			<h1>DevTools Demo</h1>
+			<main>
+				<TodosList />
+			</main>
+		</div>
+	);
+}
+
+function TodosList() {
+	const newTodoText = useSignal("", { name: "new-todo-text" });
+
+	return (
+		<div>
+			<h2>Todos</h2>
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					marginBottom: "8px",
+				}}
+			>
+				<label>
+					New Todo:{" "}
+					<input
+						type="text"
+						value={newTodoText.value}
+						onInput={e => (newTodoText.value = e.currentTarget.value)}
+					/>
+				</label>
+				<button
+					onClick={() => {
+						if (newTodoText.value.trim() !== "") {
+							todosModel.add(newTodoText.value.trim());
+							newTodoText.value = "";
+						}
+					}}
+				>
+					Add
+				</button>
+			</div>
+			<Show when={todosModel.allDone}>
+				<p>All todos are done! 🎉</p>
+			</Show>
+			<ul>
+				<For each={todosModel.todos}>
+					{todo => <TodoItem key={todo.id} todo={todo} />}
+				</For>
+			</ul>
+		</div>
+	);
+}
+
+function TodoItem({ todo }: { todo: TodoModel }) {
+	const isEditing = useSignal(false, { name: `todo-${todo.id}-isEditing` });
+	return (
+		<li
+			style={{
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				marginBottom: "4px",
+			}}
+		>
+			<input
+				type="checkbox"
+				checked={todo.done}
+				onChange={() => todo.toggle()}
+			/>
+			<Show when={isEditing} fallback={<p>{todo.text}</p>}>
+				<input
+					type="text"
+					value={todo.text}
+					onInput={e => todo.updateText(e.currentTarget.value)}
+				/>
+			</Show>
+			<button onClick={() => (isEditing.value = !isEditing.value)}>
+				Toggle Edit
+			</button>
+		</li>
+	);
+}

docs/demos/index.tsx

@@ -13,6 +13,7 @@ const demos = {
 	Sum,
 	GlobalCounter,
 	DuelingCounters,
+	Devtools: lazy(() => import("./devtools")),
 	Nesting: lazy(() => import("./nesting")),
 	Animation: lazy(() => import("./animation")),
 	Bench: lazy(() => import("./bench")),

docs/demos/utils.ts

@@ -0,0 +1,71 @@
+import { ReadonlySignal, Signal } from "@preact/signals-core";
+import { useSignal } from "@preact/signals";
+import { Fragment, createElement, JSX } from "preact";
+import { useMemo } from "preact/hooks";
+
+interface ShowProps<T = boolean> {
+	when: Signal<T> | ReadonlySignal<T>;
+	fallback?: JSX.Element;
+	children: JSX.Element | ((value: NonNullable<T>) => JSX.Element);
+}
+
+export function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {
+	const value = props.when.value;
+	if (!value) return props.fallback || null;
+	return typeof props.children === "function"
+		? props.children(value)
+		: props.children;
+}
+
+interface ForProps<T> {
+	each:
+		| Signal<Array<T>>
+		| ReadonlySignal<Array<T>>
+		| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);
+	fallback?: JSX.Element;
+	children: (value: T, index: number) => JSX.Element;
+}
+
+export function For<T>(props: ForProps<T>): JSX.Element | null {
+	const cache = useMemo(() => new Map(), []);
+	let list = (
+		(typeof props.each === "function" ? props.each() : props.each) as Signal<
+			Array<T>
+		>
+	).value;
+
+	if (!list.length) return props.fallback || null;
+
+	const items = list.map((value, key) => {
+		if (!cache.has(value)) {
+			cache.set(value, props.children(value, key));
+		}
+		return cache.get(value);
+	});
+
+	return createElement(Fragment, null, items);
+}
+
+export function useLiveSignal<T>(
+	value: Signal<T> | ReadonlySignal<T>
+): Signal<Signal<T> | ReadonlySignal<T>> {
+	const s = useSignal(value);
+	if (s.peek() !== value) s.value = value;
+	return s;
+}
+
+export function useSignalRef<T>(value: T): Signal<T> & { current: T } {
+	const ref = useSignal(value) as Signal<T> & { current: T };
+	if (!("current" in ref))
+		Object.defineProperty(ref, "current", refSignalProto);
+	return ref;
+}
+const refSignalProto = {
+	configurable: true,
+	get(this: Signal) {
+		return this.value;
+	},
+	set(this: Signal, v: any) {
+		this.value = v;
+	},
+};