react-solidlike 2.2.1 → 2.2.3

package/README.en.md

@@ -58,6 +58,11 @@ import { For } from "react-solidlike";
 <For each={items} fallback={<EmptyState />}>
   {(item, index) => <ListItem item={item} index={index} />}
 </For>
+
+// With wrapper element
+<For each={items} wrapper={<ul className="list" />}>
+  {(item) => <li>{item.name}</li>}
+</For>
 ```
 
 ### `<Switch>` / `<Match>` / `<Default>` - Multi-branch Rendering
@@ -126,6 +131,11 @@ import { Repeat } from "react-solidlike";
 <Repeat times={3}>
   {(i) => <SkeletonCard key={i} />}
 </Repeat>
+
+// With wrapper element
+<Repeat times={5} wrapper={<div className="stars" />}>
+  {(i) => <Star key={i} />}
+</Repeat>
 ```
 
 ### `<Dynamic>` - Dynamic Component

package/README.md

@@ -58,6 +58,11 @@ import { For } from "react-solidlike";
 <For each={items} fallback={<EmptyState />}>
   {(item, index) => <ListItem item={item} index={index} />}
 </For>
+
+// 使用 wrapper 包装元素
+<For each={items} wrapper={<ul className="list" />}>
+  {(item) => <li>{item.name}</li>}
+</For>
 ```
 
 ### `<Switch>` / `<Match>` / `<Default>` - 多分支渲染
@@ -126,6 +131,11 @@ import { Repeat } from "react-solidlike";
 <Repeat times={3}>
   {(i) => <SkeletonCard key={i} />}
 </Repeat>
+
+// 使用 wrapper 包装元素
+<Repeat times={5} wrapper={<div className="stars" />}>
+  {(i) => <Star key={i} />}
+</Repeat>
 ```
 
 ### `<Dynamic>` - 动态组件

package/dist/For.d.ts

@@ -1,4 +1,4 @@
-import { type Key, type ReactNode } from "react";
+import { type Key, type ReactElement, type ReactNode } from "react";
 export interface ForProps<T> {
     /** Array to iterate over | 要遍历的数组 */
     each: T[] | readonly T[] | null | undefined;
@@ -8,6 +8,8 @@ export interface ForProps<T> {
     keyExtractor?: (item: T, index: number) => Key;
     /** Fallback content when array is empty | 数组为空时渲染的备选内容 */
     fallback?: ReactNode;
+    /** Wrapper element for all rendered elements | 包装所有渲染元素的元素 */
+    wrapper?: ReactElement;
 }
 /**
  * List rendering component, replaces array.map() in JSX
@@ -31,5 +33,11 @@ export interface ForProps<T> {
  * <For each={items} fallback={<EmptyState />}>
  *   {(item, index) => <ListItem key={item.id} item={item} index={index} />}
  * </For>
+ *
+ * @example
+ * // With wrapper element | 使用包装元素
+ * <For each={items} wrapper={<ul className="list" />}>
+ *   {(item) => <li>{item.name}</li>}
+ * </For>
  */
-export declare function For<T>({ each, children, keyExtractor, fallback }: ForProps<T>): ReactNode;
+export declare function For<T>({ each, children, keyExtractor, fallback, wrapper }: ForProps<T>): ReactNode;

package/dist/Repeat.d.ts

@@ -1,9 +1,11 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export interface RepeatProps {
     /** Number of times to repeat | 重复次数 */
     times: number;
     /** Render function, receives current index (starting from 0) | 渲染函数，接收当前索引（从 0 开始） */
     children: (index: number) => ReactNode;
+    /** Wrapper element for all rendered elements | 包装所有渲染元素的元素 */
+    wrapper?: ReactElement;
 }
 /**
  * Repeat rendering component, replaces Array.from({ length: n }).map()
@@ -27,5 +29,11 @@ export interface RepeatProps {
  * <Repeat times={rating}>
  *   {(i) => <FilledStar key={i} />}
  * </Repeat>
+ *
+ * @example
+ * // With wrapper element | 使用包装元素
+ * <Repeat times={5} wrapper={<div className="stars" />}>
+ *   {(i) => <Star key={i} />}
+ * </Repeat>
  */
-export declare function Repeat({ times, children }: RepeatProps): ReactNode;
+export declare function Repeat({ times, children, wrapper }: RepeatProps): ReactNode;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Children, Component, Fragment, createElement, useEffect, useState } from "react";
+import { Children, Component, Fragment, cloneElement, createElement, isValidElement, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 function Await({ promise, loading = null, error = null, children }) {
@@ -51,6 +51,9 @@ function Dynamic({ component, fallback = null, ...props }) {
 var ErrorBoundary = class extends Component {
 	constructor(props) {
 		super(props);
+		this.reset = () => {
+			this.setState({ error: null });
+		};
 		this.state = { error: null };
 	}
 	static getDerivedStateFromError(error) {
@@ -62,9 +65,6 @@ var ErrorBoundary = class extends Component {
 	componentDidUpdate(prevProps) {
 		if (this.state.error && prevProps.resetKey !== this.props.resetKey) this.reset();
 	}
-	reset = () => {
-		this.setState({ error: null });
-	};
 	render() {
 		const { error } = this.state;
 		const { fallback, children } = this.props;
@@ -76,12 +76,13 @@ var ErrorBoundary = class extends Component {
 	}
 };
 
-function For({ each, children, keyExtractor, fallback = null }) {
+function For({ each, children, keyExtractor, fallback = null, wrapper }) {
 	if (!each || each.length === 0) return fallback;
-	return each.map((item, index) => {
+	const elements = each.map((item, index) => {
 		const key = keyExtractor ? keyExtractor(item, index) : index;
 		return /* @__PURE__ */ jsx(Fragment, { children: children(item, index) }, key);
 	});
+	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
 
 function defaultIsEmpty(data) {
@@ -101,18 +102,24 @@ function QueryBoundary({ query, loading = null, error = null, empty = null, chil
 	return children;
 }
 
-function Repeat({ times, children }) {
+function Repeat({ times, children, wrapper }) {
 	if (times <= 0) return null;
 	const elements = [];
 	for (let i = 0; i < times; i++) elements.push(/* @__PURE__ */ jsx(Fragment, { children: children(i) }, i));
-	return elements;
+	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
 
 function Show({ when, children, fallback = null }) {
-	if (!when) return fallback;
+	if (!when || isEmpty(when)) return fallback;
 	if (typeof children === "function") return children(when);
 	return children;
 }
+function isEmpty(value) {
+	if (Array.isArray(value)) return value.length === 0;
+	if (value instanceof Map || value instanceof Set) return value.size === 0;
+	if (typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype) return Object.keys(value).length === 0;
+	return false;
+}
 
 function Match(_props) {
 	return null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.2.1",
+    "version": "2.2.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",
@@ -50,7 +50,7 @@
         "@types/react-dom": "^19.2.3",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
-        "rolldown": "^1.0.0-beta.59",
+        "rolldown": "^1.0.0-rc.2",
         "typescript": "^5.9.3"
     }
 }