@absolutejs/absolute 0.19.0-beta.751 → 0.19.0-beta.753

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,134 +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 dead: WeakRef<object>[] = [];
-	const seen = new Set<string>();
-
-	cache.clear();
-
-	for (const ref of tracker) {
-		const instance = ref.deref();
-		if (!instance) {
-			dead.push(ref);
-			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++;
-	}
-
-	dead.forEach((ref) => tracker.delete(ref));
-
-	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/dev/client/handlers/angularRuntime.ts

@@ -25,6 +25,7 @@ import type {} from '../../../types/globals';
 type AngularComponentDefinition = {
 	providers?: unknown;
 	providersResolver?: unknown;
+	selectors?: unknown[];
 };
 
 type ComponentCtor = (abstract new (...args: never[]) => unknown) & {
@@ -217,6 +218,55 @@ const patchConstructor = (entry: RegistryEntry, newCtor: ComponentCtor) => {
 	entry.registeredAt = Date.now();
 };
 
+/* The fast-patch swap of `ɵcmp` and prototype methods doesn't mark
+   live OnPush components as dirty — `applicationRef.tick()` alone
+   only checks views that are already marked dirty. So a template
+   edit on an OnPush component would silently fail to render until
+   the user clicked something that triggered a markForCheck.
+   We collect every successfully-patched ctor here, then `refresh()`
+   walks the DOM for each ctor's selector, gets the live instance via
+   the `ng` debug API, and calls `applyChanges` on it (which marks
+   the view dirty AND runs CD on its subtree). */
+const pendingFastPatchRefresh: Set<ComponentCtor> = new Set();
+
+type AngularDebugWindow = Window & {
+	ng?: {
+		applyChanges?: (component: unknown) => void;
+		getComponent?: (element: Element) => unknown;
+	};
+};
+
+const componentTagSelectors = (ctor: ComponentCtor): string[] => {
+	const selectors = ctor.ɵcmp?.selectors;
+	if (!Array.isArray(selectors)) return [];
+	const tags: string[] = [];
+	for (const tuple of selectors) {
+		if (!Array.isArray(tuple)) continue;
+		const head = tuple[0];
+		// Component selectors lead with the tag name (a hyphenated
+		// element name); attribute selectors lead with `''`. Skip the
+		// attribute case — those are directives, not OnPush views.
+		if (typeof head === 'string' && head.includes('-')) tags.push(head);
+	}
+
+	return tags;
+};
+
+const markPatchedDirty = (ctor: ComponentCtor) => {
+	const ng = (window as AngularDebugWindow).ng;
+	if (!ng?.getComponent || !ng?.applyChanges) return;
+	for (const tag of componentTagSelectors(ctor)) {
+		document.querySelectorAll(tag).forEach((el) => {
+			try {
+				const instance = ng.getComponent?.(el);
+				if (instance) ng.applyChanges?.(instance);
+			} catch {
+				/* dev-only debug API — ignore failures */
+			}
+		});
+	}
+};
+
 const applyUpdate = (id: string, newCtor: unknown) => {
 	if (!isComponentCtor(newCtor)) return false;
 
@@ -251,6 +301,13 @@ const applyUpdate = (id: string, newCtor: unknown) => {
 
 	try {
 		patchConstructor(entry, newCtor);
+		// Queue this ctor for `refresh()` to mark its live instances
+		// dirty — the patch swapped metadata in place, but OnPush
+		// components need an explicit markForCheck to re-render.
+		// `liveCtor` is the on-page constructor (we patched into it);
+		// we use that for selector lookup since the swap may have
+		// updated `ɵcmp` on `liveCtor` itself.
+		pendingFastPatchRefresh.add(liveCtor);
 
 		return true;
 	} catch (err) {
@@ -262,6 +319,15 @@ const applyUpdate = (id: string, newCtor: unknown) => {
 
 const refresh = () => {
 	if (!window.__ANGULAR_APP__) return;
+	// Mark every live instance of every patched component dirty before
+	// ticking. `tick()` alone wouldn't re-render OnPush components,
+	// since they only re-check on `markForCheck`. `applyChanges` marks
+	// the view dirty and runs CD on its subtree — covers both OnPush
+	// and Default change-detection components correctly.
+	for (const ctor of pendingFastPatchRefresh) {
+		markPatchedDirty(ctor);
+	}
+	pendingFastPatchRefresh.clear();
 	try {
 		window.__ANGULAR_APP__.tick();
 	} catch (err) {

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.751"
+	"version": "0.19.0-beta.753"
 }