@absolutejs/absolute 0.19.0-beta.745 → 0.19.0-beta.747

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

@@ -361,6 +361,10 @@ const patchRegisteredComponents = (
 	return { allPatched, patchedAny };
 };
 
+type FastPatchWindow = Window & {
+	__ANGULAR_HMR_FAST_PATCH__?: boolean;
+};
+
 const attemptFastPatch = async (
 	indexPath: string,
 	registry: Map<string, unknown>,
@@ -368,11 +372,21 @@ const attemptFastPatch = async (
 	sourceFile: string,
 	origWarn: typeof console.warn
 ) => {
+	// The bundled page chunk's top-level code re-bootstraps the Angular app
+	// (destroy + bootstrapApplication). For fast-patch we just need to read
+	// the freshly-built component classes — not re-bootstrap. Setting this
+	// flag tells the chunk to skip its bootstrap section and only run the
+	// `export * from '<page-module>'` line. Paired with the guard added in
+	// `src/build/compileAngular.ts` HMR template.
+	const w = window as FastPatchWindow;
+	w.__ANGULAR_HMR_FAST_PATCH__ = true;
 	try {
 		const newModule = await import(`${indexPath}?t=${Date.now()}`);
 
-		console.warn = origWarn;
-
+		// NG0912 warnings fire during `applyUpdate` (Angular re-registers
+		// the new component class while the old one is still live). Keep
+		// the suppression active through the patch, restore right before
+		// `refresh()` so any non-NG0912 warnings during `tick()` surface.
 		const { allPatched, patchedAny } = patchRegisteredComponents(
 			newModule,
 			registry,
@@ -380,6 +394,8 @@ const attemptFastPatch = async (
 			sourceFile
 		);
 
+		console.warn = origWarn;
+
 		if (!patchedAny) return false;
 		if (!allPatched) return false;
 
@@ -391,11 +407,21 @@ const attemptFastPatch = async (
 		console.warn('[HMR] Angular fast update failed, falling back:', err);
 
 		return false;
+	} finally {
+		delete w.__ANGULAR_HMR_FAST_PATCH__;
 	}
 };
 
-// handleFastUpdate is kept for future use when the fast path is re-enabled.
-const _handleFastUpdate = async (message: HMRMessage) => {
+/* Fast update — patch live component prototypes without destroying the app.
+   Returns true when at least one registered component was successfully
+   patched (and no patch failed); false means we couldn't fast-patch and
+   the caller should fall back to a full re-bootstrap.
+   Failures we explicitly fall back on:
+     - file's source isn't tracked in the component registry yet
+     - changed file has no Angular components (e.g. a service or routes file)
+     - any component's `applyUpdate` returned false (provider change, etc.)
+     - dynamic import failed */
+const handleFastUpdate = async (message: HMRMessage) => {
 	const hmr = window.__ANGULAR_HMR__;
 	if (!hmr || !hmr.getRegistry) return false;
 
@@ -434,6 +460,45 @@ const _handleFastUpdate = async (message: HMRMessage) => {
 // MAIN ENTRY POINT
 // ============================================================
 
+/* HMR updates are serialized through a single in-flight slot. While one
+   update is running (fast or full), additional incoming updates collapse
+   into one pending slot — only the latest matters because each rebuild
+   produces a chunk that supersedes prior ones for the same source file.
+   Without this, two rapid edits could:
+     - run two `startViewTransition`s and have the browser abort the first
+       mid-callback (the original "Transition was skipped" symptom), or
+     - run two `attemptFastPatch`s that both call `applyUpdate` on the same
+       registry entries, racing on prototype swaps. */
+let activeMessage: Promise<void> | null = null;
+let pendingMessage: HMRMessage | null = null;
+
+const processMessage = async (message: HMRMessage) => {
+	const updateType = message.data.updateType || 'logic';
+
+	if (updateType === 'full') {
+		// Server signalled this requires a full reload — skip fast path.
+		await handleFullUpdate(message);
+
+		return;
+	}
+
+	// Default 'logic' path: try fast-patch, fall back to full reload.
+	try {
+		const patched = await handleFastUpdate(message);
+		if (patched) return;
+	} catch (err) {
+		console.warn(
+			'[HMR] Angular fast update threw, falling back to full reload:',
+			err
+		);
+	}
+
+	// Fast path didn't apply — full re-bootstrap (loses in-memory app state
+	// like auth tokens; only happens when the fast path can't handle the
+	// change, e.g. routes/providers/services or a never-seen component).
+	await handleFullUpdate(message);
+};
+
 export const handleAngularUpdate = (message: HMRMessage) => {
 	if (detectCurrentFramework() !== 'angular') return;
 
@@ -443,6 +508,7 @@ export const handleAngularUpdate = (message: HMRMessage) => {
 		(updateType === 'style' || updateType === 'css-only') &&
 		message.data.cssUrl
 	) {
+		// CSS-only updates can run in parallel without breaking anything.
 		swapStylesheet(
 			message.data.cssUrl,
 			message.data.cssBaseName || '',
@@ -452,7 +518,22 @@ export const handleAngularUpdate = (message: HMRMessage) => {
 		return;
 	}
 
-	handleFullUpdate(message);
+	if (activeMessage) {
+		// Coalesce: an update is in flight, queue this one (replacing any
+		// earlier queued update, which is now stale).
+		pendingMessage = message;
+
+		return;
+	}
+
+	activeMessage = processMessage(message).finally(() => {
+		activeMessage = null;
+		if (pendingMessage) {
+			const next = pendingMessage;
+			pendingMessage = null;
+			handleAngularUpdate(next);
+		}
+	});
 };
 
 // ============================================================
@@ -511,12 +592,21 @@ const tickAngularApp = () => {
 	}
 };
 
-const runWithViewTransition = (updateFn: () => Promise<void>) => {
+/* `runWithViewTransition` wraps a callback in `document.startViewTransition`
+   for a smooth crossfade across full re-bootstraps. Queueing is NOT needed
+   here because `handleAngularUpdate` already serializes incoming messages
+   through the outer `activeMessage`/`pendingMessage` slots — only one
+   update runs at a time, so a new `startViewTransition` never aborts an
+   in-flight one mid-callback. */
+const runWithViewTransition = async (updateFn: () => Promise<void>) => {
 	const doc: ViewTransitionDocument = document;
+
 	if (typeof doc.startViewTransition !== 'function') {
-		updateFn().catch((err: unknown) => {
+		try {
+			await updateFn();
+		} catch (err) {
 			console.warn('[HMR] Angular update failed (non-fatal):', err);
-		});
+		}
 
 		return;
 	}
@@ -531,18 +621,41 @@ const runWithViewTransition = (updateFn: () => Promise<void>) => {
 		/* ignored */
 	}
 
-	const removeStyle = () => {
-		if (styleEl && styleEl.parentNode) styleEl.remove();
-	};
+	let updatePromise: Promise<void> = Promise.resolve();
+	try {
+		const transition = doc.startViewTransition(() => {
+			updatePromise = updateFn();
 
-	doc.startViewTransition(async () => {
-		await updateFn();
-	})
-		.finished.then(removeStyle)
-		.catch(removeStyle);
+			return updatePromise;
+		});
+		// Wait for both the visual transition and the update callback.
+		// `transition.finished` rejects with AbortError when a new transition
+		// supersedes this one — swallow that since we serialize updates so
+		// it shouldn't happen, and even if it does we still want to wait
+		// for `updateFn` to complete before releasing the next update.
+		await Promise.all([
+			transition.finished.catch(() => {
+				/* skipped */
+			}),
+			updatePromise.catch((err) => {
+				console.warn('[HMR] Angular update failed (non-fatal):', err);
+			})
+		]);
+	} catch (err) {
+		console.warn('[HMR] Angular update failed (non-fatal):', err);
+		// If startViewTransition itself threw, run the update directly so
+		// HMR still applies (loses the crossfade but preserves correctness).
+		try {
+			await updateFn();
+		} catch (innerErr) {
+			console.warn('[HMR] Angular update failed (non-fatal):', innerErr);
+		}
+	} finally {
+		if (styleEl && styleEl.parentNode) styleEl.remove();
+	}
 };
 
-const handleFullUpdate = (message: HMRMessage) => {
+const handleFullUpdate = async (message: HMRMessage) => {
 	const componentState = captureComponentState();
 	const scrollState = saveScrollState();
 	const formState = saveFormState();
@@ -574,5 +687,5 @@ const handleFullUpdate = (message: HMRMessage) => {
 		restoreScrollState(scrollState);
 	};
 
-	runWithViewTransition(doUpdate);
+	await runWithViewTransition(doUpdate);
 };

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

@@ -48,8 +48,29 @@ type AngularHmrStats = {
 	readonly updateCount: number;
 };
 
-const componentRegistry = new Map<string, RegistryEntry>();
-let globalUpdateCount = 0;
+/* The component registry MUST persist across chunk imports.
+   Each compiled page chunk inlines this `angularRuntime.ts` module — when
+   the HMR fast-patch dynamically `import()`s a new chunk, that chunk's
+   inlined runtime evaluates again. Without a window-level singleton, each
+   re-import would create a fresh `componentRegistry` Map, wipe out
+   prior registrations, and break subsequent fast-patches (the second
+   patch wouldn't find any registered components).
+   We anchor the registry on `globalThis.__ANGULAR_HMR_REGISTRY__` so every
+   chunk sees the same Map. */
+type GlobalRegistryWindow = typeof globalThis & {
+	__ANGULAR_HMR_REGISTRY__?: Map<string, RegistryEntry>;
+	__ANGULAR_HMR_UPDATE_COUNT__?: { value: number };
+};
+
+const globalScope = globalThis as GlobalRegistryWindow;
+
+const componentRegistry: Map<string, RegistryEntry> =
+	globalScope.__ANGULAR_HMR_REGISTRY__ ??
+	(globalScope.__ANGULAR_HMR_REGISTRY__ = new Map<string, RegistryEntry>());
+
+const updateCounter: { value: number } =
+	globalScope.__ANGULAR_HMR_UPDATE_COUNT__ ??
+	(globalScope.__ANGULAR_HMR_UPDATE_COUNT__ = { value: 0 });
 
 const hasInjectorProviderChanges = (
 	oldCtor: ComponentCtor,
@@ -149,7 +170,7 @@ const patchConstructor = (entry: RegistryEntry, newCtor: ComponentCtor) => {
 		throw new Error('Cannot patch non-configurable Angular metadata');
 	}
 
-	globalUpdateCount++;
+	updateCounter.value++;
 	entry.updateCount++;
 	entry.registeredAt = Date.now();
 };
@@ -211,7 +232,7 @@ const angularHmrStats: AngularHmrStats = {
 		return componentRegistry.size;
 	},
 	get updateCount() {
-		return globalUpdateCount;
+		return updateCounter.value;
 	}
 };
 

package/dist/index.js

@@ -44589,46 +44589,57 @@ var absoluteHttpTransferCacheOptions = {
     }
 };
 
-// Re-Bootstrap HMR with View Transitions API
-if (window.__ANGULAR_APP__) {
-    try { window.__ANGULAR_APP__.destroy(); } catch (_err) { /* ignore */ }
-    window.__ANGULAR_APP__ = null;
-}
-
-// Ensure root element exists after destroy (Angular removes it)
-var _sel = ${componentClassName}.\u0275cmp?.selectors?.[0]?.[0] || 'ng-app';
-if (!document.querySelector(_sel)) {
-    (document.getElementById('root') || document.body).appendChild(document.createElement(_sel));
-}
-
-var providers = [provideZonelessChangeDetection()];
-if (!window.__HMR_SKIP_HYDRATION__ && !pageHasIslands) {
-    providers.push(provideClientHydration(withHttpTransferCacheOptions(absoluteHttpTransferCacheOptions)));
-}
-delete window.__HMR_SKIP_HYDRATION__;
-providers.push.apply(providers, pageProviders);
-providers.push.apply(providers, propProviders);
-window.__ABS_SLOT_HYDRATION_PENDING__ = pageHasRawStreamingSlots;
-
-if (pageHasRawStreamingSlots) {
-    window.__ABS_SLOT_HYDRATION_PENDING__ = false;
-    if (typeof window.__ABS_SLOT_FLUSH__ === 'function') {
-        requestAnimationFrame(function() {
-            window.__ABS_SLOT_FLUSH__();
-        });
-    }
-} else {
-    bootstrapApplication(${componentClassName}, {
-        providers: providers
-    }).then(function (appRef) {
-        window.__ANGULAR_APP__ = appRef;
+// Re-export the page module so HMR fast-patch (in handlers/angular.ts) can
+// dynamically import this chunk and discover the freshly-built component
+// classes without needing a separate build artifact.
+export * from '${normalizedImportPath}';
+
+// Re-Bootstrap HMR with View Transitions API.
+// Skipped during fast-patch: the HMR client sets
+// window.__ANGULAR_HMR_FAST_PATCH__ = true before \`import()\`-ing this
+// chunk so it can read the new component classes via \`export *\` above
+// without destroying the running app.
+if (!window.__ANGULAR_HMR_FAST_PATCH__) {
+    if (window.__ANGULAR_APP__) {
+        try { window.__ANGULAR_APP__.destroy(); } catch (_err) { /* ignore */ }
+        window.__ANGULAR_APP__ = null;
+    }
+
+    // Ensure root element exists after destroy (Angular removes it)
+    var _sel = ${componentClassName}.\u0275cmp?.selectors?.[0]?.[0] || 'ng-app';
+    if (!document.querySelector(_sel)) {
+        (document.getElementById('root') || document.body).appendChild(document.createElement(_sel));
+    }
+
+    var providers = [provideZonelessChangeDetection()];
+    if (!window.__HMR_SKIP_HYDRATION__ && !pageHasIslands) {
+        providers.push(provideClientHydration(withHttpTransferCacheOptions(absoluteHttpTransferCacheOptions)));
+    }
+    delete window.__HMR_SKIP_HYDRATION__;
+    providers.push.apply(providers, pageProviders);
+    providers.push.apply(providers, propProviders);
+    window.__ABS_SLOT_HYDRATION_PENDING__ = pageHasRawStreamingSlots;
+
+    if (pageHasRawStreamingSlots) {
         window.__ABS_SLOT_HYDRATION_PENDING__ = false;
         if (typeof window.__ABS_SLOT_FLUSH__ === 'function') {
             requestAnimationFrame(function() {
                 window.__ABS_SLOT_FLUSH__();
             });
         }
-    });
+    } else {
+        bootstrapApplication(${componentClassName}, {
+            providers: providers
+        }).then(function (appRef) {
+            window.__ANGULAR_APP__ = appRef;
+            window.__ABS_SLOT_HYDRATION_PENDING__ = false;
+            if (typeof window.__ABS_SLOT_FLUSH__ === 'function') {
+                requestAnimationFrame(function() {
+                    window.__ABS_SLOT_FLUSH__();
+                });
+            }
+        });
+    }
 }
 `.trim() : `
 import '@angular/compiler';
@@ -58538,5 +58549,5 @@ export {
   ANGULAR_INIT_TIMEOUT_MS
 };
 
-//# debugId=01DB8BB408B0E96D64756E2164756E21
+//# debugId=3B8AFA4EC6C4DEFD64756E2164756E21
 //# sourceMappingURL=index.js.map