react-solidlike 2.0.0

package/README.en.md

@@ -0,0 +1,251 @@
+# react-solidlike
+
+English | [中文](./README.md)
+
+Declarative React control flow components inspired by Solid.js. Replaces ternary expressions and `array.map()` in JSX, making your component code cleaner and more readable. Supports React and React Native.
+
+## Installation
+
+```bash
+npm install react-solidlike
+# or
+bun add react-solidlike
+```
+
+## Components
+
+### `<Show>` - Conditional Rendering
+
+Replace ternary expressions for conditional rendering.
+
+```tsx
+import { Show } from "react-solidlike";
+
+// Basic usage
+<Show when={isLoggedIn}>
+  <UserProfile />
+</Show>
+
+// With fallback
+<Show when={isLoggedIn} fallback={<LoginButton />}>
+  <UserProfile />
+</Show>
+
+// Using render props for type-safe value access
+<Show when={user}>
+  {(user) => <UserProfile name={user.name} />}
+</Show>
+```
+
+### `<For>` - List Rendering
+
+Replace `array.map()` for list rendering.
+
+```tsx
+import { For } from "react-solidlike";
+
+// Basic usage
+<For each={items}>
+  {(item) => <ListItem {...item} />}
+</For>
+
+// With keyExtractor
+<For each={users} keyExtractor={(user) => user.id}>
+  {(user) => <UserCard user={user} />}
+</For>
+
+// With fallback for empty arrays
+<For each={items} fallback={<EmptyState />}>
+  {(item, index) => <ListItem item={item} index={index} />}
+</For>
+```
+
+### `<Switch>` / `<Match>` / `<Default>` - Multi-branch Rendering
+
+Replace multiple `if-else` or `switch` statements.
+
+```tsx
+import { Switch, Match, Default } from "react-solidlike";
+
+<Switch>
+  <Match when={status === "loading"}>
+    <LoadingSpinner />
+  </Match>
+  <Match when={status === "error"}>
+    <ErrorMessage />
+  </Match>
+  <Match when={status === "success"}>
+    <SuccessContent />
+  </Match>
+  <Default>
+    <IdleState />
+  </Default>
+</Switch>
+```
+
+### `<Await>` - Async Rendering
+
+Wait for Promise to resolve before rendering.
+
+```tsx
+import { Await } from "react-solidlike";
+
+// Basic usage
+<Await promise={fetchUser()} loading={<Spinner />}>
+  {(user) => <UserProfile user={user} />}
+</Await>
+
+// With error handling
+<Await
+  promise={fetchData()}
+  loading={<Loading />}
+  error={(err) => <ErrorMessage message={err.message} />}
+>
+  {(data) => <DataView data={data} />}
+</Await>
+
+// Supports non-Promise values (for caching scenarios)
+<Await promise={cache ?? fetchData()} loading={<Spinner />}>
+  {(data) => <DataView data={data} />}
+</Await>
+```
+
+### `<Repeat>` - Repeat Rendering
+
+Replace `Array.from({ length: n }).map()`.
+
+```tsx
+import { Repeat } from "react-solidlike";
+
+// Render star ratings
+<Repeat times={5}>
+  {(i) => <Star key={i} filled={i < rating} />}
+</Repeat>
+
+// Generate skeleton placeholders
+<Repeat times={3}>
+  {(i) => <SkeletonCard key={i} />}
+</Repeat>
+```
+
+### `<Dynamic>` - Dynamic Component
+
+Dynamically select component type based on conditions.
+
+```tsx
+import { Dynamic } from "react-solidlike";
+
+// Dynamic button or link
+<Dynamic
+  component={href ? 'a' : 'button'}
+  href={href}
+  onClick={onClick}
+>
+  {label}
+</Dynamic>
+
+// With custom components
+<Dynamic
+  component={isAdmin ? AdminPanel : UserPanel}
+  user={currentUser}
+/>
+
+// React Native usage
+<Dynamic
+  component={isPressable ? Pressable : View}
+  onPress={handlePress}
+>
+  <Text>Content</Text>
+</Dynamic>
+```
+
+### `<ErrorBoundary>` - Error Boundary
+
+Catch JavaScript errors in child component tree.
+
+```tsx
+import { ErrorBoundary } from "react-solidlike";
+
+// Basic usage
+<ErrorBoundary fallback={<ErrorPage />}>
+  <App />
+</ErrorBoundary>
+
+// With render props for error info and reset function
+<ErrorBoundary
+  fallback={(error, reset) => (
+    <div>
+      <p>Error: {error.message}</p>
+      <button onClick={reset}>Retry</button>
+    </div>
+  )}
+>
+  <App />
+</ErrorBoundary>
+
+// Auto-reset when resetKey changes
+<ErrorBoundary fallback={<Error />} resetKey={userId}>
+  <UserProfile />
+</ErrorBoundary>
+```
+
+### `<QueryBoundary>` - Query Boundary
+
+Handle async query states (loading, error, empty, success). Works with `@tanstack/react-query`, SWR, RTK Query, etc.
+
+```tsx
+import { QueryBoundary } from "react-solidlike";
+import { useQuery } from "@tanstack/react-query";
+
+function UserList() {
+  const query = useQuery({ queryKey: ["users"], queryFn: fetchUsers });
+
+  return (
+    <QueryBoundary
+      query={query}
+      loading={<Spinner />}
+      error={<ErrorMessage />}
+      empty={<NoData />}
+    >
+      {(users) => (
+        <ul>
+          {users.map((user) => (
+            <li key={user.id}>{user.name}</li>
+          ))}
+        </ul>
+      )}
+    </QueryBoundary>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `query` | `QueryResult<T>` | Query result object |
+| `loading` | `ReactNode` | Loading state content |
+| `error` | `ReactNode` | Error state content |
+| `empty` | `ReactNode` | Empty state content |
+| `children` | `ReactNode \| (data: T) => ReactNode` | Success content |
+| `isEmptyFn` | `(data: T) => boolean` | Custom empty check |
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Run tests
+bun test
+
+# Lint
+bun run lint
+
+# Build
+bun run build
+```
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,251 @@
+# react-solidlike
+
+[English](./README.en.md) | 中文
+
+声明式 React 控制流组件库，灵感来源于 Solid.js。用于替代 JSX 中的三元表达式和 `array.map()`，让你的组件代码更加清晰易读。支持 React 和 React Native。
+
+## 安装
+
+```bash
+npm install react-solidlike
+# 或
+bun add react-solidlike
+```
+
+## 组件
+
+### `<Show>` - 条件渲染
+
+替代三元表达式进行条件渲染。
+
+```tsx
+import { Show } from "react-solidlike";
+
+// 基础用法
+<Show when={isLoggedIn}>
+  <UserProfile />
+</Show>
+
+// 带 fallback
+<Show when={isLoggedIn} fallback={<LoginButton />}>
+  <UserProfile />
+</Show>
+
+// 使用 render props 获取类型安全的值
+<Show when={user}>
+  {(user) => <UserProfile name={user.name} />}
+</Show>
+```
+
+### `<For>` - 列表渲染
+
+替代 `array.map()` 进行列表渲染。
+
+```tsx
+import { For } from "react-solidlike";
+
+// 基础用法
+<For each={items}>
+  {(item) => <ListItem {...item} />}
+</For>
+
+// 带 keyExtractor
+<For each={users} keyExtractor={(user) => user.id}>
+  {(user) => <UserCard user={user} />}
+</For>
+
+// 带 fallback 处理空数组
+<For each={items} fallback={<EmptyState />}>
+  {(item, index) => <ListItem item={item} index={index} />}
+</For>
+```
+
+### `<Switch>` / `<Match>` / `<Default>` - 多分支渲染
+
+替代多个 `if-else` 或 `switch` 语句。
+
+```tsx
+import { Switch, Match, Default } from "react-solidlike";
+
+<Switch>
+  <Match when={status === "loading"}>
+    <LoadingSpinner />
+  </Match>
+  <Match when={status === "error"}>
+    <ErrorMessage />
+  </Match>
+  <Match when={status === "success"}>
+    <SuccessContent />
+  </Match>
+  <Default>
+    <IdleState />
+  </Default>
+</Switch>
+```
+
+### `<Await>` - 异步等待
+
+等待 Promise resolve 后渲染内容。
+
+```tsx
+import { Await } from "react-solidlike";
+
+// 基础用法
+<Await promise={fetchUser()} loading={<Spinner />}>
+  {(user) => <UserProfile user={user} />}
+</Await>
+
+// 带错误处理
+<Await
+  promise={fetchData()}
+  loading={<Loading />}
+  error={(err) => <ErrorMessage message={err.message} />}
+>
+  {(data) => <DataView data={data} />}
+</Await>
+
+// 支持非 Promise 值（用于缓存场景）
+<Await promise={cache ?? fetchData()} loading={<Spinner />}>
+  {(data) => <DataView data={data} />}
+</Await>
+```
+
+### `<Repeat>` - 重复渲染
+
+替代 `Array.from({ length: n }).map()`。
+
+```tsx
+import { Repeat } from "react-solidlike";
+
+// 渲染星级评分
+<Repeat times={5}>
+  {(i) => <Star key={i} filled={i < rating} />}
+</Repeat>
+
+// 生成骨架屏占位
+<Repeat times={3}>
+  {(i) => <SkeletonCard key={i} />}
+</Repeat>
+```
+
+### `<Dynamic>` - 动态组件
+
+根据条件动态选择要渲染的组件类型。
+
+```tsx
+import { Dynamic } from "react-solidlike";
+
+// 动态选择按钮或链接
+<Dynamic
+  component={href ? 'a' : 'button'}
+  href={href}
+  onClick={onClick}
+>
+  {label}
+</Dynamic>
+
+// 配合自定义组件
+<Dynamic
+  component={isAdmin ? AdminPanel : UserPanel}
+  user={currentUser}
+/>
+
+// React Native 中使用
+<Dynamic
+  component={isPressable ? Pressable : View}
+  onPress={handlePress}
+>
+  <Text>Content</Text>
+</Dynamic>
+```
+
+### `<ErrorBoundary>` - 错误边界
+
+捕获子组件树中的 JavaScript 错误，防止整个应用崩溃。
+
+```tsx
+import { ErrorBoundary } from "react-solidlike";
+
+// 基础用法
+<ErrorBoundary fallback={<ErrorPage />}>
+  <App />
+</ErrorBoundary>
+
+// 使用 render props 获取错误信息和重置函数
+<ErrorBoundary
+  fallback={(error, reset) => (
+    <div>
+      <p>Error: {error.message}</p>
+      <button onClick={reset}>Retry</button>
+    </div>
+  )}
+>
+  <App />
+</ErrorBoundary>
+
+// resetKey 变化时自动重置
+<ErrorBoundary fallback={<Error />} resetKey={userId}>
+  <UserProfile />
+</ErrorBoundary>
+```
+
+### `<QueryBoundary>` - 查询边界
+
+处理异步查询的各种状态（加载中、错误、空数据、成功）。可与 `@tanstack/react-query`、SWR、RTK Query 等配合使用。
+
+```tsx
+import { QueryBoundary } from "react-solidlike";
+import { useQuery } from "@tanstack/react-query";
+
+function UserList() {
+  const query = useQuery({ queryKey: ["users"], queryFn: fetchUsers });
+
+  return (
+    <QueryBoundary
+      query={query}
+      loading={<Spinner />}
+      error={<ErrorMessage />}
+      empty={<NoData />}
+    >
+      {(users) => (
+        <ul>
+          {users.map((user) => (
+            <li key={user.id}>{user.name}</li>
+          ))}
+        </ul>
+      )}
+    </QueryBoundary>
+  );
+}
+```
+
+#### Props
+
+| 属性 | 类型 | 描述 |
+|------|------|------|
+| `query` | `QueryResult<T>` | 查询结果对象 |
+| `loading` | `ReactNode` | 加载中显示 |
+| `error` | `ReactNode` | 错误时显示 |
+| `empty` | `ReactNode` | 空数据显示 |
+| `children` | `ReactNode \| (data: T) => ReactNode` | 成功时渲染 |
+| `isEmptyFn` | `(data: T) => boolean` | 自定义空判断 |
+
+## 开发
+
+```bash
+# 安装依赖
+bun install
+
+# 运行测试
+bun test
+
+# 代码检查
+bun run lint
+
+# 构建
+bun run build
+```
+
+## License
+
+MIT

package/dist/Await.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+export interface AwaitProps<T> {
+    /** Promise to wait for | 要等待的 Promise */
+    promise: Promise<T> | T;
+    /** Content to show when Promise is pending | Promise pending 时显示的内容 */
+    loading?: ReactNode;
+    /** Content to show when Promise is rejected | Promise rejected 时显示的内容 */
+    error?: ReactNode | ((error: unknown) => ReactNode);
+    /** Content to render when Promise is fulfilled | Promise fulfilled 时渲染的内容 */
+    children: ReactNode | ((data: T) => ReactNode);
+}
+/**
+ * Async await component, handles various Promise states
+ *
+ * 异步等待组件，用于处理 Promise 的各种状态
+ *
+ * @example
+ * // Basic usage | 基础用法
+ * <Await promise={fetchUser()} loading={<Spinner />}>
+ *   {(user) => <UserProfile user={user} />}
+ * </Await>
+ *
+ * @example
+ * // With error handling | 带错误处理
+ * <Await
+ *   promise={fetchData()}
+ *   loading={<Loading />}
+ *   error={(err) => <ErrorMessage message={err.message} />}
+ * >
+ *   {(data) => <DataView data={data} />}
+ * </Await>
+ *
+ * @example
+ * // Static children (doesn't need Promise value) | 静态 children（不需要 Promise 的值）
+ * <Await promise={initApp()} loading={<SplashScreen />}>
+ *   <App />
+ * </Await>
+ *
+ * @example
+ * // Renders immediately for non-Promise values (sync values) | 传入非 Promise 值时直接渲染（同步值）
+ * <Await promise={cachedData ?? fetchData()} loading={<Spinner />}>
+ *   {(data) => <DataView data={data} />}
+ * </Await>
+ */
+export declare function Await<T>({ promise, loading, error, children }: AwaitProps<T>): ReactNode;
+//# sourceMappingURL=Await.d.ts.map

package/dist/Await.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Await.d.ts","sourceRoot":"","sources":["../src/Await.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQ5D,MAAM,WAAW,UAAU,CAAC,CAAC;IACzB,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACxB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;IACpD,6EAA6E;IAC7E,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,OAAc,EAAE,KAAY,EAAE,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAyDtG"}

package/dist/Dynamic.d.ts

@@ -0,0 +1,56 @@
+import { type ComponentProps, type ElementType, type ReactNode } from "react";
+/** Get component props type | 获取组件的 props 类型 */
+type PropsOf<T extends ElementType> = ComponentProps<T>;
+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;
+} & PropsOf<T>;
+/**
+ * Dynamic component rendering, selects component type based on conditions
+ *
+ * 动态组件渲染，根据条件选择要渲染的组件类型
+ *
+ * @example
+ * // Basic usage - select component based on condition | 基础用法 - 根据条件选择组件
+ * <Dynamic component={isExternal ? 'a' : Link} href={url}>
+ *   Click me
+ * </Dynamic>
+ *
+ * @example
+ * // Dynamic button or link | 动态选择按钮或链接
+ * <Dynamic
+ *   component={href ? 'a' : 'button'}
+ *   href={href}
+ *   onClick={onClick}
+ * >
+ *   {label}
+ * </Dynamic>
+ *
+ * @example
+ * // With custom components | 配合自定义组件
+ * <Dynamic
+ *   component={isAdmin ? AdminPanel : UserPanel}
+ *   user={currentUser}
+ * />
+ *
+ * @example
+ * // Using fallback | 使用 fallback
+ * <Dynamic component={customComponent} fallback={<DefaultComponent />}>
+ *   Content
+ * </Dynamic>
+ *
+ * @example
+ * // React Native usage | React Native 中使用
+ * <Dynamic
+ *   component={isPressable ? Pressable : View}
+ *   onPress={handlePress}
+ *   style={styles.container}
+ * >
+ *   <Text>Content</Text>
+ * </Dynamic>
+ */
+export declare function Dynamic<T extends ElementType>({ component, fallback, ...props }: DynamicProps<T>): ReactNode;
+export {};
+//# sourceMappingURL=Dynamic.d.ts.map

package/dist/Dynamic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dynamic.d.ts","sourceRoot":"","sources":["../src/Dynamic.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAqC,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjH,gDAAgD;AAChD,KAAK,OAAO,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI;IAC9C,wDAAwD;IACxD,SAAS,EAAE,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACxC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,WAAW,EAAE,EAAE,SAAS,EAAE,QAAe,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,CAMnH"}

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,63 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+export interface ErrorBoundaryProps {
+    /** Content to show when error occurs | 发生错误时显示的内容 */
+    fallback: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Child components | 子组件 */
+    children: ReactNode;
+    /** Callback when error occurs | 错误发生时的回调 */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Key to reset error boundary, auto-resets when key changes | 用于重置错误边界的 key，当 key 变化时自动重置 */
+    resetKey?: unknown;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Error boundary component, catches JavaScript errors in child component tree
+ *
+ * 错误边界组件，捕获子组件树中的 JavaScript 错误
+ *
+ * @example
+ * // Basic usage | 基础用法
+ * <ErrorBoundary fallback={<ErrorPage />}>
+ *   <App />
+ * </ErrorBoundary>
+ *
+ * @example
+ * // Using render props for error info and reset function | 使用 render props 获取错误信息和重置函数
+ * <ErrorBoundary
+ *   fallback={(error, reset) => (
+ *     <div>
+ *       <p>Error: {error.message}</p>
+ *       <button onClick={reset}>Retry</button>
+ *     </div>
+ *   )}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ *
+ * @example
+ * // Using resetKey for auto-reset (when key changes) | 使用 resetKey 自动重置（当 key 变化时）
+ * <ErrorBoundary fallback={<Error />} resetKey={userId}>
+ *   <UserProfile />
+ * </ErrorBoundary>
+ *
+ * @example
+ * // With onError for error reporting | 配合 onError 进行错误上报
+ * <ErrorBoundary
+ *   fallback={<Error />}
+ *   onError={(error, info) => reportError(error, info)}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../src/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,kBAAkB;IAC/B,qDAAqD;IACrD,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IACvE,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IACxB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACpE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAI3D,kBAAkB,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI;IAOvD,KAAK,QAAO,IAAI,CAEd;IAEF,MAAM,IAAI,SAAS;CAatB"}