@threadlabs/looma 0.19.1 → 0.21.0

package/vue/chunks/host.js

@@ -1,18 +1,112 @@
-import { computed, onBeforeUnmount, onMounted, shallowRef, watchEffect } from "vue";
+import { Fragment, computed, getCurrentInstance, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, shallowRef, useSlots, watchEffect } from "vue";
 //#region .build/vue/host.ts
+var connectionHubs = /* @__PURE__ */ new WeakMap();
+/** One native observer per document tracks externally detached controller roots. */
+function observeConnection(element, check) {
+	const document = element.ownerDocument;
+	let hub = connectionHubs.get(document);
+	if (hub === void 0) {
+		const Observer = document.defaultView?.MutationObserver;
+		if (Observer === void 0) throw new TypeError("Controller connection tracking requires MutationObserver.");
+		const checks = /* @__PURE__ */ new Set();
+		const observer = new Observer(() => {
+			for (const current of checks) current();
+		});
+		observer.observe(document, {
+			childList: true,
+			subtree: true
+		});
+		hub = {
+			observer,
+			checks
+		};
+		connectionHubs.set(document, hub);
+	}
+	hub.checks.add(check);
+	return () => {
+		hub.checks.delete(check);
+		if (hub.checks.size === 0) {
+			hub.observer.disconnect();
+			connectionHubs.delete(document);
+		}
+	};
+}
+/** Keep native focus on the corresponding control when a root-level $match replaces its element. */
+function preserveRootFocus(root) {
+	const focusable = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]";
+	let previous = null;
+	let active = null;
+	let focusIndex = -1;
+	onBeforeUpdate(() => {
+		previous = root.value;
+		active = previous?.ownerDocument.activeElement ?? null;
+		focusIndex = previous !== null && active !== null && active !== previous && previous.contains(active) ? Array.from(previous.querySelectorAll(focusable)).indexOf(active) : -1;
+	});
+	onUpdated(() => {
+		const next = root.value;
+		if (previous === null || next === null || previous === next) return;
+		(active === previous ? next : active?.isConnected === true && next.contains(active) ? active : focusIndex >= 0 ? next.querySelectorAll(focusable)[focusIndex] : void 0)?.focus?.({ preventScroll: true });
+	});
+}
+/** Vue does not promise a `v-for` ref array in source order, and the host does. */
+function inDocumentOrder(elements) {
+	return [...elements].sort((a, b) => (a.compareDocumentPosition(b) & 4) !== 0 ? -1 : 1);
+}
+/** Slot content flattened to the elements Vue mounted for it, descending through fragments. */
+function slottedElements(nodes) {
+	const elements = [];
+	for (const node of nodes) if (node.type === Fragment && Array.isArray(node.children)) elements.push(...slottedElements(node.children));
+	else if (node.el instanceof Element) elements.push(node.el);
+	return elements;
+}
 /**
 * The controller host, built from Vue refs, effects, and lifecycle. Reads and writes reach the
-* component's own refs, so a controller's change renders as any other Vue change does, and the
-* effects and listeners it opens close when the component unmounts.
+* component's own refs, so a controller's change renders as any other Vue change does. Vue
+* hooks cover mount/unmount; a shared native observer also detects external root detachment
+* and reinsertion without treating an in-tree move as a new connection.
 */
-function useComponentHost(controller, options) {
+function useComponentHost(controllerLoader, options) {
 	const { root, dispatch, props, refs = {}, state = {}, computed: computedValues = {} } = options;
+	const vueSlots = useSlots();
+	const component = getCurrentInstance();
+	const report = (error) => {
+		const handler = component?.appContext.config.errorHandler;
+		if (handler === void 0) queueMicrotask(() => {
+			throw error;
+		});
+		else handler(error, component?.proxy ?? null, "HTML Next controller");
+	};
+	const controllerDiagnostic = (code, reason) => {
+		const edge = options.controllerSource;
+		const source = edge?.definition ? new URL(edge.definition, document.baseURI).href : void 0;
+		const url = new URL(edge?.specifier ?? "", source ?? document.baseURI).href;
+		const message = code === "HJ002" ? "Controller module `" + url + "` must default-export a function." : "Controller module `" + url + "` failed to load: " + (reason instanceof Error ? reason.message : String(reason)) + ".";
+		return Object.assign(/* @__PURE__ */ new Error((source === void 0 ? "" : source + ": ") + code + ": " + message), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code,
+				message,
+				...source === void 0 ? {} : { source }
+			})
+		});
+	};
+	let controllerModule;
+	const loadControllerModule = () => controllerModule ??= Promise.resolve().then(controllerLoader).then((candidate) => {
+		if (typeof candidate?.default !== "function") throw controllerDiagnostic("HJ002");
+		return candidate;
+	}).catch((error) => {
+		if (error instanceof Error && "diagnostic" in error) throw error;
+		throw controllerDiagnostic("HJ001", error);
+	});
 	const stops = [];
-	const read = (name) => Object.hasOwn(state, name) ? state[name].value : Object.hasOwn(computedValues, name) ? computedValues[name].value : props?.[name];
+	const read = (name) => Object.hasOwn(state, name) ? state[name].value : Object.hasOwn(computedValues, name) ? computedValues[name].value : props?.value[name];
 	const host = {
 		get element() {
 			return root.value;
 		},
+		get root() {
+			return root.value;
+		},
 		state: new Proxy({}, {
 			get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 			set: (_target, name, value) => {
@@ -23,12 +117,16 @@ function useComponentHost(controller, options) {
 		}),
 		refs: Object.defineProperties({}, Object.fromEntries(Object.entries(refs).map(([name, ref]) => [name, {
 			enumerable: true,
-			get: () => ref.value
+			get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : ref.value
 		}]))),
-		elements: new Proxy({}, { get: (_target, name) => {
-			if (typeof name !== "string" || root.value === null) return void 0;
-			return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-		} }),
+		slots: new Proxy({}, {
+			get: (_target, name) => {
+				if (typeof name !== "string") return void 0;
+				const render = vueSlots[name];
+				return render === void 0 ? [] : slottedElements(render());
+			},
+			has: (_target, name) => typeof name === "string" && vueSlots[name] !== void 0
+		}),
 		signal(initialValue) {
 			const value = shallowRef(initialValue);
 			return {
@@ -53,25 +151,58 @@ function useComponentHost(controller, options) {
 			stops.push(stop);
 			return stop;
 		},
-		on(event, listener) {
-			const element = root.value;
-			element?.addEventListener(event, listener);
-			const off = () => element?.removeEventListener(event, listener);
-			stops.push(off);
-			return off;
-		},
 		dispatch
 	};
 	let cleanup;
 	let started;
+	let stopObserving;
+	let connection = 0;
+	let connected = false;
+	let unmounted = false;
+	const disconnect = () => {
+		if (!connected) return;
+		connected = false;
+		connection += 1;
+		for (const stop of stops.splice(0)) stop();
+		cleanup?.();
+		cleanup = void 0;
+	};
+	const synchronize = () => {
+		if (unmounted) return;
+		if (root.value?.isConnected !== true) {
+			disconnect();
+			return;
+		}
+		if (connected) return;
+		connected = true;
+		const current = ++connection;
+		started = loadControllerModule().then(async (loaded) => {
+			if (!connected || current !== connection) return loaded;
+			const result = await loaded.default(host);
+			if (typeof result === "function") {
+				if (!connected || current !== connection) result();
+				else cleanup = result;
+			}
+			return loaded;
+		});
+		started.catch(report);
+	};
 	onMounted(() => {
-		started = Promise.resolve(controller?.(host)).then((result) => {
-			if (typeof result === "function") cleanup = result;
+		if (root.value === null) return;
+		stopObserving = observeConnection(root.value, () => {
+			try {
+				synchronize();
+			} catch (error) {
+				report(error);
+			}
 		});
+		synchronize();
 	});
+	onUpdated(synchronize);
 	onBeforeUnmount(() => {
-		for (const stop of stops.splice(0)) stop();
-		if (typeof cleanup === "function") cleanup();
+		unmounted = true;
+		stopObserving?.();
+		disconnect();
 	});
 	/** `ready` settles once the controller has started; a method exposed by the component awaits it. */
 	return {
@@ -79,14 +210,24 @@ function useComponentHost(controller, options) {
 		ready: () => started
 	};
 }
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+var HtmlDiagnosticError = class extends Error {
+	diagnostic;
+	constructor(code, message) {
+		super(code + ": " + message);
+		this.name = "HtmlDiagnosticError";
+		this.diagnostic = Object.freeze({
+			code,
+			message
+		});
+	}
+};
+/** Reports declared CustomEvents to Vue and dispatches them through the DOM. */
 function createDispatch(root, emit, options = {}) {
 	const { declared = {}, checks = {}, modeled = [] } = options;
 	const reported = /* @__PURE__ */ new Map();
 	return (name, detail) => {
 		const check = checks[name];
-		if (detail !== void 0 && check !== void 0 && !check(detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-		emit?.(name, detail);
+		if (detail !== void 0 && check !== void 0 && !check(detail)) throw new HtmlDiagnosticError("HR002", `Event \`${name}\` detail does not satisfy its declared type.`);
 		if (detail !== null && typeof detail === "object") for (const prop of modeled) {
 			if (!(prop in detail)) continue;
 			const value = detail[prop];
@@ -95,13 +236,15 @@ function createDispatch(root, emit, options = {}) {
 			reported.set(prop, value);
 			emit?.(`update:${prop}`, value);
 		}
-		return root.value?.dispatchEvent(new CustomEvent(name, {
+		const event = new CustomEvent(name, {
 			bubbles: true,
 			composed: true,
 			...declared[name],
 			detail
-		})) ?? true;
+		});
+		if (check !== void 0) emit?.(name, event);
+		return root.value?.dispatchEvent(event) ?? true;
 	};
 }
 //#endregion
-export { useComponentHost as n, createDispatch as t };
+export { preserveRootFocus as n, useComponentHost as r, createDispatch as t };