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

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

@@ -7,8 +7,20 @@ import {
 	isRuntimeErrorOverlay,
 	showErrorOverlay
 } from '../errorOverlay';
+import { sendAbsoluteHmrTiming } from '../hmrTiming';
 
-export const handleFullReload = () => {
+export const handleFullReload = (message?: {
+	data: { serverDuration?: number };
+	timestamp?: number;
+}) => {
+	const clientStart = performance.now();
+	sendAbsoluteHmrTiming({
+		clientStart,
+		kind: 'full-reload',
+		outcome: 'reloaded',
+		serverMs: message?.data.serverDuration,
+		updateId: message?.timestamp
+	});
 	setTimeout(() => {
 		window.location.reload();
 	}, REBUILD_RELOAD_DELAY_MS);
@@ -33,7 +45,18 @@ export const handleManifest = (message: {
 	window.__HMR_MODULE_UPDATES__ = [];
 };
 
-const HMR_FRAMEWORKS = ['angular', 'react', 'vue', 'svelte', 'html', 'htmx'];
+const HMR_FRAMEWORKS = [
+	'angular',
+	'assets',
+	'ember',
+	'html',
+	'htmx',
+	'react',
+	'styles',
+	'svelte',
+	'tailwind',
+	'vue'
+];
 
 const mergeRecord = (
 	source: Record<string, string | number>,
@@ -115,12 +138,9 @@ export const handleRebuildComplete = (message: {
 
 	if (
 		message.data.affectedFrameworks &&
-		!message.data.affectedFrameworks.includes('angular') &&
-		!message.data.affectedFrameworks.includes('react') &&
-		!message.data.affectedFrameworks.includes('html') &&
-		!message.data.affectedFrameworks.includes('htmx') &&
-		!message.data.affectedFrameworks.includes('vue') &&
-		!message.data.affectedFrameworks.includes('svelte')
+		!message.data.affectedFrameworks.some((framework) =>
+			HMR_FRAMEWORKS.includes(framework)
+		)
 	) {
 		const url = new URL(window.location.href);
 		url.searchParams.set('_cb', Date.now().toString());

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')
 		);
 	}
 
@@ -340,23 +320,26 @@ export const handleSvelteUpdate = (message: {
 				}
 				window.__HMR_PRESERVED_STATE__ = undefined;
 
-				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;
 			})
 			.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,
@@ -39,6 +44,8 @@ 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
@@ -77,6 +84,7 @@ const hideConnectionLostBanner = () => {
 
 // Initialize HMR globals
 if (typeof window !== 'undefined') {
+	window.__ABS_HMR_TARGET__ = absoluteHmrClientTarget();
 	installAngularRemountGlobal();
 	if (!window.__HMR_MANIFEST__) {
 		window.__HMR_MANIFEST__ = {};
@@ -119,6 +127,7 @@ const hmrUpdateTypes = new Set([
 	'angular:component-update',
 	'angular:component-remount',
 	'angular:rebootstrap',
+	'angular-update',
 	'react-update',
 	'html-update',
 	'htmx-update',
@@ -134,6 +143,7 @@ type HMRMessage = {
 		affectedFrameworks?: string[];
 		column?: number;
 		error?: string;
+		fastRefreshSupported?: boolean;
 		file?: string;
 		framework?: string;
 		hasCSSChanges?: boolean;
@@ -149,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;
@@ -208,12 +232,13 @@ const handleHMRMessage = (message: HMRMessage) => {
 			const { data } = message;
 			if (isRecord(data)) {
 				const id = Reflect.get(data, 'id');
-				const timestamp = Reflect.get(data, 'timestamp');
 				if (typeof id !== 'string') break;
 				dispatchAngularComponentUpdate({
 					id,
 					timestamp:
-						typeof timestamp === 'number' ? timestamp : Date.now()
+						typeof message.timestamp === 'number'
+							? message.timestamp
+							: Date.now()
 				});
 			}
 			break;
@@ -230,12 +255,13 @@ const handleHMRMessage = (message: HMRMessage) => {
 			const { data } = message;
 			if (isRecord(data)) {
 				const id = Reflect.get(data, 'id');
-				const timestamp = Reflect.get(data, 'timestamp');
 				if (typeof id !== 'string') break;
 				dispatchAngularComponentRemount({
 					id,
 					timestamp:
-						typeof timestamp === 'number' ? timestamp : Date.now()
+						typeof message.timestamp === 'number'
+							? message.timestamp
+							: Date.now()
 				});
 			}
 			break;
@@ -278,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;
@@ -311,6 +342,7 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 		wsc.send(
 			JSON.stringify({
 				framework: currentFramework,
+				target: absoluteHmrClientTarget(),
 				type: 'ready'
 			})
 		);

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' }));
+};

package/dist/dev/serverBootstrap.js

@@ -18,19 +18,28 @@ var removeEntryCopy = (path) => {
     unlinkSync(path);
   } catch {}
 };
-for (const name of readdirSync(entryDir)) {
-  if (!name.startsWith(copyPrefix) || !name.endsWith(entryExtension)) {
-    continue;
+var isHotReevaluation = globalThis.__absoluteEntryCopies !== undefined;
+if (!isHotReevaluation) {
+  for (const name of readdirSync(entryDir)) {
+    if (!name.startsWith(copyPrefix) || !name.endsWith(entryExtension)) {
+      continue;
+    }
+    removeEntryCopy(join(entryDir, name));
   }
-  removeEntryCopy(join(entryDir, name));
 }
-var bootstrapCopy = join(entryDir, `${copyPrefix}${process.pid}-bootstrap${entryExtension}`);
+var bootstrapSequence = (globalThis.__absoluteEntryBootstrapSequence ?? 0) + 1;
+globalThis.__absoluteEntryBootstrapSequence = bootstrapSequence;
+var bootstrapCopy = join(entryDir, `${copyPrefix}${process.pid}-bootstrap-${bootstrapSequence}${entryExtension}`);
 copyFileSync(entryPath, bootstrapCopy);
-var entryCopies = new Set([bootstrapCopy]);
+var entryCopies = globalThis.__absoluteEntryCopies ?? new Set;
+entryCopies.add(bootstrapCopy);
 globalThis.__absoluteEntryCopies = entryCopies;
-process.on("exit", () => {
-  for (const path of entryCopies) {
-    removeEntryCopy(path);
-  }
-});
+if (!globalThis.__absoluteEntryCleanupRegistered) {
+  globalThis.__absoluteEntryCleanupRegistered = true;
+  process.on("exit", () => {
+    for (const path of entryCopies) {
+      removeEntryCopy(path);
+    }
+  });
+}
 await import(bootstrapCopy);