@absolutejs/absolute 0.19.0-beta.999 → 0.20.0-beta.1

package/dist/dev/client/cssUtils.ts

@@ -149,34 +149,90 @@ const findManifestHref = (
 	return null;
 };
 
+const replaceStylesheetLink = (
+	existingLink: HTMLLinkElement,
+	newHref: string
+) => {
+	const replacement = existingLink.cloneNode(true);
+	if (!(replacement instanceof HTMLLinkElement)) {
+		return Promise.resolve(false);
+	}
+	const { promise, resolve } = Promise.withResolvers<boolean>();
+	let settled = false;
+	const finish = (applied: boolean) => {
+		if (settled) return;
+		settled = true;
+		if (applied) existingLink.remove();
+		else replacement.remove();
+		resolve(applied);
+	};
+	replacement.onload = () => finish(true);
+	replacement.onerror = () => finish(false);
+	replacement.href = newHref;
+	existingLink.after(replacement);
+	setTimeout(() => {
+		if (replacement.sheet) finish(true);
+	}, CSS_SHEET_READY_TIMEOUT_MS);
+	setTimeout(
+		() => finish(Boolean(replacement.sheet)),
+		CSS_MAX_PARSE_TIMEOUT_MS
+	);
+
+	return promise;
+};
+
 const updateStylesheetLink = (
 	link: Element,
 	manifest: Record<string, string>
 ) => {
-	if (!(link instanceof HTMLLinkElement)) return;
+	if (!(link instanceof HTMLLinkElement)) return Promise.resolve(true);
 	const href = link.getAttribute('href');
-	if (!href || href.includes('htmx.min.js')) return;
+	if (!href || href.includes('htmx.min.js')) return Promise.resolve(true);
 
 	let newHref: string | null = null;
 	if (manifest) {
 		const baseName = getCSSBaseName(href);
 		newHref = findManifestHref(manifest, baseName);
 	}
+	const currentUrl = new URL(href, window.location.href);
+	if (!newHref && currentUrl.origin !== window.location.origin) {
+		return Promise.resolve(true);
+	}
 
+	let replacementHref: string;
 	if (newHref && newHref !== href) {
-		link.href = `${newHref}?t=${Date.now()}`;
+		replacementHref = `${newHref}?t=${Date.now()}`;
 	} else {
-		const url = new URL(href, window.location.origin);
-		url.searchParams.set('t', Date.now().toString());
-		link.href = url.toString();
+		currentUrl.searchParams.set('t', Date.now().toString());
+		replacementHref = currentUrl.toString();
 	}
+
+	return replaceStylesheetLink(link, replacementHref);
 };
 
 export const reloadCSSStylesheets = (manifest: Record<string, string>) => {
-	const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
-	stylesheets.forEach((link) => {
-		updateStylesheetLink(link, manifest);
-	});
+	const stylesheets = Array.from(
+		document.querySelectorAll('link[rel="stylesheet"]')
+	);
+
+	return Promise.all(
+		stylesheets.map((link) => updateStylesheetLink(link, manifest))
+	).then((results) => results.every(Boolean));
+};
+
+export const swapCSSStylesheet = (
+	cssUrl: string,
+	matches: (href: string) => boolean
+) => {
+	const existingLink = Array.from(
+		document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+	).find((link) => matches(link.getAttribute('href') ?? ''));
+	if (!existingLink) return Promise.resolve(false);
+
+	return replaceStylesheetLink(
+		existingLink,
+		`${cssUrl}${cssUrl.includes('?') ? '&' : '?'}t=${Date.now()}`
+	);
 };
 
 const createCSSLoadPromise = (
@@ -268,44 +324,45 @@ const chainRAF = (depth: number, callback: () => void) => {
    activates new CSS, removes old CSS. Handles first-update delay. */
 export const waitForCSSAndUpdate = (
 	cssResult: CSSUpdateResult,
-	updateBody: () => void
+	updateBody: () => void | Promise<void>
 ) => {
 	const { linksToActivate, linksToRemove, linksToWaitFor } = cssResult;
-
-	if (linksToWaitFor.length > 0) {
-		void Promise.all(linksToWaitFor).then(() => {
-			setTimeout(() => {
-				chainRAF(RAF_BATCH_COUNT, () => {
-					updateBody();
-					activateLinks(linksToActivate);
+	const { promise, reject, resolve } = Promise.withResolvers<void>();
+	const doUpdate = () => {
+		chainRAF(RAF_BATCH_COUNT, () => {
+			let updateResult: void | Promise<void>;
+			try {
+				updateResult = updateBody();
+				activateLinks(linksToActivate);
+			} catch (error) {
+				reject(error);
+
+				return;
+			}
+			void Promise.resolve(updateResult).then(
+				() => {
 					requestAnimationFrame(() => {
 						removeLinks(linksToRemove);
-						if (hmrState.isFirstHMRUpdate) {
-							hmrState.isFirstHMRUpdate = false;
-						}
+						hmrState.isFirstHMRUpdate = false;
+						resolve();
 					});
-				});
-			}, DOM_UPDATE_DELAY_MS);
-
-			return undefined;
-		});
-
-		return;
-	}
-
-	const doUpdate = function () {
-		chainRAF(RAF_BATCH_COUNT, () => {
-			updateBody();
-			requestAnimationFrame(() => {
-				removeLinks(linksToRemove);
-			});
+				},
+				(error: unknown) => reject(error)
+			);
 		});
 	};
-
-	if (hmrState.isFirstHMRUpdate) {
-		hmrState.isFirstHMRUpdate = false;
-		setTimeout(doUpdate, DOM_UPDATE_DELAY_MS);
+	const scheduleUpdate = () => {
+		if (hmrState.isFirstHMRUpdate || linksToWaitFor.length > 0) {
+			setTimeout(doUpdate, DOM_UPDATE_DELAY_MS);
+		} else {
+			doUpdate();
+		}
+	};
+	if (linksToWaitFor.length > 0) {
+		void Promise.all(linksToWaitFor).then(scheduleUpdate, reject);
 	} else {
-		doUpdate();
+		scheduleUpdate();
 	}
+
+	return promise;
 };

package/dist/dev/client/domState.ts

@@ -157,6 +157,8 @@ const resolveFormElement = (
 	name: string
 ) => {
 	if (isStandalone) {
+		// Annotation drives querySelector's generic `E` (downstream needs
+		// HTMLInputElement, not the default Element).
 		const element: HTMLInputElement | null = document.querySelector(
 			`input[name="${name}"], textarea[name="${name}"], select[name="${name}"]`
 		);

package/dist/dev/client/errorOverlay.ts

@@ -108,7 +108,7 @@ const buildLocationSection = (
 
 	if (lineText) {
 		const codeBlock = document.createElement('pre');
-		codeBlock.style.cssText = codeBlockStyle + 'margin-top:8px;';
+		codeBlock.style.cssText = `${codeBlockStyle}margin-top:8px;`;
 		codeBlock.textContent = lineText;
 		locSection.appendChild(codeBlock);
 	}
@@ -141,7 +141,7 @@ const buildStackSection = (stack: string | undefined, message: string) => {
 	label.textContent = 'Stack';
 	section.appendChild(label);
 	const pre = document.createElement('pre');
-	pre.style.cssText = codeBlockStyle + 'max-height:300px;overflow-y:auto;';
+	pre.style.cssText = `${codeBlockStyle}max-height:300px;overflow-y:auto;`;
 	pre.textContent = cleaned;
 	section.appendChild(pre);
 
@@ -155,7 +155,8 @@ const collectLoadedScripts = () => {
 	const scripts = Array.from(document.querySelectorAll('script[src]'));
 	const urls: string[] = [];
 	for (const script of scripts) {
-		const src = (script as HTMLScriptElement).src;
+		if (!(script instanceof HTMLScriptElement)) continue;
+		const { src } = script;
 		if (!src) continue;
 		// Filter to JS we serve — vendor chunks, generated indexes, root
 		// chunk-XXX.js outputs. Skip user-pasted CDN scripts and the like.
@@ -182,8 +183,8 @@ const buildDiagnosticsSection = () => {
 
 	const lines: string[] = [];
 	lines.push(`Page URL: ${window.location.href}`);
-	const ua = navigator.userAgent;
-	lines.push(`User agent: ${ua}`);
+	const { userAgent } = navigator;
+	lines.push(`User agent: ${userAgent}`);
 	const scripts = collectLoadedScripts();
 	if (scripts.length > 0) {
 		lines.push('');
@@ -195,7 +196,7 @@ const buildDiagnosticsSection = () => {
 	}
 
 	const pre = document.createElement('pre');
-	pre.style.cssText = codeBlockStyle + 'max-height:200px;overflow-y:auto;';
+	pre.style.cssText = `${codeBlockStyle}max-height:200px;overflow-y:auto;`;
 	pre.textContent = lines.join('\n');
 	section.appendChild(pre);
 
@@ -374,12 +375,12 @@ const renderOverlay = () => {
 		} catch {
 			// Clipboard API requires a user gesture + permissions; fall back
 			// to a textarea + execCommand so the button still does something.
-			const ta = document.createElement('textarea');
-			ta.value = text;
-			ta.style.position = 'fixed';
-			ta.style.opacity = '0';
-			document.body.appendChild(ta);
-			ta.select();
+			const textarea = document.createElement('textarea');
+			textarea.value = text;
+			textarea.style.position = 'fixed';
+			textarea.style.opacity = '0';
+			document.body.appendChild(textarea);
+			textarea.select();
 			try {
 				document.execCommand('copy');
 				copy.textContent = 'Copied';
@@ -389,7 +390,7 @@ const renderOverlay = () => {
 			} catch {
 				copy.textContent = 'Copy failed';
 			}
-			document.body.removeChild(ta);
+			document.body.removeChild(textarea);
 		}
 	};
 	footer.appendChild(copy);

package/dist/dev/client/handlers/angularHmrShim.ts

@@ -29,35 +29,25 @@ type AngularHmrBus = {
 };
 
 declare global {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- Window augmentation requires interface merging
 	interface Window {
 		__angularHmr?: AngularHmrBus;
 	}
-	// eslint-disable-next-line no-var
+
 	var __angularHmr: AngularHmrBus | undefined;
 }
 
-const installAngularHmrShim = (): AngularHmrBus => {
+const installAngularHmrShim = () => {
 	const listeners = new Map<AngularHmrEvent, Set<AngularHmrListener>>();
 
 	const bus: AngularHmrBus = {
-		on(event, cb) {
-			let set = listeners.get(event);
-			if (!set) {
-				set = new Set();
-				listeners.set(event, set);
-			}
-			set.add(cb);
-		},
-		off(event, cb) {
-			listeners.get(event)?.delete(cb);
-		},
 		dispatch(event, data) {
 			const set = listeners.get(event);
 			if (!set) return;
 			// Snapshot before iterating — handlers could remove themselves.
-			for (const cb of [...set]) {
+			for (const callback of [...set]) {
 				try {
-					cb(data);
+					callback(data);
 				} catch (err) {
 					console.error(
 						'[absolutejs] angular HMR listener threw',
@@ -65,6 +55,17 @@ const installAngularHmrShim = (): AngularHmrBus => {
 					);
 				}
 			}
+		},
+		off(event, callback) {
+			listeners.get(event)?.delete(callback);
+		},
+		on(event, callback) {
+			let set = listeners.get(event);
+			if (!set) {
+				set = new Set();
+				listeners.set(event, set);
+			}
+			set.add(callback);
 		}
 	};
 
@@ -75,14 +76,13 @@ if (typeof globalThis !== 'undefined' && !globalThis.__angularHmr) {
 	globalThis.__angularHmr = installAngularHmrShim();
 }
 
-export const dispatchAngularComponentUpdate = (
+export const dispatchAngularComponentRemount = (
 	data: AngularComponentUpdate
 ) => {
-	globalThis.__angularHmr?.dispatch('angular:component-update', data);
+	globalThis.__angularHmr?.dispatch('angular:component-remount', data);
 };
-
-export const dispatchAngularComponentRemount = (
+export const dispatchAngularComponentUpdate = (
 	data: AngularComponentUpdate
 ) => {
-	globalThis.__angularHmr?.dispatch('angular:component-remount', data);
+	globalThis.__angularHmr?.dispatch('angular:component-update', data);
 };

package/dist/dev/client/handlers/angularRemount.ts

@@ -76,6 +76,19 @@ type LiveInstance = {
 	tNode: TNode;
 };
 
+const isComponentClass = (value: unknown): value is ComponentClass =>
+	typeof value === 'function';
+
+const isTNode = (value: unknown): value is TNode =>
+	typeof value === 'object' &&
+	value !== null &&
+	typeof Reflect.get(value, 'index') === 'number';
+
+const isTView = (value: unknown): value is TView =>
+	typeof value === 'object' &&
+	value !== null &&
+	typeof Reflect.get(value, 'bindingStartIndex') === 'number';
+
 /* Walk the DOM looking for elements whose component instance is of
  * `Class`. Each match resolves to its parent LView + slot index via
  * the LContext stored on the host element under `__ngContext__`.
@@ -83,37 +96,38 @@ type LiveInstance = {
  * We walk DOM (not Angular's TRACKED_LVIEWS map) because (a)
  * TRACKED_LVIEWS isn't exported and (b) the DOM walk is bounded by
  * page size, which is fast enough for HMR. */
-const findLiveInstances = (Class: ComponentClass): LiveInstance[] => {
+const findLiveInstances = (Class: ComponentClass) => {
 	const results: LiveInstance[] = [];
 	const elements = document.querySelectorAll('*');
-	for (const el of Array.from(elements)) {
-		const ctx = (el as unknown as Record<string, unknown>).__ngContext__;
+	for (const element of Array.from(elements)) {
+		const ctx = Reflect.get(element, '__ngContext__');
 		if (typeof ctx !== 'object' || ctx === null) continue;
-		const lContext = ctx as { lView?: LView; nodeIndex?: number };
-		if (!lContext.lView || lContext.nodeIndex === undefined) continue;
+		const lView = Reflect.get(ctx, 'lView');
+		const nodeIndex = Reflect.get(ctx, 'nodeIndex');
+		if (!isLView(lView) || typeof nodeIndex !== 'number') continue;
 
-		const slot = lContext.lView[lContext.nodeIndex];
+		const slot = lView[nodeIndex];
 		if (!isLView(slot)) continue;
-		const ownLView = slot as LView;
-		const instance = ownLView[CONTEXT];
+		const instance = slot[CONTEXT];
 		if (!(instance instanceof Class)) continue;
 
-		const tNode = ownLView[T_HOST] as TNode | null;
-		const host = ownLView[HOST] as Element | null;
-		if (!tNode || !host) continue;
+		const tNode = slot[T_HOST];
+		const host = slot[HOST];
+		if (!isTNode(tNode) || !(host instanceof Element)) continue;
 
 		// Avoid double-recording the same LView (multiple DOM elements
 		// can land in the same component, all sharing __ngContext__)
-		if (results.some((r) => r.oldLView === ownLView)) continue;
+		if (results.some((result) => result.oldLView === slot)) continue;
 
 		results.push({
 			host,
-			oldLView: ownLView,
-			parentLView: lContext.lView,
-			slotIndex: lContext.nodeIndex,
+			oldLView: slot,
+			parentLView: lView,
+			slotIndex: nodeIndex,
 			tNode
 		});
 	}
+
 	return results;
 };
 
@@ -129,15 +143,14 @@ const createFreshAt = (
 	newLView: LView;
 	componentRef: ReturnType<AngularCoreNamespace['createComponent']>;
 } | null => {
-	const w = window as unknown as {
-		__ANGULAR_APP__?: { injector: unknown };
-	};
-	const envInjector = w.__ANGULAR_APP__?.injector;
+	const envInjector = window.__ANGULAR_APP__
+		? Reflect.get(window.__ANGULAR_APP__, 'injector')
+		: undefined;
 	if (!envInjector) return null;
 
 	const ref = core.createComponent(Class, {
-		hostElement,
-		environmentInjector: envInjector
+		environmentInjector: envInjector,
+		hostElement
 	});
 
 	const newLView = ref.hostView._lView;
@@ -146,10 +159,11 @@ const createFreshAt = (
 		// internal createComponent path. If it is missing, our slot
 		// constants might be off; bail to caller for fallback.
 		ref.destroy();
+
 		return null;
 	}
 
-	return { instance: ref.instance, newLView, componentRef: ref };
+	return { componentRef: ref, instance: ref.instance, newLView };
 };
 
 /* Splice `newLView` into `parentLView` at `slotIndex`, replacing
@@ -168,23 +182,19 @@ const spliceLViewIntoParent = (
 	target: LiveInstance,
 	newLView: LView,
 	newInstance: unknown
-): void => {
+) => {
 	const { parentLView, oldLView, slotIndex, tNode } = target;
 	replaceLViewInTree(parentLView, oldLView, newLView, slotIndex);
 	newLView[PARENT] = parentLView;
 	newLView[T_HOST] = tNode;
 
 	const oldInstance = oldLView[CONTEXT];
-	const tNodeWithDirectiveRange = tNode as TNode & {
-		directiveStart?: number;
-		directiveEnd?: number;
-	};
-	const start = tNodeWithDirectiveRange.directiveStart;
-	const end = tNodeWithDirectiveRange.directiveEnd;
+	const start = Reflect.get(tNode, 'directiveStart');
+	const end = Reflect.get(tNode, 'directiveEnd');
 	if (typeof start === 'number' && typeof end === 'number') {
-		for (let i = start; i < end; i++) {
-			if (parentLView[i] === oldInstance) {
-				parentLView[i] = newInstance;
+		for (let index = start; index < end; index++) {
+			if (parentLView[index] === oldInstance) {
+				parentLView[index] = newInstance;
 			}
 		}
 	}
@@ -194,9 +204,9 @@ const spliceLViewIntoParent = (
  * listeners, and `inject(DestroyRef).onDestroy(...)` callbacks all
  * fire. Then mark the LView as destroyed so any subsequent
  * tree-walk skips it. */
-const teardownOldLView = (oldLView: LView): void => {
-	const oldTView = oldLView[TVIEW] as TView | null;
-	if (oldTView) {
+const teardownOldLView = (oldLView: LView) => {
+	const oldTView = oldLView[TVIEW];
+	if (isTView(oldTView)) {
 		executeOnDestroys(oldTView, oldLView);
 		processCleanups(oldTView, oldLView);
 	}
@@ -221,25 +231,35 @@ const teardownOldLView = (oldLView: LView): void => {
  * `def.inputs` metadata format (modern Angular):
  *   - `{ propName: 'classFieldName' }` (simple alias)
  *   - `{ propName: ['publicName', 'classFieldName', transformFn?] }` */
-const copyInputsFromOldToNew = (
-	oldInstance: unknown,
-	newInstance: unknown
-): void => {
+const copyInputsFromOldToNew = (oldInstance: unknown, newInstance: unknown) => {
 	if (!oldInstance || !newInstance) return;
-	const def = (newInstance as { constructor?: { ɵcmp?: unknown } })
-		.constructor?.ɵcmp as { inputs?: Record<string, unknown> } | undefined;
-	const inputs = def?.inputs;
-	if (!inputs) return;
+	if (
+		(typeof oldInstance !== 'object' &&
+			typeof oldInstance !== 'function') ||
+		(typeof newInstance !== 'object' && typeof newInstance !== 'function')
+	) {
+		return;
+	}
+	const constructor = Reflect.get(newInstance, 'constructor');
+	const definition =
+		typeof constructor === 'function'
+			? Reflect.get(constructor, 'ɵcmp')
+			: undefined;
+	if (typeof definition !== 'object' || definition === null) return;
+	const inputs = Reflect.get(definition, 'inputs');
+	if (typeof inputs !== 'object' || inputs === null) return;
 
 	// Modern Angular inputs format (since v17ish): the OBJECT KEY is
 	// the class property name; the value is either a string (binding
 	// name) or `[bindingName, flags, transformFn?]`. So the class
 	// field name is just `Object.keys(inputs)`.
 	for (const classField of Object.keys(inputs)) {
-		const oldRec = oldInstance as Record<string, unknown>;
-		const newRec = newInstance as Record<string, unknown>;
-		if (classField in oldRec) {
-			newRec[classField] = oldRec[classField];
+		if (classField in oldInstance) {
+			Reflect.set(
+				newInstance,
+				classField,
+				Reflect.get(oldInstance, classField)
+			);
 		}
 	}
 };
@@ -275,7 +295,7 @@ export const remountComponentClass = async (
 	core: AngularCoreNamespace,
 	className: string
 ): Promise<RemountResult> => {
-	let FreshClass: ComponentClass = Class;
+	let FreshClass = Class;
 	try {
 		// `applyMetadata` from a recent fastHmr build returns a `_Fresh`
 		// class with the new constructor + field initializers + the
@@ -289,13 +309,15 @@ export const remountComponentClass = async (
 			namespaces,
 			...locals
 		]);
-		if (typeof returned === 'function') {
-			FreshClass = returned as ComponentClass;
+		if (isComponentClass(returned)) {
+			FreshClass = returned;
 		}
 	} catch (err) {
 		return {
 			className,
-			error: `applyMetadata threw: ${(err as Error).message}`,
+			error: `applyMetadata threw: ${
+				err instanceof Error ? err.message : String(err)
+			}`,
 			remounted: 0,
 			skipped: 0
 		};
@@ -343,11 +365,8 @@ export const remountComponentClass = async (
 		// fresh creation. Without this tick, a remounted component
 		// shows default field values until the user interacts and
 		// triggers a stray CD elsewhere.
-		const w = window as unknown as {
-			__ANGULAR_APP__?: { tick?: () => void };
-		};
 		try {
-			w.__ANGULAR_APP__?.tick?.();
+			window.__ANGULAR_APP__?.tick();
 		} catch (err) {
 			console.error(
 				'[absolutejs] post-remount tick threw — partial state',

package/dist/dev/client/handlers/angularRemountWiring.ts

@@ -9,7 +9,6 @@ import type {} from '../../../types/globals';
 import { remountComponentClass, type RemountResult } from './angularRemount';
 
 declare global {
-	// eslint-disable-next-line no-var
 	var __absAngularRemount:
 		| ((
 				Class: new (...args: unknown[]) => unknown,
@@ -44,7 +43,7 @@ declare global {
 
 let installed = false;
 
-export const installAngularRemountGlobal = (): void => {
+export const installAngularRemountGlobal = () => {
 	if (installed) return;
 	if (typeof globalThis === 'undefined') return;
 	globalThis.__absAngularRemount = remountComponentClass;