reactjs-signal 1.0.5 → 1.1.1

package/README.md

@@ -15,12 +15,17 @@
   <a href="https://github.com/hunghg255/reactjs-signal/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/hunghg255/reactjs-signal" alt="License" /></a>
 </p>
 
+
+
 ## Installation
 
 ```bash
 npm install reactjs-signal
 ```
 
+## Devtools
+
+- [reactjs-signal-devtools](https://github.com/hunghg255/reactjs-signal-devtools)
 
 ## Usage
 
@@ -50,7 +55,7 @@ Creates a writable Alien Signal.
 
 ```typescript
 const countSignal = createSignal(0);
-countSignal.set(10); // sets the value to 10
+countSignal(10); // sets the value to 10
 ```
 
 #### Parameters
@@ -69,7 +74,7 @@ Creates a computed Alien Signal based on a getter function.
 
 ```typescript
 const countSignal = createSignal(1);
-const doubleSignal = createComputed(() => countSignal.get() * 2);
+const doubleSignal = createComputed(() => countSignal() * 2);
 ```
 
 #### Parameters
@@ -80,146 +85,6 @@ const doubleSignal = createComputed(() => countSignal.get() * 2);
 
 - `ISignal<T>`: The created computed signal.
 
-### `createEffect`
-
-Creates a side effect in Alien Signals.
-
-#### Example
-
-```typescript
-const countSignal = createSignal(1);
-createEffect(() => {
-  console.log('Count is', countSignal.get());
-});
-```
-
-#### Parameters
-
-- `fn` (`() => T`): A function that will run whenever its tracked signals update.
-
-#### Returns
-
-- `Effect<T>`: The created effect object.
-
-### `createSignalScope`
-
-Creates an Alien Signals effect scope. This scope can manage multiple effects, allowing you to stop or start them together.
-
-#### Example
-
-```typescript
-const scope = createSignalScope();
-scope.run(() => {
-  // create effects in here...
-});
-```
-
-#### Returns
-
-- `EffectScope`: The created effect scope.
-
-### `unstable_createAsyncComputed`
-
-Creates an async computed signal in Alien Signals. The getter is an async generator that yields dependencies and finally resolves to a computed value.
-
-#### Example
-
-```typescript
-const asyncComp = createAsyncComputed<number>(async function* () {
-  yield someDependency;
-  return 42;
-});
-```
-
-#### Parameters
-
-- `getter` (`() => AsyncGenerator<Dependency, T>`): An async generator returning dependencies and ultimately a value.
-
-#### Returns
-
-- `AsyncComputed<T>`: The created async computed signal.
-
-### `unstable_createAsyncEffect`
-
-Creates an async effect in Alien Signals. The function is an async generator that yields dependencies as they are discovered.
-
-#### Example
-
-```typescript
-createAsyncEffect(async function* () {
-  yield someDependency;
-  console.log('Async effect done!');
-});
-```
-
-#### Parameters
-
-- `fn` (`() => AsyncGenerator<Dependency, T>`): An async generator returning dependencies.
-
-#### Returns
-
-- `Promise<T>`: The created async effect object.
-
-### `unstable_createComputedArray`
-
-Creates a computed array signal in Alien Signals, deriving a reactive array from an original signal array.
-
-#### Example
-
-```typescript
-const numbersSignal = createSignal([1, 2, 3]);
-const compArray = createComputedArray(numbersSignal, (itemSignal, i) => () => {
-  return itemSignal.get() * 2;
-});
-```
-
-#### Parameters
-
-- `arr` (`ISignal<I[]>`): Signal containing an array.
-- `getGetter` (`(itemSignal: ISignal<I>, index: number) => () => O`): A function returning a getter for each item signal.
-
-#### Returns
-
-- `Readonly<O[]>`: A proxied array signal.
-
-### `unstable_createComputedSet`
-
-Creates a computed Set signal in Alien Signals that tracks changes to a source Set signal.
-
-#### Example
-
-```typescript
-const setSignal = createSignal(new Set([1, 2]));
-const compSet = createComputedSet(setSignal);
-```
-
-#### Parameters
-
-- `source` (`IWritableSignal<Set<T>>`): A signal containing a Set.
-
-#### Returns
-
-- `ISignal<Set<T>>`: A computed signal referencing that Set.
-
-### `unstable_createEqualityComputed`
-
-Creates an equality-based computed signal, only updating when the new value is not deeply equal to the old value.
-
-#### Example
-
-```typescript
-const eqComp = createEqualityComputed(() => {
-  return { foo: 'bar' };
-});
-```
-
-#### Parameters
-
-- `getter` (`() => T`): A function returning the value to compare.
-
-#### Returns
-
-- `ISignal<T>`: An equality computed signal.
 
 ### `useSignal`
 
@@ -251,7 +116,7 @@ React hook returning only the current value of an Alien Signal (or computed). No
 
 ```typescript
 const countSignal = createSignal(0);
-const doubleSignal = createComputed(() => countSignal.get() * 2);
+const doubleSignal = createComputed(() => countSignal() * 2);
 function Display() {
   const count = useSignalValue(countSignal);
   const double = useSignalValue(doubleSignal);
@@ -298,7 +163,7 @@ React hook for running a side effect whenever Alien Signals' dependencies used i
 ```typescript
 function Logger() {
   useSignalEffect(() => {
-    console.log('Signal changed:', someSignal.get());
+    console.log('Signal changed:', someSignal());
   });
   return null;
 }
@@ -308,25 +173,6 @@ function Logger() {
 
 - `fn` (`() => void`): The effect function to run.
 
-### `useSignalScope`
-
-React hook for managing an Alien Signals effect scope. All signals/effects created inside this scope run when the component mounts, and are stopped automatically when the component unmounts.
-
-#### Example
-
-```typescript
-function ScopedEffects() {
-  const scope = useSignalScope();
-  useEffect(() => {
-    scope.run(() => {
-      createEffect(() => {
-        console.log('Scoped effect:', someSignal.get());
-      });
-    });
-  }, [scope]);
-  return null;
-}
-```
 
 <!-- /**
  * React hook to initialize a signal with a value when hydrating from server.
@@ -339,7 +185,7 @@ function ScopedEffects() {
  * @param {T} value - The value to hydrate the signal with.
  */
 export function useHydrateSignal<T>(alienSignal: IWritableSignal<T>, value: T): void {
-  alienSignal.set(value);
+  alienSignal(value);
 } -->
 
 ### `useHydrateSignal`
@@ -361,50 +207,6 @@ useHydrateSignal(countSignal, 10);
 
 - `EffectScope`: The created effect scope.
 
-### `unstable_useAsyncComputedValue`
-
-React hook to read from an async computed signal. The hook fetches the current value, subscribing to changes via `useSyncExternalStore`, and triggers a `get()` call to retrieve updated data. Maintains an internal state for the resolved value of the promise.
-
-#### Example
-
-```typescript
-const asyncSignal = createAsyncComputed<number>(async function*() {
-  const val = someSignal.get();
-  yield Promise.resolve(someSignal); // track async dep
-  return val * 2;
-});
-
-function AsyncDisplay() {
-  const value = useAsyncComputedValue(asyncSignal);
-  return <div>Value: {String(value)}</div>;
-}
-```
-
-#### Parameters
-
-- `alienAsyncComp` (`AsyncComputed<T>`): The async computed signal to read.
-
-#### Returns
-
-- `T | undefined`: The resolved value (or undefined if not yet resolved).
-
-### `unstable_useAsyncEffect`
-
-React hook to run an asynchronous effect whenever the component mounts, cleaning up when it unmounts.
-
-#### Example
-
-```typescript
-useAsyncEffect(async function* () {
-  yield someDependency;
-  console.log('Async side effect complete!');
-});
-```
-
-#### Parameters
-
-- `fn` (`() => AsyncGenerator<Dependency, T>`): An async generator representing the effect logic.
-
 
 ## Refer
 

package/dist/index.d.ts

@@ -1,45 +1,47 @@
-import { IWritableSignal, ISignal, Effect, EffectScope, Dependency, Computed } from 'alien-signals';
-
-/**
- *
- * React Alien Signals is a **TypeScript** library that provides hooks built on top of [Alien Signals](https://github.com/stackblitz/alien-signals).
- * It offers a seamless integration with React, ensuring concurrency-safe re-renders without tearing.
- *
- * @module reactjs-signal
- */
-
-declare class AsyncComputed<T = any> extends Computed {
-    get(): Promise<T>;
-    update(): Promise<boolean>;
-}
+type IWritableSignal<T> = {
+    (): T;
+    (value: T): void;
+};
 /**
  * Creates a writable Alien Signal.
  *
  * @example
  * ```typescript
  * const countSignal = createSignal(0);
- * countSignal.set(10); // sets the value to 10
+ * countSignal(10); // sets the value to 10
  * ```
  *
  * @template T - The type of the signal value.
  * @param {T} initialValue - The initial value of the signal.
  * @returns {IWritableSignal<T>} The created Alien Signal.
  */
-declare function createSignal<T>(initialValue: T): IWritableSignal<T>;
+declare function createSignal<T>(initialValue: T): {
+    (): T;
+    (value: T): void;
+};
+/**
+ * Creates a writable Alien Signal that persists its value in localStorage.
+ *
+ * @template T - The type of the signal value.
+ * @param {string} key - The localStorage key to use for persistence.
+ * @param {T} initialValue - The initial value of the signal.
+ * @returns {IWritableSignal<T>} The created Alien Signal.
+ */
+declare function createSignalStorage<T>(key: string, initialValue: T): IWritableSignal<T>;
 /**
  * Creates a computed Alien Signal based on a getter function.
  *
  * @example
  * ```typescript
  * const countSignal = createSignal(1);
- * const doubleSignal = createComputed(() => countSignal.get() * 2);
+ * const doubleSignal = createComputed(() => countSignal() * 2);
  * ```
  *
  * @template T - The type of the computed value.
  * @param {() => T} fn - A getter function returning a computed value.
  * @returns {ISignal<T>} The created computed signal.
  */
-declare function createComputed<T>(fn: () => T): ISignal<T>;
+declare function createComputed<T>(fn: () => T): () => T;
 /**
  * Creates a side effect in Alien Signals.
  *
@@ -47,7 +49,7 @@ declare function createComputed<T>(fn: () => T): ISignal<T>;
  * ```typescript
  * const countSignal = createSignal(1);
  * createEffect(() => {
- *   console.log('Count is', countSignal.get());
+ *   console.log('Count is', countSignal());
  * });
  * ```
  *
@@ -55,110 +57,7 @@ declare function createComputed<T>(fn: () => T): ISignal<T>;
  * @param {() => T} fn - A function that will run whenever its tracked signals update.
  * @returns {Effect<T>} The created effect object.
  */
-declare function createEffect<T>(fn: () => T): Effect<T>;
-/**
- * Creates an Alien Signals effect scope. This scope can manage multiple effects,
- * allowing you to stop or start them together.
- *
- * @example
- * ```typescript
- * const scope = createSignalScope();
- * scope.run(() => {
- *   // create effects in here...
- * });
- * ```
- *
- * @returns {EffectScope} The created effect scope.
- */
-declare function createSignalScope(): EffectScope;
-/**
- * Creates an async computed signal in Alien Signals. The getter is an async generator
- * that yields dependencies and finally resolves to a computed value.
- *
- * @example
- * ```typescript
- * const asyncComp = createAsyncComputed<number>(async function* () {
- *   yield someDependency;
- *   return 42;
- * });
- * ```
- *
- * @template T - The type of the computed value.
- * @param {() => AsyncGenerator<Dependency, T>} getter - An async generator returning dependencies and ultimately a value.
- * @returns {AsyncComputed<T>} The created async computed signal.
- * @experimental
- */
-declare function unstable_createAsyncComputed<T>(getter: () => AsyncGenerator<Dependency, T>): AsyncComputed<T>;
-/**
- * Creates an async effect in Alien Signals. The function is an async generator
- * that yields dependencies as they are discovered.
- *
- * @example
- * ```typescript
- * createAsyncEffect(async function* () {
- *   yield someDependency;
- *   console.log('Async effect done!');
- * });
- * ```
- *
- * @template T - The type of the effect value.
- * @param {() => AsyncGenerator<Dependency, T>} fn - An async generator returning dependencies.
- * @returns {Promise<T>} The created async effect object.
- */
-declare function unstable_createAsyncEffect<T>(fn: () => AsyncGenerator<Dependency, T>): Promise<T>;
-/**
- * Creates a computed array signal in Alien Signals, deriving a reactive
- * array from an original signal array.
- *
- * @example
- * ```typescript
- * const numbersSignal = createSignal([1, 2, 3]);
- * const compArray = createComputedArray(numbersSignal, (itemSignal, i) => () => {
- *   return itemSignal.get() * 2;
- * });
- * ```
- *
- * @template I - The type of the items in the input array.
- * @template O - The type of the items in the output array.
- * @param {ISignal<I[]>} arr - Signal containing an array.
- * @param {(itemSignal: ISignal<I>, index: number) => () => O} getGetter - A function returning a getter for each item signal.
- * @returns {Readonly<O[]>} A proxied array signal.
- * @experimental
- */
-declare function unstable_createComputedArray<I, O>(arr: ISignal<I[]>, getGetter: (itemSignal: ISignal<I>, index: number) => () => O): Readonly<O[]>;
-/**
- * Creates a computed Set signal in Alien Signals that tracks changes
- * to a source Set signal.
- *
- * @example
- * ```typescript
- * const setSignal = createSignal(new Set([1, 2]));
- * const compSet = createComputedSet(setSignal);
- * ```
- *
- * @template T - The type of the items in the Set.
- * @param {IWritableSignal<Set<T>>} source - A signal containing a Set.
- * @returns {ISignal<Set<T>>} A computed signal referencing that Set.
- * @experimental
- */
-declare function unstable_createComputedSet<T>(source: IWritableSignal<Set<T>>): ISignal<Set<T>>;
-/**
- * Creates an equality-based computed signal, only updating when the new value
- * is not deeply equal to the old value.
- *
- * @example
- * ```typescript
- * const eqComp = createEqualityComputed(() => {
- *   return { foo: 'bar' };
- * });
- * ```
- *
- * @template T - The type of the computed value.
- * @param {() => T} getter - A function returning the value to compare.
- * @returns {ISignal<T>} An equality computed signal.
- * @experimental
- */
-declare function unstable_createEqualityComputed<T>(getter: () => T): ISignal<T>;
+declare function createEffect<T>(fn: () => T): () => void;
 /**
  * React hook returning `[value, setValue]` for a given Alien Signal.
  * Uses useSyncExternalStore for concurrency-safe re-renders.
@@ -184,7 +83,7 @@ declare function useSignal<T>(alienSignal: IWritableSignal<T>): [T, (val: T | ((
  * @example
  * ```typescript
  * const countSignal = createSignal(0);
- * const doubleSignal = createComputed(() => countSignal.get() * 2);
+ * const doubleSignal = createComputed(() => countSignal() * 2);
  * function Display() {
  *   const count = useSignalValue(countSignal);
  *   const double = useSignalValue(doubleSignal);
@@ -223,7 +122,7 @@ declare function useSetSignal<T>(alienSignal: IWritableSignal<T>): (val: T | ((o
  * ```typescript
  * function Logger() {
  *   useSignalEffect(() => {
- *     console.log('Signal changed:', someSignal.get());
+ *     console.log('Signal changed:', someSignal());
  *   });
  *   return null;
  * }
@@ -232,72 +131,6 @@ declare function useSetSignal<T>(alienSignal: IWritableSignal<T>): (val: T | ((o
  * @param {() => void} fn - The effect function to run.
  */
 declare function useSignalEffect(fn: () => void): void;
-/**
- * React hook for managing an Alien Signals effect scope.
- * All signals/effects created inside this scope run when the component mounts,
- * and are stopped automatically when the component unmounts.
- *
- * @example
- * ```typescript
- * function ScopedEffects() {
- *   const scope = useSignalScope();
- *   useEffect(() => {
- *     scope.run(() => {
- *       createEffect(() => {
- *         console.log('Scoped effect:', someSignal.get());
- *       });
- *     });
- *   }, [scope]);
- *   return null;
- * }
- * ```
- *
- * @returns {EffectScope} The created effect scope.
- */
-declare function useSignalScope(): EffectScope;
-/**
- * React hook to read from an async computed signal.
- * The hook fetches the current value, subscribing to changes via useSyncExternalStore,
- * and triggers a get() call to retrieve updated data. Maintains an internal state
- * for the resolved value of the promise.
- *
- * @example
- * ```typescript
- * const asyncSignal = createAsyncComputed<number>(async function*() {
- *   const val = someSignal.get();
- *   yield Promise.resolve(someSignal); // track async dep
- *   return val * 2;
- * });
- *
- * function AsyncDisplay() {
- *   const value = useAsyncComputedValue(asyncSignal);
- *   return <div>Value: {String(value)}</div>;
- * }
- * ```
- *
- * @template T - The type of the computed value.
- * @param {AsyncComputed<T>} alienAsyncComp - The async computed signal to read.
- * @returns {T | undefined} The resolved value (or undefined if not yet resolved).
- * @experimental
- */
-declare function unstable_useAsyncComputedValue<T>(alienAsyncComp: AsyncComputed<T>): T | undefined;
-/**
- * React hook to run an asynchronous effect whenever the component mounts,
- * cleaning up when it unmounts.
- *
- * @example
- * ```typescript
- * useAsyncEffect(async function* () {
- *   yield someDependency;
- *   console.log('Async side effect complete!');
- * });
- * ```
- *
- * @template T - The type of the effect value.
- * @param {() => AsyncGenerator<Dependency, T>} fn - An async generator representing the effect logic.
- * @experimental
- */
-declare function unstable_useAsyncEffect<T>(fn: () => AsyncGenerator<Dependency, T>): void;
 /**
  * React hook to initialize a signal with a value when hydrating from server.
  * @param alienSignal
@@ -310,4 +143,4 @@ declare function unstable_useAsyncEffect<T>(fn: () => AsyncGenerator<Dependency,
  */
 declare function useHydrateSignal<T>(alienSignal: IWritableSignal<T>, value: T): void;
 
-export { createComputed, createEffect, createSignal, createSignalScope, unstable_createAsyncComputed, unstable_createAsyncEffect, unstable_createComputedArray, unstable_createComputedSet, unstable_createEqualityComputed, unstable_useAsyncComputedValue, unstable_useAsyncEffect, useHydrateSignal, useSetSignal, useSignal, useSignalEffect, useSignalScope, useSignalValue };
+export { createComputed, createEffect, createSignal, createSignalStorage, useHydrateSignal, useSetSignal, useSignal, useSignalEffect, useSignalValue };

package/dist/index.js

@@ -1 +1 @@
-import {signal,computed,effect,effectScope,unstable}from'alien-signals';import {useSyncExternalStore,useEffect,useMemo,useState}from'react';var f=new WeakMap,S=e=>{let t=f.get(e);return t||(t=new WeakSet,f.set(e,t)),t};function b(e){return signal(e)}function x(e){return computed(e)}function I(e){return effect(e)}function E(){return effectScope()}function V(e){return unstable.asyncComputed(e)}async function W(e){return await unstable.asyncEffect(e).run()}function C(e,t){return unstable.computedArray(e,t)}function v(e){return unstable.computedSet(e)}function A(e){return unstable.equalityComputed(e)}function _(e){return [useSyncExternalStore(n=>{let a=effect(()=>{e.get(),n();});return ()=>a.stop()},()=>e.get(),()=>e.get()),n=>{typeof n=="function"?e.set(n(e.get())):e.set(n);}]}function h(e){return useSyncExternalStore(t=>{let r=effect(()=>{e.get(),t();});return ()=>r.stop()},()=>e.get(),()=>e.get())}function k(e){return t=>{typeof t=="function"?e.set(t(e.get())):e.set(t);}}function w(e){useEffect(()=>{let t=effect(e);return ()=>t.stop()},[e]);}function D(){let e=useMemo(()=>effectScope(),[]);return useEffect(()=>()=>{e.stop();},[e]),e}function M(e){let[t,r]=useState(e.currentValue);return useSyncExternalStore(n=>{let a=effect(()=>{e.currentValue,n();});return ()=>a.stop()},()=>e.currentValue),useEffect(()=>{let n=!0;return (async()=>{let i=await e.get();n&&r(i);})(),()=>{n=!1;}},[e]),t}function O(e){useEffect(()=>{let t=unstable.asyncEffect(e);return ()=>t.stop()},[e]);}function G(e,t){let r=S(e);r.has(e)||(r.add(e),e.set(t));}export{x as createComputed,I as createEffect,b as createSignal,E as createSignalScope,V as unstable_createAsyncComputed,W as unstable_createAsyncEffect,C as unstable_createComputedArray,v as unstable_createComputedSet,A as unstable_createEqualityComputed,M as unstable_useAsyncComputedValue,O as unstable_useAsyncEffect,G as useHydrateSignal,k as useSetSignal,_ as useSignal,w as useSignalEffect,D as useSignalScope,h as useSignalValue};
+import {signal,computed,effect}from'alien-signals';import {useSyncExternalStore,useEffect}from'react';var u=new WeakMap,l=t=>{let e=u.get(t);return e||(e=new WeakSet,u.set(t,e)),e};function d(t){return signal(t)}function y(t,e){let o=localStorage.getItem(t),r;if(o)try{r=JSON.parse(o);}catch(c){console.error(`Error parsing localStorage for key "${t}", using initial value.`,c),r=e;}else r=e;let n=d(r);return p(()=>{localStorage.setItem(t,JSON.stringify(n()));}),n}function W(t){return computed(t)}function p(t){return effect(t)}function I(t){return [useSyncExternalStore(r=>{let n=effect(()=>{t(),r();});return ()=>n()},()=>t(),()=>t()),r=>{t(typeof r=="function"?r(t()):r);}]}function x(t){return useSyncExternalStore(e=>{let o=effect(()=>{t(),e();});return ()=>o()},()=>t(),()=>t())}function b(t){return e=>{t(typeof e=="function"?e(t()):e);}}function m(t){useEffect(()=>{let e=effect(t);return ()=>e()},[]);}function v(t,e){let o=l(t);o.has(t)||(o.add(t),t(e));}export{W as createComputed,p as createEffect,d as createSignal,y as createSignalStorage,v as useHydrateSignal,b as useSetSignal,I as useSignal,m as useSignalEffect,x as useSignalValue};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactjs-signal",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -42,8 +42,8 @@
     "commit-msg": "npm run verify-commit"
   },
   "peerDependencies": {
-    "alien-signals": ">=0.4",
-    "react": ">=18"
+    "react": ">=18",
+    "alien-signals": ">=1.0.0"
   },
   "bugs": {
     "url": "https://github.com/hunghg255/reactjs-signal/issues"
@@ -52,5 +52,8 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hunghg255/reactjs-signal.git"
+  },
+  "dependencies": {
+    "alien-signals": "^1.0.1"
   }
 }