react-solidlike 2.5.2 → 2.5.4

package/dist/QueryBoundary.d.ts

@@ -13,6 +13,8 @@ export interface QueryResult<T> {
 export interface QueryBoundaryProps<T> {
     /** Query result object, usually from @tanstack/react-query's useQuery | 查询结果对象，通常来自 @tanstack/react-query 的 useQuery */
     query: QueryResult<T> | null | undefined;
+    /** When false, renders nothing directly | 为 false 时直接不渲染任何内容 */
+    when?: boolean;
     /** Content to show while loading | 加载中时显示的内容 */
     loading?: ReactNode | (() => ReactNode);
     /** Content to show when error occurs | 发生错误时显示的内容 */
@@ -57,4 +59,4 @@ export interface QueryBoundaryProps<T> {
  *   {(data) => <ItemList items={data.items} />}
  * </QueryBoundary>
  */
-export declare function QueryBoundary<T>({ query, loading, error, empty, children, isEmptyFn, }: QueryBoundaryProps<T>): ReactNode;
+export declare function QueryBoundary<T>({ query, when, loading, error, empty, children, isEmptyFn, }: QueryBoundaryProps<T>): ReactNode;

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

@@ -1,6 +1,10 @@
 import { Children, Component, Fragment, cloneElement, createElement, isValidElement, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
+function resolveNode(node) {
+	return typeof node === "function" ? node() : node;
+}
+
 function Await({ promise, loading = null, error = null, children }) {
 	const [state, setState] = useState(() => {
 		if (!(promise instanceof Promise)) return {
@@ -34,17 +38,24 @@ function Await({ promise, loading = null, error = null, children }) {
 			cancelled = true;
 		};
 	}, [promise]);
-	if (state.status === "pending") return typeof loading === "function" ? loading() : loading;
-	if (state.status === "rejected") {
-		if (typeof error === "function") return error(state.error);
-		return error;
-	}
+	if (state.status === "pending") return resolveNode(loading);
+	if (state.status === "rejected") return typeof error === "function" ? error(state.error) : error;
 	if (typeof children === "function") return children(state.value);
 	return children;
 }
 
+function ClientOnly({ children, fallback = null }) {
+	const [isClient, setIsClient] = useState(false);
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+	if (!isClient) return resolveNode(fallback);
+	if (typeof children === "function") return children();
+	return children;
+}
+
 function Dynamic({ component, fallback = null, ...props }) {
-	if (!component) return typeof fallback === "function" ? fallback() : fallback;
+	if (!component) return resolveNode(fallback);
 	return createElement(component, props);
 }
 
@@ -88,6 +99,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;
@@ -95,12 +118,12 @@ function defaultIsEmpty(data) {
 	return false;
 }
 
-function QueryBoundary({ query, loading = null, error = null, empty = null, children, isEmptyFn = defaultIsEmpty }) {
-	if (!query) return null;
+function QueryBoundary({ query, when = true, loading = null, error = null, empty = null, children, isEmptyFn = defaultIsEmpty }) {
+	if (!when || !query) return null;
 	const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
-	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 (isPending) return resolveNode(loading);
+	if (isError && isEmptyFn(data)) return resolveNode(error);
+	if (queryIsEmpty ?? isEmptyFn(data)) return resolveNode(empty);
 	if (typeof children === "function") return children(data);
 	return children;
 }
@@ -117,7 +140,7 @@ function Repeat({ times, children, ...props }) {
 function Show({ when, children, fallback = null, onFallback }) {
 	if (!when || isEmpty(when)) {
 		onFallback?.();
-		return typeof fallback === "function" ? fallback() : fallback;
+		return resolveNode(fallback);
 	}
 	if (typeof children === "function") return children(when);
 	return children;
@@ -169,7 +192,7 @@ function isDefaultElement(child) {
 
 function Switch({ children, fallback = null }) {
 	const childArray = Children.toArray(children);
-	let defaultContent = typeof fallback === "function" ? fallback() : fallback;
+	let defaultContent = resolveNode(fallback);
 	for (const child of childArray) {
 		if (isDefaultElement(child)) {
 			defaultContent = child.props.children;
@@ -195,7 +218,7 @@ function Timeout({ ms, children, mode = "after", fallback = null, onTimeout }) {
 		}, ms);
 		return () => clearTimeout(timer);
 	}, [ms, onTimeout]);
-	if (mode === "after") return ready ? children : typeof fallback === "function" ? fallback() : fallback;
+	if (mode === "after") return ready ? children : resolveNode(fallback);
 	return ready ? children : null;
 }
 
@@ -246,8 +269,8 @@ function Visible({ children, fallback = null, rootMargin = "0px", threshold = 0,
 	if (!isSupported) return children;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		children: (once ? hasBeenVisible : isVisible) ? children : typeof fallback === "function" ? fallback() : fallback
+		children: (once ? hasBeenVisible : isVisible) ? children : resolveNode(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/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+/** Node that can be either a ReactNode or a function returning a ReactNode | 可以是 ReactNode 或返回 ReactNode 的函数 */
+export type ResolvableNode = ReactNode | (() => ReactNode);
+/** Resolve a node that may be a function into a ReactNode | 将可能是函数的节点解析为 ReactNode */
+export declare function resolveNode(node: ResolvableNode): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.5.2",
+    "version": "2.5.4",
     "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"
     }
 }