@preact/signals-react 1.3.8 → 2.0.1
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/CHANGELOG.md +21 -0
- package/README.md +72 -5
- package/auto/dist/auto.js +1 -0
- package/auto/dist/auto.js.map +1 -0
- package/auto/dist/auto.min.js +1 -0
- package/auto/dist/auto.min.js.map +1 -0
- package/auto/dist/auto.mjs +1 -0
- package/auto/dist/auto.mjs.map +1 -0
- package/auto/dist/auto.module.js +1 -0
- package/auto/dist/auto.module.js.map +1 -0
- package/auto/dist/index.d.ts +1 -0
- package/auto/package.json +25 -0
- package/auto/src/index.ts +2 -0
- package/dist/signals.js +1 -1
- package/dist/signals.js.map +1 -1
- package/dist/signals.min.js +1 -1
- package/dist/signals.min.js.map +1 -1
- package/dist/signals.mjs +1 -1
- package/dist/signals.mjs.map +1 -1
- package/dist/signals.module.js +1 -1
- package/dist/signals.module.js.map +1 -1
- package/package.json +16 -3
- package/src/index.ts +9 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @preact/signals-react
|
|
2
2
|
|
|
3
|
+
## 2.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#535](https://github.com/preactjs/signals/pull/535) [`58befba`](https://github.com/preactjs/signals/commit/58befba577d02c5cac5292fda0a599f9708e908b) Thanks [@jviide](https://github.com/jviide)! - Publish packages with provenance statements
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`d846def`](https://github.com/preactjs/signals/commit/d846defaf6e64f0236e2b91247e5f94a35f29cbc), [`cb6bdab`](https://github.com/preactjs/signals/commit/cb6bdabbd31b27f8435c7976089fa276da6bfb7a), [`d846def`](https://github.com/preactjs/signals/commit/d846defaf6e64f0236e2b91247e5f94a35f29cbc), [`d846def`](https://github.com/preactjs/signals/commit/d846defaf6e64f0236e2b91247e5f94a35f29cbc), [`d846def`](https://github.com/preactjs/signals/commit/d846defaf6e64f0236e2b91247e5f94a35f29cbc)]:
|
|
10
|
+
- @preact/signals-core@1.6.0
|
|
11
|
+
|
|
12
|
+
## 2.0.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- [#467](https://github.com/preactjs/signals/pull/467) [`d7f43ef`](https://github.com/preactjs/signals/commit/d7f43ef5c9b6516cd93a12c3f647409cfd8c62be) Thanks [@andrewiggins](https://github.com/andrewiggins)! - Remove auto tracking using React internals from signals-react package
|
|
17
|
+
|
|
18
|
+
Before this change, importing `@preact/signals-react` would invoke side effects that hook into React internals to automatically track signals. This change removes those side effects and requires consumers to update their code to continue using signals in React.
|
|
19
|
+
|
|
20
|
+
We made this breaking change because the mechanism we were using to automatically track signals was fragile and not reliable. We've had multiple issues reported where signals were not being tracked correctly. It would also lead to unexpected errors that were hard to debug.
|
|
21
|
+
|
|
22
|
+
For some consumers and apps though, the current mechanism does work. If you'd like to continue using this mechanism, simply add `import "@preact/signals/auto";` to the root of your app where you call `ReactDOM.render`. For our newly supported ways of using signals in React, check out the new Readme for `@preact/signals-react`.
|
|
23
|
+
|
|
3
24
|
## 1.3.8
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -26,15 +26,25 @@ npm install @preact/signals-react
|
|
|
26
26
|
|
|
27
27
|
## React Integration
|
|
28
28
|
|
|
29
|
-
> Note: The React integration plugs into some React internals and may break unexpectedly in future versions of React. If you are using Signals with React and encounter errors such as "Rendered more hooks than during previous render", "Should have a queue. This is likely a bug in React." or "Cannot redefine property: createElement" please open an issue here.
|
|
30
|
-
|
|
31
29
|
The React integration can be installed via:
|
|
32
30
|
|
|
33
31
|
```sh
|
|
34
32
|
npm install @preact/signals-react
|
|
35
33
|
```
|
|
36
34
|
|
|
37
|
-
|
|
35
|
+
We have a couple of options for integrating Signals into React. The recommended approach is to use the Babel transform to automatically make your components that use signals reactive.
|
|
36
|
+
|
|
37
|
+
### Babel Transform
|
|
38
|
+
|
|
39
|
+
Install the Babel transform package (`npm i --save-dev @preact/signals-react-transform`) and add the following to your Babel config:
|
|
40
|
+
|
|
41
|
+
```json
|
|
42
|
+
{
|
|
43
|
+
"plugins": [["module:@preact/signals-react-transform"]]
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
This will automatically transform your components to be reactive. You can then use signals directly inside your components.
|
|
38
48
|
|
|
39
49
|
```js
|
|
40
50
|
import { signal } from "@preact/signals-react";
|
|
@@ -48,17 +58,38 @@ function CounterValue() {
|
|
|
48
58
|
}
|
|
49
59
|
```
|
|
50
60
|
|
|
61
|
+
See the [Readme for the Babel plugin](../react-transform/README.md) for more details about how the transform works and configuring it.
|
|
62
|
+
|
|
63
|
+
### `useSignals` hook
|
|
64
|
+
|
|
65
|
+
If you can't use the Babel transform, you can directly call the `useSignals` hook to make your components reactive.
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
import { useSignals } from "@preact/signals-react/runtime";
|
|
69
|
+
|
|
70
|
+
const count = signal(0);
|
|
71
|
+
|
|
72
|
+
function CounterValue() {
|
|
73
|
+
useSignals();
|
|
74
|
+
return <p>Value: {count.value}</p>;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
51
78
|
### Hooks
|
|
52
79
|
|
|
53
|
-
If you need to instantiate new signals inside your components, you can use the `useSignal`
|
|
80
|
+
If you need to instantiate new signals or create new side effects on signal changes inside your components, you can use the `useSignal`, `useComputed` and `useSignalEffect` hooks.
|
|
54
81
|
|
|
55
82
|
```js
|
|
56
|
-
import { useSignal, useComputed } from "@preact/signals-react";
|
|
83
|
+
import { useSignal, useComputed, useSignalEffect } from "@preact/signals-react";
|
|
57
84
|
|
|
58
85
|
function Counter() {
|
|
59
86
|
const count = useSignal(0);
|
|
60
87
|
const double = useComputed(() => count.value * 2);
|
|
61
88
|
|
|
89
|
+
useSignalEffect(() => {
|
|
90
|
+
console.log(`Value: ${count.value}, value x 2 = ${double.value}`);
|
|
91
|
+
});
|
|
92
|
+
|
|
62
93
|
return (
|
|
63
94
|
<button onClick={() => count.value++}>
|
|
64
95
|
Value: {count.value}, value x 2 = {double.value}
|
|
@@ -97,6 +128,42 @@ To opt into this optimization, simply pass the signal directly instead of access
|
|
|
97
128
|
> **Note**
|
|
98
129
|
> The content is wrapped in a React Fragment due to React 18's newer, more strict children types.
|
|
99
130
|
|
|
131
|
+
## Limitations
|
|
132
|
+
|
|
133
|
+
This version of React integration does not support passing signals as DOM attributes. Support for this may be added at a later date.
|
|
134
|
+
|
|
135
|
+
Using signals into render props is not recommended. In this situation, the component that reads the signal is the component that calls the render prop, which may or may not be hooked up to track signals. For example:
|
|
136
|
+
|
|
137
|
+
```js
|
|
138
|
+
const count = signal(0);
|
|
139
|
+
|
|
140
|
+
function ShowCount({ getCount }) {
|
|
141
|
+
return <div>{getCount()}</div>;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
function App() {
|
|
145
|
+
return <ShowCount getCount={() => count.value} />;
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Here, the `ShowCount` component is the one that accesses `count.value` at runtime since it invokes `getCount`, so it needs to be hooked up to track signals. However, since it doesn't statically access the signal, the Babel transform won't transform it by default. One fix is to set `mode: all` in the Babel plugin's config, which will transform all components. Another workaround is put the return of the render prop into it's own component and then return that from your render prop. In the following example, the `Count` component statically accesses the signal, so it will be transformed by default.
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
const count = signal(0);
|
|
153
|
+
|
|
154
|
+
function ShowCount({ getCount }) {
|
|
155
|
+
return <div>{getCount()}</div>;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
const Count = () => <>{count.value}</>;
|
|
159
|
+
|
|
160
|
+
function App() {
|
|
161
|
+
return <ShowCount getCount={() => <Count />} />;
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Similar issues exist with using object getters & setters. Since the it isn't easily statically analyzable that a getter or setter is backed by a signal, the Babel plugin may miss some components that use signals in this way. Similarly, setting Babel's plugin to `mode: all` will fix this issue.
|
|
166
|
+
|
|
100
167
|
## License
|
|
101
168
|
|
|
102
169
|
`MIT`, see the [LICENSE](../../LICENSE) file.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require("@preact/signals-react/runtime").installAutoSignalTracking();//# sourceMappingURL=auto.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auto.js","sources":["../src/index.ts"],"sourcesContent":["import { installAutoSignalTracking } from \"@preact/signals-react/runtime\";\ninstallAutoSignalTracking();\n"],"names":["installAutoSignalTracking"],"mappings":"AACAA,QAAAA,iCAAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@preact/signals-react/runtime")):"function"==typeof define&&define.amd?define(["@preact/signals-react/runtime"],n):n((e||self).reactSignalsRuntime)}(this,function(e){e.installAutoSignalTracking()});//# sourceMappingURL=auto.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auto.min.js","sources":["../src/index.ts"],"sourcesContent":["import { installAutoSignalTracking } from \"@preact/signals-react/runtime\";\ninstallAutoSignalTracking();\n"],"names":["installAutoSignalTracking"],"mappings":"CACAA,SAAAA,EAAAA,GAAAA,iBAAAA,SAAAA,oBAAAA,OAAAA,EAAAA,QAAAA,kCAAAA,mBAAAA,QAAAA,OAAAA,IAAAA,OAAAA,CAAAA,iCAAAA,GAAAA,GAAAA,EAAAA,oBAAAA,WAAAA,WAAAA,GAAAA,MAAAA,oBAAAA,CAAAA,CAAAA,KAAAA,SAAAA,GAAAA,EAAAA,2BAA2B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{installAutoSignalTracking as r}from"@preact/signals-react/runtime";r();//# sourceMappingURL=auto.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auto.mjs","sources":["../src/index.ts"],"sourcesContent":["import { installAutoSignalTracking } from \"@preact/signals-react/runtime\";\ninstallAutoSignalTracking();\n"],"names":["installAutoSignalTracking"],"mappings":"oCACAA,MAAAA,gCAAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{installAutoSignalTracking as r}from"@preact/signals-react/runtime";r();//# sourceMappingURL=auto.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auto.module.js","sources":["../src/index.ts"],"sourcesContent":["import { installAutoSignalTracking } from \"@preact/signals-react/runtime\";\ninstallAutoSignalTracking();\n"],"names":["installAutoSignalTracking"],"mappings":"oCACAA,MAAAA,gCAAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@preact/signals-react-auto",
|
|
3
|
+
"description": "Sub package for @preact/signals-react that patches React to automatically update when signals change",
|
|
4
|
+
"private": true,
|
|
5
|
+
"amdName": "reactSignalsAuto",
|
|
6
|
+
"main": "dist/auto.js",
|
|
7
|
+
"module": "dist/auto.module.js",
|
|
8
|
+
"unpkg": "dist/auto.min.js",
|
|
9
|
+
"types": "dist/index.d.ts",
|
|
10
|
+
"mangle": "../../../mangle.json",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"browser": "./dist/auto.module.js",
|
|
15
|
+
"import": "./dist/auto.mjs",
|
|
16
|
+
"require": "./dist/auto.js"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {},
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@preact/signals-core": "workspace:^1.3.0",
|
|
22
|
+
"@preact/signals-react": "workspace:*",
|
|
23
|
+
"react": "^16.14.0 || 17.x || 18.x"
|
|
24
|
+
}
|
|
25
|
+
}
|
package/dist/signals.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var r=require("@preact/signals-core"),e=require("@preact/signals-react/runtime");exports.Signal=r.Signal;exports.batch=r.batch;exports.computed=r.computed;exports.effect=r.effect;exports.signal=r.signal;exports.untracked=r.untracked;exports.useComputed=e.useComputed;exports.useSignal=e.useSignal;exports.useSignalEffect=e.useSignalEffect;//# sourceMappingURL=signals.js.map
|
package/dist/signals.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signals.js","sources":[
|
|
1
|
+
{"version":3,"file":"signals.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/signals.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@preact/signals-core"),require("@preact/signals-react/runtime")):"function"==typeof define&&define.amd?define(["exports","@preact/signals-core","@preact/signals-react/runtime"],t):t((e||self).reactSignals={},e.preactSignalsCore,e.reactSignalsRuntime)}(this,function(e,t,i){e.Signal=t.Signal;e.batch=t.batch;e.computed=t.computed;e.effect=t.effect;e.signal=t.signal;e.untracked=t.untracked;e.useComputed=i.useComputed;e.useSignal=i.useSignal;e.useSignalEffect=i.useSignalEffect});//# sourceMappingURL=signals.min.js.map
|
package/dist/signals.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signals.min.js","sources":[
|
|
1
|
+
{"version":3,"file":"signals.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/signals.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export{Signal,batch,computed,effect,signal,untracked}from"@preact/signals-core";export{useComputed,useSignal,useSignalEffect}from"@preact/signals-react/runtime";//# sourceMappingURL=signals.mjs.map
|
package/dist/signals.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signals.mjs","sources":[
|
|
1
|
+
{"version":3,"file":"signals.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/signals.module.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export{Signal,batch,computed,effect,signal,untracked}from"@preact/signals-core";export{useComputed,useSignal,useSignalEffect}from"@preact/signals-react/runtime";//# sourceMappingURL=signals.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signals.module.js","sources":[
|
|
1
|
+
{"version":3,"file":"signals.module.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@preact/signals-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Manage state with style in React",
|
|
6
6
|
"keywords": [],
|
|
@@ -37,7 +37,14 @@
|
|
|
37
37
|
"import": "./runtime/dist/runtime.mjs",
|
|
38
38
|
"require": "./runtime/dist/runtime.js"
|
|
39
39
|
},
|
|
40
|
-
"./runtime/package.json": "./runtime/package.json"
|
|
40
|
+
"./runtime/package.json": "./runtime/package.json",
|
|
41
|
+
"./auto": {
|
|
42
|
+
"types": "./auto/dist/index.d.ts",
|
|
43
|
+
"browser": "./auto/dist/auto.module.js",
|
|
44
|
+
"import": "./auto/dist/auto.mjs",
|
|
45
|
+
"require": "./auto/dist/auto.js"
|
|
46
|
+
},
|
|
47
|
+
"./auto/package.json": "./auto/package.json"
|
|
41
48
|
},
|
|
42
49
|
"mangle": "../../mangle.json",
|
|
43
50
|
"files": [
|
|
@@ -46,12 +53,15 @@
|
|
|
46
53
|
"runtime/dist",
|
|
47
54
|
"runtime/src",
|
|
48
55
|
"runtime/package.json",
|
|
56
|
+
"auto/dist",
|
|
57
|
+
"auto/src",
|
|
58
|
+
"auto/package.json",
|
|
49
59
|
"CHANGELOG.md",
|
|
50
60
|
"LICENSE",
|
|
51
61
|
"README.md"
|
|
52
62
|
],
|
|
53
63
|
"dependencies": {
|
|
54
|
-
"@preact/signals-core": "^1.
|
|
64
|
+
"@preact/signals-core": "^1.6.0",
|
|
55
65
|
"use-sync-external-store": "^1.2.0"
|
|
56
66
|
},
|
|
57
67
|
"peerDependencies": {
|
|
@@ -65,5 +75,8 @@
|
|
|
65
75
|
"react-dom": "^18.2.0",
|
|
66
76
|
"react-router-dom": "^6.9.0"
|
|
67
77
|
},
|
|
78
|
+
"publishConfig": {
|
|
79
|
+
"provenance": true
|
|
80
|
+
},
|
|
68
81
|
"scripts": {}
|
|
69
82
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
// !!!!!!!!!!!!!!!!!!!!
|
|
2
|
+
//
|
|
3
|
+
// Imports to other packages (e.g. `react` or `@preact/signals-core`) or
|
|
4
|
+
// subpackages (e.g. `@preact/signals-react/runtime`) in this file should be
|
|
5
|
+
// listed as "external" in cmdline arguments passed to microbundle in the root
|
|
6
|
+
// package.json script for this package so their contents aren't bundled into
|
|
7
|
+
// the final source file.
|
|
8
|
+
|
|
1
9
|
import {
|
|
2
10
|
signal,
|
|
3
11
|
computed,
|
|
@@ -12,8 +20,7 @@ import {
|
|
|
12
20
|
useSignal,
|
|
13
21
|
useComputed,
|
|
14
22
|
useSignalEffect,
|
|
15
|
-
|
|
16
|
-
} from "@preact/signals-react/runtime"; // TODO: This duplicates runtime code between main and sub runtime packages
|
|
23
|
+
} from "@preact/signals-react/runtime";
|
|
17
24
|
|
|
18
25
|
export {
|
|
19
26
|
signal,
|
|
@@ -33,5 +40,3 @@ declare module "@preact/signals-core" {
|
|
|
33
40
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
34
41
|
interface Signal extends ReactElement {}
|
|
35
42
|
}
|
|
36
|
-
|
|
37
|
-
installAutoSignalTracking();
|