@davidcal/frosth 1.0.0 → 1.0.2

package/README.md

@@ -1,5 +1,7 @@
 # Frosth - Yet another UI framework
 
+**Latest version**: v1.0.2
+
 ## Motivation
 
 Frontend component frameworks are still a mess (controversial, I know).
@@ -261,3 +263,15 @@ const App = obtain(async ({ t, s }) => {
 	]);
 });
 ```
+
+Ensure to wrap children in an array if making it reactive, or alternatively pass in a component instance that is inherently reactive.
+
+```
+const my_text_constant = create_signal(() => "my text content");
+
+installed.set(() => [
+	(s) => s.$h1({}, [
+		(s) => my_text_content(s),
+	]),
+])
+```

package/package.json

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

package/src/create_fragment.js

@@ -33,7 +33,22 @@ class Fragment {
 
 	set innerText(text) {
 		this.clear();
-		this.appendChild(document.createTextNode(text));
+		
+		if (text === null || text === undefined) {
+			return;
+		}
+		
+		this.appendChild(document.createTextNode(String(text)));
+	}
+	
+	set textContent(text) {
+		this.clear();
+		
+		if (text === null || text === undefined) {
+			return;
+		}
+
+		this.appendChild(document.createTextNode(String(text)));
 	}
 }
 

package/src/create_self.js

@@ -21,6 +21,10 @@ class Self {
 		}
 	}
 	
+	_create_child(run_effect, options) {
+		return create_self(this, run_effect, options);
+	}
+	
 	create_effect(callback) {
 		let child;
 		

package/src/h.js

@@ -31,12 +31,6 @@ export const h = (s, tag, props, children) => {
 			});
 		}
 	}
-	
-	if (typeof children === "string") {
-		el.textContent = children;
-		
-		return el;
-	}
 
 	if (children !== undefined) {
 		const fragment = create_fragment(el);

package/src/render.js

@@ -20,11 +20,13 @@ const render_diff = (s, prev, next, target) => {
 			return prev_map.get(item);
 		}
 
-		const item_self = create_self(s);
+		const item_self = s._create_child();
 		const fragment = create_fragment(target);
 		const new_state = { prev: [] };
 		
-		render(item_self, fragment, item(item_self), new_state);
+		item_self.create_effect((s) => {
+			render(s._create_child(), fragment, item(s), new_state);
+		});
 		
 		return { item, item_self, fragment, state: new_state };
 	});
@@ -33,7 +35,13 @@ const render_diff = (s, prev, next, target) => {
 };
 
 export const render = async (s, target, installed, state) => {
-	console.log("rendering", installed);
+	console.log("rendering", installed, typeof installed);
+	
+	if (typeof installed === "string") {
+		target.textContent = installed;
+		
+		return;
+	}
 	
 	if (Array.isArray(installed)) {
 		if (state.prev.length === 0) {