react-solidlike 2.5.1 → 2.5.3

package/dist/Await.d.ts

@@ -3,7 +3,7 @@ export interface AwaitProps<T> {
     /** Promise to wait for | 要等待的 Promise */
     promise: Promise<T> | T;
     /** Content to show when Promise is pending | Promise pending 时显示的内容 */
-    loading?: ReactNode;
+    loading?: ReactNode | (() => ReactNode);
     /** Content to show when Promise is rejected | Promise rejected 时显示的内容 */
     error?: ReactNode | ((error: unknown) => ReactNode);
     /** Content to render when Promise is fulfilled | Promise fulfilled 时渲染的内容 */

package/dist/ClientOnly.d.ts

@@ -3,7 +3,7 @@ export interface ClientOnlyProps {
     /** Content to render only on client side | 仅在客户端渲染的内容 */
     children: ReactNode | (() => ReactNode);
     /** Fallback content during SSR | SSR 期间渲染的备选内容 */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
 }
 /**
  * Component that renders children only on the client side (after hydration)

package/dist/Dynamic.d.ts

@@ -5,7 +5,7 @@ export type DynamicProps<T extends ElementType> = {
     /** Component or element type to render | 要渲染的组件或元素类型 */
     component: T | null | undefined | false;
     /** Fallback content when component is falsy | 当 component 为 falsy 时渲染的备选内容 */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
 } & PropsOf<T>;
 /**
  * Dynamic component rendering, selects component type based on conditions

package/dist/QueryBoundary.d.ts

@@ -14,11 +14,11 @@ export interface QueryBoundaryProps<T> {
     /** Query result object, usually from @tanstack/react-query's useQuery | 查询结果对象，通常来自 @tanstack/react-query 的 useQuery */
     query: QueryResult<T> | null | undefined;
     /** Content to show while loading | 加载中时显示的内容 */
-    loading?: ReactNode;
+    loading?: ReactNode | (() => ReactNode);
     /** Content to show when error occurs | 发生错误时显示的内容 */
-    error?: ReactNode;
+    error?: ReactNode | (() => ReactNode);
     /** Content to show when data is empty | 数据为空时显示的内容 */
-    empty?: ReactNode;
+    empty?: ReactNode | (() => ReactNode);
     /** Content to render on success, supports render props | 成功时渲染的内容，支持 render props 模式 */
     children: ReactNode | ((data: T) => ReactNode);
     /** Custom empty data check function, defaults to checking null/undefined or empty array | 自定义空数据判断函数，默认检查 data 是否为 null/undefined 或空数组 */

package/dist/Show.d.ts

@@ -5,7 +5,7 @@ export interface ShowProps<T> {
     /** Content to render when condition is truthy | 条件为真时渲染的内容 */
     children: ReactNode | ((value: NonNullable<T>) => ReactNode);
     /** Fallback content when condition is falsy | 条件为假时渲染的备选内容 */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
     /** Callback when condition is falsy (called before rendering fallback) | 条件为假时的回调（在渲染 fallback 之前调用） */
     onFallback?: () => void;
 }

package/dist/Switch.d.ts

@@ -13,7 +13,7 @@ export interface SwitchProps {
     /** Match and Default components | Match 和 Default 组件 */
     children: ReactNode;
     /** Fallback content when no conditions match (can also use Default component) | 所有条件都不匹配时的备选内容（也可用 Default 组件） */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
 }
 /**
  * Condition match component, used with Switch

package/dist/Timeout.d.ts

@@ -9,7 +9,7 @@ export interface TimeoutProps {
     /** Display mode: 'after' = show after delay, 'before' = hide after delay | 显示模式：'after' = 延迟后显示，'before' = 延迟后隐藏 */
     mode?: TimeoutMode;
     /** Content to show when hidden (only for 'after' mode) | 隐藏时显示的内容（仅 'after' 模式） */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
     /** Callback when timeout occurs | 超时发生时的回调 */
     onTimeout?: () => void;
 }

package/dist/Visible.d.ts

@@ -3,7 +3,7 @@ export interface VisibleProps {
     /** Content to render when visible | 可见时渲染的内容 */
     children: ReactNode;
     /** Fallback content before entering viewport | 进入视口前渲染的备选内容 */
-    fallback?: ReactNode;
+    fallback?: ReactNode | (() => ReactNode);
     /** Root margin for intersection observer (e.g., "100px") | 交叉观察器的根边距 */
     rootMargin?: string;
     /** Visibility threshold (0-1) | 可见性阈值 */

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { Await, type AwaitProps } from "./Await";
+export { ClientOnly, type ClientOnlyProps } from "./ClientOnly";
 export { Dynamic, type DynamicProps } from "./Dynamic";
 export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary";
 export { For, type ForProps } from "./For";
+export { Once, type OnceProps } from "./Once";
 export { QueryBoundary, type QueryBoundaryProps, type QueryResult } from "./QueryBoundary";
 export { Repeat, type RepeatProps } from "./Repeat";
 export { Show, type ShowProps } from "./Show";

package/dist/index.js

@@ -34,7 +34,7 @@ function Await({ promise, loading = null, error = null, children }) {
 			cancelled = true;
 		};
 	}, [promise]);
-	if (state.status === "pending") return loading;
+	if (state.status === "pending") return typeof loading === "function" ? loading() : loading;
 	if (state.status === "rejected") {
 		if (typeof error === "function") return error(state.error);
 		return error;
@@ -43,8 +43,18 @@ function Await({ promise, loading = null, error = null, children }) {
 	return children;
 }
 
+function ClientOnly({ children, fallback = null }) {
+	const [isClient, setIsClient] = useState(false);
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+	if (!isClient) return typeof fallback === "function" ? fallback() : fallback;
+	if (typeof children === "function") return children();
+	return children;
+}
+
 function Dynamic({ component, fallback = null, ...props }) {
-	if (!component) return fallback;
+	if (!component) return typeof fallback === "function" ? fallback() : fallback;
 	return createElement(component, props);
 }
 
@@ -88,6 +98,18 @@ function For({ each, children, keyExtractor, fallback = null, wrapper, reverse }
 	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
 
+function Once({ children }) {
+	const cachedRef = useRef({
+		rendered: false,
+		content: null
+	});
+	if (!cachedRef.current.rendered) {
+		cachedRef.current.rendered = true;
+		cachedRef.current.content = children;
+	}
+	return cachedRef.current.content;
+}
+
 function defaultIsEmpty(data) {
 	if (data == null) return true;
 	if (Array.isArray(data)) return data.length === 0;
@@ -98,9 +120,9 @@ function defaultIsEmpty(data) {
 function QueryBoundary({ query, loading = null, error = null, empty = null, children, isEmptyFn = defaultIsEmpty }) {
 	if (!query) return null;
 	const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
-	if (isPending) return loading;
-	if (isError && isEmptyFn(data)) return error;
-	if (queryIsEmpty ?? isEmptyFn(data)) return empty;
+	if (isPending) return typeof loading === "function" ? loading() : loading;
+	if (isError && isEmptyFn(data)) return typeof error === "function" ? error() : error;
+	if (queryIsEmpty ?? isEmptyFn(data)) return typeof empty === "function" ? empty() : empty;
 	if (typeof children === "function") return children(data);
 	return children;
 }
@@ -117,7 +139,7 @@ function Repeat({ times, children, ...props }) {
 function Show({ when, children, fallback = null, onFallback }) {
 	if (!when || isEmpty(when)) {
 		onFallback?.();
-		return fallback;
+		return typeof fallback === "function" ? fallback() : fallback;
 	}
 	if (typeof children === "function") return children(when);
 	return children;
@@ -169,7 +191,7 @@ function isDefaultElement(child) {
 
 function Switch({ children, fallback = null }) {
 	const childArray = Children.toArray(children);
-	let defaultContent = fallback;
+	let defaultContent = typeof fallback === "function" ? fallback() : fallback;
 	for (const child of childArray) {
 		if (isDefaultElement(child)) {
 			defaultContent = child.props.children;
@@ -195,7 +217,7 @@ function Timeout({ ms, children, mode = "after", fallback = null, onTimeout }) {
 		}, ms);
 		return () => clearTimeout(timer);
 	}, [ms, onTimeout]);
-	if (mode === "after") return ready ? children : fallback;
+	if (mode === "after") return ready ? children : typeof fallback === "function" ? fallback() : fallback;
 	return ready ? children : null;
 }
 
@@ -246,8 +268,8 @@ function Visible({ children, fallback = null, rootMargin = "0px", threshold = 0,
 	if (!isSupported) return children;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		children: (once ? hasBeenVisible : isVisible) ? children : fallback
+		children: (once ? hasBeenVisible : isVisible) ? children : typeof fallback === "function" ? fallback() : fallback
 	});
 }
 
-export { Await, Default, Dynamic, ErrorBoundary, For, Match, QueryBoundary, Repeat, Show, Split, Switch, Timeout, Visible };
+export { Await, ClientOnly, Default, Dynamic, ErrorBoundary, For, Match, Once, QueryBoundary, Repeat, Show, Split, Switch, Timeout, Visible };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.5.1",
+    "version": "2.5.3",
     "description": "Declarative React control flow components inspired by Solid.js, replacing ternary expressions and array.map() in JSX",
     "type": "module",
     "main": "./dist/index.js",
@@ -53,7 +53,7 @@
         "@types/react-dom": "^19.2.3",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
-        "rolldown": "^1.0.0-rc.2",
+        "rolldown": "^1.0.0-rc.3",
         "typescript": "^5.9.3"
     }
 }