Correctly peek and replace value (#76)

Author: JoviDeCroock

.changeset/nice-timers-sort.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals": patch
+---
+
+Correctly replace props-value with peeked value

packages/core/src/index.ts

@@ -91,7 +91,6 @@ export class Signal<T = any> {
 		if (this._value !== value) {
 			this._value = value;
 			let isFirst = pending.size === 0;
-
 			pending.add(this);
 			// in batch mode this signal may be marked already
 			if (this._pending === 0) {

packages/preact/src/index.ts

@@ -58,14 +58,14 @@ function createUpdater(updater: () => void) {
 function getElementUpdater(vnode: VNode) {
 	let updater = updaterForComponent.get(vnode) as ElementUpdater;
 	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) {
 					// @ts-ignore-next-line silly
 					dom[prop] = value;
@@ -152,7 +152,18 @@ hook(OptionsTypes.DIFF, (old, vnode) => {
 				// first Signal prop triggers creation/cleanup of the updater:
 				if (!updater) updater = getElementUpdater(vnode);
 				// 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()
 			}
 		}
 

packages/preact/src/internal.d.ts

@@ -18,7 +18,7 @@ export interface ComponentType extends Component {
 export type Updater = Signal<unknown>;
 
 export interface ElementUpdater extends Updater {
-	_props: string[];
+	_props: Array<{ _key: string, _signal: Signal }>;
 }
 
 export const enum OptionsTypes {

packages/preact/test/index.test.ts

@@ -3,6 +3,8 @@ import { h, render } from "preact";
 import { useMemo } from "preact/hooks";
 import { setupRerender } from "preact/test-utils";
 
+const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));
+
 describe("@preact/signals", () => {
 	let scratch: HTMLDivElement;
 	let rerender: () => void;
@@ -146,4 +148,85 @@ describe("@preact/signals", () => {
 			expect(scratch.textContent).to.equal("bar");
 		});
 	});
+
+	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;
+		});
+	});
 });