@absolutejs/absolute 0.20.0-beta.0 → 0.20.0-beta.2

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/handlers/html.ts

@@ -17,6 +17,7 @@ import { detectCurrentFramework } from '../frameworkDetect';
 import type { ScriptInfo } from '../../../types/client';
 import { restoreDOMChanges, snapshotDOMChanges } from '../domTracker';
 import { hmrState } from '../hmrState';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
 
 const parseHTMLMessage = (
 	html: string | { body?: string; head?: string } | null | undefined
@@ -57,11 +58,10 @@ const handleHTMLBodyWithHead = (
 
 	const cssResult = processCSSLinks(htmlHead);
 
-	const updateBodyAfterCSS = () => {
+	const updateBodyAfterCSS = () =>
 		updateHTMLBody(htmlBody, htmlDomState, document.body);
-	};
 
-	waitForCSSAndUpdate(cssResult, updateBodyAfterCSS);
+	return waitForCSSAndUpdate(cssResult, updateBodyAfterCSS);
 };
 
 const handleHTMLBodyWithoutHead = (
@@ -72,17 +72,21 @@ const handleHTMLBodyWithoutHead = (
 	if (!container) {
 		sessionStorage.removeItem('__HMR_ACTIVE__');
 
-		return;
+		return Promise.resolve();
 	}
 
-	updateHTMLBodyDirect(htmlBody, htmlDomState, container);
+	const updated = updateHTMLBodyDirect(htmlBody, htmlDomState, container);
 	restoreDOMState(container, htmlDomState);
+
+	return updated;
 };
 
 export const handleHTMLUpdate = (message: {
 	data: {
 		html?: string | { body?: string; head?: string } | null;
+		serverDuration?: number;
 	};
+	timestamp?: number;
 }) => {
 	const htmlFrameworkCheck = detectCurrentFramework();
 	if (htmlFrameworkCheck !== 'html') {
@@ -94,6 +98,7 @@ export const handleHTMLUpdate = (message: {
 	}
 
 	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
+	const clientStart = performance.now();
 
 	const htmlDomState = saveDOMState(document.body);
 	const { body: htmlBody, head: htmlHead } = parseHTMLMessage(
@@ -102,18 +107,48 @@ export const handleHTMLUpdate = (message: {
 
 	if (!htmlBody) {
 		sessionStorage.removeItem('__HMR_ACTIVE__');
+		sendAbsoluteHmrTiming({
+			clientStart,
+			kind: 'html',
+			outcome: 'failed',
+			serverMs: message.data.serverDuration,
+			updateId: message.timestamp
+		});
 
 		return;
 	}
 
-	if (htmlHead) {
-		handleHTMLBodyWithHead(htmlBody, htmlHead, htmlDomState);
-	} else {
-		handleHTMLBodyWithoutHead(htmlBody, htmlDomState);
-	}
+	const update = htmlHead
+		? handleHTMLBodyWithHead(htmlBody, htmlHead, htmlDomState)
+		: handleHTMLBodyWithoutHead(htmlBody, htmlDomState);
+	void update.then(
+		() => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'html',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+		},
+		() => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'html',
+				outcome: 'reloaded',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+			window.location.reload();
+		}
+	);
 };
 export const handleScriptUpdate = (message: {
-	data: { framework?: string; scriptPath?: string };
+	data: {
+		framework?: string;
+		scriptPath?: string;
+		serverDuration?: number;
+	};
+	timestamp?: number;
 }) => {
 	const scriptFramework = message.data.framework;
 	const currentFw = detectCurrentFramework();
@@ -139,13 +174,30 @@ export const handleScriptUpdate = (message: {
 	});
 
 	const cacheBustedPath = `${scriptPath}?t=${Date.now()}`;
+	const clientStart = performance.now();
 	import(cacheBustedPath)
-		.then(() => true)
+		.then(() => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'script',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+
+			return true;
+		})
 		.catch((err: unknown) => {
 			console.error(
 				'[HMR] Script hot-reload failed, falling back to page reload:',
 				err
 			);
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'script',
+				outcome: 'reloaded',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
 			window.location.reload();
 		});
 };
@@ -172,8 +224,9 @@ const updateHTMLBody = (
 	container: HTMLElement
 ) => {
 	if (!container) {
-		return;
+		return Promise.resolve();
 	}
+	const { promise, resolve } = Promise.withResolvers<void>();
 
 	const savedState = saveHTMLState();
 	const domSnapshot = snapshotDOMChanges(container);
@@ -222,8 +275,11 @@ const updateHTMLBody = (
 			}
 			reExecuteScripts(container, newScripts, oldInlineScripts);
 		}
+		sessionStorage.removeItem('__HMR_ACTIVE__');
+		resolve();
 	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
+
+	return promise;
 };
 
 const replaceInlineScript = (script: Element) => {
@@ -245,6 +301,7 @@ const updateHTMLBodyDirect = (
 	htmlDomState: ReturnType<typeof saveDOMState>,
 	container: HTMLElement
 ) => {
+	const { promise, resolve } = Promise.withResolvers<void>();
 	const savedState = saveHTMLState();
 	const domSnapshot = snapshotDOMChanges(container);
 
@@ -282,8 +339,11 @@ const updateHTMLBodyDirect = (
 		});
 
 		reExecuteInlineScripts(container, oldInlineScripts);
+		sessionStorage.removeItem('__HMR_ACTIVE__');
+		resolve();
 	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
+
+	return promise;
 };
 
 /* Shared helpers for HTML body updates */

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

@@ -16,6 +16,7 @@ import { patchHeadInPlace } from '../headPatch';
 import { detectCurrentFramework } from '../frameworkDetect';
 import { type HTMXSavedState, type ScriptInfo } from '../../../types/client';
 import { hmrState } from '../hmrState';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
 
 const parseHTMXMessage = (
 	html: string | { body?: string; head?: string } | null | undefined
@@ -52,23 +53,26 @@ const handleHTMXBodyUpdate = (
 	htmxHead: string | null,
 	htmxDomState: ReturnType<typeof saveDOMState>
 ) => {
-	const updateHTMXBodyAfterCSS = () => {
+	const updateHTMXBodyAfterCSS = () =>
 		updateHTMXBody(htmxBody, htmxDomState, document.body);
-	};
 
 	if (htmxHead) {
 		applyHeadPatch(htmxHead);
+
 		const cssResult = processCSSLinks(htmxHead);
-		waitForCSSAndUpdate(cssResult, updateHTMXBodyAfterCSS);
-	} else {
-		updateHTMXBodyAfterCSS();
+
+		return waitForCSSAndUpdate(cssResult, updateHTMXBodyAfterCSS);
 	}
+
+	return updateHTMXBodyAfterCSS();
 };
 
 export const handleHTMXUpdate = (message: {
 	data: {
 		html?: string | { body?: string; head?: string } | null;
+		serverDuration?: number;
 	};
+	timestamp?: number;
 }) => {
 	const htmxFrameworkCheck = detectCurrentFramework();
 	if (htmxFrameworkCheck !== 'htmx') return;
@@ -78,6 +82,7 @@ export const handleHTMXUpdate = (message: {
 	}
 
 	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
+	const clientStart = performance.now();
 
 	const htmxDomState = saveDOMState(document.body);
 	const { body: htmxBody, head: htmxHead } = parseHTMXMessage(
@@ -86,11 +91,37 @@ export const handleHTMXUpdate = (message: {
 
 	if (!htmxBody) {
 		sessionStorage.removeItem('__HMR_ACTIVE__');
+		sendAbsoluteHmrTiming({
+			clientStart,
+			kind: 'htmx',
+			outcome: 'failed',
+			serverMs: message.data.serverDuration,
+			updateId: message.timestamp
+		});
 
 		return;
 	}
 
-	handleHTMXBodyUpdate(htmxBody, htmxHead, htmxDomState);
+	void handleHTMXBodyUpdate(htmxBody, htmxHead, htmxDomState).then(
+		() => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'htmx',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+		},
+		() => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'htmx',
+				outcome: 'reloaded',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+			window.location.reload();
+		}
+	);
 };
 
 const cloneHmrListenerElements = (container: HTMLElement) => {
@@ -169,7 +200,8 @@ const updateHTMXBody = (
 	htmxDomState: ReturnType<typeof saveDOMState>,
 	container: HTMLElement
 ) => {
-	if (!container) return;
+	if (!container) return Promise.resolve();
+	const { promise, resolve } = Promise.withResolvers<void>();
 
 	const countSpan = container.querySelector('#count');
 	const countValue = countSpan
@@ -218,8 +250,11 @@ const updateHTMXBody = (
 		if (window.htmx) {
 			window.htmx.process(container);
 		}
+		sessionStorage.removeItem('__HMR_ACTIVE__');
+		resolve();
 	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
+
+	return promise;
 };
 
 /* Shared helpers */

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

@@ -6,9 +6,18 @@ import type {} from '../../../types/globals';
 
 import { hideErrorOverlay } from '../errorOverlay';
 import { detectCurrentFramework } from '../frameworkDetect';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
+import { swapCSSStylesheet } from '../cssUtils';
+
+const reloadReactPage = () => {
+	const url = new URL(window.location.href);
+	url.searchParams.set('__absolute_hmr', Date.now().toString());
+	window.location.replace(url.href);
+};
 
 export const handleReactUpdate = (message: {
 	data: {
+		fastRefreshSupported?: boolean;
 		hasCSSChanges?: boolean;
 		hasComponentChanges?: boolean;
 		manifest?: Record<string, string>;
@@ -16,6 +25,7 @@ export const handleReactUpdate = (message: {
 		primarySource?: string;
 		serverDuration?: number;
 	};
+	timestamp?: number;
 }) => {
 	const currentFramework = detectCurrentFramework();
 	if (currentFramework !== 'react') return;
@@ -24,52 +34,99 @@ export const handleReactUpdate = (message: {
 	const hasCSSChanges = message.data.hasCSSChanges === true;
 	const cssPath =
 		message.data.manifest && message.data.manifest.ReactExampleCSS;
-
 	if (!hasComponentChanges && hasCSSChanges && cssPath) {
-		reloadReactCSS(cssPath);
+		const clientStart = performance.now();
+		void reloadReactCSS(cssPath).then((applied) => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'css',
+				outcome: applied ? 'applied' : 'failed',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+		});
 
 		return;
 	}
+	if (message.data.fastRefreshSupported === false) {
+		const { pageModuleUrl } = message.data;
+		const remount = window.__ABS_REACT_REMOUNT__;
+		if (pageModuleUrl && remount) {
+			applyRemountImport(
+				pageModuleUrl,
+				remount,
+				message.data.serverDuration,
+				message.timestamp
+			);
+		} else {
+			const clientStart = performance.now();
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'component',
+				outcome: 'reloaded',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+			reloadReactPage();
+		}
 
+		return;
+	}
 	const refreshRuntime = window.$RefreshRuntime$;
 	const { serverDuration } = message.data;
 	const { pageModuleUrl } = message.data;
 
 	if (pageModuleUrl && refreshRuntime) {
-		applyRefreshImport(pageModuleUrl, refreshRuntime, serverDuration);
+		applyRefreshImport(
+			pageModuleUrl,
+			refreshRuntime,
+			serverDuration,
+			message.timestamp
+		);
 
 		return;
 	}
 
 	// No module URL — shouldn't happen, but reload as safety fallback
+	const clientStart = performance.now();
+	sendAbsoluteHmrTiming({
+		clientStart,
+		kind: 'component',
+		outcome: 'reloaded',
+		serverMs: message.data.serverDuration,
+		updateId: message.timestamp
+	});
 	window.location.reload();
 };
 
-const sendTiming = (clientStart: number, serverDuration?: number) => {
-	if (window.__HMR_WS__) {
-		const clientMs = Math.round(performance.now() - clientStart);
-		const total = (serverDuration ?? 0) + clientMs;
-		window.__HMR_WS__.send(
-			JSON.stringify({ duration: total, type: 'hmr-timing' })
-		);
-	}
+const finishUpdate = (
+	clientStart: number,
+	serverDuration?: number,
+	updateId?: number
+) => {
+	sendAbsoluteHmrTiming({
+		clientStart,
+		kind: 'component',
+		serverMs: serverDuration,
+		updateId
+	});
 	if (window.__ERROR_BOUNDARY__) {
 		window.__ERROR_BOUNDARY__.reset();
-	} else {
-		hideErrorOverlay();
 	}
+	hideErrorOverlay();
 };
 
 const applyRefreshImport = (
 	moduleUrl: string,
 	refreshRuntime: { performReactRefresh: () => unknown },
-	serverDuration?: number
+	serverDuration?: number,
+	updateId?: number
 ) => {
 	const clientStart = performance.now();
 	import(`${moduleUrl}?t=${Date.now()}`)
 		.then(() => {
 			refreshRuntime.performReactRefresh();
-			sendTiming(clientStart, serverDuration);
+			finishUpdate(clientStart, serverDuration, updateId);
 
 			return undefined;
 		})
@@ -78,31 +135,56 @@ const applyRefreshImport = (
 				'[HMR] React Fast Refresh failed, falling back to reload:',
 				err
 			);
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'component',
+				outcome: 'reloaded',
+				serverMs: serverDuration,
+				updateId
+			});
 			window.location.reload();
 		});
 };
 
-const reloadReactCSS = (cssPath: string) => {
-	const existingCSSLinks = document.head.querySelectorAll<HTMLLinkElement>(
-		'link[rel="stylesheet"]'
-	);
-	existingCSSLinks.forEach((link) => {
-		const href = link.getAttribute('href');
-		if (!href) {
-			return;
-		}
+const applyRemountImport = (
+	moduleUrl: string,
+	remount: (module: Record<string, unknown>) => void,
+	serverDuration?: number,
+	updateId?: number
+) => {
+	const clientStart = performance.now();
+	import(`${moduleUrl}?t=${Date.now()}`)
+		.then((module) => {
+			remount(module);
+			finishUpdate(clientStart, serverDuration, updateId);
+
+			return undefined;
+		})
+		.catch((err) => {
+			console.warn(
+				'[HMR] React remount failed, falling back to reload:',
+				err
+			);
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'component',
+				outcome: 'reloaded',
+				serverMs: serverDuration,
+				updateId
+			});
+			reloadReactPage();
+		});
+};
+
+const reloadReactCSS = (cssPath: string) =>
+	swapCSSStylesheet(cssPath, (href) => {
 		const hrefBase = (href.split('?')[0] ?? '').split('/').pop() ?? '';
 		const cssPathBase =
 			(cssPath.split('?')[0] ?? '').split('/').pop() ?? '';
-		if (
+
+		return (
 			hrefBase === cssPathBase ||
 			href.includes('react-example') ||
 			cssPathBase.includes(hrefBase)
-		) {
-			const newHref = `${
-				cssPath + (cssPath.includes('?') ? '&' : '?')
-			}t=${Date.now()}`;
-			link.href = newHref;
-		}
+		);
 	});
-};