react-solidlike 2.5.3 → 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.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,11 +38,8 @@ 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;
 }
@@ -48,13 +49,13 @@ function ClientOnly({ children, fallback = null }) {
 	useEffect(() => {
 		setIsClient(true);
 	}, []);
-	if (!isClient) return typeof fallback === "function" ? fallback() : fallback;
+	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);
 }
 
@@ -117,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;
 }
@@ -139,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;
@@ -191,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;
@@ -217,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;
 }
 
@@ -268,7 +269,7 @@ 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)
 	});
 }
 

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.3",
+    "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",