reactjs-signal 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -15,12 +15,17 @@
15
15
  <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>
16
16
  </p>
17
17
 
18
+
19
+
18
20
  ## Installation
19
21
 
20
22
  ```bash
21
23
  npm install reactjs-signal
22
24
  ```
23
25
 
26
+ ## Devtools
27
+
28
+ - [reactjs-signal-devtools](https://github.com/hunghg255/reactjs-signal)
24
29
 
25
30
  ## Usage
26
31
 
@@ -50,7 +55,7 @@ Creates a writable Alien Signal.
50
55
 
51
56
  ```typescript
52
57
  const countSignal = createSignal(0);
53
- countSignal.set(10); // sets the value to 10
58
+ countSignal(10); // sets the value to 10
54
59
  ```
55
60
 
56
61
  #### Parameters
@@ -69,7 +74,7 @@ Creates a computed Alien Signal based on a getter function.
69
74
 
70
75
  ```typescript
71
76
  const countSignal = createSignal(1);
72
- const doubleSignal = createComputed(() => countSignal.get() * 2);
77
+ const doubleSignal = createComputed(() => countSignal() * 2);
73
78
  ```
74
79
 
75
80
  #### Parameters
@@ -80,43 +85,6 @@ const doubleSignal = createComputed(() => countSignal.get() * 2);
80
85
 
81
86
  - `ISignal<T>`: The created computed signal.
82
87
 
83
- ### `createEffect`
84
-
85
- Creates a side effect in Alien Signals.
86
-
87
- #### Example
88
-
89
- ```typescript
90
- const countSignal = createSignal(1);
91
- createEffect(() => {
92
- console.log('Count is', countSignal.get());
93
- });
94
- ```
95
-
96
- #### Parameters
97
-
98
- - `fn` (`() => T`): A function that will run whenever its tracked signals update.
99
-
100
- #### Returns
101
-
102
- - `Effect<T>`: The created effect object.
103
-
104
- ### `createSignalScope`
105
-
106
- Creates an Alien Signals effect scope. This scope can manage multiple effects, allowing you to stop or start them together.
107
-
108
- #### Example
109
-
110
- ```typescript
111
- const scope = createSignalScope();
112
- scope.run(() => {
113
- // create effects in here...
114
- });
115
- ```
116
-
117
- #### Returns
118
-
119
- - `EffectScope`: The created effect scope.
120
88
 
121
89
  ### `useSignal`
122
90
 
@@ -148,7 +116,7 @@ React hook returning only the current value of an Alien Signal (or computed). No
148
116
 
149
117
  ```typescript
150
118
  const countSignal = createSignal(0);
151
- const doubleSignal = createComputed(() => countSignal.get() * 2);
119
+ const doubleSignal = createComputed(() => countSignal() * 2);
152
120
  function Display() {
153
121
  const count = useSignalValue(countSignal);
154
122
  const double = useSignalValue(doubleSignal);
@@ -195,7 +163,7 @@ React hook for running a side effect whenever Alien Signals' dependencies used i
195
163
  ```typescript
196
164
  function Logger() {
197
165
  useSignalEffect(() => {
198
- console.log('Signal changed:', someSignal.get());
166
+ console.log('Signal changed:', someSignal());
199
167
  });
200
168
  return null;
201
169
  }
@@ -205,25 +173,6 @@ function Logger() {
205
173
 
206
174
  - `fn` (`() => void`): The effect function to run.
207
175
 
208
- ### `useSignalScope`
209
-
210
- 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.
211
-
212
- #### Example
213
-
214
- ```typescript
215
- function ScopedEffects() {
216
- const scope = useSignalScope();
217
- useEffect(() => {
218
- scope.run(() => {
219
- createEffect(() => {
220
- console.log('Scoped effect:', someSignal.get());
221
- });
222
- });
223
- }, [scope]);
224
- return null;
225
- }
226
- ```
227
176
 
228
177
  <!-- /**
229
178
  * React hook to initialize a signal with a value when hydrating from server.
@@ -236,7 +185,7 @@ function ScopedEffects() {
236
185
  * @param {T} value - The value to hydrate the signal with.
237
186
  */
238
187
  export function useHydrateSignal<T>(alienSignal: IWritableSignal<T>, value: T): void {
239
- alienSignal.set(value);
188
+ alienSignal(value);
240
189
  } -->
241
190
 
242
191
  ### `useHydrateSignal`
package/dist/index.d.ts CHANGED
@@ -1,4 +1,11 @@
1
- type IWritableSignal<T> = {
1
+ /**
2
+ *
3
+ * React Alien Signals is a **TypeScript** library that provides hooks built on top of [Alien Signals](https://github.com/stackblitz/alien-signals).
4
+ * It offers a seamless integration with React, ensuring concurrency-safe re-renders without tearing.
5
+ *
6
+ * @module reactjs-signal
7
+ */
8
+ type TWritableSignal<T> = {
2
9
  (): T;
3
10
  (value: T): void;
4
11
  };
@@ -13,21 +20,18 @@ type IWritableSignal<T> = {
13
20
  *
14
21
  * @template T - The type of the signal value.
15
22
  * @param {T} initialValue - The initial value of the signal.
16
- * @returns {IWritableSignal<T>} The created Alien Signal.
23
+ * @returns {TWritableSignal<T>} The created Alien Signal.
17
24
  */
18
- declare function createSignal<T>(initialValue: T): {
19
- (): T;
20
- (value: T): void;
21
- };
25
+ declare function createSignal<T>(initialValue: T): TWritableSignal<T>;
22
26
  /**
23
27
  * Creates a writable Alien Signal that persists its value in localStorage.
24
28
  *
25
29
  * @template T - The type of the signal value.
26
30
  * @param {string} key - The localStorage key to use for persistence.
27
31
  * @param {T} initialValue - The initial value of the signal.
28
- * @returns {IWritableSignal<T>} The created Alien Signal.
32
+ * @returns {TWritableSignal<T>} The created Alien Signal.
29
33
  */
30
- declare function createSignalStorage<T>(key: string, initialValue: T): IWritableSignal<T>;
34
+ declare function createSignalStorage<T>(key: string, initialValue: T): TWritableSignal<T>;
31
35
  /**
32
36
  * Creates a computed Alien Signal based on a getter function.
33
37
  *
@@ -72,10 +76,10 @@ declare function createEffect<T>(fn: () => T): () => void;
72
76
  * ```
73
77
  *
74
78
  * @template T - The type of the signal value.
75
- * @param {IWritableSignal<T>} alienSignal - The signal to read/write.
79
+ * @param {TWritableSignal<T>} alienSignal - The signal to read/write.
76
80
  * @returns {[T, (val: T | ((oldVal: T) => T)) => void]} A tuple [currentValue, setValue].
77
81
  */
78
- declare function useSignal<T>(alienSignal: IWritableSignal<T>): [T, (val: T | ((oldVal: T) => T)) => void];
82
+ declare function useSignal<T>(alienSignal: TWritableSignal<T>): [T, (val: T | ((oldVal: T) => T)) => void];
79
83
  /**
80
84
  * React hook returning only the current value of an Alien Signal (or computed).
81
85
  * No setter is provided.
@@ -92,10 +96,10 @@ declare function useSignal<T>(alienSignal: IWritableSignal<T>): [T, (val: T | ((
92
96
  * ```
93
97
  *
94
98
  * @template T - The type of the signal value.
95
- * @param {IWritableSignal<T>} alienSignal - The signal to read.
99
+ * @param {TWritableSignal<T>} alienSignal - The signal to read.
96
100
  * @returns {T} The current value.
97
101
  */
98
- declare function useSignalValue<T>(alienSignal: IWritableSignal<T>): T;
102
+ declare function useSignalValue<T>(alienSignal: TWritableSignal<T>): T;
99
103
  /**
100
104
  * React hook returning only a setter function for an Alien Signal.
101
105
  * No current value is provided, similar to Jotai's useSetAtom.
@@ -110,10 +114,10 @@ declare function useSignalValue<T>(alienSignal: IWritableSignal<T>): T;
110
114
  * ```
111
115
  *
112
116
  * @template T - The type of the signal value.
113
- * @param {IWritableSignal<T>} alienSignal - The signal to write.
117
+ * @param {TWritableSignal<T>} alienSignal - The signal to write.
114
118
  * @returns {(val: T | ((oldVal: T) => T)) => void} A setter function.
115
119
  */
116
- declare function useSetSignal<T>(alienSignal: IWritableSignal<T>): (val: T | ((oldVal: T) => T)) => void;
120
+ declare function useSetSignal<T>(alienSignal: TWritableSignal<T>): (val: T | ((oldVal: T) => T)) => void;
117
121
  /**
118
122
  * React hook for running a side effect whenever Alien Signals' dependencies
119
123
  * used in `fn` change. The effect is cleaned up on component unmount.
@@ -138,9 +142,9 @@ declare function useSignalEffect(fn: () => void): void;
138
142
  * @returns
139
143
  *
140
144
  * @template T - The type of the signal value.
141
- * @param {IWritableSignal<T>} alienSignal - The signal to hydrate.
145
+ * @param {TWritableSignal<T>} alienSignal - The signal to hydrate.
142
146
  * @param {T} value - The value to hydrate the signal with.
143
147
  */
144
- declare function useHydrateSignal<T>(alienSignal: IWritableSignal<T>, value: T): void;
148
+ declare function useHydrateSignal<T>(alienSignal: TWritableSignal<T>, value: T): void;
145
149
 
146
- export { createComputed, createEffect, createSignal, createSignalStorage, useHydrateSignal, useSetSignal, useSignal, useSignalEffect, useSignalValue };
150
+ export { type TWritableSignal, createComputed, createEffect, createSignal, createSignalStorage, useHydrateSignal, useSetSignal, useSignal, useSignalEffect, useSignalValue };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import {signal,computed,effect}from'alien-signals';import {useSyncExternalStore,useEffect}from'react';var u=new WeakMap,l=e=>{let t=u.get(e);return t||(t=new WeakSet,u.set(e,t)),t};function d(e){return signal(e)}function x(e,t){let o=localStorage.getItem(e),r;if(o)try{r=JSON.parse(o);}catch(T){console.error(`Error parsing localStorage for key "${e}", using initial value.`,T),r=t;}else r=t;let n=d(r);return p(()=>{localStorage.setItem(e,JSON.stringify(n()));}),n}function b(e){return computed(e)}function p(e){return effect(e)}function m(e){return [useSyncExternalStore(r=>{let n=effect(()=>{e(),r();});return ()=>n()},()=>e(),()=>e()),r=>{e(typeof r=="function"?r(e()):r);}]}function v(e){return useSyncExternalStore(t=>{let o=effect(()=>{e(),t();});return ()=>o()},()=>e(),()=>e())}function V(e){return t=>{e(typeof t=="function"?t(e()):t);}}function h(e){useEffect(()=>{let t=effect(e);return ()=>t()},[e]);}function E(e,t){let o=l(e);o.has(e)||(o.add(e),e(t));}export{b as createComputed,p as createEffect,d as createSignal,x as createSignalStorage,E as useHydrateSignal,V as useSetSignal,m as useSignal,h as useSignalEffect,v as useSignalValue};
1
+ import {useSyncExternalStore,useEffect}from'react';import {signal,computed,effect}from'alien-signals';var a=new WeakMap;function l(t){let e=a.get(t);return e||(e=new WeakSet,a.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 x(t){return [useSyncExternalStore(r=>{let n=effect(()=>{t(),r();});return ()=>n()},()=>t(),()=>t()),r=>{t(typeof r=="function"?r(t()):r);}]}function b(t){return useSyncExternalStore(e=>{let o=effect(()=>{t(),e();});return ()=>o()},()=>t(),()=>t())}function m(t){return e=>{t(typeof e=="function"?e(t()):e);}}function v(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,m as useSetSignal,x as useSignal,v as useSignalEffect,b as useSignalValue};
package/package.json CHANGED
@@ -1,58 +1,49 @@
1
1
  {
2
2
  "name": "reactjs-signal",
3
- "version": "1.1.0",
4
- "description": "",
5
3
  "type": "module",
6
- "types": "./dist/index.d.ts",
4
+ "version": "1.1.2",
5
+ "description": "",
6
+ "author": "",
7
+ "license": "ISC",
8
+ "homepage": "https://github.com/hunghg255/reactjs-signal#readme",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/hunghg255/reactjs-signal.git"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/hunghg255/reactjs-signal/issues"
15
+ },
16
+ "keywords": [
17
+ "react",
18
+ "reactjs-signal",
19
+ "devtools"
20
+ ],
7
21
  "module": "./dist/index.js",
22
+ "types": "./dist/index.d.ts",
8
23
  "exports": {
9
24
  ".": {
10
25
  "types": "./dist/index.d.ts",
11
- "import": "./dist/index.js",
12
- "require": "./dist/index.js"
26
+ "require": "./dist/index.js",
27
+ "import": "./dist/index.js"
13
28
  }
14
29
  },
15
30
  "files": [
16
31
  "dist"
17
32
  ],
18
- "scripts": {
19
- "build": "tsup",
20
- "watch": "npm run build -- --watch src",
21
- "prepublishOnly": "npm run build",
22
- "lint": "tsc",
23
- "start": "esno src/index.ts",
24
- "test": "vitest",
25
- "verify-commit": "verify-commit-msg",
26
- "prepare": "git-scm-hooks",
27
- "release": "bumpp -r && npm publish"
28
- },
29
- "keywords": [],
30
- "author": "",
31
- "license": "ISC",
32
- "devDependencies": {
33
- "@types/react": "^19.0.2",
34
- "bumpp": "^9.2.1",
35
- "git-scm-hooks": "^0.0.7",
36
- "tsup": "^8.0.1",
37
- "typescript": "^5.3.3",
38
- "verify-commit-msg": "^0.0.10"
39
- },
40
- "git-hooks": {
41
- "pre-commit": "npm run lint",
42
- "commit-msg": "npm run verify-commit"
33
+ "dependencies": {
34
+ "alien-signals": "^1.0.4"
43
35
  },
44
36
  "peerDependencies": {
37
+ "alien-signals": ">=1.0.0",
45
38
  "react": ">=18"
46
39
  },
47
- "bugs": {
48
- "url": "https://github.com/hunghg255/reactjs-signal/issues"
49
- },
50
- "homepage": "https://github.com/hunghg255/reactjs-signal#readme",
51
- "repository": {
52
- "type": "git",
53
- "url": "git+https://github.com/hunghg255/reactjs-signal.git"
40
+ "devDependencies": {
41
+ "@types/react": "^19.0.2",
42
+ "tsup": "^8.0.1",
43
+ "typescript": "^5.3.3"
54
44
  },
55
- "dependencies": {
56
- "alien-signals": "^1.0.1"
45
+ "scripts": {
46
+ "build": "tsup",
47
+ "dev": "tsup --watch"
57
48
  }
58
- }
49
+ }