@absolutejs/absolute 0.19.0-beta.845 → 0.19.0-beta.846

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

@@ -26,6 +26,21 @@ 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) & {
@@ -145,6 +160,45 @@ 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)) {
@@ -154,6 +208,34 @@ 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 });
 	}
 };
 
@@ -267,6 +349,383 @@ 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;
+	}
+
+	const hosts = collectStyleHosts();
+	const consumed = new Set<HTMLStyleElement>();
+	const matches: { tag: HTMLStyleElement; nextContent: string }[] = [];
+
+	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) {
+			// Couldn't locate one of the live <style> tags — fall through
+			// to reboot rather than leaving the page in a half-updated
+			// state.
+			return false;
+		}
+		consumed.add(tag);
+		matches.push({ tag, nextContent });
+	}
+
+	// Only mutate after we've verified we can update every diffed style.
+	for (const { tag, nextContent } of matches) {
+		tag.textContent = nextContent;
+	}
+	liveCmp.styles = nextStyles;
+
+	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;
 
@@ -402,7 +861,16 @@ 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/hmrToast.ts

@@ -0,0 +1,150 @@
+import type {} from '../../types/globals';
+/* HMR notification toast — bottom-right corner, fades in for ~2.5s.
+ *
+ * Used when the Angular HMR client falls through to a full reboot, so
+ * the developer can SEE why a save triggered a reboot instead of
+ * silently watching the splash transition. The reason string comes
+ * from the server-side classifier (`src/dev/angular/editTypeDetection`),
+ * surfaced via the `reason` field on the HMR wire message.
+ *
+ * Mounts a single shared container the first time it's called and
+ * stacks toasts inside it. Each toast removes itself after the visible
+ * window expires; the container stays mounted for the session. */
+
+const CONTAINER_ID = '__abs_hmr_toast_container__';
+const VISIBLE_DURATION_MS = 2500;
+const FADE_MS = 220;
+
+const ensureContainer = (): HTMLDivElement => {
+	const existing = document.getElementById(
+		CONTAINER_ID
+	) as HTMLDivElement | null;
+	if (existing) return existing;
+
+	const container = document.createElement('div');
+	container.id = CONTAINER_ID;
+	Object.assign(container.style, {
+		position: 'fixed',
+		bottom: '16px',
+		right: '16px',
+		display: 'flex',
+		flexDirection: 'column',
+		gap: '8px',
+		zIndex: '2147483646',
+		pointerEvents: 'none',
+		fontFamily:
+			'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+		fontSize: '12px',
+		maxWidth: '420px'
+	});
+	document.body.appendChild(container);
+
+	return container;
+};
+
+const accentForType = (updateType: string | undefined): string => {
+	switch (updateType) {
+		case 'route':
+			return '#1d4ed8';
+		case 'service-with-side-effects':
+			return '#b45309';
+		case 'reboot':
+		default:
+			return '#dd0031';
+	}
+};
+
+export type HmrToastInput = {
+	updateType?: string;
+	reason?: string;
+	editSourceFile?: string;
+};
+
+export const showHmrToast = ({
+	updateType,
+	reason,
+	editSourceFile
+}: HmrToastInput) => {
+	if (typeof document === 'undefined') return;
+	const container = ensureContainer();
+
+	const toast = document.createElement('div');
+	const accent = accentForType(updateType);
+	Object.assign(toast.style, {
+		background: 'rgba(15, 17, 22, 0.94)',
+		color: '#f8fafc',
+		borderLeft: `3px solid ${accent}`,
+		padding: '8px 12px',
+		borderRadius: '6px',
+		boxShadow: '0 6px 24px rgba(0, 0, 0, 0.35)',
+		opacity: '0',
+		transform: 'translateY(6px)',
+		transition: `opacity ${FADE_MS}ms ease, transform ${FADE_MS}ms ease`,
+		pointerEvents: 'auto',
+		whiteSpace: 'nowrap',
+		overflow: 'hidden',
+		textOverflow: 'ellipsis',
+		maxWidth: '420px'
+	});
+
+	const label = document.createElement('div');
+	Object.assign(label.style, {
+		color: accent,
+		fontWeight: '600',
+		marginBottom: '2px',
+		letterSpacing: '0.02em'
+	});
+	label.textContent = `HMR reboot — ${updateType ?? 'unknown'}`;
+	toast.appendChild(label);
+
+	const body = document.createElement('div');
+	Object.assign(body.style, {
+		color: '#cbd5e1',
+		whiteSpace: 'normal',
+		wordBreak: 'break-word'
+	});
+	body.textContent = reason ?? '(no reason given)';
+	toast.appendChild(body);
+
+	if (editSourceFile) {
+		const path = document.createElement('div');
+		Object.assign(path.style, {
+			color: '#64748b',
+			marginTop: '2px',
+			fontSize: '11px',
+			whiteSpace: 'nowrap',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis'
+		});
+		// Format like the server logger does: relative + leading slash.
+		const cwdLike = editSourceFile.replace(/^.*?(\/src\/|\/pages\/)/, '$1');
+		path.textContent = cwdLike;
+		toast.appendChild(path);
+	}
+
+	container.appendChild(toast);
+
+	// Trigger CSS transition by deferring to the next paint.
+	requestAnimationFrame(() => {
+		toast.style.opacity = '1';
+		toast.style.transform = 'translateY(0)';
+	});
+
+	const removeAt = window.setTimeout(() => {
+		toast.style.opacity = '0';
+		toast.style.transform = 'translateY(6px)';
+		window.setTimeout(() => {
+			if (toast.parentNode) toast.parentNode.removeChild(toast);
+		}, FADE_MS);
+	}, VISIBLE_DURATION_MS);
+
+	// If the user clicks the toast, dismiss it immediately.
+	toast.addEventListener('click', () => {
+		window.clearTimeout(removeAt);
+		toast.style.opacity = '0';
+		toast.style.transform = 'translateY(6px)';
+		window.setTimeout(() => {
+			if (toast.parentNode) toast.parentNode.removeChild(toast);
+		}, FADE_MS);
+	});
+};