elements-kit 0.0.2 → 0.0.3

package/dist/signals/lib/react.mjs

@@ -0,0 +1,82 @@
+import { a as effect, f as signal, o as effectScope } from "../../signals-Cr7xgAJH.mjs";
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/signals/lib/react.ts
+/**
+* Subscribe to any readable signal — writable or computed — returning its current value.
+*
+* Accepts any zero-argument callable `() => T`, which includes both `Signal<T>` and
+* `Computed<T>`. Using `() => T` instead of `Computed<T>` prevents TypeScript from
+* picking the write overload of `Signal<T>` during type inference.
+*
+* @template T - The type of the signal value.
+* @param value - A writable `Signal<T>` or a derived `Computed<T>`.
+* @returns The current value, updated on every signal change.
+*
+* @example
+* ```tsx
+* const count = signal(0);
+* const double = computed(() => count() * 2);
+*
+* function Display() {
+*   const countValue = useSignal(count);
+*   const doubleValue = useSignal(double);
+*   return <div>{countValue} × 2 = {doubleValue}</div>;
+* }
+* ```
+*/
+function useSignal(value) {
+	return useSyncExternalStore((callback) => effect(() => {
+		value();
+		callback();
+	}), () => value(), () => value());
+}
+/**
+* Create a signal effect scope tied to a React component's lifetime.
+*
+* All effects registered inside `callback` are grouped into a single scope. The scope — and every effect within it — is automatically stopped when the component unmounts.
+*
+* If your callback returns a `Computed<T>` signal, the hook will always return its current value, updating reactively as dependencies change. If your callback returns `void`, the value will be `undefined`.
+*
+* Returns the current value of the computed signal (or `undefined`).
+*
+* Use this when you want to create multiple related effects at once without individually managing each one's lifecycle. All effects and cleanups inside the callback are automatically cleaned up on unmount.
+*
+* @template T - The type of the computed value (if any).
+* @param callback - A function that registers one or more signal effects, optionally returning a `Computed<T>`.
+* @returns `value` — the current value of the computed signal (or `undefined`).
+*
+* @example
+* ```tsx
+* function Analytics() {
+*   useScope(() => {
+*     effect(() => console.log("page:", currentPage()));
+*     effect(() => console.log("user:", currentUser()));
+*   });
+*   return null;
+* }
+*
+* // With computed value:
+* function DoubleCounter() {
+*   const double = useScope(() => computed(() => count() * 2));
+*   return <div>{double}</div>;
+* }
+* ```
+*/
+function useScope(callback) {
+	const computedRef = useRef(void 0);
+	const stopScope = useMemo(() => {
+		return effectScope(() => {
+			computedRef.current = callback();
+		});
+	}, [callback]);
+	const value = useSignal(computedRef.current ?? fallbackSignal);
+	useEffect(() => {
+		return () => {
+			stopScope();
+		};
+	}, [stopScope]);
+	return value;
+}
+const fallbackSignal = signal(void 0);
+//#endregion
+export { useScope, useSignal };