react-solidlike 2.2.3 → 2.2.4

package/README.en.md

@@ -63,6 +63,22 @@ import { For } from "react-solidlike";
 <For each={items} wrapper={<ul className="list" />}>
   {(item) => <li>{item.name}</li>}
 </For>
+
+// Reverse rendering
+<For each={messages} reverse>
+  {(msg) => <Message {...msg} />}
+</For>
+
+// Using array parameter for context
+<For each={steps}>
+  {(step, index, array) => (
+    <Step
+      data={step}
+      isFirst={index === 0}
+      isLast={index === array.length - 1}
+    />
+  )}
+</For>
 ```
 
 ### `<Switch>` / `<Match>` / `<Default>` - Multi-branch Rendering
@@ -136,6 +152,18 @@ import { Repeat } from "react-solidlike";
 <Repeat times={5} wrapper={<div className="stars" />}>
   {(i) => <Star key={i} />}
 </Repeat>
+
+// Reverse rendering
+<Repeat times={5} reverse>
+  {(i) => <div key={i}>Reversed {i}</div>}
+</Repeat>
+
+// Using length parameter for progress
+<Repeat times={totalSteps}>
+  {(i, length) => (
+    <Step key={i} current={i + 1} total={length} />
+  )}
+</Repeat>
 ```
 
 ### `<Dynamic>` - Dynamic Component

package/README.md

@@ -63,6 +63,22 @@ import { For } from "react-solidlike";
 <For each={items} wrapper={<ul className="list" />}>
   {(item) => <li>{item.name}</li>}
 </For>
+
+// 倒序渲染
+<For each={messages} reverse>
+  {(msg) => <Message {...msg} />}
+</For>
+
+// 使用 array 参数获取上下文信息
+<For each={steps}>
+  {(step, index, array) => (
+    <Step
+      data={step}
+      isFirst={index === 0}
+      isLast={index === array.length - 1}
+    />
+  )}
+</For>
 ```
 
 ### `<Switch>` / `<Match>` / `<Default>` - 多分支渲染
@@ -136,6 +152,18 @@ import { Repeat } from "react-solidlike";
 <Repeat times={5} wrapper={<div className="stars" />}>
   {(i) => <Star key={i} />}
 </Repeat>
+
+// 倒序渲染
+<Repeat times={5} reverse>
+  {(i) => <div key={i}>倒序 {i}</div>}
+</Repeat>
+
+// 使用 length 参数显示进度
+<Repeat times={totalSteps}>
+  {(i, length) => (
+    <Step key={i} current={i + 1} total={length} />
+  )}
+</Repeat>
 ```
 
 ### `<Dynamic>` - 动态组件

package/dist/For.d.ts

@@ -2,14 +2,16 @@ import { type Key, type ReactElement, type ReactNode } from "react";
 export interface ForProps<T> {
     /** Array to iterate over | 要遍历的数组 */
     each: T[] | readonly T[] | null | undefined;
-    /** Render function for each element | 渲染每个元素的函数 */
-    children: (item: T, index: number) => ReactNode;
+    /** Render function for each element, receives item, index and original array | 渲染每个元素的函数，接收元素、索引和原数组 */
+    children: (item: T, index: number, array: T[] | readonly T[]) => ReactNode;
     /** Function to extract key from element, defaults to index | 从元素中提取 key 的函数，默认使用索引 */
     keyExtractor?: (item: T, index: number) => Key;
     /** Fallback content when array is empty | 数组为空时渲染的备选内容 */
     fallback?: ReactNode;
     /** Wrapper element for all rendered elements | 包装所有渲染元素的元素 */
     wrapper?: ReactElement;
+    /** Reverse the rendering order | 倒序渲染 */
+    reverse?: boolean;
 }
 /**
  * List rendering component, replaces array.map() in JSX
@@ -40,4 +42,4 @@ export interface ForProps<T> {
  *   {(item) => <li>{item.name}</li>}
  * </For>
  */
-export declare function For<T>({ each, children, keyExtractor, fallback, wrapper }: ForProps<T>): ReactNode;
+export declare function For<T>({ each, children, keyExtractor, fallback, wrapper, reverse }: ForProps<T>): ReactNode;

package/dist/Repeat.d.ts

@@ -2,10 +2,12 @@ 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;
+    /** Render function, receives current index and total length | 渲染函数，接收当前索引和总长度 */
+    children: (index: number, length: number) => ReactNode;
     /** Wrapper element for all rendered elements | 包装所有渲染元素的元素 */
     wrapper?: ReactElement;
+    /** Reverse the rendering order | 倒序渲染 */
+    reverse?: boolean;
 }
 /**
  * Repeat rendering component, replaces Array.from({ length: n }).map()
@@ -36,4 +38,4 @@ export interface RepeatProps {
  *   {(i) => <Star key={i} />}
  * </Repeat>
  */
-export declare function Repeat({ times, children, wrapper }: RepeatProps): ReactNode;
+export declare function Repeat({ times, children, wrapper, reverse }: RepeatProps): ReactNode;

package/dist/index.js

@@ -76,11 +76,12 @@ var ErrorBoundary = class extends Component {
 	}
 };
 
-function For({ each, children, keyExtractor, fallback = null, wrapper }) {
+function For({ each, children, keyExtractor, fallback = null, wrapper, reverse }) {
 	if (!each || each.length === 0) return fallback;
-	const elements = each.map((item, index) => {
-		const key = keyExtractor ? keyExtractor(item, index) : index;
-		return /* @__PURE__ */ jsx(Fragment, { children: children(item, index) }, key);
+	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);
 	});
 	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
@@ -102,10 +103,11 @@ function QueryBoundary({ query, loading = null, error = null, empty = null, chil
 	return children;
 }
 
-function Repeat({ times, children, wrapper }) {
+function Repeat({ times, children, wrapper, reverse }) {
 	if (times <= 0) return null;
 	const elements = [];
-	for (let i = 0; i < times; i++) elements.push(/* @__PURE__ */ jsx(Fragment, { children: children(i) }, i));
+	if (reverse) for (let i = times - 1; i >= 0; i--) elements.push(/* @__PURE__ */ jsx(Fragment, { children: children(i, times) }, i));
+	else for (let i = 0; i < times; i++) elements.push(/* @__PURE__ */ jsx(Fragment, { children: children(i, times) }, i));
 	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.2.3",
+    "version": "2.2.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",