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

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,265 @@
+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 {
+	CONTEXT,
+	HOST,
+	PARENT,
+	T_HOST,
+	TVIEW
+} from '../vendor/lview/slotConstants';
+import {
+	executeOnDestroys,
+	isLView,
+	markLViewDestroyed,
+	processCleanups,
+	replaceLViewInTree,
+	type LView,
+	type TView,
+	type TNode
+} from '../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/dev/client/vendor/lview/lViewOps.ts

@@ -0,0 +1,194 @@
+import type {} from '../../../../types/globals';
+/* Vendored LView slot operations. Direct port from
+ * `@angular/core/fesm2022/_debug_node-chunk.mjs` of the small-and-pure
+ * helpers we need for per-component remount. The big helpers
+ * (renderView / refreshView / destroyLView's full DOM-removal path)
+ * stay in Angular — we invoke them indirectly via public
+ * `createComponent`. The ones here are slot-manipulation primitives
+ * with no transitive dependencies, so vendoring them is safe.
+ *
+ * Per-Angular-version chore: re-diff against the upstream functions
+ * after each minor bump. They've been stable since v17 — the algorithm
+ * shape hasn't changed since the LView FLAGS reshuffle. */
+
+import {
+	CHILD_HEAD,
+	CHILD_TAIL,
+	CLEANUP,
+	FLAGS,
+	HEADER_OFFSET,
+	LFLAG_DESTROYED,
+	NEXT,
+	ON_DESTROY_HOOKS,
+	TVIEW
+} from './slotConstants';
+
+export type LView = unknown[];
+export type LContainer = unknown[];
+export type TView = {
+	bindingStartIndex: number;
+	cleanup: unknown[] | null;
+	destroyHooks: unknown[] | null;
+};
+export type TNode = { index: number };
+
+/* `isLView` / `isLContainer` shape checks. The runtime distinguishes
+ * by whether slot 1 (TVIEW) is an object or undefined — LContainer
+ * doesn't have a TView. */
+export const isLView = (v: unknown): v is LView =>
+	Array.isArray(v) && typeof (v as unknown[])[TVIEW] === 'object';
+
+export const isLContainer = (v: unknown): v is LContainer =>
+	Array.isArray(v) && (v as unknown[])[TVIEW] === undefined;
+
+export const isDestroyed = (lView: LView): boolean =>
+	((lView[FLAGS] as number) & LFLAG_DESTROYED) !== 0;
+
+/* Vendored from `replaceLViewInTree(parentLView, oldLView, newLView, index)`.
+ * Walks parent's slots looking for the LView/LContainer whose NEXT
+ * pointer is `oldLView` and rewires it to `newLView`, then patches
+ * CHILD_HEAD / CHILD_TAIL if `oldLView` was at either end, and finally
+ * places `newLView` at the indexed slot.
+ *
+ * Verbatim port — keep it that way to make diff-against-upstream cheap. */
+export const replaceLViewInTree = (
+	parentLView: LView,
+	oldLView: LView,
+	newLView: LView,
+	index: number
+): void => {
+	const parentTView = parentLView[TVIEW] as TView;
+	for (let i = HEADER_OFFSET; i < parentTView.bindingStartIndex; i++) {
+		const current = parentLView[i];
+		if (
+			(isLView(current) || isLContainer(current)) &&
+			(current as LView)[NEXT] === oldLView
+		) {
+			(current as LView)[NEXT] = newLView;
+			break;
+		}
+	}
+	if (parentLView[CHILD_HEAD] === oldLView) parentLView[CHILD_HEAD] = newLView;
+	if (parentLView[CHILD_TAIL] === oldLView) parentLView[CHILD_TAIL] = newLView;
+	newLView[NEXT] = oldLView[NEXT];
+	oldLView[NEXT] = null;
+	parentLView[index] = newLView;
+};
+
+/* Vendored from `executeOnDestroys(tView, lView)`. tView.destroyHooks
+ * is laid out as `[slotIdx, hook | hookList, slotIdx, hook | hookList, ...]`.
+ * Each `hook` is either a function (called with `lView[slotIdx]` as
+ * `this`) or an array of `[propertyKey, fn]` pairs (one per directive
+ * sharing the slot). NodeInjectorFactory contexts are skipped; they
+ * represent injector providers, not directive instances. */
+type NodeInjectorFactoryLike = { multi?: unknown };
+
+const isNodeInjectorFactoryLike = (
+	value: unknown
+): value is NodeInjectorFactoryLike =>
+	typeof value === 'object' &&
+	value !== null &&
+	value.constructor !== undefined &&
+	value.constructor.name === 'NodeInjectorFactory';
+
+export const executeOnDestroys = (tView: TView, lView: LView): void => {
+	const destroyHooks = tView.destroyHooks;
+	if (destroyHooks == null) return;
+
+	for (let i = 0; i < destroyHooks.length; i += 2) {
+		const slotIdx = destroyHooks[i] as number;
+		const context = lView[slotIdx];
+		if (isNodeInjectorFactoryLike(context)) continue;
+
+		const toCall = destroyHooks[i + 1];
+		if (Array.isArray(toCall)) {
+			for (let j = 0; j < toCall.length; j += 2) {
+				const propKey = toCall[j] as string;
+				const hook = toCall[j + 1] as () => void;
+				const callContext = (context as Record<string, unknown>)[propKey];
+				try {
+					hook.call(callContext);
+				} catch (err) {
+					console.error('[absolutejs] onDestroy hook threw', err);
+				}
+			}
+		} else if (typeof toCall === 'function') {
+			try {
+				(toCall as (this: unknown) => void).call(context);
+			} catch (err) {
+				console.error('[absolutejs] onDestroy hook threw', err);
+			}
+		}
+	}
+};
+
+/* Vendored from `processCleanups(tView, lView)`. Walks tView.cleanup which
+ * is laid out as either:
+ *   [eventName(string), targetIdx, listenerIdx, indirectIdx, ...]
+ *     — DOM event listener; lCleanup[indirectIdx] is the unregister fn
+ *       (or, if indirectIdx is negative, lCleanup[-indirectIdx] is a
+ *       Subscription whose .unsubscribe() we call)
+ *   [hookFn(function), contextSlotIdx, ...]
+ *     — directive output / cleanup callback; call hookFn with
+ *       lCleanup[contextSlotIdx] as `this`
+ * Then walks lView[ON_DESTROY_HOOKS] (component-level destroy hooks,
+ * registered via `inject(DestroyRef).onDestroy(...)` etc.) and fires
+ * each one. */
+export const processCleanups = (tView: TView, lView: LView): void => {
+	const tCleanup = tView.cleanup;
+	const lCleanup = lView[CLEANUP] as unknown[] | null;
+
+	if (tCleanup !== null && lCleanup !== null) {
+		for (let i = 0; i < tCleanup.length - 1; i += 2) {
+			const entry = tCleanup[i];
+			if (typeof entry === 'string') {
+				const targetIdx = tCleanup[i + 3] as number;
+				try {
+					if (targetIdx >= 0) {
+						(lCleanup[targetIdx] as () => void)();
+					} else {
+						(
+							lCleanup[-targetIdx] as { unsubscribe: () => void }
+						).unsubscribe();
+					}
+				} catch (err) {
+					console.error('[absolutejs] DOM cleanup threw', err);
+				}
+				i += 2;
+			} else if (typeof entry === 'function') {
+				const ctxIdx = tCleanup[i + 1] as number;
+				try {
+					(entry as (this: unknown) => void).call(lCleanup[ctxIdx]);
+				} catch (err) {
+					console.error('[absolutejs] cleanup callback threw', err);
+				}
+			}
+		}
+	}
+
+	if (lCleanup !== null) {
+		lView[CLEANUP] = null;
+	}
+
+	const onDestroyHooks = lView[ON_DESTROY_HOOKS] as
+		| Array<() => void>
+		| null;
+	if (onDestroyHooks !== null) {
+		lView[ON_DESTROY_HOOKS] = null;
+		for (const hook of onDestroyHooks) {
+			try {
+				hook();
+			} catch (err) {
+				console.error('[absolutejs] DestroyRef hook threw', err);
+			}
+		}
+	}
+};
+
+/* Mark an LView as destroyed so any later
+ * destroyLView/cleanUpView no-ops it. Without this flag the LView
+ * could get walked twice (e.g. if Angular's tree-walk later finds
+ * a stale reference). */
+export const markLViewDestroyed = (lView: LView): void => {
+	lView[FLAGS] = ((lView[FLAGS] as number) | LFLAG_DESTROYED) >>> 0;
+};

package/dist/dev/client/vendor/lview/slotConstants.ts

@@ -0,0 +1,44 @@
+import type {} from '../../../../types/globals';
+/* Vendored LView slot indices from `@angular/core`. The runtime represents
+ * each LView as a flat array; these constants name the structural slots
+ * before the per-template slots start at HEADER_OFFSET.
+ *
+ * Source: `node_modules/@angular/core/fesm2022/_effect-chunk2.mjs`
+ * (search for `const HOST = 0;`). These are NOT exported and Angular keeps
+ * them tightly held — but they have not shifted since the v9 ivy rewrite,
+ * so the maintenance cost is verifying once per Angular minor that
+ *   `_effect-chunk2.mjs:HOST === 0` etc. still holds.
+ *
+ * If Angular reorders these, our LView traversal returns wrong slots
+ * (e.g. reading PARENT might yield CONTEXT). Symptom: per-component
+ * remount throws or silently swaps the wrong subtree. Verify at the
+ * top of `angularRemount.ts` via shape checks before doing anything
+ * destructive. */
+
+export const HOST = 0;
+export const TVIEW = 1;
+export const FLAGS = 2;
+export const PARENT = 3;
+export const NEXT = 4;
+export const T_HOST = 5;
+export const HYDRATION = 6;
+export const CLEANUP = 7;
+export const CONTEXT = 8;
+export const INJECTOR = 9;
+export const ENVIRONMENT = 10;
+export const RENDERER = 11;
+export const CHILD_HEAD = 12;
+export const CHILD_TAIL = 13;
+export const DECLARATION_VIEW = 14;
+export const DECLARATION_COMPONENT_VIEW = 15;
+export const DECLARATION_LCONTAINER = 16;
+export const PREORDER_HOOK_FLAGS = 17;
+export const QUERIES = 18;
+export const ID = 19;
+export const EMBEDDED_VIEW_INJECTOR = 20;
+export const ON_DESTROY_HOOKS = 21;
+export const HEADER_OFFSET = 27;
+
+/* LView FLAGS bitfield bits (from same source). We only care about
+ * the destroyed bit so that double-destroy is a no-op. */
+export const LFLAG_DESTROYED = 256;