@davidcal/frosth 1.0.3 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Frosth - Yet another UI framework
 
-**Latest version**: v1.0.3
+**Latest version**: v1.2.0
 
 ## Motivation
 
@@ -200,7 +200,7 @@ const Component = obtain(async ({ t, s }) => {
 	
 	installed.set(() => [
 		(s) => s.$h1({
-			ref: () => ref_text.set,
+			ref: ["on_create", ref_text.set],
 		}, "Click the button to change my color"),
 		(s) => s.$button({
 			onclick: () => () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@davidcal/frosth",
-	"version": "1.0.3",
+	"version": "1.2.0",
 	"description": "Async-first CRUD-last UI framework that treats encapsulation as a solved problem.",
 	"type": "module",
 	"main": "./src/sigew.js",
@@ -19,6 +19,7 @@
 	],
 	"author": "David P. Callanan",
 	"license": "MIT",
+	"homepage": "https://frosth.condensis.com",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/davidcallanan/frosth"

package/src/create_memo.js

@@ -0,0 +1,11 @@
+import { create_signal } from "./create_signal.js";
+
+/**
+ * A memo is simply a readonly signal.
+ */
+export const create_memo = (initial) => {
+	const signal = create_signal(initial);
+	const memo = (s) => signal(s);
+
+	return memo;
+};

package/src/create_signal.js

@@ -1,7 +1,7 @@
 import { create_signal_raw } from "./create_signal_raw.js";
 
 const error_value = () => {
-	throw new Error("Signal value must be a reactive function. Wrap the value in either `() =>` or `(self) =>` depending on whether or not the current value should be reactive, beyond the mere reactivity of the signal.");
+	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.");
 }
 
 export const create_signal = (initial) => {

package/src/create_signal_raw.js

@@ -13,6 +13,7 @@ export const create_signal_raw = (initial) => {
 
 	const set = (new_value) => {
 		value = new_value;
+
 		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) => {
@@ -21,10 +22,28 @@ export const h = (s, tag, props, children) => {
 				prev = handler;
 			});
 		} else if (key === "ref") {
-			s.create_effect(() => {
-				const ref_fn = props[key](s);
-				ref_fn(() => el);
-			});
+			if (typeof props[key] === "function") {
+				console.warn("[Frosth] Deprecated: Instead of `ref: () => signal.set`, use `ref: [\"on_create\", signal.set]`");
+					
+				s.create_effect(() => {
+					const ref_set = props[key](s);
+					ref_set(() => el);
+				});
+			} else {
+				if (!Array.isArray(props[key])) {
+					throw new Error("[Frosth] Ref must be an array, either `[\"on_create\", signal.set]` or `[\"on_mount\", signal.set]`");
+				}
+				
+				const [when, ref_set] = props[key];
+				
+				if (when === "on_create") {
+					ref_set(() => el);
+				} else if (when === "on_mount") {
+					outstanding_mount_checks.set(el, () => ref_set(() => el));
+				} else {
+					throw new Error(`[Frosth] Invalid ref strategy "${when}"`);
+				}
+			}
 		} else {
 			s.create_effect((s) => {
 				const prop$ = props[key](s);

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

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