@absolutejs/absolute 0.20.0-beta.139 → 0.20.0-beta.140

package/dist/dev/client/hmrClient.ts

@@ -5,12 +5,15 @@ import type {} from '../../types/globals';
 import { hmrState } from './hmrState';
 import {
 	HMR_UPDATE_TIMEOUT_MS,
-	MAX_RECONNECT_ATTEMPTS,
 	PING_INTERVAL_MS,
-	RECONNECT_INITIAL_DELAY_MS,
-	RECONNECT_POLL_INTERVAL_MS,
 	WEBSOCKET_NORMAL_CLOSURE
 } from './constants';
+import {
+	RECONNECT_GIVE_UP_MS,
+	missedWhileDisconnected,
+	reconnectDelayMs,
+	type ServerSnapshot
+} from './reconnect';
 import { detectCurrentFramework } from './frameworkDetect';
 import {
 	absoluteHmrClientTarget,
@@ -103,11 +106,9 @@ const removeNativeSyncDevtools =
 		? () => undefined
 		: installAbsoluteNativeSyncDevtools();
 
-/* 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
+/* Lightweight "server disconnected" banner, shown while the socket is
+ * down (a dropped network or a restarting server) and the client reconnects.
+ * The page reloads on recovery only if it missed an update. 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';
@@ -130,7 +131,10 @@ const showConnectionLostBanner = () => {
 		'text-align:center',
 		'box-shadow:0 -2px 12px rgba(0,0,0,0.3)'
 	].join(';');
-	banner.textContent = 'AbsoluteJS · dev server disconnected — reconnecting…';
+	banner.textContent =
+		navigator.onLine === false
+			? 'AbsoluteJS · offline — reconnects when the network is back'
+			: 'AbsoluteJS · dev server disconnected — reconnecting…';
 	document.body.appendChild(banner);
 };
 const hideConnectionLostBanner = () => {
@@ -203,6 +207,7 @@ type HMRMessage = {
 		// BUN-REACT-REFRESH-LEGACY: false only on stock Bun (see handlers/react.ts).
 		fastRefreshSupported?: boolean;
 		file?: string;
+		lastBroadcastAt?: number;
 		framework?: string;
 		hasCSSChanges?: boolean;
 		hasComponentChanges?: boolean;
@@ -217,6 +222,7 @@ type HMRMessage = {
 		primarySource?: string;
 		scriptUrl?: string;
 		serverDuration?: number;
+		serverStartedAt?: number;
 		serverVersions?: Record<string, number>;
 	};
 	timestamp?: number;
@@ -381,8 +387,43 @@ const handleHMRMessage = (message: HMRMessage) => {
 	}
 };
 
-// Prevent multiple WebSocket connections
-if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
+// What the server said when this page last connected, and the newest update
+// the page received: on reconnecting, the page reloads only if it missed one.
+let serverSnapshot: ServerSnapshot | undefined;
+let lastReceivedAt = 0;
+let reconnectAttempt = 0;
+let disconnectedAt = 0;
+
+const scheduleReconnect = (connect: () => void) => {
+	if (hmrState.reconnectTimeout) clearTimeout(hmrState.reconnectTimeout);
+	if (!disconnectedAt) disconnectedAt = Date.now();
+	if (Date.now() - disconnectedAt > RECONNECT_GIVE_UP_MS) return;
+	// An offline browser waits for the network instead of spending attempts.
+	if (navigator.onLine === false) return;
+	hmrState.reconnectTimeout = setTimeout(
+		connect,
+		reconnectDelayMs(reconnectAttempt)
+	);
+	reconnectAttempt += 1;
+};
+
+const receivedSnapshot = (message: HMRMessage) => {
+	const after: ServerSnapshot = {
+		lastBroadcastAt: message.data.lastBroadcastAt,
+		serverStartedAt: message.data.serverStartedAt
+	};
+	const missed = missedWhileDisconnected(
+		serverSnapshot,
+		after,
+		lastReceivedAt
+	);
+	if (!serverSnapshot) lastReceivedAt = after.lastBroadcastAt ?? 0;
+	serverSnapshot = after;
+
+	return missed;
+};
+
+const connectHmrSocket = () => {
 	// Determine WebSocket URL
 	const wsHost = location.hostname;
 	const wsPort =
@@ -395,6 +436,8 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 
 	wsc.onopen = function () {
 		hmrState.isConnected = true;
+		reconnectAttempt = 0;
+		disconnectedAt = 0;
 		hideConnectionLostBanner();
 		sessionStorage.setItem('__HMR_CONNECTED__', 'true');
 
@@ -427,6 +470,20 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 			return;
 		}
 
+		if (message?.type === 'manifest' && receivedSnapshot(message)) {
+			// The server restarted or sent updates while this page was
+			// away; only a reload is sure to show the current build.
+			window.location.reload();
+
+			return;
+		}
+		if (
+			typeof message?.timestamp === 'number' &&
+			message.type !== 'manifest' &&
+			message.type !== 'connected' &&
+			message.type !== 'pong'
+		)
+			lastReceivedAt = Math.max(lastReceivedAt, message.timestamp);
 		handleHMRMessage(message);
 	};
 
@@ -440,37 +497,32 @@ 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++;
-				if (attempts > MAX_RECONNECT_ATTEMPTS) return;
-
-				fetch('/hmr-status', { cache: 'no-store' })
-					.then((res) => {
-						if (res.ok) {
-							window.location.reload();
-						} else {
-							hmrState.reconnectTimeout = setTimeout(
-								pollServer,
-								RECONNECT_POLL_INTERVAL_MS
-							);
-						}
-
-						return undefined;
-					})
-					.catch(() => {
-						hmrState.reconnectTimeout = setTimeout(
-							pollServer,
-							RECONNECT_POLL_INTERVAL_MS
-						);
-					});
-			}, RECONNECT_INITIAL_DELAY_MS);
+			scheduleReconnect(connectHmrSocket);
 		}
 	};
 
 	wsc.onerror = function () {
 		hmrState.isConnected = false;
 	};
+};
+
+// The network or the tab coming back is the moment to retry, not the next
+// backoff step.
+const reconnectNow = () => {
+	if (hmrState.isConnected || !disconnectedAt) return;
+	reconnectAttempt = 0;
+	if (hmrState.reconnectTimeout) clearTimeout(hmrState.reconnectTimeout);
+	hmrState.reconnectTimeout = null;
+	connectHmrSocket();
+};
+
+// Prevent multiple WebSocket connections
+if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
+	connectHmrSocket();
+	window.addEventListener('online', reconnectNow);
+	document.addEventListener('visibilitychange', () => {
+		if (document.visibilityState === 'visible') reconnectNow();
+	});
 
 	window.addEventListener('beforeunload', () => {
 		removeNativeSyncDevtools();

package/dist/dev/client/reconnect.ts

@@ -0,0 +1,43 @@
+import type {} from '../../types/globals';
+/* When the dev-server socket drops, the page used to poll for about 18
+   seconds and reload as soon as the server answered. On weak wifi every
+   network change became a full reload that refetched every stylesheet and
+   script and lost the page's state, and an outage longer than 18 seconds
+   left the page disconnected for good. Now the socket reconnects for as long
+   as the page is open, and the page reloads only when it missed something:
+   the server restarted, or the build changed while it was away. */
+
+export const RECONNECT_BASE_DELAY_MS = 500;
+export const RECONNECT_GIVE_UP_MS = 30 * 60_000;
+export const RECONNECT_MAX_DELAY_MS = 10_000;
+
+export const reconnectDelayMs = (attempt: number) =>
+	Math.min(RECONNECT_BASE_DELAY_MS * 2 ** attempt, RECONNECT_MAX_DELAY_MS);
+
+/* What the server says about itself when a socket connects. */
+export type ServerSnapshot = {
+	/** When the last update went out to connected pages. */
+	lastBroadcastAt?: number;
+	/** When this server process started; a new value means it restarted. */
+	serverStartedAt?: number;
+};
+
+/* Whether the page has to reload after reconnecting: the server restarted,
+   or it sent an update after the last one this page received. Without a
+   previous snapshot (the first connection) there is nothing to have missed;
+   a server that does not say when it started counts as restarted, which is
+   the old behavior. */
+export const missedWhileDisconnected = (
+	before: ServerSnapshot | undefined,
+	after: ServerSnapshot,
+	lastReceivedAt: number
+) => {
+	if (!before) return false;
+	if (
+		before.serverStartedAt === undefined ||
+		before.serverStartedAt !== after.serverStartedAt
+	)
+		return true;
+
+	return (after.lastBroadcastAt ?? 0) > lastReceivedAt;
+};

package/dist/index.js

@@ -25399,7 +25399,7 @@ var resolveJsxDevRuntimeCompatPath = () => {
   return `${lines.join(`
 `)}
 `;
-}, buildReactVendor = async (buildDir) => {
+}, buildReactVendor = async (buildDir, { production = false } = {}) => {
   const vendorDir = join47(buildDir, "react", "vendor");
   mkdirSync8(vendorDir, { recursive: true });
   const tmpDir = join47(buildDir, "_vendor_tmp");
@@ -25413,9 +25413,10 @@ var resolveJsxDevRuntimeCompatPath = () => {
     return entryPath;
   }));
   const result = await bunBuild3({
+    ...production ? { define: { "process.env.NODE_ENV": '"production"' } } : {},
     entrypoints,
     format: "esm",
-    minify: false,
+    minify: production ? { whitespace: true } : false,
     naming: "[name].[ext]",
     outdir: vendorDir,
     splitting: true,
@@ -26931,7 +26932,7 @@ ${offenders.map((o) => `  \u2022 ${o}`).join(`
   }
   if (!hmr && reactDir) {
     await Promise.resolve().then(() => init_buildReactVendor());
-    await buildReactVendor(buildPath);
+    await buildReactVendor(buildPath, { production: !isDev });
     vendorPaths = computeVendorPaths();
     setDevVendorPaths(vendorPaths);
   }
@@ -29509,12 +29510,14 @@ var MAX_RETAINED_HMR_UPDATES = 100, normalizedHmrTarget = (value) => {
     state.connectedClients.delete(client);
     state.clientTargets.delete(client);
   });
-}, handleClientConnect = (state, client, manifest) => {
+}, SERVER_STARTED_AT, handleClientConnect = (state, client, manifest) => {
   state.connectedClients.add(canonicalClient(client));
   const serverVersions = serializeModuleVersions(state.moduleVersions);
   client.send(JSON.stringify({
     data: {
+      lastBroadcastAt: state.lastBroadcastTimestamp,
       manifest,
+      serverStartedAt: SERVER_STARTED_AT,
       serverVersions
     },
     timestamp: Date.now(),
@@ -29634,6 +29637,7 @@ var init_webSocket = __esm(() => {
   init_telemetryEvent();
   init_logger();
   canonicalClients = new WeakMap;
+  SERVER_STARTED_AT = Math.round(performance.timeOrigin);
 });
 
 // src/dev/moduleServer.ts
@@ -33118,6 +33122,20 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, clearDevSs
     return nearest;
   const dependents = reactFiles.filter((candidate) => !edited.has(candidate) && isReactComponentPath(candidate) && isImportableModule(candidate));
   return dependents.find((candidate) => !isReactPagePath(candidate)) ?? dependents[0] ?? file;
+}, MAX_REFRESH_BOUNDARY_HOPS = 8, registersRefreshComponent = (file) => /\$RefreshReg\$\(/u.test(getTransformed(resolvePath(file)) ?? ""), refreshBoundaryUrls = async (targets) => {
+  const urls = [];
+  const seen = new Set(targets.map((file) => resolvePath(file)));
+  const climb = async (file, hops) => {
+    const importer = findNearestComponent(resolvePath(file));
+    if (!importer || seen.has(importer) || hops >= MAX_REFRESH_BOUNDARY_HOPS)
+      return;
+    seen.add(importer);
+    urls.push(await getReactModuleUrl(importer));
+    if (!registersRefreshComponent(importer))
+      await climb(importer, hops + 1);
+  };
+  await targets.reduce((previous, target) => previous.then(() => registersRefreshComponent(target) ? undefined : climb(target, 0)), Promise.resolve());
+  return urls;
 }, resolveReactUpdateTargets = (state, reactFiles) => {
   const importable = reactFiles.filter(isImportableModule);
   const userEdited = importable.filter((file) => state.lastUserEditedFiles?.has(resolvePath(file)));
@@ -33150,7 +33168,8 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, clearDevSs
     });
     return state.manifest;
   }
-  const moduleUrls = await Promise.all(targets.map(getReactModuleUrl));
+  const targetUrls = await Promise.all(targets.map(getReactModuleUrl));
+  const moduleUrls = fastRefreshSupported ? [...targetUrls, ...await refreshBoundaryUrls(targets)] : targetUrls;
   await Promise.all(editedFiles.filter((file) => !targets.includes(file)).map(getReactModuleUrl));
   const { getTransformError } = await getModuleServer();
   const failed = [...new Set([...editedFiles, ...targets])].map((file) => ({ error: getTransformError(file), file })).find((entry) => entry.error !== undefined);
@@ -43832,5 +43851,5 @@ export {
   wrapPageHandlerWithStreamingSlots
 };
 
-//# debugId=270D4D9EDE92886364756E2164756E21
+//# debugId=D311F2FBC012903E64756E2164756E21
 //# sourceMappingURL=index.js.map