@preact/signals - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 # @preact/signals
 
+## 1.0.2
+
+### Patch Changes
+
+- 2383684: Correctly replace props-value with peeked value
+- Updated dependencies [5644c1f]
+  - @preact/signals-core@1.0.1
+
 ## 1.0.1
@@ -4,0 +12,0 @@

dist/signals.js

@@ -1,1 +0,1 @@
-var n,r,t,i=require("preact"),e=require("preact/hooks"),o=require("@preact/signals-core"),u=new WeakSet,f=new WeakSet,a=new WeakSet;function c(n,r){i.options[n]=r.bind(null,i.options[n]||function(){})}var v=new WeakMap;function s(n){t&&t(!0,!0),r=n,t=n&&n._()}function p(n){var r=o.signal(void 0);return r._c=!0,r._u=n,r}function h(n){var r=v.get(n);if(r)r.__.length=0;else{var t=[];(r=p(function(){for(var r=n.__e,i=n.props,e=0;e<t.length;e++){var o=t[e],u=i[o]._v;o in r?r[o]=u:u?r.setAttribute(o,u):r.removeAttribute(o)}})).__=t,v.set(n,r)}return r}function _(n,r,t){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(_):n instanceof o.Signal&&(t[r]=i.createElement(d,{data:n})))}function d(n){var t=this,i=n.data,u=e.useMemo(function(){for(var n=t.__v;n=n.__;)if(n.__c){a.add(n.__c);break}return r._u=function(){t.base.data=u._v},o.computed(function(){var n=i.value;return 0===n?0:!0===n?"":n||""})},[]);return u.value}d.displayName="_st",c("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var e in i){var u=i[e];"children"===e?_(u,"children",i):u instanceof o.Signal&&(t||(t=h(r)),t.__.push(e))}s(t)}n(r)}),c("__r",function(r,t){var i,e=t.__c;e&&(u.delete(e),void 0===(i=v.get(e))&&(i=p(function(){u.add(e),e.setState({})}),v.set(e,i))),n=e,s(i),r(t)}),c("__e",function(r,t,i,e){s(),n=void 0,r(t,i,e)}),c("diffed",function(r,t){s(),n=void 0,r(t)}),c("unmount",function(n,r){var t=r.__c||r,i=v.get(t);if(i){v.delete(t);var e=i._d;e&&(e.forEach(function(n){return n._s.delete(i)}),e.clear())}n(r)}),c("__h",function(n,r,t,i){i<3&&f.add(r),n(r,t,i)}),i.Component.prototype.shouldComponentUpdate=function(n,r){var t,i=v.get(this);if(!(i&&0!==(null==(t=i._d)?void 0:t.size)||a.has(this)))return!0;if(u.has(this))return!0;if(f.has(this))return!0;for(var e in r)return!0;for(var o in n)if("__source"!==o&&n[o]!==this.props[o])return!0;for(var c in this.props)if(!(c in n))return!0;return!1},exports.Signal=o.Signal,exports.batch=o.batch,exports.computed=o.computed,exports.effect=o.effect,exports.signal=o.signal,exports.useComputed=function(r){var t=e.useRef(r);return t.current=r,a.add(n),e.useMemo(function(){return o.computed(function(){return t.current()})},[])},exports.useSignal=function(n){return e.useMemo(function(){return o.signal(n)},[])};//# sourceMappingURL=signals.js.map
+var n,r,t,i=require("preact"),e=require("preact/hooks"),o=require("@preact/signals-core"),u=new WeakSet,f=new WeakSet,a=new WeakSet;function c(n,r){i.options[n]=r.bind(null,i.options[n]||function(){})}var v=new WeakMap;function s(n){t&&t(!0,!0),r=n,t=n&&n._()}function p(n){var r=o.signal(void 0);return r._c=!0,r._u=n,r}function _(n){var r=v.get(n);if(r)r.__.length=0;else{var t=[];(r=p(function(){for(var r=n.__e,i=0;i<t.length;i++){var e=t[i],o=e.t,u=e.i._v;if(!r)return;o in r?r[o]=u:u?r.setAttribute(o,u):r.removeAttribute(o)}})).__=t,v.set(n,r)}return r}function l(n,r,t){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(l):n instanceof o.Signal&&(t[r]=i.createElement(h,{data:n})))}function h(n){var t=this,i=n.data,u=e.useMemo(function(){for(var n=t.__v;n=n.__;)if(n.__c){a.add(n.__c);break}return r._u=function(){t.base.data=u._v},o.computed(function(){var n=i.value;return 0===n?0:!0===n?"":n||""})},[]);return u.value}h.displayName="_st",c("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var e in i){var u=i[e];"children"===e?l(u,"children",i):u instanceof o.Signal&&function(){t||(t=_(r)),t.__.push({t:e,i:u});var n=t._u;if(u._u){var o=u._u;u._u=function(){n(),o()}}else u._u=n;i[e]=u.peek()}()}s(t)}n(r)}),c("__r",function(r,t){var i,e=t.__c;e&&(u.delete(e),void 0===(i=v.get(e))&&(i=p(function(){u.add(e),e.setState({})}),v.set(e,i))),n=e,s(i),r(t)}),c("__e",function(r,t,i,e){s(),n=void 0,r(t,i,e)}),c("diffed",function(r,t){s(),n=void 0,r(t)}),c("unmount",function(n,r){var t=r.__c||r,i=v.get(t);if(i){v.delete(t);var e=i._d;e&&(e.forEach(function(n){return n._s.delete(i)}),e.clear())}n(r)}),c("__h",function(n,r,t,i){i<3&&f.add(r),n(r,t,i)}),i.Component.prototype.shouldComponentUpdate=function(n,r){var t,i=v.get(this);if(!(i&&0!==(null==(t=i._d)?void 0:t.size)||a.has(this)))return!0;if(u.has(this))return!0;if(f.has(this))return!0;for(var e in r)return!0;for(var o in n)if("__source"!==o&&n[o]!==this.props[o])return!0;for(var c in this.props)if(!(c in n))return!0;return!1},exports.Signal=o.Signal,exports.batch=o.batch,exports.computed=o.computed,exports.effect=o.effect,exports.signal=o.signal,exports.useComputed=function(r){var t=e.useRef(r);return t.current=r,a.add(n),e.useMemo(function(){return o.computed(function(){return t.current()})},[])},exports.useSignal=function(n){return e.useMemo(function(){return o.signal(n)},[])};//# sourceMappingURL=signals.js.map

dist/signals.min.js

@@ -1,1 +0,1 @@
-!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("preact"),require("preact/hooks"),require("@preact/signals-core")):"function"==typeof define&&define.amd?define(["exports","preact","preact/hooks","@preact/signals-core"],r):r((n||self).preactSignals={},n.preact,n.hooks,n.signalsCore)}(this,function(n,r,t,e){var i,o,f,u=new WeakSet,c=new WeakSet,a=new WeakSet;function s(n,t){r.options[n]=t.bind(null,r.options[n]||function(){})}var v=new WeakMap;function d(n){f&&f(!0,!0),o=n,f=n&&n._()}function l(n){var r=e.signal(void 0);return r._c=!0,r._u=n,r}function p(n){var r=v.get(n);if(r)r.__.length=0;else{var t=[];(r=l(function(){for(var r=n.__e,e=n.props,i=0;i<t.length;i++){var o=t[i],f=e[o]._v;o in r?r[o]=f:f?r.setAttribute(o,f):r.removeAttribute(o)}})).__=t,v.set(n,r)}return r}function h(n,t,i){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(h):n instanceof e.Signal&&(i[t]=r.createElement(_,{data:n})))}function _(n){var r=this,i=n.data,f=t.useMemo(function(){for(var n=r.__v;n=n.__;)if(n.__c){a.add(n.__c);break}return o._u=function(){r.base.data=f._v},e.computed(function(){var n=i.value;return 0===n?0:!0===n?"":n||""})},[]);return f.value}_.displayName="_st",s("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var o in i){var f=i[o];"children"===o?h(f,"children",i):f instanceof e.Signal&&(t||(t=p(r)),t.__.push(o))}d(t)}n(r)}),s("__r",function(n,r){var t,e=r.__c;e&&(u.delete(e),void 0===(t=v.get(e))&&(t=l(function(){u.add(e),e.setState({})}),v.set(e,t))),i=e,d(t),n(r)}),s("__e",function(n,r,t,e){d(),i=void 0,n(r,t,e)}),s("diffed",function(n,r){d(),i=void 0,n(r)}),s("unmount",function(n,r){var t=r.__c||r,e=v.get(t);if(e){v.delete(t);var i=e._d;i&&(i.forEach(function(n){return n._s.delete(e)}),i.clear())}n(r)}),s("__h",function(n,r,t,e){e<3&&c.add(r),n(r,t,e)}),r.Component.prototype.shouldComponentUpdate=function(n,r){var t,e=v.get(this);if(!(e&&0!==(null==(t=e._d)?void 0:t.size)||a.has(this)))return!0;if(u.has(this))return!0;if(c.has(this))return!0;for(var i in r)return!0;for(var o in n)if("__source"!==o&&n[o]!==this.props[o])return!0;for(var f in this.props)if(!(f in n))return!0;return!1},n.Signal=e.Signal,n.batch=e.batch,n.computed=e.computed,n.effect=e.effect,n.signal=e.signal,n.useComputed=function(n){var r=t.useRef(n);return r.current=n,a.add(i),t.useMemo(function(){return e.computed(function(){return r.current()})},[])},n.useSignal=function(n){return t.useMemo(function(){return e.signal(n)},[])}});//# sourceMappingURL=signals.min.js.map
+!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("preact"),require("preact/hooks"),require("@preact/signals-core")):"function"==typeof define&&define.amd?define(["exports","preact","preact/hooks","@preact/signals-core"],r):r((n||self).preactSignals={},n.preact,n.hooks,n.signalsCore)}(this,function(n,r,t,e){var i,o,f,u=new WeakSet,a=new WeakSet,c=new WeakSet;function s(n,t){r.options[n]=t.bind(null,r.options[n]||function(){})}var v=new WeakMap;function l(n){f&&f(!0,!0),o=n,f=n&&n._()}function d(n){var r=e.signal(void 0);return r._c=!0,r._u=n,r}function p(n){var r=v.get(n);if(r)r.__.length=0;else{var t=[];(r=d(function(){for(var r=n.__e,e=0;e<t.length;e++){var i=t[e],o=i.t,f=i.i._v;if(!r)return;o in r?r[o]=f:f?r.setAttribute(o,f):r.removeAttribute(o)}})).__=t,v.set(n,r)}return r}function h(n,t,i){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(h):n instanceof e.Signal&&(i[t]=r.createElement(_,{data:n})))}function _(n){var r=this,i=n.data,f=t.useMemo(function(){for(var n=r.__v;n=n.__;)if(n.__c){c.add(n.__c);break}return o._u=function(){r.base.data=f._v},e.computed(function(){var n=i.value;return 0===n?0:!0===n?"":n||""})},[]);return f.value}_.displayName="_st",s("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var o in i){var f=i[o];"children"===o?h(f,"children",i):f instanceof e.Signal&&function(){t||(t=p(r)),t.__.push({t:o,i:f});var n=t._u;if(f._u){var e=f._u;f._u=function(){n(),e()}}else f._u=n;i[o]=f.peek()}()}l(t)}n(r)}),s("__r",function(n,r){var t,e=r.__c;e&&(u.delete(e),void 0===(t=v.get(e))&&(t=d(function(){u.add(e),e.setState({})}),v.set(e,t))),i=e,l(t),n(r)}),s("__e",function(n,r,t,e){l(),i=void 0,n(r,t,e)}),s("diffed",function(n,r){l(),i=void 0,n(r)}),s("unmount",function(n,r){var t=r.__c||r,e=v.get(t);if(e){v.delete(t);var i=e._d;i&&(i.forEach(function(n){return n._s.delete(e)}),i.clear())}n(r)}),s("__h",function(n,r,t,e){e<3&&a.add(r),n(r,t,e)}),r.Component.prototype.shouldComponentUpdate=function(n,r){var t,e=v.get(this);if(!(e&&0!==(null==(t=e._d)?void 0:t.size)||c.has(this)))return!0;if(u.has(this))return!0;if(a.has(this))return!0;for(var i in r)return!0;for(var o in n)if("__source"!==o&&n[o]!==this.props[o])return!0;for(var f in this.props)if(!(f in n))return!0;return!1},n.Signal=e.Signal,n.batch=e.batch,n.computed=e.computed,n.effect=e.effect,n.signal=e.signal,n.useComputed=function(n){var r=t.useRef(n);return r.current=n,c.add(i),t.useMemo(function(){return e.computed(function(){return r.current()})},[])},n.useSignal=function(n){return t.useMemo(function(){return e.signal(n)},[])}});//# sourceMappingURL=signals.min.js.map

dist/signals.module.js

@@ -1,1 +0,1 @@
-import{Component as n,options as r,createElement as t}from"preact";import{useMemo as i,useRef as o}from"preact/hooks";import{Signal as e,signal as f,computed as u}from"@preact/signals-core";export{Signal,batch,computed,effect,signal}from"@preact/signals-core";var a,c,v,s=new WeakSet,l=new WeakSet,p=new WeakSet;function h(n,t){r[n]=t.bind(null,r[n]||function(){})}var d=new WeakMap;function _(n){v&&v(!0,!0),c=n,v=n&&n._()}function m(n){var r=f(void 0);return r._c=!0,r._u=n,r}function k(n){var r=d.get(n);if(r)r.__.length=0;else{var t=[];(r=m(function(){for(var r=n.__e,i=n.props,o=0;o<t.length;o++){var e=t[o],f=i[e]._v;e in r?r[e]=f:f?r.setAttribute(e,f):r.removeAttribute(e)}})).__=t,d.set(n,r)}return r}function g(n,r,i){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(g):n instanceof e&&(i[r]=t(b,{data:n})))}function b(n){var r=this,t=n.data,o=i(function(){for(var n=r.__v;n=n.__;)if(n.__c){p.add(n.__c);break}return c._u=function(){r.base.data=o._v},u(function(){var n=t.value;return 0===n?0:!0===n?"":n||""})},[]);return o.value}function w(n){return i(function(){return f(n)},[])}function S(n){var r=o(n);return r.current=n,p.add(a),i(function(){return u(function(){return r.current()})},[])}b.displayName="_st",h("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var o in i){var f=i[o];"children"===o?g(f,"children",i):f instanceof e&&(t||(t=k(r)),t.__.push(o))}_(t)}n(r)}),h("__r",function(n,r){var t,i=r.__c;i&&(s.delete(i),void 0===(t=d.get(i))&&(t=m(function(){s.add(i),i.setState({})}),d.set(i,t))),a=i,_(t),n(r)}),h("__e",function(n,r,t,i){_(),a=void 0,n(r,t,i)}),h("diffed",function(n,r){_(),a=void 0,n(r)}),h("unmount",function(n,r){var t=r.__c||r,i=d.get(t);if(i){d.delete(t);var o=i._d;o&&(o.forEach(function(n){return n._s.delete(i)}),o.clear())}n(r)}),h("__h",function(n,r,t,i){i<3&&l.add(r),n(r,t,i)}),n.prototype.shouldComponentUpdate=function(n,r){var t,i=d.get(this);if(!(i&&0!==(null==(t=i._d)?void 0:t.size)||p.has(this)))return!0;if(s.has(this))return!0;if(l.has(this))return!0;for(var o in r)return!0;for(var e in n)if("__source"!==e&&n[e]!==this.props[e])return!0;for(var f in this.props)if(!(f in n))return!0;return!1};export{S as useComputed,w as useSignal};//# sourceMappingURL=signals.module.js.map
+import{Component as n,options as r,createElement as t}from"preact";import{useMemo as i,useRef as o}from"preact/hooks";import{Signal as e,signal as f,computed as u}from"@preact/signals-core";export{Signal,batch,computed,effect,signal}from"@preact/signals-core";var a,c,v,s=new WeakSet,l=new WeakSet,p=new WeakSet;function _(n,t){r[n]=t.bind(null,r[n]||function(){})}var h=new WeakMap;function d(n){v&&v(!0,!0),c=n,v=n&&n._()}function m(n){var r=f(void 0);return r._c=!0,r._u=n,r}function k(n){var r=h.get(n);if(r)r.__.length=0;else{var t=[];(r=m(function(){for(var r=n.__e,i=0;i<t.length;i++){var o=t[i],e=o.t,f=o.i._v;if(!r)return;e in r?r[e]=f:f?r.setAttribute(e,f):r.removeAttribute(e)}})).__=t,h.set(n,r)}return r}function g(n,r,i){"object"!=typeof n||null==n||(Array.isArray(n)?n.forEach(g):n instanceof e&&(i[r]=t(b,{data:n})))}function b(n){var r=this,t=n.data,o=i(function(){for(var n=r.__v;n=n.__;)if(n.__c){p.add(n.__c);break}return c._u=function(){r.base.data=o._v},u(function(){var n=t.value;return 0===n?0:!0===n?"":n||""})},[]);return o.value}function w(n){return i(function(){return f(n)},[])}function y(n){var r=o(n);return r.current=n,p.add(a),i(function(){return u(function(){return r.current()})},[])}b.displayName="_st",_("__b",function(n,r){if("string"==typeof r.type){var t,i=r.props;for(var o in i){var f=i[o];"children"===o?g(f,"children",i):f instanceof e&&function(){t||(t=k(r)),t.__.push({t:o,i:f});var n=t._u;if(f._u){var e=f._u;f._u=function(){n(),e()}}else f._u=n;i[o]=f.peek()}()}d(t)}n(r)}),_("__r",function(n,r){var t,i=r.__c;i&&(s.delete(i),void 0===(t=h.get(i))&&(t=m(function(){s.add(i),i.setState({})}),h.set(i,t))),a=i,d(t),n(r)}),_("__e",function(n,r,t,i){d(),a=void 0,n(r,t,i)}),_("diffed",function(n,r){d(),a=void 0,n(r)}),_("unmount",function(n,r){var t=r.__c||r,i=h.get(t);if(i){h.delete(t);var o=i._d;o&&(o.forEach(function(n){return n._s.delete(i)}),o.clear())}n(r)}),_("__h",function(n,r,t,i){i<3&&l.add(r),n(r,t,i)}),n.prototype.shouldComponentUpdate=function(n,r){var t,i=h.get(this);if(!(i&&0!==(null==(t=i._d)?void 0:t.size)||p.has(this)))return!0;if(s.has(this))return!0;if(l.has(this))return!0;for(var o in r)return!0;for(var e in n)if("__source"!==e&&n[e]!==this.props[e])return!0;for(var f in this.props)if(!(f in n))return!0;return!1};export{y as useComputed,w as useSignal};//# sourceMappingURL=signals.module.js.map

package.json

 {
   "name": "@preact/signals",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
@@ -34,3 +34,3 @@ "description": "",
   "dependencies": {
-    "@preact/signals-core": "^1.0.0"
+    "@preact/signals-core": "^1.0.1"
   },
@@ -37,0 +37,0 @@ "peerDependencies": {

src/index.ts

@@ -61,10 +61,10 @@ import { options, Component, createElement } from "preact";
 	if (!updater) {
-		let signalProps: string[] = [];
+		let signalProps: Array<{ _key: string, _signal: Signal }> = [];
 		updater = createUpdater(() => {
 			let dom = vnode.__e as Element;
-			let props = vnode.props;
 
 			for (let i = 0; i < signalProps.length; i++) {
-				let prop = signalProps[i];
-				let value = props[prop]._value;
+				let { _key: prop, _signal: signal } = signalProps[i];
+				let value = signal._value;
+				if (!dom) return;
 				if (prop in dom) {
@@ -156,3 +156,14 @@ // @ts-ignore-next-line silly
 				// track which props are Signals for precise updates:
-				updater._props.push(i);
+				updater._props.push({ _key: i, _signal: value });
+				let newUpdater = updater._updater
+				if (value._updater) {
+					let oldUpdater = value._updater
+					value._updater = () => {
+						newUpdater();
+						oldUpdater();
+					}
+				} else {
+					value._updater = newUpdater
+				}
+				props[i] = value.peek()
 			}
@@ -159,0 +170,0 @@ }

src/internal.d.ts

@@ -21,3 +21,3 @@ import { Component } from "preact";
 export interface ElementUpdater extends Updater {
-	_props: string[];
+	_props: Array<{ _key: string, _signal: Signal }>;
 }
@@ -24,0 +24,0 @@

test/index.test.ts

@@ -6,2 +6,4 @@ import { signal, useComputed } from "@preact/signals";
 
+const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));
+
 describe("@preact/signals", () => {
@@ -150,2 +152,83 @@ let scratch: HTMLDivElement;
 	});
+
+	describe("prop bindings", () => {
+		it("should set the initial value of the checked property", () => {
+			const s = signal(true);
+			// @ts-ignore
+			render(h("input", { checked: s }), scratch);
+
+			expect(scratch.firstChild).to.have.property("checked", true);
+			expect(s.value).to.equal(true);
+		});
+
+		it("should update the checked property on change", () => {
+			const s = signal(true);
+			// @ts-ignore
+			render(h("input", { checked: s }), scratch);
+
+			expect(scratch.firstChild).to.have.property("checked", true);
+
+			s.value = false;
+
+			expect(scratch.firstChild).to.have.property("checked", false);
+		});
+
+		it("should update props without re-rendering", async () => {
+			const s = signal("initial");
+			const spy = sinon.spy();
+			function Wrap() {
+				spy();
+				// @ts-ignore
+				return h("input", { value: s });
+			}
+			render(h(Wrap, {}), scratch);
+			spy.resetHistory();
+
+			expect(scratch.firstChild).to.have.property("value", "initial");
+
+			s.value = "updated";
+
+			expect(scratch.firstChild).to.have.property("value", "updated");
+
+			// ensure the component was never re-rendered: (even after a tick)
+			await sleep();
+			expect(spy).not.to.have.been.called;
+
+			s.value = "second update";
+
+			expect(scratch.firstChild).to.have.property("value", "second update");
+
+			// ensure the component was never re-rendered: (even after a tick)
+			await sleep();
+			expect(spy).not.to.have.been.called;
+		});
+
+		it("should set and update string style property", async () => {
+			const style = signal("left: 10px");
+			const spy = sinon.spy();
+			function Wrap() {
+				spy();
+				// @ts-ignore
+				return h("div", { style });
+			}
+			render(h(Wrap, {}), scratch);
+			spy.resetHistory();
+
+			const div = scratch.firstChild as HTMLDivElement;
+
+			expect(div.style).to.have.property("left", "10px");
+
+			// ensure the component was never re-rendered: (even after a tick)
+			await sleep();
+			expect(spy).not.to.have.been.called;
+
+			style.value = "left: 20px;";
+
+			expect(div.style).to.have.property("left", "20px");
+
+			// ensure the component was never re-rendered: (even after a tick)
+			await sleep();
+			expect(spy).not.to.have.been.called;
+		});
+	});
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97058

increased by6.45%

Lines of code

632

increased by13.26%

Dependency changes

• Updated@preact/signals-core@^1.0.1