@absolutejs/absolute 0.19.0-beta.752 → 0.19.0-beta.754

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

@@ -3,18 +3,27 @@ import type {} from '../../../types/globals';
    DEV MODE ONLY — never active in production.
 
    Strategy:
-   1. Capture component state (ng.getComponent) + DOM state
+   1. Capture component/service state via `preserveAcrossHmr` opt-ins
    2. Use document.startViewTransition() — browser captures a screenshot
    3. Destroy old app, recreate root element, import new module
    4. bootstrapApplication() renders new content (behind the screenshot)
-   5. After bootstrap: restore state via ng.getComponent + ng.applyChanges
-   6. View transition resolves — browser smoothly crossfades to new content
+   5. New instances restore from cache via `preserveAcrossHmr` in their
+      constructors / ngOnInit (gated on rebootInProgress flag)
+   6. Wait for `applicationRef.whenStable()` so lazy-route components
+      have a chance to construct, then close the restoration window
+   7. View transition resolves — browser smoothly crossfades to new
+      content
 
    document.startViewTransition() is the native browser API for page
-   transitions. It captures a screenshot before the callback, runs the
-   callback (which can be async), and crossfades when the callback finishes.
-   The user never sees empty/default state — only the before and after. */
+   transitions. It captures a screenshot before the callback, runs
+   the callback (which can be async), and crossfades when the callback
+   finishes. The user never sees empty/default state — only the
+   before and after. */
 
+import {
+	captureTrackedInstanceStates,
+	endHmrReboot
+} from '../../../angular/hmrPreserveCore';
 import { ANGULAR_INIT_TIMEOUT_MS } from '../constants';
 import {
 	saveFormState,
@@ -37,15 +46,6 @@ type HMRMessage = {
 	};
 };
 
-type NgApi = {
-	applyChanges?: (component: unknown) => void;
-	getComponent?: (element: Element) => unknown;
-};
-
-type AngularClientWindow = Window & {
-	ng?: NgApi;
-};
-
 type AngularHmrApi = {
 	applyUpdate: (id: string, newCtor: unknown) => boolean;
 	getRegistry?: () => Map<string, unknown>;
@@ -73,9 +73,6 @@ const isAngularComponentExport = (
 	return 'ɵcmp' in value && Boolean(value.ɵcmp);
 };
 
-const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
-	Boolean(value) && typeof value === 'object';
-
 const swapStylesheet = (
 	cssUrl: string,
 	cssBaseName: string,
@@ -102,169 +99,6 @@ const swapStylesheet = (
 	document.head.appendChild(newLink);
 };
 
-// ─── State Capture/Restore via ng.getComponent ──────────────
-
-type StateSnapshot = {
-	selector: string;
-	index: number;
-	properties: Record<string, unknown>;
-};
-
-const readDomCounter = (
-	element: Element,
-	properties: Record<string, unknown>
-) => {
-	element
-		.querySelectorAll('[class*="value"], [class*="count"]')
-		.forEach((stateEl) => {
-			const text = stateEl.textContent;
-			if (text === null || text.trim() === '') return;
-			const num = parseInt(text.trim(), 10);
-			if (!isNaN(num)) properties['__dom_counter'] = num;
-		});
-};
-
-const copyInstanceProperty = (
-	instance: Record<string, unknown>,
-	key: string,
-	properties: Record<string, unknown>
-) => {
-	if (key.startsWith('ɵ') || key.startsWith('__')) return;
-	const val = instance[key];
-	if (typeof val === 'function') return;
-	properties[key] = val;
-};
-
-const captureInstanceProperties = (
-	ngApi: NgApi | undefined,
-	element: Element,
-	properties: Record<string, unknown>
-) => {
-	if (!ngApi || typeof ngApi.getComponent !== 'function') return;
-
-	try {
-		const instance = ngApi.getComponent(element);
-		if (!isObjectRecord(instance)) return;
-
-		Object.keys(instance).forEach((key) => {
-			copyInstanceProperty(instance, key, properties);
-		});
-	} catch {
-		/* ignored */
-	}
-};
-
-const captureComponentState = () => {
-	const snapshots: StateSnapshot[] = [];
-	const selectorCounts = new Map<string, number>();
-	const angularWindow: AngularClientWindow = window;
-	const ngApi = angularWindow.ng;
-
-	document.querySelectorAll('*').forEach((elem) => {
-		const tagName = elem.tagName.toLowerCase();
-		if (!tagName.includes('-')) return;
-
-		const count = selectorCounts.get(tagName) || 0;
-		selectorCounts.set(tagName, count + 1);
-
-		const properties: Record<string, unknown> = {};
-		readDomCounter(elem, properties);
-		captureInstanceProperties(ngApi, elem, properties);
-
-		if (Object.keys(properties).length > 0) {
-			snapshots.push({ index: count, properties, selector: tagName });
-		}
-	});
-
-	return snapshots;
-};
-
-const safeSetProperty = (
-	instance: Record<string, unknown>,
-	key: string,
-	value: unknown
-) => {
-	try {
-		instance[key] = value;
-	} catch {
-		/* ignored */
-	}
-};
-
-const restoreInstanceProperties = (
-	instance: Record<string, unknown>,
-	snap: StateSnapshot
-) => {
-	const domCounter = snap.properties['__dom_counter'];
-	Object.entries(snap.properties).forEach(([key, value]) => {
-		if (key === '__dom_counter') return;
-		safeSetProperty(instance, key, value);
-	});
-	if (
-		domCounter !== undefined &&
-		typeof domCounter === 'number' &&
-		'count' in instance
-	) {
-		instance['count'] = domCounter;
-	}
-};
-
-const restoreViaInstance = (
-	ngApi: NgApi | undefined,
-	element: Element,
-	snap: StateSnapshot
-) => {
-	if (!ngApi || typeof ngApi.getComponent !== 'function') return false;
-
-	try {
-		const instance = ngApi.getComponent(element);
-		if (!isObjectRecord(instance)) return false;
-
-		restoreInstanceProperties(instance, snap);
-		if (typeof ngApi.applyChanges === 'function')
-			ngApi.applyChanges(element);
-
-		return true;
-	} catch {
-		return false;
-	}
-};
-
-const restoreDomFallback = (element: Element, snap: StateSnapshot) => {
-	const domCounter = snap.properties['__dom_counter'];
-	if (domCounter === undefined) return;
-
-	element
-		.querySelectorAll('[class*="value"], [class*="count"]')
-		.forEach((counterEl) => {
-			counterEl.textContent = String(domCounter);
-		});
-};
-
-const restoreComponentState = (snapshots: StateSnapshot[]) => {
-	const angularWindow: AngularClientWindow = window;
-	const ngApi = angularWindow.ng;
-	if (snapshots.length === 0) return;
-
-	const bySelector = new Map<string, StateSnapshot[]>();
-	for (const snap of snapshots) {
-		const list = bySelector.get(snap.selector) || [];
-		list.push(snap);
-		bySelector.set(snap.selector, list);
-	}
-
-	bySelector.forEach((snaps, selector) => {
-		const elements = document.querySelectorAll(selector);
-		snaps.forEach((snap) => {
-			const element = elements[snap.index];
-			if (!element) return;
-
-			const restored = restoreViaInstance(ngApi, element, snap);
-			if (!restored) restoreDomFallback(element, snap);
-		});
-	});
-};
-
 // ─── Wait for Angular bootstrap (event-based, no polling) ───
 // Installs a property setter trap on window.__ANGULAR_APP__ that
 // resolves the promise the instant the bootstrap code writes to it.
@@ -507,9 +341,11 @@ const processMessage = async (message: HMRMessage) => {
 		);
 	}
 
-	// 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).
+	// Fast path didn't apply — full re-bootstrap. Components and services
+	// that opted into `preserveAcrossHmr(this)` keep their state; anything
+	// that didn't opt in is reset to its class-field defaults. The summary
+	// log emitted by `endHmrReboot` after the reboot tells the developer
+	// which classes were preserved.
 	await handleFullUpdate(message);
 };
 
@@ -698,7 +534,10 @@ const runWithViewTransition = async (updateFn: () => Promise<void>) => {
 };
 
 const handleFullUpdate = async (message: HMRMessage) => {
-	const componentState = captureComponentState();
+	// DOM-level state — preserved separately from instance state because
+	// it lives in the document, not in component fields. Form values and
+	// scroll position survive a full re-bootstrap regardless of whether
+	// any component opted into `preserveAcrossHmr`.
 	const scrollState = saveScrollState();
 	const formState = saveFormState();
 
@@ -724,8 +563,10 @@ const handleFullUpdate = async (message: HMRMessage) => {
 		// Snapshot every instance that opted into `preserveAcrossHmr(this)`
 		// before destroying the app, and flip the reboot-in-progress flag
 		// on. The new instances created during bootstrap will read cached
-		// state back via the same helper while the flag is on.
-		captureHmrPreservedInstanceStates();
+		// state back via the same helper while the flag is on. Both this
+		// capture call and the user-facing `preserveAcrossHmr` helper
+		// share the same `globalThis`-anchored cache via `hmrPreserveCore`.
+		captureTrackedInstanceStates();
 		try {
 			destroyAngularApp();
 			await bootstrapAngularModule(
@@ -733,7 +574,6 @@ const handleFullUpdate = async (message: HMRMessage) => {
 				rootSelector,
 				rootContainer
 			);
-			restoreComponentState(componentState);
 			tickAngularApp();
 			restoreFormState(formState);
 			restoreScrollState(scrollState);
@@ -749,139 +589,9 @@ const handleFullUpdate = async (message: HMRMessage) => {
 			// loads, microtasks, scheduled CD) — strictly event-based,
 			// no fixed timer needed.
 			await waitForAppStable();
-			endHmrPreservedReboot();
+			endHmrReboot();
 		}
 	};
 
 	await runWithViewTransition(doUpdate);
 };
-
-/* Snapshot every WeakRef-tracked instance's *preservable* own
-   properties into the shared cache. The runtime helper
-   `preserveAcrossHmr(this)` from `@absolutejs/absolute/angular`
-   populates the tracker, and on the constructor of the next-bootstrapped
-   instance reads back from the cache. We talk to the same `globalThis`-
-   anchored Map/Set as that helper rather than importing it directly so
-   this dev-client bundle doesn't pull in the Angular runtime.
-
-   Only primitives, plain `{}` objects, and arrays of those are
-   preserved. Class instances (HttpClient, BehaviorSubject, etc.) are
-   *not* preserved because the new instance must get those from its own
-   injector — restoring an OLD-injector reference onto a NEW instance
-   would corrupt the new app. */
-type HmrPreserveScope = typeof globalThis & {
-	__ABS_HMR_INSTANCE_STATE__?: Map<string, Record<string, unknown>>;
-	__ABS_HMR_TRACKED_INSTANCES__?: Set<WeakRef<object>>;
-	__ABS_HMR_INSTANCE_KEYS__?: WeakMap<object, string>;
-	__ABS_HMR_REBOOT_IN_PROGRESS__?: { value: boolean };
-	__ABS_HMR_REBOOT_STATS__?: { captured: number; restoredKeys: Set<string> };
-};
-
-const isPreservableValue = (value: unknown, depth = 0): boolean => {
-	if (depth > 8) return false;
-	if (value === null || value === undefined) return true;
-	const t = typeof value;
-	if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint')
-		return true;
-	if (t === 'function' || t === 'symbol') return false;
-	if (Array.isArray(value)) {
-		return value.every((item) => isPreservableValue(item, depth + 1));
-	}
-	if (t === 'object') {
-		const proto = Object.getPrototypeOf(value);
-		if (proto !== Object.prototype && proto !== null) return false;
-
-		return Object.values(value as object).every((v) =>
-			isPreservableValue(v, depth + 1)
-		);
-	}
-
-	return false;
-};
-
-const getHmrRebootStats = (scope: HmrPreserveScope) =>
-	(scope.__ABS_HMR_REBOOT_STATS__ ??= {
-		captured: 0,
-		restoredKeys: new Set<string>()
-	});
-
-const captureHmrPreservedInstanceStates = () => {
-	const scope = globalThis as HmrPreserveScope;
-	const tracker = scope.__ABS_HMR_TRACKED_INSTANCES__;
-
-	const flag = (scope.__ABS_HMR_REBOOT_IN_PROGRESS__ ??= { value: false });
-	const stats = getHmrRebootStats(scope);
-	stats.captured = 0;
-	stats.restoredKeys.clear();
-
-	if (!tracker || tracker.size === 0) {
-		// Nothing tracked, but still flip the flag so any service/component
-		// that registers DURING the reboot (`preserveAcrossHmr` in
-		// constructor) knows it's in a reboot context — even though there's
-		// nothing to restore from.
-		flag.value = true;
-
-		return;
-	}
-
-	const cache = (scope.__ABS_HMR_INSTANCE_STATE__ ??= new Map());
-	const keyMap = scope.__ABS_HMR_INSTANCE_KEYS__;
-	const seen = new Set<string>();
-
-	cache.clear();
-
-	for (const ref of tracker) {
-		const instance = ref.deref();
-		// Skip already-GC'd refs. We don't bother bookkeeping a "dead"
-		// list because the entire tracker is cleared after this loop.
-		if (!instance) continue;
-
-		const className = instance.constructor?.name;
-		if (!className || className === 'Object') continue;
-		const fullKey = keyMap?.get(instance) ?? `${className}:`;
-
-		if (seen.has(fullKey)) {
-			console.warn(
-				`[HMR] preserveAcrossHmr collision on "${fullKey}". Two instances would use the same cache slot — the later one will overwrite the earlier one's state on full re-bootstrap. Pass a unique \`key\` argument (e.g. an @Input id) to differentiate.`
-			);
-		}
-		seen.add(fullKey);
-
-		const props: Record<string, unknown> = {};
-		for (const prop of Object.keys(instance)) {
-			const value = (instance as Record<string, unknown>)[prop];
-			if (isPreservableValue(value)) props[prop] = value;
-		}
-		cache.set(fullKey, props);
-		stats.captured++;
-	}
-
-	// Every instance just captured is about to die: `destroyAngularApp()`
-	// runs immediately after this. New instances from the next bootstrap
-	// repopulate the tracker via their own `preserveAcrossHmr(this)`
-	// calls. If we left existing WeakRefs in place, the JS engine often
-	// won't have GC'd the old objects yet at the next capture — those
-	// zombies would inflate the captured count and trigger spurious
-	// collision warnings against the new generation's instances.
-	tracker.clear();
-
-	flag.value = true;
-};
-
-const endHmrPreservedReboot = () => {
-	const scope = globalThis as HmrPreserveScope;
-	const flag = scope.__ABS_HMR_REBOOT_IN_PROGRESS__;
-	if (flag) flag.value = false;
-
-	const stats = scope.__ABS_HMR_REBOOT_STATS__;
-	if (stats && stats.captured > 0) {
-		const restored = Array.from(stats.restoredKeys)
-			.map((k) => k.replace(/:$/, ''))
-			.sort();
-		console.info(
-			`[HMR] Full re-bootstrap: restored state for ${restored.length}/${stats.captured} tracked instance(s)${
-				restored.length > 0 ? ` — ${restored.join(', ')}` : ''
-			}. Components without preservation reset to defaults; opt in via \`preserveAcrossHmr(this)\`.`
-		);
-	}
-};

package/dist/src/angular/hmrPreserveCore.d.ts

@@ -0,0 +1,34 @@
+export type StateCache = Map<string, Record<string, unknown>>;
+export type InstanceTracker = Set<WeakRef<object>>;
+export type InstanceKeyMap = WeakMap<object, string>;
+export type RebootFlag = {
+    value: boolean;
+};
+export type RebootStats = {
+    captured: number;
+    restoredKeys: Set<string>;
+};
+export declare const isHmrPreserveDev: () => boolean;
+export declare const getCache: () => StateCache;
+export declare const getTracker: () => InstanceTracker;
+export declare const getKeyMap: () => InstanceKeyMap;
+export declare const getRebootFlag: () => RebootFlag;
+export declare const getRebootStats: () => RebootStats;
+export declare const isPreservable: (value: unknown, depth?: number) => boolean;
+export declare const buildCacheKey: (instance: object, key?: unknown) => string | null;
+/** Copy preservable own properties from the cached snapshot onto the
+ *  instance. Records the restoration in stats so the end-of-reboot
+ *  summary can list which classes had state restored. Returns whether
+ *  anything was actually written. */
+export declare const restoreFromCacheCore: (instance: object, key: string) => boolean;
+/** Snapshot every tracked instance's preservable own properties into
+ *  the shared cache and flip the reboot-in-progress flag on. Called by
+ *  the dev-client HMR handler right before `destroyAngularApp()`. */
+export declare const captureTrackedInstanceStates: () => void;
+/** Clear the active-reboot flag and emit a one-line summary so
+ *  developers can see at-a-glance which classes had state preserved.
+ *  Called by the dev-client HMR handler after the new app has reported
+ *  stable. After this, `preserveAcrossHmr` calls track but don't
+ *  restore — so navigating to a route after HMR doesn't resurrect
+ *  stale state from the last reboot. */
+export declare const endHmrReboot: () => void;

package/dist/src/angular/preserveAcrossHmr.d.ts

@@ -10,20 +10,3 @@
  *      on `@Input` values, since Angular sets inputs between
  *      constructor and ngOnInit. */
 export declare const preserveAcrossHmr: (instance: object, key?: string | number) => void;
-/** Snapshot every tracked instance's preservable own properties into
- *  the cache and flip the reboot flag on. Called by the HMR client
- *  right before `destroyAngularApp()`. Properties that aren't
- *  preservable (Angular-injected services, Subjects, class instances)
- *  are skipped — the new instance gets fresh ones from its new
- *  injector, just like at first bootstrap. */
-export declare const captureTrackedInstanceStates: () => void;
-/** Clear the active-reboot flag and emit a one-line summary so
- *  developers can see at-a-glance which classes had state preserved.
- *  Helps surface the existence of `preserveAcrossHmr` to anyone whose
- *  state was reset because they hadn't opted in.
- *  Called by the HMR client after the new app has finished
- *  bootstrapping (success or failure — wrap in `try/finally`). After
- *  this, `preserveAcrossHmr` calls will track but won't restore — so
- *  navigating to a route after HMR doesn't resurrect stale state from
- *  the last reboot. */
-export declare const endHmrReboot: () => void;

package/package.json

@@ -349,5 +349,5 @@
 			]
 		}
 	},
-	"version": "0.19.0-beta.752"
+	"version": "0.19.0-beta.754"
 }