@davidcal/frosth 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 David P. Callanan
+
+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/README.md

@@ -0,0 +1,263 @@
+# Frosth - Yet another UI framework
+
+## Motivation
+
+Frontend component frameworks are still a mess (controversial, I know).
+I remember switching to Svelte before React hooks were released. I then switched to Solid before Svelte had its chance to shine.
+When building production-grade tools that prioritize reliability and UX over aesthetics, I found that 50% of my development time was spent fighting with these component frameworks.
+That's why I built Frosth. It's not meant for all apps yet. It only supports client-side rendering. It's best suited for internal tools or dashboards where interaction desync is a big no-no.
+- Async first: Not in a hacked way by slapping Suspense all over the codebase. Initialization is gradual at the state-management level, not bolted onto the UI later.
+- Developers are treated with respect: The process of good software architecture is a solved problem - coming from experience and wisdom. A component framework that forces the "right" architecture is like telling junior developers that they will never be trusted to learn by failing.
+- CRUD-last: Encapsulation is a solved problem. Sometimes code should be kept CRUD-like, sometimes behaviour and state should be encapsulated. An experienced developer is already trained to organize code effectively. Component frameworks don't need something new. Imagine a codebase where for every argument in the constructor, you must attach a getter and setter. You would be shocked! But this is effectively what React enforces for every component, the props are required to be changeable as the lifetime of the component progresses. Solid.js makes it easier to have read-only props, but is still inherently CRUD-based, not behaviour-based.
+
+## Setup
+
+**Quickstart:** `npx degit davidcallanan/frosth-template`.
+
+**Manual:**
+
+- `pnpm add -D vite`
+- `pnpm add @davidcal/frosth`
+- `import { mount, obtain, installarea } from "@davidcal/frosth";`
+- `window.addEventListener("load", () => mount(document.getElementById("app"), App));`
+- Start dev server: `vite`
+
+## Examples
+
+Hello, world:
+
+```
+import { mount, obtain, installarea } from "@davidcal/frosth";
+
+const App = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+
+	installed.set(() => [
+		(s) => s.$h1({}, "Hello, world!"),
+	]);
+});
+
+window.addEventListener("load", () => mount(document.getElementById("app"), App));
+```
+
+Signals are the most basic reactive primitive.
+
+```
+import { create_self, create_signal } from "@davidcal/frosth";
+
+const name = create_signal(() => "John"); // signal values must be functions
+
+name.set(() => "Mary");
+
+console.log(name()); // read non-reactively
+
+const s = create_self();
+
+s.create_effect((s) => {
+	console.log(name(s)); // read reactively by passing the reactive scope `s`
+});
+```
+
+Signal values can themselves be reactive, so you can freely mix and match declarative and imperative logic:
+
+```
+const first_name = create_signal(() => "John");
+const last_name = create_signal(() => "Doe");
+
+const display_name = create_signal(first_name);
+
+display_name.set((s) => `${first_name(s)} ${last_name(s)}`); // all signals expose a reactive scope
+```
+
+Create a component using `obtain`, and make it renderable using `installarea`.
+
+```
+import { obtain, installarea } from "@davidcal/forsth";
+
+const Component = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable; // Components do not need UI associated with them. To attach UI, you simply implement the installable interface.
+	
+	await new Promise((res) => setTimeout(res, 1000)); // Any component can be async
+	
+	installed.set(() => s.$h1({}, "Analyzing data...")); // Components can have multiple loading steps using sequential initialization
+	
+	await new Promise((res) => setTimeout(res, 1000));
+	
+	installed.set(() => s.$h1({ class: () => "bg-green-100" }, "Welcome to my app!"));
+});
+```
+
+Data can be loaded in parallel:
+
+```
+const Component = obtain(async ({ t, s }) => {
+	t.videos = t.Promise; // `t` is the equivalent of `this`
+	t.friends = t.Promise; // Promises should be declared in the first microtask
+	
+	// (a) Using async-await 
+	
+	(async () => {
+		const response = await fetch(`https://youtube.com/?user=${await t.friends[0]}`);
+		const data = await response.json();
+		t.videos = data.myVideos;
+	})();
+	
+	// (b) Using then-chaining
+	
+	fetch("https://facemash.com/")
+		.then(response => response.json())
+		.then(data => t.friends = data.myFriends)
+	;
+});
+
+const instance = Component({ s });
+
+instance.friends.then(console.log);
+instance.videos.then(console.log);
+```
+
+Attach cleanup code to any reactive scope using `on_dispose`:
+
+```
+const Component = obtain(async ({ t, s }) => {
+	const count = create_signal(() => 0);
+	
+	const interval = setInterval(() => {
+		count.set(() => count() + 1);
+	}, 1000);
+	
+	s.on_dispose(() => {
+		clearInterval(interval);
+	});
+	
+	s.create_effect((s) => {
+		const count$ = count(s);
+		const controller = new AbortController();
+		
+		const timeout = setTimeout(() => {
+			fetch(`https://monitoring.com/api/log?count=${count$}`, { signal: controller.signal });
+		}, Math.random() * 2000);
+		
+		s.on_dispose(() => {
+			clearTimeout(timeout);
+			controller.abort();
+		});
+	});
+});
+```
+
+Multiple installables are keyed by reference to the wrapper `(s) => ...`:
+
+```
+const TodoItem = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+	
+	installed.set(() => s.$h2({
+		class: () => "bg-blue-100 m-2",
+	}, "Todo: buy coffee"));
+});
+
+const Component = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+	
+	installed.set(() => [
+		(s) => s.$div({}, "Click the button to add a new todo item"),
+		(s) => s.$button({
+			class: () => "border-gray border-2 cursor-pointer",
+			onclick: () => () => { // Take care to use two functions here
+				const prev = installed() ?? [];
+				
+				installed.set(() => [
+					...prev,
+					(s) => TodoItem({ s }),
+				]);
+			},
+		}, "Add item!"),
+	]);
+});
+
+```
+
+Refs are just signals:
+
+```
+const Component = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+	
+	const ref_text = create_signal();
+	
+	installed.set(() => [
+		(s) => s.$h1({
+			ref: () => ref_text.set,
+		}, "Click the button to change my color"),
+		(s) => s.$button({
+			onclick: () => () => {
+				if (ref_text() === undefined) {
+					return;
+				}
+				
+				ref_text().style.color = "blue";
+				ref_text().style.backgroundColor = "black";
+			},
+		}, "Change color of text"),
+	]);
+});
+```
+
+Client-side routing is easy:
+
+```
+import { A, path } from "@davidcal/frosth";
+
+const Nav = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+
+	installed.set(() => [
+		(s) => A({ s, href: "/", children: "Home" }),
+		(s) => A({ s, href: "/about", children: "About" }),
+	]);
+});
+
+const App = obtain(async ({ t, s }) => {
+	const [installed, installable] = installarea(s);
+	
+	t.installable = installable;
+
+	installed.set(() => [
+		(s) => Nav({ s }),
+		obtain(async ({ t, s }) => {
+			const [installed, installable] = installarea(s);
+	
+			t.installable = installable;
+	
+			s.create_effect((s) => {
+				const path$ = path(s);
+				
+				if (current_path === "/") {
+					installed.set(() => Home);
+					return;
+				}
+				
+				if (current.path === "/about) {
+					installed.set(() => About);
+					return;
+				}
+				
+				installed.set(() => (s) => s.$h1({}, "404"));
+			});
+		}),
+	]);
+});
+```

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@davidcal/frosth",
+	"version": "1.0.0",
+	"description": "Async-first CRUD-last UI framework that treats encapsulation as a solved problem.",
+	"type": "module",
+	"main": "./src/sigew.js",
+	"exports": {
+		".": "./src/sigew.js",
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"src"
+	],
+	"keywords": [
+		"ui",
+		"framework",
+		"signals",
+		"async"
+	],
+	"author": "David P. Callanan",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/davidcallanan/frosth"
+	},
+	"dependencies": {
+		"unsuspended-promise": "^1.0.1"
+	}
+}

package/src/constants.js

@@ -0,0 +1 @@
+export const MARK_INSTALLABLE = Symbol("MARK:INSTALLABLE");

package/src/create_fragment.js

@@ -0,0 +1,40 @@
+class Fragment {
+	constructor(parent) {
+		this.start = document.createComment("fragment");
+		this.end = document.createComment("/fragment");
+		parent.appendChild(this.start);
+		parent.appendChild(this.end);
+	}
+
+	clear() {
+		while (this.start.nextSibling && this.start.nextSibling !== this.end) {
+			this.start.nextSibling.remove();
+		}
+	}
+
+	appendChild(child) {
+		this.end.parentNode.insertBefore(child, this.end);
+	}
+	
+	set innerHTML(html) {
+		this.clear();
+		
+		if (html === "") {
+			return;
+		}
+		
+		const temp = document.createElement("template");
+		temp.innerHTML = html;
+		
+		for (const node of temp.content.childNodes) {
+			this.appendChild(node.cloneNode(true));
+		}
+	}
+
+	set innerText(text) {
+		this.clear();
+		this.appendChild(document.createTextNode(text));
+	}
+}
+
+export const create_fragment = (parent) => new Fragment(parent);

package/src/create_self.js

@@ -0,0 +1,127 @@
+import { create_signal } from "./create_signal.js";
+import { h } from "./h.js";
+
+class Self {
+	constructor(parent, run_effect, options) {
+		options ??= {};
+		
+		this._parent = parent;
+		this._children = new Set();
+		this._is_disposed = false;
+		this._run_effect = run_effect;
+		this._dispose_handlers = [];
+		this._abort_controller = new AbortController();
+		
+		if (this._parent !== undefined) {
+			this._parent._children.add(this);
+		}
+		
+		if (this._parent === undefined && options.supress_static_lifetime !== true) {
+			console.warn("Created top-level self which will never be disposed (static lifetime).");
+		}
+	}
+	
+	create_effect(callback) {
+		let child;
+		
+		const run = () => {
+			if (child._is_disposed) {
+				return;
+			}
+			
+			callback(child);
+		};
+		
+		child = create_self(this, run);
+		
+		run();
+	}
+	
+	
+	/**
+	 * One can use a housed signal if a component should be reconstructed fresh when a dependency changes.
+	 * 
+	 * Any dependencies that should participate in this tracking must simply be read immediately, with a fixed value passed, inside the housed signal value function.
+	 */
+	create_housed_signal(initial) {
+		const signal = create_signal(() => ({
+			self: undefined,
+			value: initial,
+		}));
+
+		const housed = (self) => signal(self).value;
+
+		housed.set = (get_value) => {
+			const prev_self = signal().self;
+			
+			if (prev_self !== undefined && typeof prev_self[Symbol.dispose] === "function") {
+				prev_self[Symbol.dispose]();
+			}
+			
+			// Intentionally not implementing async-dispose, it serves no purpose in JavaScript from my preliminary analysis.
+			// If you are familiar with unsuspended promises, you will see why.
+			
+			const new_self = create_self(this);
+			
+			signal.set(() => ({
+				self: new_self,
+				value: get_value(new_self),
+			}));
+		};
+
+		return housed;
+	}
+	
+	get is_disposed() {
+		return this._is_disposed;
+	}
+
+	get abort_signal() {
+		return this._abort_controller.signal;
+	}
+
+	on_dispose(handler) {
+		this._dispose_handlers.push(handler);
+	}
+	
+	[Symbol.dispose]() {
+		if (this._is_disposed) {
+			return;
+		}
+		
+		this._is_disposed = true;
+		this._abort_controller.abort();
+
+		for (const child of this._children) {
+			child[Symbol.dispose]();
+		}
+		
+		this._children.clear();
+
+		if (this._parent !== undefined) {
+			this._parent._children.delete(this);
+		}
+		
+		for (const handle_dispose of this._dispose_handlers) {
+			handle_dispose();
+		}
+	}
+}
+
+/**
+ * Creates a reactivity context that must be passed around explicitely.
+*/
+export const create_self = (parent, run_effect, options) => {
+	return new Proxy(
+		new Self(parent, run_effect, options),
+		{
+			get: (target, prop, receiver) => {
+				if (typeof prop === "string" && prop.startsWith("$")) {
+					return (...rest) => h(target, prop.substring(1), ...rest);
+				}
+				
+				return Reflect.get(target, prop, receiver);	
+			},
+		}
+	);
+}

package/src/create_signal.js

@@ -0,0 +1,35 @@
+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.");
+}
+
+export const create_signal = (initial) => {
+	if (initial === undefined) {
+		initial = () => undefined;
+	}
+	
+	if (typeof initial !== "function") {
+		error_value();
+	}
+	
+	const raw = create_signal_raw({
+		retrieve: initial,
+	});
+	
+	const result = (self) => {
+		return raw(self).retrieve();
+	};
+
+	result.set = (value) => {
+		if (typeof value !== "function") {
+			error_value();
+		}
+		
+		raw.set({
+			retrieve: value,
+		});
+	};
+
+	return result;
+};

package/src/create_signal_raw.js

@@ -0,0 +1,24 @@
+export const create_signal_raw = (initial) => {
+	let value = initial;
+	
+	const subscribers = new Set();
+
+	const get = (self) => {
+		if (self?._run_effect) {
+			subscribers.add(self._run_effect);
+		}
+		
+		return value;
+	};
+
+	const set = (new_value) => {
+		value = new_value;
+		for (const effect of subscribers) {
+			effect();
+		}
+	};
+	
+	get.set = set;
+
+	return get;
+};

package/src/h.js

@@ -0,0 +1,48 @@
+import { create_fragment } from "./create_fragment.js";
+import { render } from "./render.js";
+
+export const h = (s, tag, props, children) => {
+	const el = document.createElement(tag);
+	
+	for (const key of Object.keys(props)) {
+		if (key.startsWith("on")) {
+			const event = key.slice(2);
+			let prev;
+			
+			s.create_effect(() => {
+				const handler = props[key](s);
+				
+				if (prev) {
+					el.removeEventListener(event, prev);
+				}
+				
+				el.addEventListener(event, handler);
+				
+				prev = handler;
+			});
+		} else if (key === "ref") {
+			s.create_effect(() => {
+				const ref_fn = props[key](s);
+				ref_fn(() => el);
+			});
+		} else {
+			s.create_effect((s) => {
+				el.setAttribute(key, props[key](s));
+			});
+		}
+	}
+	
+	if (typeof children === "string") {
+		el.textContent = children;
+		
+		return el;
+	}
+
+	if (children !== undefined) {
+		const fragment = create_fragment(el);
+		const state = { prev: [] };
+		render(s, fragment, children, state);
+	}
+	
+	return el;
+};

package/src/render.js

@@ -0,0 +1,105 @@
+import { MARK_INSTALLABLE } from "./constants.js";
+import { create_fragment } from "./create_fragment.js";
+import { create_self } from "./create_self.js";
+
+const render_diff = (s, prev, next, target) => {
+	const prev_map = new Map(prev.map((p) => [p.item, p]));
+	const next_set = new Set(next);
+
+	for (const p of prev) {
+		if (!next_set.has(p.item)) {
+			p.item_self[Symbol.dispose]();
+			p.fragment.clear();
+			p.fragment.start.remove();
+			p.fragment.end.remove();
+		}
+	}
+
+	const next_slots = next.map((item) => {
+		if (prev_map.has(item)) {
+			return prev_map.get(item);
+		}
+
+		const item_self = create_self(s);
+		const fragment = create_fragment(target);
+		const new_state = { prev: [] };
+		
+		render(item_self, fragment, item(item_self), new_state);
+		
+		return { item, item_self, fragment, state: new_state };
+	});
+
+	return next_slots;
+};
+
+export const render = async (s, target, installed, state) => {
+	console.log("rendering", installed);
+	
+	if (Array.isArray(installed)) {
+		if (state.prev.length === 0) {
+			target.innerHTML = "";
+		}
+		
+		state.prev = render_diff(s, state.prev, installed, target);
+		
+		return;
+	}
+	
+	target.innerHTML = "Loading...";
+	
+	if (installed === undefined) {
+		return;
+	}
+
+	state.prev = [];
+
+	if (installed instanceof HTMLElement) {
+		if (s.is_disposed) {
+			return;
+		}
+		
+		target.innerHTML = "";
+		target.appendChild(installed);
+
+		return;
+	}
+	
+	const installable = await installed.installable;
+	
+	if (installable === undefined) {
+		if (s.is_disposed) {
+			return;
+		}
+		
+		console.log("have", await installed, installable);
+		console.error("Tried to render 'undefined'.");
+		target.innerHTML = "Error (tried to render 'undefined')";
+		
+		return;
+	}
+	
+	if (installable[MARK_INSTALLABLE] !== true) {
+		if (s.is_disposed) {
+			return;
+		}
+		
+		console.warn("Encountered bizarre object to render:", installed);
+		target.innerHTML = "Error (encountered bizzare object to render)";
+
+		return;
+	}
+	
+	if (s.is_disposed) {
+		return;
+	}
+	
+	target.innerHTML = "";
+	const fragment = create_fragment(target);
+	
+	const new_state = { prev: [] };
+	
+	s.create_effect((s) => {
+		const installed = installable.installed(s);
+		render(s, fragment, installed, new_state);		
+	});
+};

package/src/sigew.js

@@ -0,0 +1,236 @@
+import { unsuspended_promise, create_unsuspended_promise } from "unsuspended-promise";
+import { create_fragment } from "./create_fragment.js";
+import { create_self } from "./create_self.js";
+import { create_signal } from "./create_signal.js";
+import { h } from "./h.js";
+import { render } from "./render.js";
+import { MARK_INSTALLABLE } from "./constants.js";
+
+export { create_self };
+export { create_signal };
+export { h };
+
+export const installarea = (s) => {
+	const storage = s.create_housed_signal(() => undefined);
+	
+	const inferred = (s) => {
+		const func_or_array = storage(s);
+		
+		if (func_or_array === undefined) {
+			return undefined;
+		}
+		
+		if (!Array.isArray(func_or_array)) {
+			const func = func_or_array;
+			
+			return [func];
+		}
+		
+		const array = func_or_array;
+		
+		return array;
+	};
+	
+	const installed = (s) => inferred(s);
+	installed.set = (value) => storage.set(value);
+	
+	const installable = {
+		[MARK_INSTALLABLE]: true,
+		installed: (s) => inferred(s),
+	};
+	
+	return [installed, installable];
+};
+
+const DIFFED = Symbol("diffed");
+
+export const create_install = (parent) => {
+	const install = (children) => {
+		parent.innerHTML = "";
+		
+		if (!Array.isArray(children)) {
+			children = [children];
+		}
+			
+		for (const child of children) {
+			if (child instanceof HTMLElement) {
+				parent.appendChild(child);	
+			} else if (typeof child === "function") {
+				const fragment = create_fragment(parent);
+				
+				fragment.innerText = "Loading...";
+		
+				child({
+					install: create_install(fragment),
+				});
+			} else {
+				console.error("Tried to install nonsensical element", child);
+			}
+		}
+	};
+
+	install.diffed = (compute) => ({ [DIFFED]: compute });
+
+	return install;
+};
+
+export const mount = async (target, create) => {
+	const s = create_self(undefined, undefined, {
+		supress_static_lifetime: true,
+	});
+	
+	const app = create({
+		s,
+	});
+	
+	target.innerHTML = "Loading...";
+	
+	const installable = await app.installable;
+	
+	target.innerHTML = "";
+	
+	if (installable === undefined) {
+		console.error("Component that is mounted must expose an 'installable' property for inclusion in the DOM. Use `t.installable = installable;`");		
+		
+		return;
+	}
+	
+	const state = { prev: [] };
+	
+	s.create_effect((s) => {
+		const installed = installable.installed(s);
+		render(s, target, installed, state);
+	});
+};
+
+export const obtain_component = (factory) => {
+	return ({ s, ...rest }) => {
+		const child_self = create_self(s);
+	 	
+		return factory({
+			s: child_self,
+			...rest,
+		});
+	};
+};
+
+export const extract_installable = (factory) => {
+	let uly_install = undefined;
+	let queued_installables = undefined;
+	
+	const install = (installables) => {
+		if (uly_install === undefined) {
+			queued_installables = installables;
+			return;
+		}
+		
+		uly_install(installables);
+	};
+	
+	return [
+		factory({
+			install,
+		}),
+		({ install }) => {
+			uly_install = install;
+			
+			if (queued_installables) {
+				uly_install(queued_installables);
+				queued_installables = undefined;
+			}
+		},
+	];
+};
+
+const fancy_wrap = (create) => {
+	return (kwargs) => {
+		const sym_promise = Symbol("[t.Promise]");
+		const sym_rej = Symbol("[t.Rej]");
+		
+		const basket = new Map();
+		
+		const t = new Proxy({}, {
+			get: (_, prop) => {
+				if (prop === "Promise") {
+					return sym_promise;
+				}
+				
+				if (prop === "Rej") {
+					throw new Error("todo");
+				}
+				
+				return final[prop];
+			},
+			set: (_, prop, value) => {
+				if (value === sym_promise) {
+					const [promise, res, rej] = create_unsuspended_promise();
+					
+					basket.set(prop, [promise, res, rej]);
+					
+					return true;
+				}
+				
+				const [__, res, rej] = basket.get(prop) ?? [];
+				
+				basket.set(prop, [value]);
+				
+				if (res !== undefined) {
+					res(value);
+				}
+				
+				return true;
+			},
+		});
+		
+		create({
+			...kwargs,
+			t,
+		});
+		
+		const final = new Proxy({}, {
+			get: (target, prop) => {
+				if (basket.has(prop)) {
+					return basket.get(prop)[0];
+				}
+				
+				return target[prop];
+			},
+		});
+		
+		return final;
+	};
+};
+
+export const obtain = (create_component) => {
+	return obtain_component(unsuspended_promise(fancy_wrap(create_component)));
+};
+
+export const path = create_signal();
+
+path.set(() => window.location.pathname);
+
+window.addEventListener("popstate", () => {
+	path.set(() => window.location.pathname);
+});
+
+export const A = obtain(async ({ t, s, href, children, ...props }) => {
+	const [installed, installable] = installarea(s);
+
+	t.installable = installable;
+
+	installed.set(() => [
+		(s) => s.$a({
+			...props,
+			href: () => href,
+			onclick: () => (e) => {
+				if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+					return;
+				}
+				
+				e.preventDefault();
+				window.history.pushState(null, "", href);
+				path.set(() => href);
+			},
+		}, children),
+	]);
+});