@preact/signals 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022-present Preact Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export declare const bar = 42;

package/dist/signals.js

@@ -0,0 +1,2 @@
+exports.bar=42;
+//# sourceMappingURL=signals.js.map

package/dist/signals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signals.js","sources":["../src/index.ts"],"sourcesContent":["export const bar = 42;\n"],"names":[],"mappings":"YAAmB"}

package/dist/signals.min.js

@@ -0,0 +1,2 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e||self).preactSignals={})}(this,function(e){e.bar=42});
+//# sourceMappingURL=signals.min.js.map

package/dist/signals.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signals.min.js","sources":["../src/index.ts"],"sourcesContent":["export const bar = 42;\n"],"names":[],"mappings":"6OAAmB"}

package/dist/signals.mjs

@@ -0,0 +1,2 @@
+var r=42;export{r as bar};
+//# sourceMappingURL=signals.module.js.map

package/dist/signals.modern.js

@@ -0,0 +1,2 @@
+const o=42;export{o as bar};
+//# sourceMappingURL=signals.modern.js.map

package/dist/signals.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signals.modern.js","sources":["../src/index.ts"],"sourcesContent":["export const bar = 42;\n"],"names":["bar"],"mappings":"AAAaA,MAAGA,EAAG"}

package/dist/signals.module.js

@@ -0,0 +1,2 @@
+var r=42;export{r as bar};
+//# sourceMappingURL=signals.module.js.map

package/dist/signals.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signals.module.js","sources":["../src/index.ts"],"sourcesContent":["export const bar = 42;\n"],"names":["bar"],"mappings":"AAAaA,IAAGA,EAAG"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@preact/signals",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "",
+  "keywords": [],
+  "authors": [
+    "The Preact Authors (https://github.com/preactjs/signals/contributors)"
+  ],
+  "repository": "preactjs/preact",
+  "bugs": "https://github.com/preactjs/signals/issues",
+  "homepage": "https://preactjs.com",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/preact"
+  },
+  "amdName": "preactSignals",
+  "main": "dist/signals.js",
+  "module": "dist/signals.module.js",
+  "unpkg": "dist/signals.min.js",
+  "types": "dist/signals.d.ts",
+  "source": "src/index.ts",
+  "mangle": "../../mangle.json",
+  "exports": {
+    ".": {
+      "browser": "./dist/signals.module.js",
+      "umd": "./dist/signals.umd.js",
+      "import": "./dist/signals.mjs",
+      "require": "./dist/signals.js",
+      "types": "./dist/signals.d.ts"
+    }
+  },
+  "dependencies": {
+    "@preact/signals-core": "0.0.2"
+  },
+  "peerDependencies": {
+    "preact": "10.x"
+  },
+  "devDependencies": {
+    "preact": "10.9.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,345 @@
+import { options, Component, createElement } from "preact";
+import { useRef, useMemo } from "preact/hooks";
+import { signal, computed, effect, Signal } from "@preact/signals-core";
+import {
+	VNode,
+	ComponentType,
+	OptionsTypes,
+	HookFn,
+	Updater,
+	ElementUpdater,
+} from "./internal";
+
+// @todo: export Signal only as a type?
+export { signal, computed, effect, Signal };
+
+// Components that have a pending Signal update: (used to bypass default sCU:false)
+const hasPendingUpdate = new WeakSet<Component>();
+
+// Components that have useState()/useReducer() hooks:
+const hasHookState = new WeakSet<Component>();
+
+// Components that have useComputed():
+const hasComputeds = new WeakSet<Component>();
+
+// Install a Preact options hook
+function hook<T extends OptionsTypes>(hookName: T, hookFn: HookFn<T>) {
+	// @ts-ignore-next-line private options hooks usage
+	options[hookName] = hookFn.bind(null, options[hookName] || (() => {}));
+}
+
+let currentComponent: Component | undefined;
+let currentUpdater: Updater | undefined;
+let finishUpdate: ReturnType<Updater["_setCurrent"]> | undefined;
+const updaterForComponent = new WeakMap<Component | VNode, Updater>();
+
+function setCurrentUpdater(updater?: Updater) {
+	// end tracking for the current update:
+	if (finishUpdate) finishUpdate(true, true);
+	// start tracking the new update:
+	currentUpdater = updater;
+	finishUpdate = updater && updater._setCurrent();
+}
+
+function createUpdater(updater: () => void) {
+	const s = signal(undefined) as Updater;
+	s._canActivate = true;
+	s._updater = updater;
+	return s;
+}
+
+// Get a (cached) Signal property updater for an element VNode
+function getElementUpdater(vnode: VNode) {
+	let updater = updaterForComponent.get(vnode) as ElementUpdater;
+	if (!updater) {
+		let signalProps: string[] = [];
+		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;
+				if (prop in dom) {
+					// @ts-ignore-next-line silly
+					dom[prop] = value;
+				} else if (value) {
+					dom.setAttribute(prop, value);
+				} else {
+					dom.removeAttribute(prop);
+				}
+			}
+		}) as ElementUpdater;
+		updater._props = signalProps;
+		updaterForComponent.set(vnode, updater);
+	} else {
+		updater._props.length = 0;
+	}
+	return updater;
+}
+
+/** @todo This may be needed for complex prop value detection. */
+// function isSignalValue(value: any): value is Signal {
+// 	if (typeof value !== "object" || value == null) return false;
+// 	if (value instanceof Signal) return true;
+// 	// @TODO: uncomment this when we land Reactive (ideally behind a brand check)
+// 	// for (let i in value) if (value[i] instanceof Signal) return true;
+// 	return false;
+// }
+
+/** Convert Signals within (nested) props.children into Text components */
+function childToSignal<T>(child: any, i: keyof T, arr: T) {
+	if (typeof child !== "object" || child == null) {
+		// can't be a signal
+	} else if (Array.isArray(child)) {
+		child.forEach(childToSignal);
+	} else if (child instanceof Signal) {
+		// @ts-ignore-next-line yes, arr can accept VNodes:
+		arr[i] = createElement(Text, { data: child });
+	}
+}
+
+/**
+ * A wrapper component that renders a Signal directly as a Text node.
+ * @todo: in Preact 11, just decorate Signal with `type:null`
+ */
+function Text(this: ComponentType, { data }: { data: Signal }) {
+	// hasComputeds.add(this);
+
+	const s = useMemo(() => {
+		// mark the parent component as having computeds so it gets optimized
+		let v = this.__v;
+		while ((v = v.__!)) {
+			if (v.__c) {
+				hasComputeds.add(v.__c);
+				break;
+			}
+		}
+
+		// Replace this component's vdom updater with a direct text one:
+		currentUpdater!._updater = () => {
+			(this.base as Text).data = s._value;
+		};
+
+		return computed(() => {
+			let s = data.value;
+			return s === 0 ? 0 : s === true ? "" : s || "";
+		});
+	}, []);
+
+	return s.value;
+}
+
+/** Inject low-level property/attribute bindings for Signals into Preact's diff */
+hook(OptionsTypes.DIFF, (old, vnode) => {
+	if (typeof vnode.type === "string") {
+		// let orig = vnode.__o || vnode;
+		let props = vnode.props;
+		let updater;
+
+		for (let i in props) {
+			let value = props[i];
+			if (i === "children") {
+				childToSignal(value, "children", props);
+			} else if (value instanceof Signal) {
+				// 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);
+			}
+		}
+
+		setCurrentUpdater(updater);
+	}
+
+	old(vnode);
+});
+
+/** Set up Updater before rendering a component */
+hook(OptionsTypes.RENDER, (old, vnode) => {
+	let updater;
+
+	let component = vnode.__c;
+	if (component) {
+		hasPendingUpdate.delete(component);
+
+		updater = updaterForComponent.get(component);
+		if (updater === undefined) {
+			updater = createUpdater(() => {
+				hasPendingUpdate.add(component);
+				component.setState({});
+			});
+			updaterForComponent.set(component, updater);
+		}
+	}
+
+	currentComponent = component;
+	setCurrentUpdater(updater);
+	old(vnode);
+});
+
+/** Finish current updater if a component errors */
+hook(OptionsTypes.CATCH_ERROR, (old, error, vnode, oldVNode) => {
+	setCurrentUpdater();
+	currentComponent = undefined;
+	old(error, vnode, oldVNode);
+});
+
+/** Finish current updater after rendering any VNode */
+hook(OptionsTypes.DIFFED, (old, vnode) => {
+	setCurrentUpdater();
+	currentComponent = undefined;
+	old(vnode);
+});
+
+/** Unsubscribe from Signals when unmounting components/vnodes */
+hook(OptionsTypes.UNMOUNT, (old, vnode: VNode) => {
+	let thing = vnode.__c || vnode;
+	const updater = updaterForComponent.get(thing);
+	if (updater) {
+		updaterForComponent.delete(thing);
+		const signals = updater._deps;
+		if (signals) {
+			signals.forEach(signal => signal._subs.delete(updater));
+			signals.clear();
+		}
+	}
+	old(vnode);
+});
+
+/** Mark components that use hook state so we can skip sCU optimization. */
+hook(OptionsTypes.HOOK, (old, component, index, type) => {
+	if (type < 3) hasHookState.add(component);
+	old(component, index, type);
+});
+
+/**
+ * Auto-memoize components that use Signals/Computeds.
+ * Note: Does _not_ optimize components that use hook/class state.
+ */
+Component.prototype.shouldComponentUpdate = function (props, state) {
+	// @todo: Once preactjs/preact#3671 lands, this could just use `currentUpdater`:
+	const updater = updaterForComponent.get(this);
+
+	const hasSignals = updater && updater._deps?.size !== 0;
+
+	// let reason;
+	// if (!hasSignals && !hasComputeds.has(this)) {
+	// 	reason = "no signals or computeds";
+	// } else if (hasPendingUpdate.has(this)) {
+	// 	reason = "has pending update";
+	// } else if (hasHookState.has(this)) {
+	// 	reason = "has hook state";
+	// }
+	// if (reason) {
+	// 	if (!this) reason += " (`this` bug)";
+	// 	console.log("not optimizing", this?.constructor?.name, ": ", reason, {
+	// 		details: {
+	// 			hasSignals,
+	// 			hasComputeds: hasComputeds.has(this),
+	// 			hasPendingUpdate: hasPendingUpdate.has(this),
+	// 			hasHookState: hasHookState.has(this),
+	// 			deps: Array.from(updater._deps),
+	// 			updater,
+	// 		},
+	// 	});
+	// }
+
+	// if this component used no signals or computeds, update:
+	if (!hasSignals && !hasComputeds.has(this)) return true;
+
+	// if there is a pending re-render triggered from Signals, update:
+	if (hasPendingUpdate.has(this)) return true;
+
+	// if there is hook or class state, update:
+	if (hasHookState.has(this)) return true;
+	for (let i in state) return true;
+
+	// if any non-Signal props changed, update:
+	for (let i in props) {
+		if (i !== "__source" && props[i] !== this.props[i]) return true;
+	}
+	for (let i in this.props) if (!(i in props)) return true;
+
+	// this is a purely Signal-driven component, don't update:
+	return false;
+};
+
+export function useSignal<T>(value: T) {
+	return useMemo(() => signal<T>(value), []);
+}
+
+export function useComputed<T>(compute: () => T) {
+	const $compute = useRef(compute);
+	$compute.current = compute;
+	hasComputeds.add(currentComponent!);
+	return useMemo(() => computed<T>(() => $compute.current()), []);
+}
+
+/**
+ * @todo Determine which Reactive implementation we'll be using.
+ * @internal
+ */
+// export function useReactive<T extends object>(value: T): Reactive<T> {
+// 	return useMemo(() => reactive<T>(value), []);
+// }
+
+/**
+ * @internal
+ * Update a Reactive's using the properties of an object or other Reactive.
+ * Also works for Signals.
+ * @example
+ *   // Update a Reactive with Object.assign()-like syntax:
+ *   const r = reactive({ name: "Alice" });
+ *   update(r, { name: "Bob" });
+ *   update(r, { age: 42 }); // property 'age' does not exist in type '{ name?: string }'
+ *   update(r, 2); // '2' has no properties in common with '{ name?: string }'
+ *   console.log(r.name.value); // "Bob"
+ *
+ * @example
+ *   // Update a Reactive with the properties of another Reactive:
+ *   const A = reactive({ name: "Alice" });
+ *   const B = reactive({ name: "Bob", age: 42 });
+ *   update(A, B);
+ *   console.log(`${A.name} is ${A.age}`); // "Bob is 42"
+ *
+ * @example
+ *   // Update a signal with assign()-like syntax:
+ *   const s = signal(42);
+ *   update(s, "hi"); // Argument type 'string' not assignable to type 'number'
+ *   update(s, {}); // Argument type '{}' not assignable to type 'number'
+ *   update(s, 43);
+ *   console.log(s.value); // 43
+ *
+ * @param obj The Reactive or Signal to be updated
+ * @param update The value, Signal, object or Reactive to update `obj` to match
+ * @param overwrite If `true`, any properties `obj` missing from `update` are set to `undefined`
+ */
+/*
+export function update<T extends SignalOrReactive>(
+	obj: T,
+	update: Partial<Unwrap<T>>,
+	overwrite = false
+) {
+	if (obj instanceof Signal) {
+		obj.value = peekValue(update);
+	} else {
+		for (let i in update) {
+			if (i in obj) {
+				obj[i].value = peekValue(update[i]);
+			} else {
+				let sig = signal(peekValue(update[i]));
+				sig[KEY] = i;
+				obj[i] = sig;
+			}
+		}
+		if (overwrite) {
+			for (let i in obj) {
+				if (!(i in update)) {
+					obj[i].value = undefined;
+				}
+			}
+		}
+	}
+}
+*/

package/src/internal.d.ts

@@ -0,0 +1,45 @@
+import { Component } from "preact";
+import { Signal } from "@preact/signals-core";
+
+export interface VNode<P = any> extends preact.VNode<P> {
+	/** The component instance for this VNode */
+	__c: Component;
+	/** The parent VNode */
+	__?: VNode;
+	/** The DOM node for this VNode */
+	__e?: Element | Text;
+}
+
+export interface ComponentType extends Component {
+	/** This component's owner VNode */
+	__v: VNode;
+}
+
+export type Updater = Signal<unknown>;
+
+export interface ElementUpdater extends Updater {
+	_props: string[];
+}
+
+export const enum OptionsTypes {
+	HOOK = "__h",
+	DIFF = "__b",
+	DIFFED = "diffed",
+	RENDER = "__r",
+	CATCH_ERROR = "__e",
+	UNMOUNT = "unmount",
+}
+
+export interface OptionsType {
+	[OptionsTypes.HOOK](component: Component, index: number, type: number): void;
+	[OptionsTypes.DIFF](vnode: VNode): void;
+	[OptionsTypes.DIFFED](vnode: VNode): void;
+	[OptionsTypes.RENDER](vnode: VNode): void;
+	[OptionsTypes.CATCH_ERROR](error: any, vnode: VNode, oldVNode: VNode): void;
+	[OptionsTypes.UNMOUNT](vnode: VNode): void;
+}
+
+export type HookFn<T extends keyof OptionsType> = (
+	old: OptionsType[T],
+	...a: Parameters<OptionsType[T]>
+) => ReturnType<OptionsType[T]>;

package/test/index.test.ts

@@ -0,0 +1,149 @@
+import { signal, useComputed } from "@preact/signals";
+import { h, render } from "preact";
+import { useMemo } from "preact/hooks";
+import { setupRerender } from "preact/test-utils";
+
+describe("@preact/signals", () => {
+	let scratch: HTMLDivElement;
+	let rerender: () => void;
+
+	beforeEach(() => {
+		scratch = document.createElement("div");
+		rerender = setupRerender();
+	});
+
+	afterEach(() => {
+		render(null, scratch);
+	});
+
+	describe("Text bindings", () => {
+		it("should render text without signals", () => {
+			render(h("span", null, "test"), scratch);
+			const span = scratch.firstChild;
+			const text = span?.firstChild;
+			expect(text).to.have.property("data", "test");
+		});
+
+		it("should render Signals as Text", () => {
+			const sig = signal("test");
+			render(h("span", null, sig), scratch);
+			const span = scratch.firstChild;
+			expect(span).to.have.property("firstChild").that.is.an.instanceOf(Text);
+			const text = span?.firstChild;
+			expect(text).to.have.property("data", "test");
+		});
+
+		it("should update Signal-based Text (no parent component)", () => {
+			const sig = signal("test");
+			render(h("span", null, sig), scratch);
+
+			const text = scratch.firstChild!.firstChild!;
+			expect(text).to.have.property("data", "test");
+
+			sig.value = "changed";
+
+			// should not remount/replace Text
+			expect(scratch.firstChild!.firstChild!).to.equal(text);
+			// should update the text in-place
+			expect(text).to.have.property("data", "changed");
+		});
+
+		it("should update Signal-based Text (in a parent component)", () => {
+			const sig = signal("test");
+			function App({ x }: { x: typeof sig }) {
+				return h("span", null, x);
+			}
+			render(h(App, { x: sig }), scratch);
+
+			const text = scratch.firstChild!.firstChild!;
+			expect(text).to.have.property("data", "test");
+
+			sig.value = "changed";
+
+			// should not remount/replace Text
+			expect(scratch.firstChild!.firstChild!).to.equal(text);
+			// should update the text in-place
+			expect(text).to.have.property("data", "changed");
+		});
+	});
+
+	describe("Component bindings", () => {
+		it("should subscribe to signals", () => {
+			const sig = signal("foo");
+
+			function App() {
+				const value = sig.value;
+				return h("p", null, value);
+			}
+
+			render(h(App, {}), scratch);
+			expect(scratch.textContent).to.equal("foo");
+
+			sig.value = "bar";
+			rerender();
+			expect(scratch.textContent).to.equal("bar");
+		});
+
+		it("should activate signal accessed in render", () => {
+			const sig = signal(null);
+
+			function App() {
+				const arr = useComputed(() => {
+					// trigger read
+					sig.value;
+
+					return [];
+				});
+
+				const str = arr.value.join(", ");
+				return h("p", null, str);
+			}
+
+			const fn = () => render(h(App, {}), scratch);
+			expect(fn).not.to.throw;
+		});
+
+		it("should not subscribe to child signals", () => {
+			const sig = signal("foo");
+
+			function Child() {
+				const value = sig.value;
+				return h("p", null, value);
+			}
+
+			const spy = sinon.spy();
+			function App() {
+				spy();
+				return h(Child, null);
+			}
+
+			render(h(App, {}), scratch);
+			expect(scratch.textContent).to.equal("foo");
+
+			sig.value = "bar";
+			rerender();
+			expect(spy).to.be.calledOnce;
+		});
+
+		it("should update memo'ed component via signals", async () => {
+			const sig = signal("foo");
+
+			function Inner() {
+				const value = sig.value;
+				return h("p", null, value);
+			}
+
+			function App() {
+				sig.value;
+				return useMemo(() => h(Inner, { foo: 1 }), []);
+			}
+
+			render(h(App, {}), scratch);
+			expect(scratch.textContent).to.equal("foo");
+
+			sig.value = "bar";
+			rerender();
+			expect(scratch.textContent).to.equal("bar");
+		});
+	});
+});