types: Widen util component types to accept all child node content (#795)

* types: Widen util component types to accept all child node content

* docs: Add changeset

* fix: Appease TS?

Author: rschristian

.changeset/cold-snakes-give.md

@@ -0,0 +1,6 @@
+---
+"@preact/signals": patch
+"@preact/signals-react": patch
+---
+
+Widen utility component types to accept ComponentChildren/ReactNodes as children and fallbacks

packages/preact/utils/src/index.tsx

@@ -1,12 +1,12 @@
 import { ReadonlySignal, Signal } from "@preact/signals-core";
 import { useSignal } from "@preact/signals";
-import { Fragment, createElement, JSX } from "preact";
+import { Fragment, createElement, ComponentChildren } from "preact";
 import { useMemo } from "preact/hooks";
 
 interface ShowProps<T = boolean> {
 	when: Signal<T> | ReadonlySignal<T> | (() => T);
-	fallback?: JSX.Element;
-	children: JSX.Element | ((value: NonNullable<T>) => JSX.Element);
+	fallback?: ComponentChildren;
+	children: ComponentChildren | ((value: NonNullable<T>) => ComponentChildren);
 }
 
 const Item = (props: any) => {
@@ -15,7 +15,7 @@ const Item = (props: any) => {
 		: props.children;
 };
 
-export function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {
+export function Show<T = boolean>(props: ShowProps<T>): ComponentChildren | null {
 	const value =
 		typeof props.when === "function" ? props.when() : props.when.value;
 	if (!value) return props.fallback || null;
@@ -27,11 +27,11 @@ interface ForProps<T> {
 		| Signal<Array<T>>
 		| ReadonlySignal<Array<T>>
 		| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);
-	fallback?: JSX.Element;
-	children: (value: T, index: number) => JSX.Element;
+	fallback?: ComponentChildren;
+	children: (value: T, index: number) => ComponentChildren;
 }
 
-export function For<T>(props: ForProps<T>): JSX.Element | null {
+export function For<T>(props: ForProps<T>): ComponentChildren | null {
 	const cache = useMemo(() => new Map(), []);
 	let list = (
 		(typeof props.each === "function" ? props.each() : props.each) as Signal<

packages/react/utils/src/index.tsx

@@ -1,12 +1,12 @@
 import { ReadonlySignal, Signal } from "@preact/signals-core";
 import { useSignal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { Fragment, createElement, useMemo } from "react";
+import { Fragment, createElement, useMemo, ReactNode } from "react";
 
 interface ShowProps<T = boolean> {
 	when: Signal<T> | ReadonlySignal<T> | (() => T);
-	fallback?: JSX.Element;
-	children: JSX.Element | ((value: NonNullable<T>) => JSX.Element);
+	fallback?: ReactNode;
+	children: ReactNode | ((value: NonNullable<T>) => ReactNode);
 }
 
 const Item = (props: any) => {
@@ -20,7 +20,7 @@ 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 || null;
+	if (!value) return (props.fallback as JSX.Element) || null;
 	return <Item v={value} children={props.children} />;
 }
 
@@ -29,8 +29,8 @@ interface ForProps<T> {
 		| Signal<Array<T>>
 		| ReadonlySignal<Array<T>>
 		| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);
-	fallback?: JSX.Element;
-	children: (value: T, index: number) => JSX.Element;
+	fallback?: ReactNode;
+	children: (value: T, index: number) => ReactNode;
 }
 
 export function For<T>(props: ForProps<T>): JSX.Element | null {
@@ -42,7 +42,7 @@ export function For<T>(props: ForProps<T>): JSX.Element | null {
 		>
 	).value;
 
-	if (!list.length) return props.fallback || null;
+	if (!list.length) return (props.fallback as JSX.Element) || null;
 
 	const removed = new Set(cache.keys());