react-solidlike 2.2.4 → 2.3.0

package/README.en.md

@@ -166,6 +166,48 @@ import { Repeat } from "react-solidlike";
 </Repeat>
 ```
 
+### `<Split>` - String Split Rendering
+
+Split a string by separator and render each part.
+
+```tsx
+import { Split } from "react-solidlike";
+
+// Basic usage - splits without keeping separator
+<Split string="a,b,c" separator=",">
+  {(part) => <span>{part}</span>}
+</Split>
+// Renders: ["a", "b", "c"]
+
+// Keep separator in result
+<Split string="9+5=(9+1)+4" separator="=" keepSeparator>
+  {(part) => <span>{part}</span>}
+</Split>
+// Renders: ["9+5", "=", "(9+1)+4"]
+
+// Using RegExp separator
+<Split string="a1b2c3" separator={/\d/} keepSeparator>
+  {(part) => <span>{part}</span>}
+</Split>
+// Renders: ["a", "1", "b", "2", "c", "3"]
+
+// With wrapper element
+<Split string="hello world" separator=" " wrapper={<div className="words" />}>
+  {(word) => <span>{word}</span>}
+</Split>
+
+// With fallback for empty string
+<Split string={text} separator="," fallback={<EmptyState />}>
+  {(part) => <Tag>{part}</Tag>}
+</Split>
+
+// Reverse rendering
+<Split string="a,b,c" separator="," reverse>
+  {(part) => <span>{part}</span>}
+</Split>
+// Render order: ["c", "b", "a"]
+```
+
 ### `<Dynamic>` - Dynamic Component
 
 Dynamically select component type based on conditions.

package/README.md

@@ -166,6 +166,48 @@ import { Repeat } from "react-solidlike";
 </Repeat>
 ```
 
+### `<Split>` - 字符串切割渲染
+
+按分隔符切割字符串并渲染每个部分。
+
+```tsx
+import { Split } from "react-solidlike";
+
+// 基础用法 - 切割后不保留分隔符
+<Split string="a,b,c" separator=",">
+  {(part) => <span>{part}</span>}
+</Split>
+// 渲染: ["a", "b", "c"]
+
+// 保留分隔符
+<Split string="9+5=(9+1)+4" separator="=" keepSeparator>
+  {(part) => <span>{part}</span>}
+</Split>
+// 渲染: ["9+5", "=", "(9+1)+4"]
+
+// 使用正则表达式分隔符
+<Split string="a1b2c3" separator={/\d/} keepSeparator>
+  {(part) => <span>{part}</span>}
+</Split>
+// 渲染: ["a", "1", "b", "2", "c", "3"]
+
+// 带 wrapper 包装元素
+<Split string="hello world" separator=" " wrapper={<div className="words" />}>
+  {(word) => <span>{word}</span>}
+</Split>
+
+// 带 fallback 处理空字符串
+<Split string={text} separator="," fallback={<EmptyState />}>
+  {(part) => <Tag>{part}</Tag>}
+</Split>
+
+// 倒序渲染
+<Split string="a,b,c" separator="," reverse>
+  {(part) => <span>{part}</span>}
+</Split>
+// 渲染顺序: ["c", "b", "a"]
+```
+
 ### `<Dynamic>` - 动态组件
 
 根据条件动态选择要渲染的组件类型。

package/dist/Repeat.d.ts

@@ -1,13 +1,8 @@
-import { type ReactElement, type ReactNode } from "react";
-export interface RepeatProps {
+import type { ReactNode } from 'react';
+import { type ForProps } from './For';
+export interface RepeatProps extends Omit<ForProps<number>, 'each'> {
     /** Number of times to repeat | 重复次数 */
     times: number;
-    /** 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()
@@ -38,4 +33,4 @@ export interface RepeatProps {
  *   {(i) => <Star key={i} />}
  * </Repeat>
  */
-export declare function Repeat({ times, children, wrapper, reverse }: RepeatProps): ReactNode;
+export declare function Repeat({ times, children, ...props }: RepeatProps): ReactNode;

package/dist/Split.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { type ForProps } from './For';
+export interface SplitProps extends Omit<ForProps<string>, 'each'> {
+    /** String to split | 要切割的字符串 */
+    string: string | null | undefined;
+    /** Separator to split by, can be string or RegExp | 分隔符，可以是字符串或正则表达式 */
+    separator: string | RegExp;
+    /** Whether to keep separator in result array | 是否在结果数组中保留分隔符 */
+    keepSeparator?: boolean;
+}
+/**
+ * String splitting and rendering component, splits a string by separator and renders each part
+ *
+ * 字符串切割渲染组件，按分隔符切割字符串并渲染每个部分
+ *
+ * @example
+ * // Basic usage | 基础用法
+ * <Split string="a,b,c" separator=",">
+ *   {(part) => <span>{part}</span>}
+ * </Split>
+ *
+ * @example
+ * // Keep separator | 保留分隔符
+ * <Split string="9+5=(9+1)+4" separator="=" keepSeparator>
+ *   {(part) => <span>{part}</span>}
+ * </Split>
+ * // Renders: ["9+5", "=", "(9+1)+4"]
+ *
+ * @example
+ * // Without keeping separator | 不保留分隔符
+ * <Split string="9+5=(9+1)+4" separator="=">
+ *   {(part) => <span>{part}</span>}
+ * </Split>
+ * // Renders: ["9+5", "(9+1)+4"]
+ *
+ * @example
+ * // With RegExp separator | 使用正则表达式分隔符
+ * <Split string="a1b2c3" separator={/\d/} keepSeparator>
+ *   {(part) => <span>{part}</span>}
+ * </Split>
+ * // Renders: ["a", "1", "b", "2", "c", "3"]
+ *
+ * @example
+ * // With wrapper element | 使用包装元素
+ * <Split string="hello world" separator=" " wrapper={<div className="words" />}>
+ *   {(word) => <span>{word}</span>}
+ * </Split>
+ */
+export declare function Split({ string, separator, keepSeparator, children, ...props }: SplitProps): ReactNode;

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export { For, type ForProps } from "./For";
 export { QueryBoundary, type QueryBoundaryProps, type QueryResult } from "./QueryBoundary";
 export { Repeat, type RepeatProps } from "./Repeat";
 export { Show, type ShowProps } from "./Show";
+export { Split, type SplitProps } from "./Split";
 export { Default, type DefaultProps, Match, type MatchProps, Switch, type SwitchProps } from "./Switch";

package/dist/index.js

@@ -103,12 +103,13 @@ function QueryBoundary({ query, loading = null, error = null, empty = null, chil
 	return children;
 }
 
-function Repeat({ times, children, wrapper, reverse }) {
-	if (times <= 0) return null;
-	const elements = [];
-	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;
+function Repeat({ times, children, ...props }) {
+	const indices = times > 0 ? Array.from({ length: times }, (_, i) => i) : [];
+	return /* @__PURE__ */ jsx(For, {
+		...props,
+		each: indices,
+		children: (i, _i, array) => children(i, array.length, array)
+	});
 }
 
 function Show({ when, children, fallback = null }) {
@@ -123,6 +124,28 @@ function isEmpty(value) {
 	return false;
 }
 
+function Split({ string, separator, keepSeparator = false, children, ...props }) {
+	const parts = splitString(string, separator, keepSeparator);
+	return /* @__PURE__ */ jsx(For, {
+		...props,
+		each: parts,
+		children
+	});
+}
+
+function splitString(string, separator, keepSeparator) {
+	if (!string) return [];
+	if (keepSeparator) {
+		const regex = separator instanceof RegExp ? new RegExp(`(${separator.source})`, separator.flags.includes("g") ? separator.flags : `${separator.flags}g`) : new RegExp(`(${escapeRegExp(separator)})`, "g");
+		return string.split(regex).filter((part) => part !== "");
+	}
+	return string.split(separator);
+}
+
+function escapeRegExp(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 function Match(_props) {
 	return null;
 }
@@ -158,4 +181,4 @@ function Switch({ children, fallback = null }) {
 	return defaultContent;
 }
 
-export { Await, Default, Dynamic, ErrorBoundary, For, Match, QueryBoundary, Repeat, Show, Switch };
+export { Await, Default, Dynamic, ErrorBoundary, For, Match, QueryBoundary, Repeat, Show, Split, Switch };

package/package.json

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