@absolutejs/absolute 0.20.0-beta.177 → 0.20.0-beta.178

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

@@ -7,6 +7,10 @@ import type {} from '../../../types/globals';
 import { hideErrorOverlay } from '../errorOverlay';
 import { detectCurrentFramework } from '../frameworkDetect';
 import { sendAbsoluteHmrTiming } from '../hmrTiming';
+import {
+	createReactUpdateQueue,
+	type ReactUpdateTiming
+} from './reactUpdateQueue';
 
 const reloadReactPage = () => {
 	const url = new URL(window.location.href);
@@ -14,6 +18,68 @@ const reloadReactPage = () => {
 	window.location.replace(url.href);
 };
 
+const isModuleRecord = (value: unknown): value is Record<string, unknown> =>
+	typeof value === 'object' && value !== null;
+
+const reportReloaded = (timings: ReactUpdateTiming[]) => {
+	for (const timing of timings)
+		sendAbsoluteHmrTiming({
+			clientStart: timing.clientStart,
+			kind: 'component',
+			outcome: 'reloaded',
+			serverMs: timing.serverDuration,
+			updateId: timing.updateId
+		});
+};
+
+/* One queue per page: an update that arrives while another is still
+ * applying waits for it, and the newest modules are the ones applied (see
+ * reactUpdateQueue.ts). */
+const reactUpdates = createReactUpdateQueue({
+	apply: (update, modules) => {
+		if (update.kind === 'remount') {
+			const [module] = modules;
+			const remount = window.__ABS_REACT_REMOUNT__;
+			if (!remount || !isModuleRecord(module))
+				throw new Error('React remount is unavailable');
+			remount(module);
+
+			return;
+		}
+		const refreshRuntime = window.$RefreshRuntime$;
+		if (!refreshRuntime)
+			throw new Error('React Fast Refresh runtime is unavailable');
+		// Every edited module has run by now, so a page that now renders a
+		// new child refreshes with it.
+		refreshRuntime.performReactRefresh();
+	},
+	importModule: (url) => import(url),
+	onApplied: (_update, timings) => {
+		for (const timing of timings)
+			sendAbsoluteHmrTiming({
+				clientStart: timing.clientStart,
+				kind: 'component',
+				serverMs: timing.serverDuration,
+				updateId: timing.updateId
+			});
+		if (window.__ERROR_BOUNDARY__) {
+			window.__ERROR_BOUNDARY__.reset();
+		}
+		hideErrorOverlay();
+	},
+	onFailed: (update, timings, error) => {
+		console.warn(
+			update.kind === 'remount'
+				? '[HMR] React remount failed, falling back to reload:'
+				: '[HMR] React Fast Refresh failed, falling back to reload:',
+			error
+		);
+		reportReloaded(timings);
+		if (update.kind === 'remount') reloadReactPage();
+		else window.location.reload();
+	}
+});
+
 export const handleReactUpdate = (message: {
 	data: {
 		fastRefreshSupported?: boolean;
@@ -30,6 +96,8 @@ export const handleReactUpdate = (message: {
 }) => {
 	const currentFramework = detectCurrentFramework();
 	if (currentFramework !== 'react') return;
+	const clientStart = performance.now();
+	const { serverDuration } = message.data;
 
 	// BUN-REACT-REFRESH-LEGACY: the remount/reload fallback for a dev server on
 	// stock Bun, which cannot emit React Fast Refresh registrations. Remove it,
@@ -47,30 +115,25 @@ export const handleReactUpdate = (message: {
 			pageUrls && componentKey
 				? pageUrls[componentKey]
 				: message.data.pageModuleUrl;
-		const remount = window.__ABS_REACT_REMOUNT__;
-		if (remountUrl && remount) {
-			applyRemountImport(
-				remountUrl,
-				remount,
-				message.data.serverDuration,
-				message.timestamp
+		if (remountUrl && window.__ABS_REACT_REMOUNT__) {
+			reactUpdates.enqueue(
+				{
+					kind: 'remount',
+					moduleUrls: [remountUrl],
+					serverDuration,
+					updateId: message.timestamp
+				},
+				clientStart
 			);
 		} else {
-			const clientStart = performance.now();
-			sendAbsoluteHmrTiming({
-				clientStart,
-				kind: 'component',
-				outcome: 'reloaded',
-				serverMs: message.data.serverDuration,
-				updateId: message.timestamp
-			});
+			reportReloaded([
+				{ clientStart, serverDuration, updateId: message.timestamp }
+			]);
 			reloadReactPage();
 		}
 
 		return;
 	}
-	const refreshRuntime = window.$RefreshRuntime$;
-	const { serverDuration } = message.data;
 	const { pageModuleUrl } = message.data;
 	const fallbackUrls = pageModuleUrl ? [pageModuleUrl] : [];
 	const moduleUrls =
@@ -78,105 +141,23 @@ export const handleReactUpdate = (message: {
 			? message.data.moduleUrls
 			: fallbackUrls;
 
-	if (moduleUrls.length > 0 && refreshRuntime) {
-		applyRefreshImport(
-			moduleUrls,
-			refreshRuntime,
-			serverDuration,
-			message.timestamp
+	if (moduleUrls.length > 0 && window.$RefreshRuntime$) {
+		reactUpdates.enqueue(
+			{
+				kind: 'refresh',
+				moduleUrls,
+				serverDuration,
+				updateId: message.timestamp
+			},
+			clientStart
 		);
 
 		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
-	});
+	reportReloaded([
+		{ clientStart, serverDuration, updateId: message.timestamp }
+	]);
 	window.location.reload();
 };
-
-const finishUpdate = (
-	clientStart: number,
-	serverDuration?: number,
-	updateId?: number
-) => {
-	sendAbsoluteHmrTiming({
-		clientStart,
-		kind: 'component',
-		serverMs: serverDuration,
-		updateId
-	});
-	if (window.__ERROR_BOUNDARY__) {
-		window.__ERROR_BOUNDARY__.reset();
-	}
-	hideErrorOverlay();
-};
-
-const applyRefreshImport = (
-	moduleUrls: string[],
-	refreshRuntime: { performReactRefresh: () => unknown },
-	serverDuration?: number,
-	updateId?: number
-) => {
-	const clientStart = performance.now();
-	const stamp = Date.now();
-	// Every edited module has to run before the refresh, or a page that
-	// now renders a new child refreshes without it.
-	Promise.all(moduleUrls.map((url) => import(`${url}?t=${stamp}`)))
-		.then(() => {
-			refreshRuntime.performReactRefresh();
-			finishUpdate(clientStart, serverDuration, updateId);
-
-			return undefined;
-		})
-		.catch((err) => {
-			console.warn(
-				'[HMR] React Fast Refresh failed, falling back to reload:',
-				err
-			);
-			sendAbsoluteHmrTiming({
-				clientStart,
-				kind: 'component',
-				outcome: 'reloaded',
-				serverMs: serverDuration,
-				updateId
-			});
-			window.location.reload();
-		});
-};
-
-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();
-		});
-};

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

@@ -0,0 +1,153 @@
+import type {} from '../../../types/globals';
+/* Applies React HMR updates one at a time, newest last.
+ *
+ * Each update re-imports its modules and then refreshes (or remounts) the
+ * page. Run unserialized, two updates for one save raced: both imports were
+ * in flight together, each refreshed whenever its own import settled, and a
+ * cache-busting stamp taken from `Date.now()` could repeat within a
+ * millisecond, handing the second update the module instance the first had
+ * already evaluated. Here an update that arrives while another is applying
+ * waits; updates that pile up meanwhile merge into one, and an update whose
+ * import settles after a newer one arrived is not applied on its own: the
+ * newer update re-imports every module of both and applies once. */
+
+export type ReactUpdateKind = 'refresh' | 'remount';
+
+export type ReactUpdate = {
+	kind: ReactUpdateKind;
+	moduleUrls: string[];
+	serverDuration?: number;
+	updateId?: number;
+};
+
+export type ReactUpdateTiming = {
+	clientStart: number;
+	serverDuration?: number;
+	updateId?: number;
+};
+
+export type ReactUpdateRunner = {
+	apply: (update: ReactUpdate, modules: unknown[]) => void;
+	importModule: (url: string) => Promise<unknown>;
+	now?: () => number;
+	onApplied: (update: ReactUpdate, timings: ReactUpdateTiming[]) => void;
+	onFailed: (
+		update: ReactUpdate,
+		timings: ReactUpdateTiming[],
+		error: unknown
+	) => void;
+};
+
+type Batch = {
+	timings: ReactUpdateTiming[];
+	update: ReactUpdate;
+};
+
+/* A remount renders one page module, so the newer one wins. A refresh
+ * needs every edited module re-run: keep the union, the newer update's
+ * URLs first (its first URL is the primary one). */
+const mergeUpdates = (older: ReactUpdate, newer: ReactUpdate) =>
+	older.kind === 'refresh' && newer.kind === 'refresh'
+		? {
+				...newer,
+				moduleUrls: [
+					...new Set([...newer.moduleUrls, ...older.moduleUrls])
+				]
+			}
+		: newer;
+
+const mergeBatches = (older: Batch, newer: Batch): Batch => ({
+	timings: [...older.timings, ...newer.timings],
+	update: mergeUpdates(older.update, newer.update)
+});
+
+const withStamp = (url: string, stamp: number) =>
+	`${url}${url.includes('?') ? '&' : '?'}t=${stamp}`;
+
+export const createReactUpdateQueue = (runner: ReactUpdateRunner) => {
+	const now = runner.now ?? (() => Date.now());
+	let pending: Batch | undefined;
+	let running = false;
+	let lastStamp = 0;
+
+	// Strictly increasing: a repeated stamp re-imports nothing.
+	const nextStamp = () => {
+		lastStamp = Math.max(lastStamp + 1, now());
+
+		return lastStamp;
+	};
+
+	const importAll = (update: ReactUpdate) => {
+		const stamp = nextStamp();
+
+		return Promise.all(
+			update.moduleUrls.map((url) =>
+				runner.importModule(withStamp(url, stamp))
+			)
+		);
+	};
+
+	const applyBatch = async (batch: Batch) => {
+		let modules: unknown[];
+		try {
+			modules = await importAll(batch.update);
+		} catch (error) {
+			// A newer update may already fix what failed to load.
+			if (pending) {
+				pending = mergeBatches(batch, pending);
+
+				return;
+			}
+			runner.onFailed(batch.update, batch.timings, error);
+
+			return;
+		}
+		if (pending) {
+			// Superseded while loading: the newer update loads these modules
+			// again, at their newest version, and applies once.
+			pending = mergeBatches(batch, pending);
+
+			return;
+		}
+		try {
+			runner.apply(batch.update, modules);
+		} catch (error) {
+			runner.onFailed(batch.update, batch.timings, error);
+
+			return;
+		}
+		runner.onApplied(batch.update, batch.timings);
+	};
+
+	const drain = async () => {
+		while (pending) {
+			const batch = pending;
+			pending = undefined;
+			// eslint-disable-next-line no-await-in-loop -- one at a time on purpose
+			await applyBatch(batch);
+		}
+		running = false;
+	};
+
+	const enqueue = (update: ReactUpdate, clientStart: number) => {
+		const batch: Batch = {
+			timings: [
+				{
+					clientStart,
+					serverDuration: update.serverDuration,
+					updateId: update.updateId
+				}
+			],
+			update
+		};
+		pending = pending ? mergeBatches(pending, batch) : batch;
+		if (running) return;
+		running = true;
+		void drain();
+	};
+
+	return {
+		enqueue,
+		isIdle: () => !running
+	};
+};