@davidcal/frosth 1.1.0 → 1.2.0

package/README.md

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

package/package.json

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

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: [] };