react-solidlike 2.5.0 → 2.5.2

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.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;
@@ -44,7 +44,7 @@ function Await({ promise, loading = null, error = null, children }) {
 }
 
 function Dynamic({ component, fallback = null, ...props }) {
-	if (!component) return fallback;
+	if (!component) return typeof fallback === "function" ? fallback() : fallback;
 	return createElement(component, props);
 }
 
@@ -80,8 +80,10 @@ function For({ each, children, keyExtractor, fallback = null, wrapper, reverse }
 	if (!each || each.length === 0) return fallback;
 	const elements = (reverse ? [...each].reverse() : each).map((item, i) => {
 		const originalIndex = reverse ? each.length - 1 - i : i;
-		const key = keyExtractor ? keyExtractor(item, originalIndex) : originalIndex;
-		return /* @__PURE__ */ jsx(Fragment, { children: children(item, originalIndex, each) }, key);
+		const child = children(item, originalIndex, each);
+		const childKey = isValidElement(child) ? child.key : null;
+		const key = keyExtractor ? keyExtractor(item, originalIndex) : childKey ?? originalIndex;
+		return /* @__PURE__ */ jsx(Fragment, { children: child }, key);
 	});
 	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
@@ -96,9 +98,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;
 }
@@ -115,7 +117,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;
@@ -167,7 +169,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;
@@ -193,7 +195,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;
 }
 
@@ -244,7 +246,7 @@ 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
 	});
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.5.0",
+    "version": "2.5.2",
     "description": "Declarative React control flow components inspired by Solid.js, replacing ternary expressions and array.map() in JSX",
     "type": "module",
     "main": "./dist/index.js",