Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
367e7f6
types: Widen util component types to accept all child node content
rschristian Nov 13, 2025
ca2dc10
docs: Add changeset
rschristian Nov 14, 2025
4cd3d4a
fix: Appease TS?
rschristian Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/cold-snakes-give.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@preact/signals": patch
"@preact/signals-react": patch
---

Widen utility component types to accept ComponentChildren/ReactNodes as children and fallbacks
14 changes: 7 additions & 7 deletions packages/preact/utils/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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;
Expand All @@ -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<
Expand Down
14 changes: 7 additions & 7 deletions packages/react/utils/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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;
Copy link
Member Author

@rschristian rschristian Nov 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be the correct approach for React's types? Weird: microsoft/TypeScript#14729

If there's a better way lmk

return <Item v={value} children={props.children} />;
}

Expand All @@ -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 {
Expand All @@ -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());

Expand Down