Support lazy fallback in <Show>

Author: marvinhagemeister

packages/preact/utils/src/index.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "preact/hooks";
 
 interface ShowProps<T = boolean> {
 	when: Signal<T> | ReadonlySignal<T> | (() => T);
-	fallback?: ComponentChildren;
+	fallback?: ComponentChildren | (() => ComponentChildren);
 	children: ComponentChildren | ((value: NonNullable<T>) => ComponentChildren);
 }
 
@@ -22,7 +22,10 @@ export function Show<T = boolean>(
 ): ComponentChildren | null {
 	const value =
 		typeof props.when === "function" ? props.when() : props.when.value;
-	if (!value) return props.fallback || null;
+	if (!value) {
+		const fallback = props.fallback;
+		return typeof fallback === "function" ? fallback() : fallback || null;
+	}
 	return <Item v={value} children={props.children} />;
 }
 

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

@@ -61,6 +61,63 @@ describe("@preact/signals-utils", () => {
 			expect(scratch.innerHTML).to.eq("<p>Showing 2</p>");
 		});
 
+		it("Should call function fallback lazily", () => {
+			const toggle = signal(true)!;
+			let fallbackCalled = false;
+
+			act(() => {
+				render(
+					<Show
+						when={toggle}
+						fallback={() => {
+							fallbackCalled = true;
+							return <p>Hidden</p>;
+						}}
+					>
+						<p>Shown</p>
+					</Show>,
+					scratch
+				);
+			});
+
+			// When condition is true, fallback should NOT have been called
+			expect(fallbackCalled).to.eq(false);
+			expect(scratch.innerHTML).to.eq("<p>Shown</p>");
+
+			act(() => {
+				toggle.value = false;
+			});
+
+			// Now fallback should have been called
+			expect(fallbackCalled).to.eq(true);
+			expect(scratch.innerHTML).to.eq("<p>Hidden</p>");
+		});
+
+		it("Should reactively show with lazy function fallback", () => {
+			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
+				);
+			});
+			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>");
+		});
+
 		it("Should preserve signal props after unmount/remount cycle", () => {
 			const counter = signal(0);
 			const visible = computed(() => counter.value >= 1 && counter.value <= 2);

packages/react/utils/src/index.tsx

@@ -12,7 +12,7 @@ import {
 
 interface ShowProps<T = boolean> {
 	when: Signal<T> | ReadonlySignal<T> | (() => T);
-	fallback?: ReactNode;
+	fallback?: ReactNode | (() => ReactNode);
 	children: ReactNode | ((value: NonNullable<T>) => ReactNode);
 }
 
@@ -29,7 +29,12 @@ export function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {
 	useSignals();
 	const value =
 		typeof props.when === "function" ? props.when() : props.when.value;
-	if (!value) return (props.fallback as JSX.Element) || null;
+	if (!value) {
+		const fallback = props.fallback;
+		return (
+			typeof fallback === "function" ? fallback() : fallback
+		) as JSX.Element | null;
+	}
 	return <Item v={value} children={props.children} />;
 }
 

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

@@ -118,6 +118,61 @@ describe("@preact/signals-react-utils", () => {
 			expect(scratch.innerHTML).to.eq("<p>Showing</p>");
 		});
 
+		it("Should call function fallback lazily", async () => {
+			const toggle = signal(true)!;
+			let fallbackCalled = false;
+
+			await act(() => {
+				render(
+					<Show
+						when={toggle}
+						fallback={() => {
+							fallbackCalled = true;
+							return <p>Hidden</p>;
+						}}
+					>
+						<p>Shown</p>
+					</Show>
+				);
+			});
+
+			// When condition is true, fallback should NOT have been called
+			expect(fallbackCalled).to.eq(false);
+			expect(scratch.innerHTML).to.eq("<p>Shown</p>");
+
+			await act(() => {
+				toggle.value = false;
+			});
+
+			// Now fallback should have been called
+			expect(fallbackCalled).to.eq(true);
+			expect(scratch.innerHTML).to.eq("<p>Hidden</p>");
+		});
+
+		it("Should reactively show with lazy function fallback", async () => {
+			const toggle = signal(false)!;
+			const Paragraph = (p: any) => <p>{p.children}</p>;
+
+			await act(() => {
+				render(
+					<Show when={toggle} fallback={() => <Paragraph>Hiding</Paragraph>}>
+						<Paragraph>Showing</Paragraph>
+					</Show>
+				);
+			});
+			expect(scratch.innerHTML).to.eq("<p>Hiding</p>");
+
+			await act(() => {
+				toggle.value = true;
+			});
+			expect(scratch.innerHTML).to.eq("<p>Showing</p>");
+
+			await act(() => {
+				toggle.value = false;
+			});
+			expect(scratch.innerHTML).to.eq("<p>Hiding</p>");
+		});
+
 		it("Should reactively show an inline element w/ nested reactivity", async () => {
 			const count = signal(0);
 			const visible = computed(() => count.value > 0)!;