@davidcal/frosth 1.1.0 → 1.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Frosth - Yet another UI framework
 
-**Latest version**: v1.1.0
+**Latest version**: v1.3.0
 
 ## Motivation
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@davidcal/frosth",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"description": "Async-first CRUD-last UI framework that treats encapsulation as a solved problem.",
 	"type": "module",
 	"main": "./src/sigew.js",

package/src/create_beacon.js

@@ -0,0 +1,20 @@
+/**
+ * A beacon is a valueless-sink. The output is a stable interface as provided on creation. Subscribers are notified whenever the beacon is fired.
+ */
+export const create_beacon = (intf) => {
+	let next_version = 0n;
+	
+	const version_signal = create_signal(((version) => () => version)(next_version++));
+	
+	const result = (self) => {
+		version_signal(self);
+		
+		return intf;
+	};
+	
+	result.fire = () => {
+		version_signal.set(((version) => () => version)(next_version++));
+	};
+	
+	return result;
+};

package/src/create_signal.js

@@ -4,6 +4,9 @@ const error_value = () => {
 	throw new Error("Signal value must be a reactive function. Wrap the value in either `() =>` or `(s) =>` depending on whether or not the current value should be reactive, beyond the mere reactivity of the signal.");
 }
 
+/**
+ * A signal is a value-based sink. Each update is a new value. If the value does not change, subscribers are not notified.
+ */
 export const create_signal = (initial) => {
 	if (initial === undefined) {
 		initial = () => undefined;
@@ -13,9 +16,11 @@ export const create_signal = (initial) => {
 		error_value();
 	}
 	
-	const raw = create_signal_raw({
-		retrieve: initial,
-	});
+	const raw = create_signal_raw(
+		{ retrieve: initial },
+		Object.is,
+		(value) => value.retrieve(),
+	);
 	
 	const result = (self) => {
 		return raw(self).retrieve();

package/src/create_signal_raw.js

@@ -1,10 +1,18 @@
-export const create_signal_raw = (initial) => {
+export const create_signal_raw = (initial, is_equal, get_snapshot) => {
+	is_equal ??= Object.is;
+	get_snapshot ??= (v) => v;
+	
 	let value = initial;
+	let snapshot = undefined;
 	
 	const subscribers = new Set();
 
 	const get = (self) => {
 		if (self?._run_effect) {
+			if (subscribers.size === 0) {
+				snapshot = get_snapshot(value);
+			}
+			
 			subscribers.add(self._run_effect);
 		}
 		
@@ -12,7 +20,26 @@ export const create_signal_raw = (initial) => {
 	};
 
 	const set = (new_value) => {
+		if (subscribers.size === 0) {
+			// Signals are lazy. We are not permitted to invoke `is_equal` or `get_snapshot` if there are no subscribers.
+			
+			value = new_value;
+			
+			return;
+		}
+		
+		const new_snapshot = get_snapshot(new_value);
+		
+		if (is_equal(snapshot, new_snapshot)) {
+			// Must still assign, as underlying value may become different in the future.
+			
+			value = new_value;
+			
+			return;
+		}
+		
 		value = new_value;
+		snapshot = new_snapshot;
 
 		for (const effect of subscribers) {
 			effect();

package/src/h.js

@@ -1,4 +1,5 @@
 import { create_fragment } from "./create_fragment.js";
+import { outstanding_mount_checks } from "./mount_checks.js";
 import { render } from "./render.js";
 
 export const h = (s, tag, props, children) => {
@@ -38,7 +39,7 @@ export const h = (s, tag, props, children) => {
 				if (when === "on_create") {
 					ref_set(() => el);
 				} else if (when === "on_mount") {
-					throw new Error("[Frosth] Ref \"on_mount\" strategy not yet implemented.");
+					outstanding_mount_checks.set(el, () => ref_set(() => el));
 				} else {
 					throw new Error(`[Frosth] Invalid ref strategy "${when}"`);
 				}

package/src/mount_checks.js

@@ -0,0 +1,30 @@
+export const outstanding_mount_checks = new Map();
+
+const mutation_observer = new MutationObserver((mutations) => {
+	for (const mutation of mutations) {
+		for (const node of mutation.addedNodes) {
+			if (!outstanding_mount_checks.has(node)) {
+				continue;
+			}
+			
+			outstanding_mount_checks.get(node)();
+			outstanding_mount_checks.delete(node);
+		}
+	}
+});
+
+if (typeof document !== "undefined") {
+	mutation_observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+}
+
+setInterval(() => {
+	if (outstanding_mount_checks.size === 0) {
+		return;
+	}
+	
+	console.warn(`[Frosth] One or more (${outstanding_mount_checks.size}) element(s) were created but not mounted. At least one \`ref: ["on_mount", ...]\` was never fired as a result.`);
+	outstanding_mount_checks.clear();
+}, 0);

package/src/render.js

@@ -100,6 +100,7 @@ export const render = async (s, target, installed, state) => {
 	}
 	
 	target.innerHTML = "";
+	
 	const fragment = create_fragment(target);
 	
 	const new_state = { prev: [] };

package/src/sigew.js

@@ -6,11 +6,13 @@ import { h } from "./h.js";
 import { render } from "./render.js";
 import { MARK_INSTALLABLE } from "./constants.js";
 import { create_memo } from "./create_memo.js";
+import { create_beacon } from "./create_beacon.js";
 
 export { create_self };
 export { create_signal };
 export { h };
 export { create_memo };
+export { create_beacon };
 
 export const installarea = (s) => {
 	const storage = s.create_housed_signal(() => undefined);