Unwrap signals returned from Show's when callback

When when is a function like () => someSignal, Show used the returned Signal
object directly in its truthiness check. Signal objects are always truthy, so
the fallback branch was never shown — even when the signal's value was falsy.

Show now unwraps the return value when it is a Signal, reading .value before
the truthiness check. This matches the existing behavior for the non-callback
form (when={someSignal}), which already reads .value.

Assisted-By: devx/dca78f42-f55f-4065-b66c-fc3731bd0420

Author: marvinhagemeister

.changeset/show-unwrap-callback.md

@@ -0,0 +1,14 @@
+---
+"@preact/signals-utils": patch
+---
+
+Unwrap signals returned from `Show`'s `when` callback
+
+When `when` is a function like `() => someSignal`, `Show` previously used the
+returned Signal object directly in its truthiness check. Since Signal objects
+are always truthy, this meant the fallback branch was never shown — even when
+the signal's value was `false`, `0`, `""`, or `null`.
+
+`Show` now unwraps the return value when it's a Signal, reading `.value` before
+the truthiness check. This matches the existing behavior for the non-callback
+form (`when={someSignal}`), which already reads `.value`.

packages/devtools-ui/README.md

@@ -106,18 +106,18 @@ function MyCustomDevTools() {
 
 ### `mount(options)`
 
-| Option       | Type                                              | Required | Description                      |
-| ------------ | ------------------------------------------------- | -------- | -------------------------------- |
-| `adapter`    | `DevToolsAdapter`                                 | Yes      | The communication adapter to use |
-| `container`  | `HTMLElement`                                     | Yes      | The DOM element to render into   |
-| `hideHeader` | `boolean`                                         | No       | Hide the header bar              |
+| Option       | Type                                                  | Required | Description                      |
+| ------------ | ----------------------------------------------------- | -------- | -------------------------------- |
+| `adapter`    | `DevToolsAdapter`                                     | Yes      | The communication adapter to use |
+| `container`  | `HTMLElement`                                         | Yes      | The DOM element to render into   |
+| `hideHeader` | `boolean`                                             | No       | Hide the header bar              |
 | `initialTab` | `"updates" \| "performance" \| "timeline" \| "graph"` | No       | Which tab to show initially      |
 
 ### `DevToolsPanel`
 
-| Prop         | Type                                              | Default     | Description            |
-| ------------ | ------------------------------------------------- | ----------- | ---------------------- |
-| `hideHeader` | `boolean`                                         | `false`     | Hide the header bar    |
+| Prop         | Type                                                  | Default     | Description            |
+| ------------ | ----------------------------------------------------- | ----------- | ---------------------- |
+| `hideHeader` | `boolean`                                             | `false`     | Hide the header bar    |
 | `initialTab` | `"updates" \| "performance" \| "timeline" \| "graph"` | `"updates"` | Initial tab to display |
 
 ## Styling

packages/preact/utils/src/index.tsx

@@ -20,8 +20,12 @@ Item.displayName = "Item";
 export function Show<T = boolean>(
 	props: ShowProps<T>
 ): ComponentChildren | null {
-	const value =
+	const raw =
 		typeof props.when === "function" ? props.when() : props.when.value;
+	// Unwrap a signal returned by a `when` callback so `when={() => someSignal}`
+	// checks the signal's value, not the signal object (which is always truthy).
+	const value =
+		raw instanceof Signal ? (raw as unknown as Signal<T>).value : raw;
 	if (!value) {
 		const fallback = props.fallback;
 		return typeof fallback === "function" ? fallback() : fallback || null;

packages/preact/utils/test/browser/index.test.tsx

@@ -163,6 +163,31 @@ describe("@preact/signals-utils", () => {
 			// counter=2, class should update after remount
 			expect(scratch.innerHTML).to.eq('<div class="val-2">content</div>');
 		});
+
+		it("Should unwrap a signal returned from a when callback", () => {
+			const toggle = signal(false);
+			const Paragraph = (props: any) => <p>{props.children}</p>;
+			act(() => {
+				render(
+					<Show when={() => toggle} fallback={<Paragraph>Hiding</Paragraph>}>
+						<Paragraph>Showing</Paragraph>
+					</Show>,
+					scratch
+				);
+			});
+			// Signal object is always truthy, but Show should unwrap and check .value
+			expect(scratch.innerHTML).to.eq("<p>Hiding</p>");
+
+			act(() => {
+				toggle.value = true;
+			});
+			expect(scratch.innerHTML).to.eq("<p>Showing</p>");
+
+			act(() => {
+				toggle.value = false;
+			});
+			expect(scratch.innerHTML).to.eq("<p>Hiding</p>");
+		});
 	});
 
 	describe("<For />", () => {