@preact/signals-react - npm Package Compare versions

Comparing version 1.3.8 to 2.0.0

CHANGELOG.md

 # @preact/signals-react
 
+## 2.0.0
+
+### Major Changes
+
+- [#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
+
+  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.
+
+  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.
+
+  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`.
+
 ## 1.3.8
@@ -4,0 +16,0 @@

dist/signals.js

@@ -1,1 +0,1 @@
-var n=require("@preact/signals-core"),e=require("react"),r=require("use-sync-external-store/shim/index.js"),t=require("react/jsx-runtime"),i=require("react/jsx-dev-runtime");function u(n){return n&&"object"==typeof n&&"default"in n?n.default:n}var o=/*#__PURE__*/u(e),f=/*#__PURE__*/u(t),c=/*#__PURE__*/u(i),l=null,s=!1,a=null,v=new Map;function p(n){if(!n)return 1;var e,r=v.get(n);if(void 0!==r)return r;var t=n.useCallback.toString();if(n.useReducer===n.useEffect)e=1;else if(n.useEffect===n.useImperativeHandle)e=32;else if(/Invalid/.test(t))e=2;else if(/updateCallback/.test(t)||/\[0\]/.test(t)&&/\[1\]/.test(t)){var i=n.useReducer.toString();if(/rerenderReducer/.test(i)||/return\s*\[\w+,/.test(i))e=16;else e=8}else e=4;v.set(n,e);return e}var d=[],b=Symbol.for("react.element"),x=function(){};function y(e){if("function"!=typeof e)return e;else return function(r,t){if("string"==typeof r&&t)for(var i in t){var u=t[i];if("children"!==i&&u instanceof n.Signal)t[i]=u.value}return e.call.apply(e,[e,r,t].concat([].slice.call(arguments,2)))}}var h,g,m=Symbol.dispose||Symbol.for("Symbol.dispose");function S(n,e){var r=e.effect.S();h=e;return j.bind(e,n,r)}function j(n,e){e();h=n}({u:0,effect:{s:void 0,c:function(){},S:function(){return x},d:function(){}},subscribe:function(){return x},getSnapshot:function(){return 0},S:function(){},f:function(){}})[m]=function(){};var q=Promise.prototype.then.bind(Promise.resolve());function w(t){if(void 0===t)t=0;!function(){if(!g)g=q(function(){var n;g=void 0;null==(n=h)||n.f()})}();var i=e.useRef();if(null==i.current)i.current=function(e){var r,t,i,u,o=0,f=n.effect(function(){t=this});t.c=function(){o=o+1|0;if(u)u()};return(r={u:e,effect:t,subscribe:function(n){u=n;return function(){o=o+1|0;u=void 0;f()}},getSnapshot:function(){return o},S:function(){if(null!=h){var n=h.u,e=this.u;if(0==n&&0==e||0==n&&1==e){h.f();i=S(void 0,this)}else if(1==n&&0==e||2==n&&0==e);else i=S(h,this)}else i=S(void 0,this)},f:function(){null==i||i();i=void 0}})[m]=function(){this.f()},r}(t);var u=i.current;r.useSyncExternalStore(u.subscribe,u.getSnapshot,u.getSnapshot);u.S();return u}Object.defineProperties(n.Signal.prototype,{$$typeof:{configurable:!0,value:b},type:{configurable:!0,value:function(n){var e=n.data,r=w(1);try{return e.value}finally{r.f()}}},props:{configurable:!0,get:function(){return{data:this}}},ref:{configurable:!0,value:null}});!function(){Object.defineProperty(e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher,"current",{get:function(){return a},set:function(n){if(!s){var e=p(a),r=p(n);a=n;if(function(n,e){if(1&n&&28&e)return!0;else if(2&n||2&e)return!1;else return!1}(e,r)){s=!0;l=w(1);s=!1}else if(function(n,e){return Boolean(28&n&&16&e)}(e,r)){var t;null==(t=l)||t.f();s=!0;l=w(1);s=!1}else if(function(n,e){return Boolean(28&n&&1&e)}(e,r)){var i;null==(i=l)||i.f();l=null}}else a=n}});!function(){var n=f,e=c;o.createElement=y(o.createElement);e.jsx&&(e.jsx=y(e.jsx));n.jsx&&(n.jsx=y(n.jsx));e.jsxs&&(e.jsxs=y(e.jsxs));n.jsxs&&(n.jsxs=y(n.jsxs));e.jsxDEV&&(e.jsxDEV=y(e.jsxDEV));n.jsxDEV&&(n.jsxDEV=y(n.jsxDEV))}()}();exports.Signal=n.Signal;exports.batch=n.batch;exports.computed=n.computed;exports.effect=n.effect;exports.signal=n.signal;exports.untracked=n.untracked;exports.useComputed=function(r){var t=e.useRef(r);t.current=r;return e.useMemo(function(){return n.computed(function(){return t.current()})},d)};exports.useSignal=function(r){return e.useMemo(function(){return n.signal(r)},d)};exports.useSignalEffect=function(r){var t=e.useRef(r);t.current=r;e.useEffect(function(){return n.effect(function(){return t.current()})},d)};//# sourceMappingURL=signals.js.map
+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

dist/signals.min.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@preact/signals-core"),require("react"),require("use-sync-external-store/shim/index.js"),require("react/jsx-runtime"),require("react/jsx-dev-runtime")):"function"==typeof define&&define.amd?define(["exports","@preact/signals-core","react","use-sync-external-store/shim/index.js","react/jsx-runtime","react/jsx-dev-runtime"],e):e((n||self).reactSignals={},n.preactSignalsCore,n.react,n.index_js,n.a,n.s)}(this,function(n,e,t,r,i,u){function f(n){return n&&"object"==typeof n&&"default"in n?n.default:n}var o=/*#__PURE__*/f(t),c=/*#__PURE__*/f(i),l=/*#__PURE__*/f(u),s=null,a=!1,v=null,d=new Map;function p(n){if(!n)return 1;var e,t=d.get(n);if(void 0!==t)return t;var r=n.useCallback.toString();if(n.useReducer===n.useEffect)e=1;else if(n.useEffect===n.useImperativeHandle)e=32;else if(/Invalid/.test(r))e=2;else if(/updateCallback/.test(r)||/\[0\]/.test(r)&&/\[1\]/.test(r)){var i=n.useReducer.toString();if(/rerenderReducer/.test(i)||/return\s*\[\w+,/.test(i))e=16;else e=8}else e=4;d.set(n,e);return e}var b=[],y=Symbol.for("react.element"),h=function(){};function m(n){if("function"!=typeof n)return n;else return function(t,r){if("string"==typeof t&&r)for(var i in r){var u=r[i];if("children"!==i&&u instanceof e.Signal)r[i]=u.value}return n.call.apply(n,[n,t,r].concat([].slice.call(arguments,2)))}}var g,x,j=Symbol.dispose||Symbol.for("Symbol.dispose");function S(n,e){var t=e.effect.S();g=e;return q.bind(e,n,t)}function q(n,e){e();g=n}({u:0,effect:{s:void 0,c:function(){},S:function(){return h},d:function(){}},subscribe:function(){return h},getSnapshot:function(){return 0},S:function(){},f:function(){}})[j]=function(){};var w=Promise.prototype.then.bind(Promise.resolve());function B(n){if(void 0===n)n=0;!function(){if(!x)x=w(function(){var n;x=void 0;null==(n=g)||n.f()})}();var i=t.useRef();if(null==i.current)i.current=function(n){var t,r,i,u,f=0,o=e.effect(function(){r=this});r.c=function(){f=f+1|0;if(u)u()};return(t={u:n,effect:r,subscribe:function(n){u=n;return function(){f=f+1|0;u=void 0;o()}},getSnapshot:function(){return f},S:function(){if(null!=g){var n=g.u,e=this.u;if(0==n&&0==e||0==n&&1==e){g.f();i=S(void 0,this)}else if(1==n&&0==e||2==n&&0==e);else i=S(g,this)}else i=S(void 0,this)},f:function(){null==i||i();i=void 0}})[j]=function(){this.f()},t}(n);var u=i.current;r.useSyncExternalStore(u.subscribe,u.getSnapshot,u.getSnapshot);u.S();return u}Object.defineProperties(e.Signal.prototype,{$$typeof:{configurable:!0,value:y},type:{configurable:!0,value:function(n){var e=n.data,t=B(1);try{return e.value}finally{t.f()}}},props:{configurable:!0,get:function(){return{data:this}}},ref:{configurable:!0,value:null}});!function(){Object.defineProperty(t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher,"current",{get:function(){return v},set:function(n){if(!a){var e=p(v),t=p(n);v=n;if(function(n,e){if(1&n&&28&e)return!0;else if(2&n||2&e)return!1;else return!1}(e,t)){a=!0;s=B(1);a=!1}else if(function(n,e){return Boolean(28&n&&16&e)}(e,t)){var r;null==(r=s)||r.f();a=!0;s=B(1);a=!1}else if(function(n,e){return Boolean(28&n&&1&e)}(e,t)){var i;null==(i=s)||i.f();s=null}}else v=n}});!function(){var n=c,e=l;o.createElement=m(o.createElement);e.jsx&&(e.jsx=m(e.jsx));n.jsx&&(n.jsx=m(n.jsx));e.jsxs&&(e.jsxs=m(e.jsxs));n.jsxs&&(n.jsxs=m(n.jsxs));e.jsxDEV&&(e.jsxDEV=m(e.jsxDEV));n.jsxDEV&&(n.jsxDEV=m(n.jsxDEV))}()}();n.Signal=e.Signal;n.batch=e.batch;n.computed=e.computed;n.effect=e.effect;n.signal=e.signal;n.untracked=e.untracked;n.useComputed=function(n){var r=t.useRef(n);r.current=n;return t.useMemo(function(){return e.computed(function(){return r.current()})},b)};n.useSignal=function(n){return t.useMemo(function(){return e.signal(n)},b)};n.useSignalEffect=function(n){var r=t.useRef(n);r.current=n;t.useEffect(function(){return e.effect(function(){return r.current()})},b)}});//# sourceMappingURL=signals.min.js.map
+!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

dist/signals.module.js

@@ -1,1 +0,1 @@
-import{Signal as n,effect as r,signal as t,computed as e}from"@preact/signals-core";export{Signal,batch,computed,effect,signal,untracked}from"@preact/signals-core";import i,{__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as u,useRef as f,useMemo as o,useEffect as c}from"react";import{useSyncExternalStore as l}from"use-sync-external-store/shim/index.js";import a from"react/jsx-runtime";import s from"react/jsx-dev-runtime";var v=null,m=!1,p=null,d=new Map;function b(n){if(!n)return 1;var r,t=d.get(n);if(void 0!==t)return t;var e=n.useCallback.toString();if(n.useReducer===n.useEffect)r=1;else if(n.useEffect===n.useImperativeHandle)r=32;else if(/Invalid/.test(e))r=2;else if(/updateCallback/.test(e)||/\[0\]/.test(e)&&/\[1\]/.test(e)){var i=n.useReducer.toString();if(/rerenderReducer/.test(i)||/return\s*\[\w+,/.test(i))r=16;else r=8}else r=4;d.set(n,r);return r}var g=[],h=Symbol.for("react.element"),y=function(){};function S(r){if("function"!=typeof r)return r;else return function(t,e){if("string"==typeof t&&e)for(var i in e){var u=e[i];if("children"!==i&&u instanceof n)e[i]=u.value}return r.call.apply(r,[r,t,e].concat([].slice.call(arguments,2)))}}var x,j,k=Symbol.dispose||Symbol.for("Symbol.dispose");function w(n,r){var t=r.effect.S();x=r;return B.bind(r,n,t)}function B(n,r){r();x=n}({u:0,effect:{s:void 0,c:function(){},S:function(){return y},d:function(){}},subscribe:function(){return y},getSnapshot:function(){return 0},S:function(){},f:function(){}})[k]=function(){};var O=Promise.prototype.then.bind(Promise.resolve());function P(n){if(void 0===n)n=0;!function(){if(!j)j=O(function(){var n;j=void 0;null==(n=x)||n.f()})}();var t=f();if(null==t.current)t.current=function(n){var t,e,i,u,f=0,o=r(function(){e=this});e.c=function(){f=f+1|0;if(u)u()};return(t={u:n,effect:e,subscribe:function(n){u=n;return function(){f=f+1|0;u=void 0;o()}},getSnapshot:function(){return f},S:function(){if(null!=x){var n=x.u,r=this.u;if(0==n&&0==r||0==n&&1==r){x.f();i=w(void 0,this)}else if(1==n&&0==r||2==n&&0==r);else i=w(x,this)}else i=w(void 0,this)},f:function(){null==i||i();i=void 0}})[k]=function(){this.f()},t}(n);var e=t.current;l(e.subscribe,e.getSnapshot,e.getSnapshot);e.S();return e}Object.defineProperties(n.prototype,{$$typeof:{configurable:!0,value:h},type:{configurable:!0,value:function(n){var r=n.data,t=P(1);try{return r.value}finally{t.f()}}},props:{configurable:!0,get:function(){return{data:this}}},ref:{configurable:!0,value:null}});function useSignal(n){return o(function(){return t(n)},g)}function useComputed(n){var r=f(n);r.current=n;return o(function(){return e(function(){return r.current()})},g)}function useSignalEffect(n){var t=f(n);t.current=n;c(function(){return r(function(){return t.current()})},g)}!function(){Object.defineProperty(u.ReactCurrentDispatcher,"current",{get:function(){return p},set:function(n){if(!m){var r=b(p),t=b(n);p=n;if(function(n,r){if(1&n&&28&r)return!0;else if(2&n||2&r)return!1;else return!1}(r,t)){m=!0;v=P(1);m=!1}else if(function(n,r){return Boolean(28&n&&16&r)}(r,t)){var e;null==(e=v)||e.f();m=!0;v=P(1);m=!1}else if(function(n,r){return Boolean(28&n&&1&r)}(r,t)){var i;null==(i=v)||i.f();v=null}}else p=n}});!function(){var n=a,r=s;i.createElement=S(i.createElement);r.jsx&&(r.jsx=S(r.jsx));n.jsx&&(n.jsx=S(n.jsx));r.jsxs&&(r.jsxs=S(r.jsxs));n.jsxs&&(n.jsxs=S(n.jsxs));r.jsxDEV&&(r.jsxDEV=S(r.jsxDEV));n.jsxDEV&&(n.jsxDEV=S(n.jsxDEV))}()}();export{useComputed,useSignal,useSignalEffect};//# sourceMappingURL=signals.module.js.map
+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

package.json

 {
   "name": "@preact/signals-react",
-  "version": "1.3.8",
+  "version": "2.0.0",
   "license": "MIT",
@@ -40,3 +40,10 @@ "description": "Manage state with style in React",
     },
-    "./runtime/package.json": "./runtime/package.json"
+    "./runtime/package.json": "./runtime/package.json",
+    "./auto": {
+      "types": "./auto/dist/index.d.ts",
+      "browser": "./auto/dist/auto.module.js",
+      "import": "./auto/dist/auto.mjs",
+      "require": "./auto/dist/auto.js"
+    },
+    "./auto/package.json": "./auto/package.json"
   },
@@ -50,2 +57,5 @@ "mangle": "../../mangle.json",
     "runtime/package.json",
+    "auto/dist",
+    "auto/src",
+    "auto/package.json",
     "CHANGELOG.md",
@@ -52,0 +62,0 @@ "LICENSE",

README.md

@@ -29,4 +29,2 @@ # Signals
 
-> 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.
-
 The React integration can be installed via:
@@ -38,4 +36,16 @@
 
-Similar to the Preact integration, the React adapter allows you to access signals directly inside your components and will automatically subscribe to them.
+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.
 
+### Babel Transform
+
+Install the Babel transform package (`npm i --save-dev @preact/signals-react-transform`) and add the following to your Babel config:
+
+```json
+{
+	"plugins": [["module:@preact/signals-react-transform"]]
+}
+```
+
+This will automatically transform your components to be reactive. You can then use signals directly inside your components.
+
 ```js
@@ -53,2 +63,19 @@ import { signal } from "@preact/signals-react";
 
+See the [Readme for the Babel plugin](../babel-plugin-signals-react/README.md) for more details about how the transform works and configuring it.
+
+### `useSignals` hook
+
+If you can't use the Babel transform, you can directly call the `useSignals` hook to make your components reactive.
+
+```js
+import { useSignals } from "@preact/signals-react";
+
+const count = signal(0);
+
+function CounterValue() {
+	useSignals();
+	return <p>Value: {count.value}</p>;
+}
+```
+
 ### Hooks
@@ -103,4 +130,40 @@
 
+## Limitations
+
+This version of React integration does not support passing signals as DOM attributes. Support for this may be added at a later date.
+
+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:
+
+```js
+const count = signal(0);
+
+function ShowCount({ getCount }) {
+	return <div>{getCount()}</div>;
+}
+
+function App() {
+	return <ShowCount getCount={() => count.value} />;
+}
+```
+
+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.
+
+```js
+const count = signal(0);
+
+function ShowCount({ getCount }) {
+	return <div>{getCount()}</div>;
+}
+
+const Count = () => <>{count.value}</>;
+
+function App() {
+	return <ShowCount getCount={() => <Count />} />;
+}
+```
+
+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.
+
 ## License
 
 `MIT`, see the [LICENSE](../../LICENSE) file.

src/index.ts

@@ -0,1 +1,9 @@
+// !!!!!!!!!!!!!!!!!!!!
+//
+// Imports to other packages (e.g. `react` or `@preact/signals-core`) or
+// subpackages (e.g. `@preact/signals-react/runtime`) in this file should be
+// listed as "external" in cmdline arguments passed to microbundle in the root
+// package.json script for this package so their contents aren't bundled into
+// the final source file.
+
 import {
@@ -15,4 +23,3 @@ signal,
 	useSignalEffect,
-	installAutoSignalTracking,
-} from "@preact/signals-react/runtime"; // TODO: This duplicates runtime code between main and sub runtime packages
+} from "@preact/signals-react/runtime";
 
@@ -37,3 +44,1 @@ export {
 }
-
-installAutoSignalTracking();

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

38

increased by40.74%

Number of low quality alerts

3

decreased by-25%

Number of lines in readme file

166

increased by61.17%

Worsened metrics

Total package byte prevSize

217207

decreased by-13.91%

Lines of code

899

decreased by-4.16%

No dependency changes