@absolutejs/absolute 0.19.0-beta.867 → 0.19.0-beta.868

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

@@ -13,7 +13,9 @@ import type {} from '../../../types/globals';
  * shim setup synchronous + at module scope so it's installed during
  * `hmrClient.ts`'s import-evaluation pass, before page chunks load. */
 
-export type AngularHmrEvent = 'angular:component-update';
+export type AngularHmrEvent =
+	| 'angular:component-update'
+	| 'angular:component-remount';
 export type AngularComponentUpdate = {
 	id: string;
 	timestamp: number;
@@ -75,3 +77,9 @@ export const dispatchAngularComponentUpdate = (
 ) => {
 	globalThis.__angularHmr?.dispatch('angular:component-update', data);
 };
+
+export const dispatchAngularComponentRemount = (
+	data: AngularComponentUpdate
+) => {
+	globalThis.__angularHmr?.dispatch('angular:component-remount', data);
+};

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

@@ -0,0 +1,267 @@
+import type {} from '../../../types/globals';
+/* Per-component Tier 1 remount.
+ *
+ * When fastHmr reports a structural change for a component class,
+ * full app rebootstrap loses all sibling component state. Instead, we
+ * remount only the affected components: destroy each live instance +
+ * recreate at the same DOM host with the new factory.
+ *
+ * This uses public `createComponent` for the heavy lifting (it runs
+ * the new constructor, sets up DI, fires lifecycle hooks, renders the
+ * template, attaches change detection). We supplement with vendored
+ * LView slot manipulation to (a) find each live instance's parent
+ * LView slot and (b) splice the freshly-created LView into that slot
+ * so it participates in the parent's view tree instead of being a
+ * detached root.
+ *
+ * Caveats baked into this approach:
+ *   • The new LView starts as a "root" view (createComponent attaches
+ *     it to ApplicationRef). After splice, it's a child of the
+ *     original parent. We need to detach from ApplicationRef so it's
+ *     not double-tracked.
+ *   • Old @Input bindings from the parent are NOT re-applied. The
+ *     parent's template flow runs at parent-CD time and wires inputs
+ *     then; until then the new instance sees default values. In
+ *     practice this matches Tier 1 rebootstrap behavior — no worse.
+ *   • Old projection content (ng-content) doesn't transfer. If the
+ *     parent injected a child via ng-content, the new instance has an
+ *     empty projection slot until parent re-renders. Logged as a
+ *     known limitation in ANGULAR_PER_COMPONENT_REMOUNT_RESEARCH.md. */
+
+import {
+	CHILD_HEAD,
+	CHILD_TAIL,
+	CONTEXT,
+	HOST,
+	PARENT,
+	T_HOST,
+	TVIEW
+} from '../../angular/vendor/lview/slotConstants';
+import {
+	executeOnDestroys,
+	isLView,
+	markLViewDestroyed,
+	processCleanups,
+	replaceLViewInTree,
+	type LView,
+	type TView,
+	type TNode
+} from '../../angular/vendor/lview/lViewOps';
+
+type AngularCoreNamespace = {
+	createComponent: (
+		type: unknown,
+		options: {
+			hostElement?: Element;
+			environmentInjector: unknown;
+		}
+	) => {
+		instance: unknown;
+		hostView: { _lView?: LView; detectChanges?: () => void };
+		destroy: () => void;
+	};
+	ApplicationRef?: unknown;
+};
+
+type ComponentClass = new (...args: unknown[]) => unknown;
+
+type LiveInstance = {
+	host: Element;
+	oldLView: LView;
+	parentLView: LView;
+	slotIndex: number;
+	tNode: TNode;
+};
+
+/* Walk the DOM looking for elements whose component instance is of
+ * `Class`. Each match resolves to its parent LView + slot index via
+ * the LContext stored on the host element under `__ngContext__`.
+ *
+ * We walk DOM (not Angular's TRACKED_LVIEWS map) because (a)
+ * TRACKED_LVIEWS isn't exported and (b) the DOM walk is bounded by
+ * page size, which is fast enough for HMR. */
+const findLiveInstances = (Class: ComponentClass): LiveInstance[] => {
+	const results: LiveInstance[] = [];
+	const elements = document.querySelectorAll('*');
+	for (const el of Array.from(elements)) {
+		const ctx = (el as unknown as Record<string, unknown>).__ngContext__;
+		if (typeof ctx !== 'object' || ctx === null) continue;
+		const lContext = ctx as { lView?: LView; nodeIndex?: number };
+		if (!lContext.lView || lContext.nodeIndex === undefined) continue;
+
+		const slot = lContext.lView[lContext.nodeIndex];
+		if (!isLView(slot)) continue;
+		const ownLView = slot as LView;
+		const instance = ownLView[CONTEXT];
+		if (!(instance instanceof Class)) continue;
+
+		const tNode = ownLView[T_HOST] as TNode | null;
+		const host = ownLView[HOST] as Element | null;
+		if (!tNode || !host) continue;
+
+		// Avoid double-recording the same LView (multiple DOM elements
+		// can land in the same component, all sharing __ngContext__)
+		if (results.some((r) => r.oldLView === ownLView)) continue;
+
+		results.push({
+			host,
+			oldLView: ownLView,
+			parentLView: lContext.lView,
+			slotIndex: lContext.nodeIndex,
+			tNode
+		});
+	}
+	return results;
+};
+
+/* Run a public `createComponent` call to instantiate `Class` at
+ * `hostElement`. Pulls ApplicationRef + EnvironmentInjector through
+ * the live app's injector exposed on `window.__ANGULAR_APP__`. */
+const createFreshAt = (
+	Class: ComponentClass,
+	hostElement: Element,
+	core: AngularCoreNamespace
+): {
+	instance: unknown;
+	newLView: LView;
+	componentRef: ReturnType<AngularCoreNamespace['createComponent']>;
+} | null => {
+	const w = window as unknown as {
+		__ANGULAR_APP__?: { injector: unknown };
+	};
+	const envInjector = w.__ANGULAR_APP__?.injector;
+	if (!envInjector) return null;
+
+	const ref = core.createComponent(Class, {
+		hostElement,
+		environmentInjector: envInjector
+	});
+
+	const newLView = ref.hostView._lView;
+	if (!newLView) {
+		// Should never happen — _lView is always populated by Angular's
+		// internal createComponent path. If it is missing, our slot
+		// constants might be off; bail to caller for fallback.
+		ref.destroy();
+		return null;
+	}
+
+	return { instance: ref.instance, newLView, componentRef: ref };
+};
+
+/* Splice `newLView` into `parentLView` at `slotIndex`, replacing
+ * `oldLView`. After the splice, the new LView lives in the parent's
+ * view tree; the old one is detached. */
+const spliceLViewIntoParent = (
+	target: LiveInstance,
+	newLView: LView
+): void => {
+	const { parentLView, oldLView, slotIndex, tNode } = target;
+	replaceLViewInTree(parentLView, oldLView, newLView, slotIndex);
+	newLView[PARENT] = parentLView;
+	newLView[T_HOST] = tNode;
+};
+
+/* Fire onDestroy + cleanup on the OLD LView so subscriptions, event
+ * listeners, and `inject(DestroyRef).onDestroy(...)` callbacks all
+ * fire. Then mark the LView as destroyed so any subsequent
+ * tree-walk skips it. */
+const teardownOldLView = (oldLView: LView): void => {
+	const oldTView = oldLView[TVIEW] as TView | null;
+	if (oldTView) {
+		executeOnDestroys(oldTView, oldLView);
+		processCleanups(oldTView, oldLView);
+	}
+	markLViewDestroyed(oldLView);
+};
+
+/* The fresh ComponentRef is registered as a root view on
+ * ApplicationRef. We don't want it tracked there — its parent in the
+ * view tree is the original parent LView. Detach it. */
+const detachFromApplicationRoot = (
+	componentRef: { hostView: unknown },
+	core: AngularCoreNamespace
+): void => {
+	if (!core.ApplicationRef) return;
+	const w = window as unknown as {
+		__ANGULAR_APP__?: { detachView?: (view: unknown) => void };
+	};
+	w.__ANGULAR_APP__?.detachView?.(componentRef.hostView);
+};
+
+export type RemountResult = {
+	className: string;
+	remounted: number;
+	skipped: number;
+	error?: string;
+};
+
+/* Public entry. Called by the bundle's HMR listener block when an
+ * `angular:component-remount` event arrives for this class.
+ *
+ * applyMetadata is the surgical module's default export — it patches
+ * `Class.ɵcmp` with the new component definition. We call it BEFORE
+ * createComponent so the fresh instance picks up the new template,
+ * dependencies, etc.
+ *
+ * locals + namespaces match `ɵɵreplaceMetadata`'s contract — passed
+ * through to applyMetadata. We're not using ɵɵreplaceMetadata here
+ * (it preserves instance state, defeating the point), but we mirror
+ * the calling convention so bundle-level code stays consistent. */
+export const remountComponentClass = async (
+	Class: ComponentClass,
+	applyMetadata: (
+		Class: unknown,
+		namespaces: unknown[],
+		...locals: unknown[]
+	) => void,
+	namespaces: unknown[],
+	locals: unknown[],
+	core: AngularCoreNamespace,
+	className: string
+): Promise<RemountResult> => {
+	try {
+		applyMetadata.apply(null, [Class, namespaces, ...locals]);
+	} catch (err) {
+		return {
+			className,
+			error: `applyMetadata threw: ${(err as Error).message}`,
+			remounted: 0,
+			skipped: 0
+		};
+	}
+
+	const targets = findLiveInstances(Class);
+	if (targets.length === 0) {
+		return { className, remounted: 0, skipped: 0 };
+	}
+
+	let remounted = 0;
+	let skipped = 0;
+
+	for (const target of targets) {
+		try {
+			const fresh = createFreshAt(Class, target.host, core);
+			if (!fresh) {
+				skipped++;
+				continue;
+			}
+
+			spliceLViewIntoParent(target, fresh.newLView);
+			detachFromApplicationRoot(fresh.componentRef, core);
+			teardownOldLView(target.oldLView);
+
+			fresh.componentRef.hostView.detectChanges?.();
+			remounted++;
+		} catch (err) {
+			console.error(
+				`[absolutejs] remount of ${className} failed at`,
+				target.host,
+				err
+			);
+			skipped++;
+		}
+	}
+
+	return { className, remounted, skipped };
+};

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

@@ -0,0 +1,55 @@
+import type {} from '../../../types/globals';
+/* Wire `globalThis.__absAngularRemount` so the injected
+ * `__ng_hmr_remount` blocks (in `hmrInjectionPlugin.ts`) can call into
+ * the shared remount implementation. The bundle's listener captures
+ * the class via closure and the metadata via dynamic import; everything
+ * else is generic, so the implementation is shared rather than baked
+ * into every component bundle. */
+
+import {
+	remountComponentClass,
+	type RemountResult
+} from './angularRemount';
+
+declare global {
+	// eslint-disable-next-line no-var
+	var __absAngularRemount:
+		| ((
+				Class: new (...args: unknown[]) => unknown,
+				applyMetadata: (
+					Class: unknown,
+					namespaces: unknown[],
+					...locals: unknown[]
+				) => void,
+				namespaces: unknown[],
+				locals: unknown[],
+				core: {
+					createComponent: (
+						type: unknown,
+						options: {
+							hostElement?: Element;
+							environmentInjector: unknown;
+						}
+					) => {
+						instance: unknown;
+						hostView: {
+							_lView?: unknown[];
+							detectChanges?: () => void;
+						};
+						destroy: () => void;
+					};
+					ApplicationRef?: unknown;
+				},
+				className: string
+		  ) => Promise<RemountResult>)
+		| undefined;
+}
+
+let installed = false;
+
+export const installAngularRemountGlobal = (): void => {
+	if (installed) return;
+	if (typeof globalThis === 'undefined') return;
+	globalThis.__absAngularRemount = remountComponentClass;
+	installed = true;
+};

package/dist/dev/client/hmrClient.ts

@@ -13,7 +13,11 @@ import {
 } from './constants';
 import { detectCurrentFramework } from './frameworkDetect';
 import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
-import { dispatchAngularComponentUpdate } from './handlers/angularHmrShim';
+import {
+	dispatchAngularComponentRemount,
+	dispatchAngularComponentUpdate
+} from './handlers/angularHmrShim';
+import { installAngularRemountGlobal } from './handlers/angularRemountWiring';
 import { handleReactUpdate } from './handlers/react';
 import { handleHTMLUpdate, handleScriptUpdate } from './handlers/html';
 import { handleHTMXUpdate } from './handlers/htmx';
@@ -30,6 +34,7 @@ import {
 
 // Initialize HMR globals
 if (typeof window !== 'undefined') {
+	installAngularRemountGlobal();
 	if (!window.__HMR_MANIFEST__) {
 		window.__HMR_MANIFEST__ = {};
 	}
@@ -69,6 +74,7 @@ window.addEventListener('unhandledrejection', (evt) => {
 
 const hmrUpdateTypes = new Set([
 	'angular:component-update',
+	'angular:component-remount',
 	'angular:rebootstrap',
 	'react-update',
 	'html-update',
@@ -169,6 +175,28 @@ const handleHMRMessage = (message: HMRMessage) => {
 			}
 			break;
 		}
+		case 'angular:component-remount': {
+			// Tier 1a per-component remount. Structural change
+			// detected in fastHmr — the existing instance lacks new
+			// fields / DI / providers, so we destroy + recreate just
+			// this component (vs. full app rebootstrap). The injected
+			// `__ng_hmr_remount` listener handles the splice via the
+			// `__absAngularRemount` global wired in
+			// `installAngularRemountGlobal`.
+			const data = message.data as
+				| { id?: string; timestamp?: number }
+				| undefined;
+			if (data && typeof data.id === 'string') {
+				dispatchAngularComponentRemount({
+					id: data.id,
+					timestamp:
+						typeof data.timestamp === 'number'
+							? data.timestamp
+							: Date.now()
+				});
+			}
+			break;
+		}
 		case 'angular:rebootstrap': {
 			// Tier 1 fallback. The user's edit changed structure
 			// the surgical path can't safely apply

package/dist/index.js

@@ -9876,12 +9876,50 @@ var ENTITY_DECORATOR_RE, buildHmrTail = (className, encodedIdLiteral) => `
       u.default(${className}, [core]);
     }
   };
+  // Tier 1 remount: structural changes (new ctor params / new field
+  // initializers / new providers) make a CONTEXT-preserving replace
+  // unsafe \u2014 the existing instance lacks the new fields. The remount
+  // path tears down the live LView and re-creates it via public
+  // \`createComponent\` against the same host, so the new constructor
+  // runs with fresh DI, new lifecycle hooks fire, and the splice
+  // logic puts the result back in the parent's view tree. The
+  // shared implementation is on \`globalThis.__absAngularRemount\` \u2014
+  // installed by hmrClient.ts's import-time wiring.
+  const __ng_hmr_remount = async (t) => {
+    const [u, core] = await Promise.all([
+      import('/@ng/component?c=' + encodeURIComponent(__ng_hmr_id) + '&t=' + t),
+      import('@angular/core')
+    ]);
+    if (!u || typeof u.default !== 'function') return;
+    if (typeof globalThis.__absAngularRemount === 'function' && ${className}.\u0275cmp) {
+      try {
+        await globalThis.__absAngularRemount(
+          ${className},
+          u.default,
+          [core],
+          [],
+          core,
+          ${JSON.stringify(className)}
+        );
+      } catch (err) {
+        console.error('[abs-hmr] remount threw for ${className}:', err);
+      }
+    } else {
+      // No remount helper installed (older absolutejs runtime, or
+      // non-component entity). Fall back to surgical replace.
+      u.default(${className}, [core]);
+    }
+  };
+
   if (typeof globalThis !== 'undefined' &&
       globalThis.__angularHmr &&
       typeof globalThis.__angularHmr.on === 'function') {
     globalThis.__angularHmr.on('angular:component-update', (d) => {
       if (d && d.id === __ng_hmr_id) __ng_hmr_load(d.timestamp);
     });
+    globalThis.__angularHmr.on('angular:component-remount', (d) => {
+      if (d && d.id === __ng_hmr_id) __ng_hmr_remount(d.timestamp);
+    });
   }
 }
 `, createAngularHmrInjectionPlugin = (params) => {
@@ -18929,7 +18967,12 @@ ${block}
     if (!moduleText) {
       return fail("unexpected-error", `buildSimpleEntityModule returned null for ${className}`);
     }
-    return { componentSource: sourceFile, moduleText, ok: true };
+    return {
+      componentSource: sourceFile,
+      fingerprintChanged: false,
+      moduleText,
+      ok: true
+    };
   }
   if (inheritsDecoratedClass(classNode)) {
     return fail("inherits-decorated-class");
@@ -18984,9 +19027,7 @@ ${block}
   const fingerprintId = encodeURIComponent(`${projectRelPath}@${className}`);
   const currentFingerprint = extractFingerprint(classNode, className, decoratorMeta, inputs, outputs, sourceFile, componentDir);
   const cachedFingerprint = fingerprintCache.get(fingerprintId);
-  if (cachedFingerprint && !fingerprintsEqual(cachedFingerprint, currentFingerprint)) {
-    return fail("structural-change", `fingerprint changed for ${className}; escalate to Tier 1`);
-  }
+  const fingerprintChanged = cachedFingerprint !== undefined && !fingerprintsEqual(cachedFingerprint, currentFingerprint);
   const sourceFileObj = new compiler.ParseSourceFile(tsSource, componentFilePath);
   const zeroLoc = new compiler.ParseLocation(sourceFileObj, 0, 0, 0);
   const typeSourceSpan = new compiler.ParseSourceSpan(zeroLoc, zeroLoc);
@@ -19091,7 +19132,12 @@ ${block}
       }
     }
     fingerprintCache.set(fingerprintId, currentFingerprint);
-    return { ok: true, moduleText, componentSource: sourceFile };
+    return {
+      componentSource: sourceFile,
+      fingerprintChanged,
+      moduleText,
+      ok: true
+    };
   } catch (err) {
     return fail("unexpected-error", String(err));
   }
@@ -19891,6 +19937,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, runSequent
   const { tryFastHmr: tryFastHmr2 } = await Promise.resolve().then(() => (init_fastHmrCompiler(), exports_fastHmrCompiler));
   const queue = [];
   const queueIds = new Set;
+  let anyFingerprintChanged = false;
   for (const editedFile of userEdited) {
     const owners = resolveOwningComponents2({
       changedFilePath: editedFile,
@@ -19898,6 +19945,7 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, runSequent
     });
     if (owners.length === 0 && (editedFile.endsWith(".component.ts") || editedFile.endsWith(".directive.ts") || editedFile.endsWith(".pipe.ts") || editedFile.endsWith(".service.ts"))) {
       return {
+        kind: "rebootstrap",
         reason: `no Angular-decorated class found in ${editedFile}`,
         tier: 1
       };
@@ -19913,14 +19961,21 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, runSequent
       });
       if (!result.ok) {
         return {
+          kind: "rebootstrap",
           reason: `${className}: ${result.reason}${result.detail ? ` (${result.detail})` : ""}`,
           tier: 1
         };
       }
+      if (result.fingerprintChanged) {
+        anyFingerprintChanged = true;
+      }
       queueIds.add(id);
       queue.push({ className, id });
     }
   }
+  if (anyFingerprintChanged) {
+    return { kind: "remount", queue, tier: 1 };
+  }
   return { queue, tier: 0 };
 }, broadcastSurgical = (state, queue) => {
   const timestamp = Date.now();
@@ -19931,6 +19986,15 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, runSequent
     });
     logInfo(`[ng-hmr broadcast] ${className}`);
   }
+}, broadcastRemount = (state, queue) => {
+  const timestamp = Date.now();
+  for (const { id, className } of queue) {
+    broadcastToClients(state, {
+      data: { id, timestamp },
+      type: "angular:component-remount"
+    });
+    logInfo(`[ng-hmr tier-1 remount] ${className}`);
+  }
 }, broadcastRebootstrap = async (state, reason) => {
   logInfo(`[ng-hmr tier-1 rebootstrap] ${reason}`);
   broadcastToClients(state, {
@@ -19994,7 +20058,12 @@ var moduleServerPromise, getModuleServer = () => moduleServerPromise, runSequent
     runBundle().catch((err) => {
       logWarn(`[ng-hmr async bundle] rebuild failed: ${err instanceof Error ? err.message : String(err)}`);
     });
-  } else {
+  } else if (verdict.tier === 1 && verdict.kind === "remount") {
+    broadcastRemount(state, verdict.queue);
+    runBundle().catch((err) => {
+      logWarn(`[ng-hmr async bundle] rebuild failed: ${err instanceof Error ? err.message : String(err)}`);
+    });
+  } else if (verdict.tier === 1 && verdict.kind === "rebootstrap") {
     await runBundle();
     await broadcastRebootstrap(state, verdict.reason);
   }
@@ -30289,5 +30358,5 @@ export {
   ANGULAR_INIT_TIMEOUT_MS
 };
 
-//# debugId=FEFC595D5DEBE05064756E2164756E21
+//# debugId=F19AC49C80B89ABF64756E2164756E21
 //# sourceMappingURL=index.js.map