react-solidlike 2.2.4 → 2.4.0

package/README.en.md

@@ -35,6 +35,11 @@ import { Show } from "react-solidlike";
 <Show when={user}>
   {(user) => <UserProfile name={user.name} />}
 </Show>
+
+// With onFallback callback (for redirects and other side effects)
+<Show when={isAuthenticated} fallback={<Loading />} onFallback={() => navigate('/login')}>
+  <Dashboard />
+</Show>
 ```
 
 ### `<For>` - List Rendering
@@ -166,6 +171,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.
@@ -268,6 +315,88 @@ function UserList() {
 | `children` | `ReactNode \| (data: T) => ReactNode` | Success content |
 | `isEmptyFn` | `(data: T) => boolean` | Custom empty check |
 
+### `<Once>` - Single Render
+
+Renders children only once and ignores subsequent updates. Useful for expensive computations or content that shouldn't re-render.
+
+```tsx
+import { Once } from "react-solidlike";
+
+// Render expensive component once
+<Once>
+  <ExpensiveChart data={data} />
+</Once>
+
+// Prevent re-renders from parent updates
+function Parent() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+      <Once>
+        <Child initialCount={count} />
+      </Once>
+    </div>
+  );
+}
+```
+
+### `<ClientOnly>` - Client-side Only Rendering
+
+Renders children only on the client side (after hydration). Useful for components that rely on browser APIs or need to avoid SSR hydration mismatches.
+
+```tsx
+import { ClientOnly } from "react-solidlike";
+
+// Basic usage
+<ClientOnly>
+  <BrowserOnlyComponent />
+</ClientOnly>
+
+// With SSR fallback
+<ClientOnly fallback={<Skeleton />}>
+  <DynamicChart />
+</ClientOnly>
+
+// Using render function for lazy evaluation (avoid accessing window)
+<ClientOnly fallback={<Loading />}>
+  {() => <ComponentUsingWindow width={window.innerWidth} />}
+</ClientOnly>
+
+// Avoid hydration mismatch
+<ClientOnly fallback={<span>--:--</span>}>
+  <CurrentTime />
+</ClientOnly>
+```
+
+### `<Visible>` - Visibility-based Rendering (Web only)
+
+Renders children when entering viewport using IntersectionObserver. In React Native or unsupported environments, children are rendered directly (graceful degradation).
+
+```tsx
+import { Visible } from "react-solidlike";
+
+// Basic usage - render when entering viewport
+<Visible>
+  <HeavyComponent />
+</Visible>
+
+// With placeholder
+<Visible fallback={<Skeleton />}>
+  <Image src={url} />
+</Visible>
+
+// Preload before entering viewport (rootMargin)
+<Visible rootMargin="200px" fallback={<Placeholder />}>
+  <LazyImage />
+</Visible>
+
+// Toggle visibility (once=false unmounts when leaving viewport)
+<Visible once={false} onVisibilityChange={(v) => console.log(v)}>
+  <VideoPlayer />
+</Visible>
+```
+
 ## Development
 
 ```bash

package/README.md

@@ -35,6 +35,11 @@ import { Show } from "react-solidlike";
 <Show when={user}>
   {(user) => <UserProfile name={user.name} />}
 </Show>
+
+// 带 onFallback 回调（用于重定向等副作用）
+<Show when={isAuthenticated} fallback={<Loading />} onFallback={() => navigate('/login')}>
+  <Dashboard />
+</Show>
 ```
 
 ### `<For>` - 列表渲染
@@ -166,6 +171,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>` - 动态组件
 
 根据条件动态选择要渲染的组件类型。
@@ -268,6 +315,88 @@ function UserList() {
 | `children` | `ReactNode \| (data: T) => ReactNode` | 成功时渲染 |
 | `isEmptyFn` | `(data: T) => boolean` | 自定义空判断 |
 
+### `<Once>` - 单次渲染
+
+只渲染一次子元素，忽略后续更新。适用于昂贵的计算或不应重新渲染的内容。
+
+```tsx
+import { Once } from "react-solidlike";
+
+// 渲染昂贵的组件
+<Once>
+  <ExpensiveChart data={data} />
+</Once>
+
+// 防止父组件更新导致的重新渲染
+function Parent() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+      <Once>
+        <Child initialCount={count} />
+      </Once>
+    </div>
+  );
+}
+```
+
+### `<ClientOnly>` - 仅客户端渲染
+
+仅在客户端（hydration 之后）渲染子元素。适用于依赖浏览器 API 或需要避免 SSR hydration 不匹配的场景。
+
+```tsx
+import { ClientOnly } from "react-solidlike";
+
+// 基础用法
+<ClientOnly>
+  <BrowserOnlyComponent />
+</ClientOnly>
+
+// 带 SSR 备选内容
+<ClientOnly fallback={<Skeleton />}>
+  <DynamicChart />
+</ClientOnly>
+
+// 使用渲染函数延迟求值（避免访问 window）
+<ClientOnly fallback={<Loading />}>
+  {() => <ComponentUsingWindow width={window.innerWidth} />}
+</ClientOnly>
+
+// 避免 hydration 不匹配
+<ClientOnly fallback={<span>--:--</span>}>
+  <CurrentTime />
+</ClientOnly>
+```
+
+### `<Visible>` - 可见性渲染（仅 Web）
+
+基于 IntersectionObserver 的可见性渲染，进入视口才渲染。在 React Native 或不支持的环境中会直接渲染 children（优雅降级）。
+
+```tsx
+import { Visible } from "react-solidlike";
+
+// 基础用法 - 进入视口时渲染
+<Visible>
+  <HeavyComponent />
+</Visible>
+
+// 带占位符
+<Visible fallback={<Skeleton />}>
+  <Image src={url} />
+</Visible>
+
+// 提前预加载（rootMargin）
+<Visible rootMargin="200px" fallback={<Placeholder />}>
+  <LazyImage />
+</Visible>
+
+// 切换可见性（once=false 时离开视口会卸载）
+<Visible once={false} onVisibilityChange={(v) => console.log(v)}>
+  <VideoPlayer />
+</Visible>
+```
+
 ## 开发
 
 ```bash

package/dist/ClientOnly.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react';
+export interface ClientOnlyProps {
+    /** Content to render only on client side | 仅在客户端渲染的内容 */
+    children: ReactNode | (() => ReactNode);
+    /** Fallback content during SSR | SSR 期间渲染的备选内容 */
+    fallback?: ReactNode;
+}
+/**
+ * Component that renders children only on the client side (after hydration)
+ *
+ * 仅在客户端（hydration 之后）渲染子元素的组件
+ *
+ * Useful for components that rely on browser APIs, window object,
+ * or need to avoid SSR hydration mismatches.
+ *
+ * 适用于依赖浏览器 API、window 对象的组件，
+ * 或需要避免 SSR hydration 不匹配的场景。
+ *
+ * @example
+ * // Basic usage | 基础用法
+ * <ClientOnly>
+ *   <BrowserOnlyComponent />
+ * </ClientOnly>
+ *
+ * @example
+ * // With fallback for SSR | 带 SSR 备选内容
+ * <ClientOnly fallback={<Skeleton />}>
+ *   <DynamicChart />
+ * </ClientOnly>
+ *
+ * @example
+ * // Using render function for lazy evaluation | 使用渲染函数延迟求值
+ * <ClientOnly fallback={<Loading />}>
+ *   {() => <ComponentUsingWindow width={window.innerWidth} />}
+ * </ClientOnly>
+ *
+ * @example
+ * // Avoid hydration mismatch | 避免 hydration 不匹配
+ * <ClientOnly fallback={<span>--:--</span>}>
+ *   <CurrentTime />
+ * </ClientOnly>
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): ReactNode;

package/dist/Once.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+export interface OnceProps {
+    /** Content to render only once | 只渲染一次的内容 */
+    children: ReactNode;
+}
+/**
+ * Component that renders children only once and ignores subsequent updates
+ *
+ * 只渲染一次子元素并忽略后续更新的组件
+ *
+ * Useful for expensive computations or content that should not re-render.
+ * The initial render result is cached and returned on subsequent renders.
+ *
+ * 适用于昂贵的计算或不应重新渲染的内容。
+ * 初始渲染结果会被缓存并在后续渲染时返回。
+ *
+ * @example
+ * // Render expensive component only once | 只渲染一次昂贵的组件
+ * <Once>
+ *   <ExpensiveChart data={data} />
+ * </Once>
+ *
+ * @example
+ * // Static content that shouldn't update | 不应更新的静态内容
+ * <Once>
+ *   <Header title={initialTitle} />
+ * </Once>
+ *
+ * @example
+ * // Prevent re-renders from parent updates | 防止父组件更新导致的重新渲染
+ * function Parent() {
+ *   const [count, setCount] = useState(0);
+ *   return (
+ *     <div>
+ *       <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+ *       <Once>
+ *         <Child initialCount={count} />
+ *       </Once>
+ *     </div>
+ *   );
+ * }
+ */
+export declare function Once({ children }: OnceProps): ReactNode;

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/Show.d.ts

@@ -6,6 +6,8 @@ export interface ShowProps<T> {
     children: ReactNode | ((value: NonNullable<T>) => ReactNode);
     /** Fallback content when condition is falsy | 条件为假时渲染的备选内容 */
     fallback?: ReactNode;
+    /** Callback when condition is falsy (called before rendering fallback) | 条件为假时的回调（在渲染 fallback 之前调用） */
+    onFallback?: () => void;
 }
 /**
  * Conditional rendering component, replaces ternary expressions in JSX
@@ -29,5 +31,11 @@ export interface ShowProps<T> {
  * <Show when={user}>
  *   {(user) => <UserProfile name={user.name} />}
  * </Show>
+ *
+ * @example
+ * // With onFallback callback for side effects | 带 onFallback 回调用于副作用
+ * <Show when={isAuthenticated} fallback={<Loading />} onFallback={() => navigate('/login')}>
+ *   <Dashboard />
+ * </Show>
  */
-export declare function Show<T>({ when, children, fallback }: ShowProps<T>): ReactNode;
+export declare function Show<T>({ when, children, fallback, onFallback }: ShowProps<T>): 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/Visible.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+export interface VisibleProps {
+    /** Content to render when visible | 可见时渲染的内容 */
+    children: ReactNode;
+    /** Fallback content before entering viewport | 进入视口前渲染的备选内容 */
+    fallback?: ReactNode;
+    /** Root margin for intersection observer (e.g., "100px") | 交叉观察器的根边距 */
+    rootMargin?: string;
+    /** Visibility threshold (0-1) | 可见性阈值 */
+    threshold?: number | number[];
+    /** Keep rendered after first visible (default: true) | 首次可见后保持渲染 */
+    once?: boolean;
+    /** Callback when visibility changes | 可见性变化时的回调 */
+    onVisibilityChange?: (isVisible: boolean) => void;
+}
+/**
+ * Visibility-based rendering component using IntersectionObserver (Web only)
+ *
+ * 基于可见性的渲染组件，使用 IntersectionObserver（仅 Web）
+ *
+ * In React Native or environments without IntersectionObserver,
+ * children will be rendered directly (graceful degradation).
+ *
+ * 在 React Native 或不支持 IntersectionObserver 的环境中，
+ * 会直接渲染 children（优雅降级）。
+ *
+ * @example
+ * // Basic usage - render when entering viewport | 基础用法 - 进入视口时渲染
+ * <Visible>
+ *   <HeavyComponent />
+ * </Visible>
+ *
+ * @example
+ * // With fallback placeholder | 带占位符
+ * <Visible fallback={<Skeleton />}>
+ *   <Image src={url} />
+ * </Visible>
+ *
+ * @example
+ * // Preload before entering viewport | 提前预加载
+ * <Visible rootMargin="200px" fallback={<Placeholder />}>
+ *   <LazyImage />
+ * </Visible>
+ *
+ * @example
+ * // Toggle visibility (once=false) | 切换可见性
+ * <Visible once={false} onVisibilityChange={(v) => console.log(v)}>
+ *   <VideoPlayer />
+ * </Visible>
+ */
+export declare function Visible({ children, fallback, rootMargin, threshold, once, onVisibilityChange, }: VisibleProps): ReactNode;

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 export { Await, type AwaitProps } from "./Await";
+export { ClientOnly, type ClientOnlyProps } from "./ClientOnly";
 export { Dynamic, type DynamicProps } from "./Dynamic";
 export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary";
 export { For, type ForProps } from "./For";
+export { Once, type OnceProps } from "./Once";
 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";
+export { Visible, type VisibleProps } from "./Visible";

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Children, Component, Fragment, cloneElement, createElement, isValidElement, useEffect, useState } from "react";
+import { Children, Component, Fragment, cloneElement, createElement, isValidElement, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 function Await({ promise, loading = null, error = null, children }) {
@@ -43,6 +43,16 @@ function Await({ promise, loading = null, error = null, children }) {
 	return children;
 }
 
+function ClientOnly({ children, fallback = null }) {
+	const [isClient, setIsClient] = useState(false);
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+	if (!isClient) return fallback;
+	if (typeof children === "function") return children();
+	return children;
+}
+
 function Dynamic({ component, fallback = null, ...props }) {
 	if (!component) return fallback;
 	return createElement(component, props);
@@ -86,6 +96,18 @@ function For({ each, children, keyExtractor, fallback = null, wrapper, reverse }
 	return wrapper && isValidElement(wrapper) ? cloneElement(wrapper, {}, elements) : elements;
 }
 
+function Once({ children }) {
+	const cachedRef = useRef({
+		rendered: false,
+		content: null
+	});
+	if (!cachedRef.current.rendered) {
+		cachedRef.current.rendered = true;
+		cachedRef.current.content = children;
+	}
+	return cachedRef.current.content;
+}
+
 function defaultIsEmpty(data) {
 	if (data == null) return true;
 	if (Array.isArray(data)) return data.length === 0;
@@ -103,16 +125,20 @@ 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 }) {
-	if (!when || isEmpty(when)) return fallback;
+function Show({ when, children, fallback = null, onFallback }) {
+	if (!when || isEmpty(when)) {
+		onFallback?.();
+		return fallback;
+	}
 	if (typeof children === "function") return children(when);
 	return children;
 }
@@ -123,6 +149,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 +206,55 @@ function Switch({ children, fallback = null }) {
 	return defaultContent;
 }
 
-export { Await, Default, Dynamic, ErrorBoundary, For, Match, QueryBoundary, Repeat, Show, Switch };
+function Visible({ children, fallback = null, rootMargin = "0px", threshold = 0, once = true, onVisibilityChange }) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [hasBeenVisible, setHasBeenVisible] = useState(false);
+	const [isClient, setIsClient] = useState(false);
+	const ref = useRef(null);
+	const isSupported = typeof window !== "undefined" && typeof IntersectionObserver !== "undefined";
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+	useEffect(() => {
+		if (!isClient) return;
+		if (!isSupported) {
+			setIsVisible(true);
+			setHasBeenVisible(true);
+			return;
+		}
+		const element = ref.current;
+		if (!element) return;
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries[0];
+			if (entry) {
+				const visible = entry.isIntersecting;
+				setIsVisible(visible);
+				onVisibilityChange?.(visible);
+				if (visible) {
+					setHasBeenVisible(true);
+					if (once) observer.disconnect();
+				}
+			}
+		}, {
+			rootMargin,
+			threshold
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		isClient,
+		isSupported,
+		rootMargin,
+		threshold,
+		once,
+		onVisibilityChange
+	]);
+	if (!isClient) return children;
+	if (!isSupported) return children;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		children: (once ? hasBeenVisible : isVisible) ? children : fallback
+	});
+}
+
+export { Await, ClientOnly, Default, Dynamic, ErrorBoundary, For, Match, Once, QueryBoundary, Repeat, Show, Split, Switch, Visible };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-solidlike",
-    "version": "2.2.4",
+    "version": "2.4.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",
@@ -18,6 +18,7 @@
     "scripts": {
         "build": "rm -rf dist && rolldown -c && tsc -p tsconfig.build.json",
         "test": "bun test",
+        "test:e2e": "playwright test",
         "lint": "biome check .",
         "lint:fix": "biome check --write .",
         "format": "biome format --write .",
@@ -43,6 +44,7 @@
     "devDependencies": {
         "@biomejs/biome": "^2.3.11",
         "@happy-dom/global-registrator": "^20.1.0",
+        "@playwright/test": "^1.58.0",
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/bun": "latest",