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

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

@@ -9,43 +9,13 @@ import {
 	restoreScrollState
 } from '../domState';
 import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
+import { swapCSSStylesheet } from '../cssUtils';
 
 type SvelteHmrWindow = Window & {
 	__SVELTE_HMR_ACCEPT__?: Record<string, (mod: unknown) => void>;
 };
 
-/* Swap a stylesheet link by matching cssBaseName or framework name */
-const swapStylesheet = (
-	cssUrl: string,
-	cssBaseName: string,
-	framework: string
-) => {
-	let existingLink: HTMLLinkElement | null = null;
-	document
-		.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
-		.forEach((link) => {
-			const href = link.getAttribute('href') ?? '';
-			if (href.includes(cssBaseName) || href.includes(framework)) {
-				existingLink = link;
-			}
-		});
-
-	if (!existingLink) {
-		return;
-	}
-
-	const capturedExisting: HTMLLinkElement = existingLink;
-	const newLink = document.createElement('link');
-	newLink.rel = 'stylesheet';
-	newLink.href = `${cssUrl}?t=${Date.now()}`;
-	newLink.onload = () => {
-		if (capturedExisting && capturedExisting.parentNode) {
-			capturedExisting.remove();
-		}
-	};
-	document.head.appendChild(newLink);
-};
-
 const extractCountFromDOM = () => {
 	const countButton = document.querySelector('button');
 	if (!countButton || !countButton.textContent) {
@@ -222,17 +192,27 @@ export const handleSvelteUpdate = (message: {
 		sourceFile?: string;
 		updateType?: string;
 	};
+	timestamp?: number;
 }) => {
 	const svelteFrameworkCheck = detectCurrentFramework();
 	if (svelteFrameworkCheck !== 'svelte') return;
 
 	/* CSS-only update: hot-swap stylesheet, no remount needed */
 	if (message.data.updateType === 'css-only' && message.data.cssUrl) {
-		swapStylesheet(
+		const clientStart = performance.now();
+		const cssBaseName = message.data.cssBaseName || '';
+		void swapCSSStylesheet(
 			message.data.cssUrl,
-			message.data.cssBaseName || '',
-			'svelte'
-		);
+			(href) => href.includes(cssBaseName) || href.includes('svelte')
+		).then((applied) => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'css',
+				outcome: applied ? 'applied' : 'failed',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+		});
 
 		return;
 	}
@@ -255,10 +235,10 @@ export const handleSvelteUpdate = (message: {
 
 	/* CSS pre-update: swap stylesheet BEFORE importing to prevent FOUC */
 	if (message.data.cssUrl) {
-		swapStylesheet(
+		const cssBaseName = message.data.cssBaseName || '';
+		void swapCSSStylesheet(
 			message.data.cssUrl,
-			message.data.cssBaseName || '',
-			'svelte'
+			(href) => href.includes(cssBaseName) || href.includes('svelte')
 		);
 	}
 
@@ -273,32 +253,93 @@ export const handleSvelteUpdate = (message: {
 		const svelteWindow: SvelteHmrWindow = window;
 		const acceptRegistry = svelteWindow.__SVELTE_HMR_ACCEPT__;
 
-		// Save the OLD module's accept callback BEFORE importing.
-		const acceptFn = acceptRegistry?.[pageModuleUrl];
+		// Save the OLD module's accept callback BEFORE importing. The exact
+		// key is the broadcast `pageModuleUrl`; on the happy path it matches
+		// the key the module server registered. If it doesn't (the registry
+		// was repopulated under a slightly different URL key, or `bun --hot`
+		// re-evaluated the module and reset `__SVELTE_HMR_ACCEPT__`), fall back
+		// to a suffix/basename match so we still find the callback. Exact match
+		// always wins, so the happy path is unchanged.
+		let acceptFn = acceptRegistry?.[pageModuleUrl];
+		if (!acceptFn && acceptRegistry) {
+			const wantBase = pageModuleUrl.split('?')[0] ?? pageModuleUrl;
+			const hit = Object.keys(acceptRegistry).find(
+				(key) =>
+					key === wantBase ||
+					key.endsWith(wantBase) ||
+					wantBase.endsWith(key)
+			);
+			if (hit) acceptFn = acceptRegistry[hit];
+		}
 
 		import(modulePath)
 			.then((newModule) => {
+				let applied = false;
 				if (acceptFn) {
 					acceptFn(newModule);
+					applied = true;
 				}
 
-				if (
-					window.__HMR_WS__ &&
-					message.data.serverDuration !== undefined
-				) {
-					const clientMs = Math.round(
-						performance.now() - clientStart
-					);
-					const total = (message.data.serverDuration ?? 0) + clientMs;
-					window.__HMR_WS__.send(
-						JSON.stringify({ duration: total, type: 'hmr-timing' })
+				/* $.hmr_accept swaps component code in place but re-runs
+				 * the <script> body with the original mount props, so any
+				 * state seeded from a prop (e.g. a composable doing
+				 * $state(initialCount)) resets. Remount with the preserved
+				 * state merged into props — mirroring the bundled-fallback
+				 * bootstrap — so that state carries across (issue #41). */
+				const preserved = window.__HMR_PRESERVED_STATE__;
+				const remount = window.__SVELTE_REMOUNT__;
+				const hasPreserved =
+					preserved && Object.keys(preserved).length > 0;
+
+				if (applied) {
+					if (typeof remount === 'function' && hasPreserved) {
+						remount({
+							...(window.__INITIAL_PROPS__ ?? {}),
+							...preserved
+						});
+					}
+				} else if (typeof remount === 'function') {
+					/* Resilience fallback: no accept callback was found, so
+					 * `$.hmr` never wired the freshly imported module in. The
+					 * import warmed the module cache; remount the page with
+					 * merged props to actually apply the new code instead of
+					 * silently doing nothing. */
+					remount({
+						...(window.__INITIAL_PROPS__ ?? {}),
+						...(preserved ?? {})
+					});
+				} else {
+					/* Last resort: nothing can apply the update in place. */
+					console.warn(
+						'[HMR] Svelte accept callback missing and no remount available; reloading'
 					);
+					window.__HMR_PRESERVED_STATE__ = undefined;
+					window.location.reload();
+
+					return undefined;
+				}
+				window.__HMR_PRESERVED_STATE__ = undefined;
+
+				if (message.data.serverDuration !== undefined) {
+					sendAbsoluteHmrTiming({
+						clientStart,
+						kind: 'component',
+						serverMs: message.data.serverDuration,
+						updateId: message.timestamp
+					});
 				}
 
 				return undefined;
 			})
 			.catch((err: unknown) => {
 				console.warn('[HMR] Svelte HMR failed, reloading:', err);
+				sendAbsoluteHmrTiming({
+					clientStart,
+					kind: 'component',
+					outcome: 'reloaded',
+					serverMs: message.data.serverDuration,
+					updateId: message.timestamp
+				});
 				window.location.reload();
 			});
 

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

@@ -4,6 +4,8 @@ import type {} from '../../../types/globals';
 import type { VueComponentInstance, VueVNode } from '../../../types/vue';
 import { saveDOMState, restoreDOMState } from '../domState';
 import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
+import { swapCSSStylesheet } from '../cssUtils';
 
 /* Collect reactive value from a setup state entry into the target record */
 const collectSetupValue = (
@@ -67,38 +69,6 @@ const extractChildComponentState = (
 	walkVNode(instance.subTree, state);
 };
 
-/* Find an existing stylesheet link matching the given base name */
-const findMatchingStylesheetLink = (cssBaseName: string) => {
-	let found: HTMLLinkElement | null = null;
-	document
-		.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
-		.forEach((link) => {
-			const href = link.getAttribute('href') ?? '';
-			if (cssBaseName && href.includes(cssBaseName)) {
-				found = link;
-			}
-		});
-
-	return found;
-};
-
-/* Swap a stylesheet link with a new one, removing the old on load */
-const swapStylesheet = (cssUrl: string, cssBaseName: string) => {
-	const existingLink = findMatchingStylesheetLink(cssBaseName);
-	if (!existingLink) return;
-
-	const capturedExisting: HTMLLinkElement = existingLink;
-	const newLink = document.createElement('link');
-	newLink.rel = 'stylesheet';
-	newLink.href = `${cssUrl}?t=${Date.now()}`;
-	newLink.onload = function () {
-		if (capturedExisting && capturedExisting.parentNode) {
-			capturedExisting.remove();
-		}
-	};
-	document.head.appendChild(newLink);
-};
-
 /* Extract Vue reactive state from app instance */
 const extractVueAppState = (vuePreservedState: Record<string, unknown>) => {
 	if (!window.__VUE_APP__ || !window.__VUE_APP__._instance) return;
@@ -163,12 +133,26 @@ export const handleVueUpdate = (message: {
 		sourceFile?: string;
 		updateType?: string;
 	};
+	timestamp?: number;
 }) => {
 	const vueFrameworkCheck = detectCurrentFramework();
 	if (vueFrameworkCheck !== 'vue') return;
 
 	if (message.data.updateType === 'css-only' && message.data.cssUrl) {
-		swapStylesheet(message.data.cssUrl, message.data.cssBaseName || '');
+		const clientStart = performance.now();
+		const cssBaseName = message.data.cssBaseName || '';
+		void swapCSSStylesheet(
+			message.data.cssUrl,
+			(href) => Boolean(cssBaseName) && href.includes(cssBaseName)
+		).then((applied) => {
+			sendAbsoluteHmrTiming({
+				clientStart,
+				kind: 'css',
+				outcome: applied ? 'applied' : 'failed',
+				serverMs: message.data.serverDuration,
+				updateId: message.timestamp
+			});
+		});
 
 		return;
 	}
@@ -224,17 +208,13 @@ export const handleVueUpdate = (message: {
 				}
 				sessionStorage.removeItem('__HMR_ACTIVE__');
 
-				if (
-					window.__HMR_WS__ &&
-					message.data.serverDuration !== undefined
-				) {
-					const clientMs = Math.round(
-						performance.now() - clientStart
-					);
-					const total = (message.data.serverDuration ?? 0) + clientMs;
-					window.__HMR_WS__.send(
-						JSON.stringify({ duration: total, type: 'hmr-timing' })
-					);
+				if (message.data.serverDuration !== undefined) {
+					sendAbsoluteHmrTiming({
+						clientStart,
+						kind: 'component',
+						serverMs: message.data.serverDuration,
+						updateId: message.timestamp
+					});
 				}
 
 				return undefined;
@@ -242,6 +222,13 @@ export const handleVueUpdate = (message: {
 			.catch((err: unknown) => {
 				console.warn('[HMR] Vue HMR failed, reloading:', err);
 				sessionStorage.removeItem('__HMR_ACTIVE__');
+				sendAbsoluteHmrTiming({
+					clientStart,
+					kind: 'component',
+					outcome: 'reloaded',
+					serverMs: message.data.serverDuration,
+					updateId: message.timestamp
+				});
 				window.location.reload();
 			});
 
@@ -250,7 +237,11 @@ export const handleVueUpdate = (message: {
 
 	/* CSS pre-update: swap stylesheet BEFORE unmounting to prevent FOUC */
 	if (message.data.cssUrl) {
-		swapStylesheet(message.data.cssUrl, message.data.cssBaseName || '');
+		const cssBaseName = message.data.cssBaseName || '';
+		void swapCSSStylesheet(
+			message.data.cssUrl,
+			(href) => Boolean(cssBaseName) && href.includes(cssBaseName)
+		);
 	}
 
 	/* Unmount old Vue app but keep DOM visually intact during async import.

package/dist/dev/client/hmrClient.ts

@@ -12,6 +12,11 @@ import {
 	WEBSOCKET_NORMAL_CLOSURE
 } from './constants';
 import { detectCurrentFramework } from './frameworkDetect';
+import {
+	absoluteHmrClientTarget,
+	restoreAbsoluteHmrApply,
+	sendAbsoluteHmrTiming
+} from './hmrTiming';
 import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
 import {
 	dispatchAngularComponentRemount,
@@ -32,8 +37,54 @@ import {
 	handleRebuildError
 } from './handlers/rebuild';
 
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+	typeof value === 'object' && value !== null;
+
+const isStringRecord = (value: unknown): value is Record<string, string> =>
+	isRecord(value) &&
+	Object.values(value).every((entry) => typeof entry === 'string');
+
+restoreAbsoluteHmrApply();
+
+/* Lightweight "server disconnected" banner. When the dev server is
+ * genuinely down (process restarting or crashed) the browser would
+ * otherwise show its own blank "site can't be reached" page — this keeps
+ * a branded, self-explanatory notice on screen while the client polls
+ * `/hmr-status` and reloads on recovery. Kept separate from the compile
+ * error overlay so it never clobbers a build-error message. The
+ * `data-hmr-overlay` attribute exempts it from HMR DOM diffing. */
+const CONNECTION_LOST_BANNER_ID = 'absolutejs-connection-lost';
+const showConnectionLostBanner = () => {
+	if (typeof document === 'undefined' || !document.body) return;
+	if (document.getElementById(CONNECTION_LOST_BANNER_ID)) return;
+	const banner = document.createElement('div');
+	banner.id = CONNECTION_LOST_BANNER_ID;
+	banner.setAttribute('data-hmr-overlay', 'true');
+	banner.style.cssText = [
+		'position:fixed',
+		'left:0',
+		'right:0',
+		'bottom:0',
+		'z-index:2147483646',
+		'padding:10px 16px',
+		'font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace',
+		'color:#fff',
+		'background:#b91c1c',
+		'text-align:center',
+		'box-shadow:0 -2px 12px rgba(0,0,0,0.3)'
+	].join(';');
+	banner.textContent = 'AbsoluteJS · dev server disconnected — reconnecting…';
+	document.body.appendChild(banner);
+};
+const hideConnectionLostBanner = () => {
+	if (typeof document === 'undefined') return;
+	const banner = document.getElementById(CONNECTION_LOST_BANNER_ID);
+	if (banner && banner.parentNode) banner.parentNode.removeChild(banner);
+};
+
 // Initialize HMR globals
 if (typeof window !== 'undefined') {
+	window.__ABS_HMR_TARGET__ = absoluteHmrClientTarget();
 	installAngularRemountGlobal();
 	if (!window.__HMR_MANIFEST__) {
 		window.__HMR_MANIFEST__ = {};
@@ -76,6 +127,7 @@ const hmrUpdateTypes = new Set([
 	'angular:component-update',
 	'angular:component-remount',
 	'angular:rebootstrap',
+	'angular-update',
 	'react-update',
 	'html-update',
 	'htmx-update',
@@ -91,6 +143,7 @@ type HMRMessage = {
 		affectedFrameworks?: string[];
 		column?: number;
 		error?: string;
+		fastRefreshSupported?: boolean;
 		file?: string;
 		framework?: string;
 		hasCSSChanges?: boolean;
@@ -106,9 +159,23 @@ type HMRMessage = {
 		serverDuration?: number;
 		serverVersions?: Record<string, number>;
 	};
+	timestamp?: number;
 	type: string;
 };
 
+const handleStylesheetUpdate = (message: HMRMessage) => {
+	const clientStart = performance.now();
+	void reloadCSSStylesheets(message.data.manifest ?? {}).then((applied) => {
+		sendAbsoluteHmrTiming({
+			clientStart,
+			kind: 'css',
+			outcome: applied ? 'applied' : 'failed',
+			serverMs: message.data.serverDuration,
+			updateId: message.timestamp
+		});
+	});
+};
+
 const handleHMRMessage = (message: HMRMessage) => {
 	if (hmrUpdateTypes.has(message.type)) {
 		hmrState.isHMRUpdating = true;
@@ -162,15 +229,15 @@ const handleHMRMessage = (message: HMRMessage) => {
 			// `__ng_hmr_load` blocks (see hmrInjectionPlugin.ts)
 			// listen here and re-fetch the applyMetadata module.
 			hideErrorOverlay();
-			const data = message.data as
-				| { id?: string; timestamp?: number }
-				| undefined;
-			if (data && typeof data.id === 'string') {
+			const { data } = message;
+			if (isRecord(data)) {
+				const id = Reflect.get(data, 'id');
+				if (typeof id !== 'string') break;
 				dispatchAngularComponentUpdate({
-					id: data.id,
+					id,
 					timestamp:
-						typeof data.timestamp === 'number'
-							? data.timestamp
+						typeof message.timestamp === 'number'
+							? message.timestamp
 							: Date.now()
 				});
 			}
@@ -185,15 +252,15 @@ const handleHMRMessage = (message: HMRMessage) => {
 			// `__absAngularRemount` global wired in
 			// `installAngularRemountGlobal`.
 			hideErrorOverlay();
-			const data = message.data as
-				| { id?: string; timestamp?: number }
-				| undefined;
-			if (data && typeof data.id === 'string') {
+			const { data } = message;
+			if (isRecord(data)) {
+				const id = Reflect.get(data, 'id');
+				if (typeof id !== 'string') break;
 				dispatchAngularComponentRemount({
-					id: data.id,
+					id,
 					timestamp:
-						typeof data.timestamp === 'number'
-							? data.timestamp
+						typeof message.timestamp === 'number'
+							? message.timestamp
 							: Date.now()
 				});
 			}
@@ -209,17 +276,17 @@ const handleHMRMessage = (message: HMRMessage) => {
 			// to dynamic-import the fresh bundle URL — re-importing
 			// re-runs the destroy + bootstrapApplication block.
 			hideErrorOverlay();
-			const data = message.data as
-				| { manifest?: Record<string, string>; reason?: string }
-				| undefined;
-			if (data?.manifest) {
-				window.__HMR_MANIFEST__ = data.manifest;
+			const { data } = message;
+			if (isRecord(data) && isStringRecord(data.manifest)) {
+				const { manifest } = data;
+				window.__HMR_MANIFEST__ = manifest;
 			}
-			const w = window as Window & {
-				__ABS_ANGULAR_REBOOTSTRAP__?: () => Promise<void>;
-			};
-			if (typeof w.__ABS_ANGULAR_REBOOTSTRAP__ === 'function') {
-				w.__ABS_ANGULAR_REBOOTSTRAP__().catch((err) => {
+			const rebootstrap = Reflect.get(
+				window,
+				'__ABS_ANGULAR_REBOOTSTRAP__'
+			);
+			if (typeof rebootstrap === 'function') {
+				Promise.resolve(rebootstrap()).catch((err) => {
 					console.error(
 						'[absolutejs] angular:rebootstrap failed',
 						err
@@ -237,12 +304,17 @@ const handleHMRMessage = (message: HMRMessage) => {
 			handleRebuildError(message);
 			break;
 		case 'full-reload':
-			handleFullReload();
+			handleFullReload(message);
 			break;
 		case 'pong':
 			break;
 		case 'style-update':
-			reloadCSSStylesheets(message.data.manifest ?? {});
+			handleStylesheetUpdate(message);
+			break;
+		case 'angular-update':
+			if (detectCurrentFramework() === 'angular') {
+				handleStylesheetUpdate(message);
+			}
 			break;
 		default:
 			break;
@@ -263,12 +335,14 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 
 	wsc.onopen = function () {
 		hmrState.isConnected = true;
+		hideConnectionLostBanner();
 		sessionStorage.setItem('__HMR_CONNECTED__', 'true');
 
 		const currentFramework = detectCurrentFramework();
 		wsc.send(
 			JSON.stringify({
 				framework: currentFramework,
+				target: absoluteHmrClientTarget(),
 				type: 'ready'
 			})
 		);
@@ -305,6 +379,7 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 		}
 
 		if (event.code !== WEBSOCKET_NORMAL_CLOSURE) {
+			showConnectionLostBanner();
 			let attempts = 0;
 			hmrState.reconnectTimeout = setTimeout(function pollServer() {
 				attempts++;

package/dist/dev/client/hmrTiming.ts

@@ -0,0 +1,141 @@
+import type {} from '../../types/globals';
+import type {
+	HMRApplyKind,
+	HMRApplyOutcome,
+	HMRClientTarget
+} from '../../../types/messages';
+
+const MAX_RETAINED_HMR_APPLIES = 50;
+const HMR_APPLY_STORAGE_KEY = '__absolute_hmr_last_apply__';
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+	typeof value === 'object' && value !== null;
+
+const isHmrTarget = (value: unknown): value is HMRClientTarget =>
+	value === 'capacitor-android' ||
+	value === 'capacitor-ios' ||
+	value === 'capacitor-native' ||
+	value === 'web';
+
+const isHmrKind = (value: unknown): value is HMRApplyKind =>
+	value === 'component' ||
+	value === 'css' ||
+	value === 'full-reload' ||
+	value === 'html' ||
+	value === 'htmx' ||
+	value === 'script';
+
+const isHmrOutcome = (value: unknown): value is HMRApplyOutcome =>
+	value === 'applied' || value === 'failed' || value === 'reloaded';
+
+type HmrApply = NonNullable<Window['__ABS_HMR_LAST_APPLY__']>;
+
+const isHmrApply = (value: unknown): value is HmrApply =>
+	isRecord(value) &&
+	typeof value.clientMs === 'number' &&
+	typeof value.duration === 'number' &&
+	(value.kind === undefined || isHmrKind(value.kind)) &&
+	isHmrOutcome(value.outcome) &&
+	typeof value.serverMs === 'number' &&
+	isHmrTarget(value.target) &&
+	(value.updateId === undefined || typeof value.updateId === 'number');
+
+const getSessionStorage = () => {
+	const storage = Reflect.get(window, 'sessionStorage');
+	if (!isRecord(storage)) return undefined;
+
+	return storage;
+};
+
+const persistHmrApply = (timing: HmrApply) => {
+	try {
+		const storage = getSessionStorage();
+		const setItem = storage && Reflect.get(storage, 'setItem');
+		if (typeof setItem !== 'function') return;
+		Reflect.apply(setItem, storage, [
+			HMR_APPLY_STORAGE_KEY,
+			JSON.stringify(timing)
+		]);
+	} catch {
+		// Storage may be unavailable in sandboxed or privacy-restricted documents.
+	}
+};
+
+export const absoluteHmrClientTarget = () => {
+	const currentLocation = Reflect.get(globalThis, 'location');
+	if (typeof currentLocation === 'object' && currentLocation !== null) {
+		const search = Reflect.get(currentLocation, 'search');
+		if (typeof search === 'string') {
+			const marker = new URLSearchParams(search).get('__absolute_target');
+			if (marker === 'capacitor-android') return marker;
+			if (marker === 'capacitor-ios') return marker;
+		}
+	}
+	const capacitor = Reflect.get(globalThis, 'Capacitor');
+	if (!isRecord(capacitor)) return 'web';
+	const getPlatform = Reflect.get(capacitor, 'getPlatform');
+	const isNativePlatform = Reflect.get(capacitor, 'isNativePlatform');
+	const platform =
+		typeof getPlatform === 'function'
+			? Reflect.apply(getPlatform, capacitor, [])
+			: undefined;
+	if (platform === 'android') return 'capacitor-android';
+	if (platform === 'ios') return 'capacitor-ios';
+	if (
+		typeof isNativePlatform === 'function' &&
+		Reflect.apply(isNativePlatform, capacitor, []) === true
+	) {
+		return 'capacitor-native';
+	}
+
+	return 'web';
+};
+
+export const restoreAbsoluteHmrApply = () => {
+	try {
+		const storage = getSessionStorage();
+		const getItem = storage && Reflect.get(storage, 'getItem');
+		if (typeof getItem !== 'function') return;
+		const serialized = Reflect.apply(getItem, storage, [
+			HMR_APPLY_STORAGE_KEY
+		]);
+		if (typeof serialized !== 'string') return;
+		const timing: unknown = JSON.parse(serialized);
+		if (!isHmrApply(timing)) return;
+		window.__ABS_HMR_LAST_APPLY__ = timing;
+		window.__ABS_HMR_APPLIES__ = [timing];
+	} catch {
+		// A malformed or inaccessible entry should never affect HMR startup.
+	}
+};
+
+type SendHmrTimingOptions = {
+	clientStart: number;
+	kind?: HMRApplyKind;
+	outcome?: HMRApplyOutcome;
+	serverMs?: number;
+	updateId?: number;
+};
+
+export const sendAbsoluteHmrTiming = (options: SendHmrTimingOptions) => {
+	const clientMs = Math.round(performance.now() - options.clientStart);
+	const serverMs = options.serverMs ?? 0;
+	const timing = {
+		clientMs,
+		duration: serverMs + clientMs,
+		kind: options.kind,
+		outcome: options.outcome ?? 'applied',
+		serverMs,
+		target: absoluteHmrClientTarget(),
+		updateId: options.updateId
+	} satisfies NonNullable<Window['__ABS_HMR_LAST_APPLY__']>;
+	window.__ABS_HMR_LAST_APPLY__ = timing;
+	const applies = (window.__ABS_HMR_APPLIES__ ??= []);
+	applies.push(timing);
+	if (applies.length > MAX_RETAINED_HMR_APPLIES) {
+		applies.splice(0, applies.length - MAX_RETAINED_HMR_APPLIES);
+	}
+	persistHmrApply(timing);
+	if (!window.__HMR_WS__) return;
+	window.__HMR_WS__.send(JSON.stringify({ ...timing, type: 'hmr-timing' }));
+};