@absolutejs/absolute 0.19.0-beta.851 → 0.19.0-beta.853

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

@@ -26,21 +26,6 @@ type AngularComponentDefinition = {
 	providers?: unknown;
 	providersResolver?: unknown;
 	selectors?: unknown[];
-	styles?: string[];
-	encapsulation?: number;
-	template?: unknown;
-	consts?: unknown;
-	decls?: number;
-	vars?: number;
-	viewQuery?: unknown;
-	contentQueries?: unknown;
-	ngContentSelectors?: unknown;
-	dependencies?: unknown;
-	hostBindings?: unknown;
-	hostVars?: number;
-	hostAttrs?: unknown;
-	inputs?: unknown;
-	outputs?: unknown;
 };
 
 type ComponentCtor = (abstract new (...args: never[]) => unknown) & {
@@ -160,45 +145,6 @@ const hasProviderChanges = (oldCtor: ComponentCtor, newCtor: ComponentCtor) => {
 	return false;
 };
 
-/* Style-update batch buffer.
- *
- * When a component-CSS edit triggers HMR, the rebuilt page chunk
- * re-evaluates with `__ANGULAR_HMR_STYLE_UPDATE_MODE__` set on the
- * window. Inside that mode, every `register(id, newCtor)` call from
- * the chunk's auto-registration block routes its newCtor straight
- * into `applyStyleUpdate(id, newCtor)` instead of being a no-op
- * (which is the default for already-registered IDs).
- *
- * This is the only way to reach CHILD-component classes — the page
- * chunk only `export *`s the page's own module, so a top-level
- * `Object.keys(newModule)` walk wouldn't find imported components.
- * The registration block runs once per compiled file (page + every
- * imported component), so it covers the whole subtree.
- *
- * The batch is consulted by `handleComponentStyleUpdate` after the
- * chunk import resolves: if any registration's update returned false,
- * the orchestrator falls through to a full reboot rather than leaving
- * the page partially restyled. */
-
-type StyleUpdateMode = typeof globalThis & {
-	__ANGULAR_HMR_STYLE_UPDATE_MODE__?: boolean;
-};
-
-type StyleBatchEntry = { id: string; ok: boolean };
-
-const styleUpdateBatch: StyleBatchEntry[] = [];
-
-const beginStyleUpdateBatch = () => {
-	styleUpdateBatch.length = 0;
-};
-
-const endStyleUpdateBatch = (): StyleBatchEntry[] => {
-	const out = styleUpdateBatch.slice();
-	styleUpdateBatch.length = 0;
-
-	return out;
-};
-
 const register = (id: string, ctor: unknown) => {
 	if (!id || !isComponentCtor(ctor)) return;
 	if (!componentRegistry.has(id)) {
@@ -208,34 +154,6 @@ const register = (id: string, ctor: unknown) => {
 			registeredAt: Date.now(),
 			updateCount: 0
 		});
-
-		return;
-	}
-
-	// Already registered. If we're inside an HMR style-update or
-	// template-update window, route this re-registration's new ctor
-	// through the appropriate surgical patcher. The per-file
-	// auto-registration block is the only place to intercept new ctors
-	// for CHILD components — the page chunk's `export *` only re-exports
-	// the page's own module.
-	const styleScope = globalThis as StyleUpdateMode;
-	if (styleScope.__ANGULAR_HMR_STYLE_UPDATE_MODE__) {
-		const ok = applyStyleUpdate(id, ctor);
-		styleUpdateBatch.push({ id, ok });
-
-		return;
-	}
-	const tmplScope = globalThis as TemplateUpdateMode;
-	if (tmplScope.__ANGULAR_HMR_TEMPLATE_UPDATE_MODE__) {
-		const ok = applyTemplateUpdate(id, ctor);
-		templateUpdateBatch.push({ id, ok });
-
-		return;
-	}
-	const svcScope = globalThis as ServiceUpdateMode;
-	if (svcScope.__ANGULAR_HMR_SERVICE_UPDATE_MODE__) {
-		const ok = applyServiceUpdate(id, ctor);
-		serviceUpdateBatch.push({ id, ok });
 	}
 };
 
@@ -349,391 +267,6 @@ const markPatchedDirty = (ctor: ComponentCtor) => {
 	}
 };
 
-/* Component-style HMR — swaps `ɵcmp.styles` and replaces matching
- * `<style>` tags in the document so the visible page reflects the new
- * CSS without a re-bootstrap.
- *
- * Why this is safe with Emulated encapsulation (the default): Angular's
- * compiler rewrites the CSS at build time, prefixing every selector
- * with `[_ngcontent-c<scopeId>]`. The scope ID is deterministic per
- * component def — the same source file produces the same scope ID
- * across rebuilds — so the rewritten DOM still matches the new CSS.
- * We only need to update the style *content*; the elements wearing
- * `_ngcontent-c<scopeId>` attributes are still on the page from the
- * initial bootstrap.
- *
- * ShadowDOM encapsulation (3) is not yet handled — each component
- * instance has its own shadow root with its own style tags, requiring
- * a per-instance walk. Falls through to reboot for now.
- *
- * The matching strategy: walk every `<style>` tag in `document.head`
- * and `document.body`, find ones whose `textContent` exactly matches a
- * string in the OLD `ɵcmp.styles` array, and replace it with the
- * corresponding string from the NEW array. Equal-length arrays only —
- * adding or removing a `styleUrl` entry triggers a reboot.
- *
- * Returns true on full success, false if we couldn't safely apply
- * (length mismatch, ShadowDOM, missing styles array, or any old
- * style had no DOM match — meaning we'd leave the page in a partially
- * updated state). */
-
-const SHADOW_DOM_ENCAPSULATION = 3;
-
-type StyleHost = {
-	host: ParentNode;
-	tags: HTMLStyleElement[];
-};
-
-const collectStyleHosts = (): StyleHost[] => {
-	const hosts: StyleHost[] = [];
-	const headTags = Array.from(
-		document.head.querySelectorAll('style')
-	) as HTMLStyleElement[];
-	const bodyTags = Array.from(
-		document.body.querySelectorAll('style')
-	) as HTMLStyleElement[];
-	if (headTags.length > 0)
-		hosts.push({ host: document.head, tags: headTags });
-	if (bodyTags.length > 0)
-		hosts.push({ host: document.body, tags: bodyTags });
-
-	return hosts;
-};
-
-const findStyleTagByContent = (
-	hosts: StyleHost[],
-	content: string,
-	consumed: Set<HTMLStyleElement>
-): HTMLStyleElement | null => {
-	for (const { tags } of hosts) {
-		for (const tag of tags) {
-			if (consumed.has(tag)) continue;
-			if (tag.textContent === content) return tag;
-		}
-	}
-
-	return null;
-};
-
-const applyStyleUpdate = (id: string, newCtor: unknown) => {
-	if (!isComponentCtor(newCtor)) return false;
-
-	const entry = componentRegistry.get(id);
-	if (!entry) {
-		// First time we've seen this component — register it but no styles
-		// to swap yet. The next edit will pick up the now-registered ctor.
-		register(id, newCtor);
-
-		return true;
-	}
-
-	const { liveCtor } = entry;
-	if (liveCtor === newCtor) return true;
-
-	const liveCmp = liveCtor.ɵcmp;
-	const newCmp = newCtor.ɵcmp;
-	if (!liveCmp || !newCmp) return false;
-
-	if (
-		liveCmp.encapsulation === SHADOW_DOM_ENCAPSULATION ||
-		newCmp.encapsulation === SHADOW_DOM_ENCAPSULATION
-	) {
-		// Shadow DOM scopes styles per-instance — out of scope for v1.
-		return false;
-	}
-
-	const oldStyles = liveCmp.styles;
-	const nextStyles = newCmp.styles;
-	if (!Array.isArray(oldStyles) || !Array.isArray(nextStyles)) return false;
-	if (oldStyles.length !== nextStyles.length) return false;
-	if (oldStyles.length === 0) {
-		// No styles to swap, no work to do — succeed trivially.
-		liveCmp.styles = nextStyles;
-
-		return true;
-	}
-
-	// Always update `ɵcmp.styles` first so future mounts of this
-	// component pick up the new content. The DOM `<style>` swap below
-	// handles currently-mounted instances; any component that isn't on
-	// the page right now (an unopened modal, a route view that hasn't
-	// been visited yet) simply has no `<style>` tag to find — and
-	// that's fine. The next time it mounts, Angular reads from
-	// `ɵcmp.styles` and injects the new content. Treating that case
-	// as a failure was the source of the "Transition was skipped"
-	// bug: the SPA at /portal/dashboard registered dozens of
-	// components whose styles weren't injected (modals, sibling tabs,
-	// etc.), and each missing live `<style>` tag forced fallthrough
-	// to the reboot path, firing `startViewTransition` while the
-	// previous one was still finishing.
-	liveCmp.styles = nextStyles;
-
-	const hosts = collectStyleHosts();
-	const consumed = new Set<HTMLStyleElement>();
-
-	for (let i = 0; i < oldStyles.length; i++) {
-		const oldContent = oldStyles[i] ?? '';
-		const nextContent = nextStyles[i] ?? '';
-		if (oldContent === nextContent) continue;
-		const tag = findStyleTagByContent(hosts, oldContent, consumed);
-		if (!tag) {
-			// Component not currently mounted (or already-swapped style).
-			// Skip the DOM swap; `ɵcmp.styles` is already updated above
-			// so the next mount picks up the new content.
-			continue;
-		}
-		consumed.add(tag);
-		tag.textContent = nextContent;
-	}
-
-	updateCounter.value++;
-	entry.updateCount++;
-	entry.registeredAt = Date.now();
-
-	return true;
-};
-
-/* Template HMR — surgical swap of the template-related fields on a
- * registered component's `ɵcmp` so the live instance re-renders with
- * the new template WITHOUT re-instantiating. Inputs, outputs, host
- * bindings, providers, and lifecycle hooks live on the class
- * prototype + ɵcmp, and we leave those alone — only the template
- * factory and the slot counts/queries that depend on it are replaced.
- *
- * Why a defined list of fields and not a full `ɵcmp` swap: a wholesale
- * `Object.assign(liveCmp, newCmp)` would also overwrite `providers /
- * providersResolver` and other class-level metadata. Those changes
- * already require a full reboot (the existing fast-path handler in
- * `angular.ts` checks `hasProviderChanges` and bails). For a pure
- * template edit, restricting the patch to the template subgraph
- * keeps live instances on the same DI tokens, queryList references,
- * input bindings, etc. — only the rendered output changes.
- *
- * After the swap, the component's TView (the cached view layout) is
- * stale because slot counts may have changed. Angular regenerates the
- * TView lazily on the first re-render, but only if the existing one
- * is invalidated — which happens automatically when we walk the live
- * instances and call `applyChanges`. The same `markPatchedDirty`
- * helper used by `applyUpdate` covers OnPush views too. */
-
-const TEMPLATE_PATCH_FIELDS = [
-	'template',
-	'consts',
-	'decls',
-	'vars',
-	'viewQuery',
-	'contentQueries',
-	'ngContentSelectors',
-	'dependencies',
-	'hostBindings',
-	'hostVars',
-	'hostAttrs',
-	'inputs',
-	'outputs'
-] as const;
-
-const applyTemplateUpdate = (id: string, newCtor: unknown) => {
-	if (!isComponentCtor(newCtor)) return false;
-
-	const entry = componentRegistry.get(id);
-	if (!entry) {
-		register(id, newCtor);
-
-		return true;
-	}
-
-	const { liveCtor } = entry;
-	if (liveCtor === newCtor) return true;
-
-	const liveCmp = liveCtor.ɵcmp as Record<string, unknown> | undefined;
-	const nextCmp = newCtor.ɵcmp as Record<string, unknown> | undefined;
-	if (!liveCmp || !nextCmp) return false;
-
-	// If providers changed, this isn't a pure template edit anymore —
-	// fall back to reboot via the caller.
-	if (hasProviderChanges(liveCtor, newCtor)) return false;
-
-	for (const field of TEMPLATE_PATCH_FIELDS) {
-		if (Object.prototype.hasOwnProperty.call(nextCmp, field)) {
-			liveCmp[field] = nextCmp[field];
-		}
-	}
-
-	pendingFastPatchRefresh.add(liveCtor);
-	updateCounter.value++;
-	entry.updateCount++;
-	entry.registeredAt = Date.now();
-
-	return true;
-};
-
-type TemplateUpdateMode = typeof globalThis & {
-	__ANGULAR_HMR_TEMPLATE_UPDATE_MODE__?: boolean;
-};
-
-const templateUpdateBatch: StyleBatchEntry[] = [];
-
-const beginTemplateUpdateBatch = () => {
-	templateUpdateBatch.length = 0;
-};
-
-const endTemplateUpdateBatch = (): StyleBatchEntry[] => {
-	const out = templateUpdateBatch.slice();
-	templateUpdateBatch.length = 0;
-
-	return out;
-};
-
-/* Service HMR — Level 3 hybrid:
- *   1. Always swap prototype methods on the live ctor. Reaches every
- *      live instance (singletons + transient injectees) because they
- *      all share the same prototype.
- *   2. If the live singleton is reachable via the root injector,
- *      attempt to instantiate a donor with the new ctor and copy any
- *      OWN PROPERTIES that the live singleton is missing — this picks
- *      up new class-field initializers without overwriting accumulated
- *      runtime state. Donor instantiation is best-effort: services
- *      using `inject()` outside of an injection context will throw,
- *      and we just skip the field merge in that case (the prototype
- *      swap still applies, so method changes take effect).
- *   3. The classifier only routes here for services with NO
- *      side-effecting calls in the constructor / field initializers
- *      (no `subscribe / setInterval / addEventListener / effect /
- *      new Worker / new EventSource / etc.`). Anything that touches
- *      external state at construction time falls through to reboot
- *      via the server-side classification, never reaching this code
- *      path. */
-
-type AppRefWithInjector = {
-	injector?: { get?: (token: unknown, notFoundValue?: unknown) => unknown };
-};
-
-const getRootInjector = (): {
-	get: (token: unknown, notFoundValue?: unknown) => unknown;
-} | null => {
-	const app = window.__ANGULAR_APP__ as AppRefWithInjector | null;
-	if (!app || !app.injector || typeof app.injector.get !== 'function') {
-		return null;
-	}
-
-	return app.injector as {
-		get: (token: unknown, notFoundValue?: unknown) => unknown;
-	};
-};
-
-const swapPrototypeMethods = (
-	liveCtor: ComponentCtor,
-	newCtor: ComponentCtor
-) => {
-	const newProto = newCtor.prototype as Record<string, unknown>;
-	const liveProto = liveCtor.prototype as Record<string, unknown>;
-	Object.getOwnPropertyNames(newProto).forEach((prop) => {
-		if (prop === 'constructor') return;
-		try {
-			const desc = Object.getOwnPropertyDescriptor(newProto, prop);
-			if (desc) Object.defineProperty(liveProto, prop, desc);
-		} catch {
-			/* non-configurable property — skip */
-		}
-	});
-};
-
-const tryInstantiateServiceDonor = (newCtor: ComponentCtor): unknown | null => {
-	try {
-		// `new newCtor()` with no args. Works for services with no
-		// constructor params and no `inject()` calls at field-init time.
-		// Anything more sophisticated (services that use `inject()`
-		// outside an injection context) throws here and we fall back to
-		// prototype-only swap.
-		return Reflect.construct(newCtor as unknown as new () => unknown, []);
-	} catch {
-		return null;
-	}
-};
-
-const mergeMissingFields = (
-	liveInstance: Record<string, unknown>,
-	donor: Record<string, unknown>
-) => {
-	let merged = 0;
-	Object.getOwnPropertyNames(donor).forEach((prop) => {
-		if (Object.prototype.hasOwnProperty.call(liveInstance, prop)) return;
-		try {
-			const desc = Object.getOwnPropertyDescriptor(donor, prop);
-			if (desc) {
-				Object.defineProperty(liveInstance, prop, desc);
-				merged++;
-			}
-		} catch {
-			/* defining the property failed — skip */
-		}
-	});
-
-	return merged;
-};
-
-const applyServiceUpdate = (id: string, newCtor: unknown) => {
-	if (!isComponentCtor(newCtor)) return false;
-
-	const entry = componentRegistry.get(id);
-	if (!entry) {
-		register(id, newCtor);
-
-		return true;
-	}
-
-	const { liveCtor } = entry;
-	if (liveCtor === newCtor) return true;
-
-	// Method swap — reaches every live instance.
-	swapPrototypeMethods(liveCtor, newCtor);
-
-	// Best-effort field merge on the live singleton.
-	const injector = getRootInjector();
-	if (injector) {
-		try {
-			const liveInstance = injector.get(liveCtor, null) as Record<
-				string,
-				unknown
-			> | null;
-			if (liveInstance) {
-				const donor = tryInstantiateServiceDonor(newCtor) as Record<
-					string,
-					unknown
-				> | null;
-				if (donor) mergeMissingFields(liveInstance, donor);
-			}
-		} catch {
-			/* injector lookup failed — service may not be `providedIn:
-			   "root"`, or the type-token mismatched. Prototype swap is
-			   already applied, so methods take effect either way. */
-		}
-	}
-
-	updateCounter.value++;
-	entry.updateCount++;
-	entry.registeredAt = Date.now();
-
-	return true;
-};
-
-type ServiceUpdateMode = typeof globalThis & {
-	__ANGULAR_HMR_SERVICE_UPDATE_MODE__?: boolean;
-};
-
-const serviceUpdateBatch: StyleBatchEntry[] = [];
-
-const beginServiceUpdateBatch = () => {
-	serviceUpdateBatch.length = 0;
-};
-
-const endServiceUpdateBatch = (): StyleBatchEntry[] => {
-	const out = serviceUpdateBatch.slice();
-	serviceUpdateBatch.length = 0;
-
-	return out;
-};
-
 const applyUpdate = (id: string, newCtor: unknown) => {
 	if (!isComponentCtor(newCtor)) return false;
 
@@ -869,16 +402,7 @@ const hasPageExportsChanged = (sourceId: string): boolean => {
 export const installAngularHMRRuntime = () => {
 	if (typeof window === 'undefined') return;
 	window.__ANGULAR_HMR__ = {
-		applyServiceUpdate,
-		applyStyleUpdate,
-		applyTemplateUpdate,
 		applyUpdate,
-		beginServiceUpdateBatch,
-		beginStyleUpdateBatch,
-		beginTemplateUpdateBatch,
-		endServiceUpdateBatch,
-		endStyleUpdateBatch,
-		endTemplateUpdateBatch,
 		getStats: getAngularHmrStats,
 		hasPageExportsChanged,
 		recordPageExports,

package/dist/dev/client/hmrClient.ts

@@ -14,6 +14,7 @@ import {
 import { detectCurrentFramework } from './frameworkDetect';
 import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
 import { handleAngularUpdate } from './handlers/angular';
+import { dispatchAngularComponentUpdate } from './handlers/angularHmrShim';
 import { handleReactUpdate } from './handlers/react';
 import { handleHTMLUpdate, handleScriptUpdate } from './handlers/html';
 import { handleHTMXUpdate } from './handlers/htmx';
@@ -152,6 +153,26 @@ const handleHMRMessage = (message: HMRMessage) => {
 			hideErrorOverlay();
 			handleAngularUpdate(message);
 			break;
+		case 'angular:component-update': {
+			// Surgical-HMR fast path. Server resolved the changed
+			// file → owning component classes and emitted one
+			// message per affected component. Our injected
+			// `__ng_hmr_load` blocks (see hmrInjectionPlugin.ts)
+			// listen here and re-fetch the applyMetadata module.
+			const data = message.data as
+				| { id?: string; timestamp?: number }
+				| undefined;
+			if (data && typeof data.id === 'string') {
+				dispatchAngularComponentUpdate({
+					id: data.id,
+					timestamp:
+						typeof data.timestamp === 'number'
+							? data.timestamp
+							: Date.now()
+				});
+			}
+			break;
+		}
 		case 'rebuild-error':
 			handleRebuildError(message);
 			break;