@absolutejs/absolute 0.19.0-beta.1043 → 0.19.0-beta.1044

package/dist/dev/client/hmrClient.ts

@@ -0,0 +1,352 @@
+import type {} from '../../types/globals';
+/* AbsoluteJS HMR Client - Entry point
+   Initializes WebSocket connection, dispatches messages to framework handlers */
+
+import { hmrState } from './hmrState';
+import {
+	HMR_UPDATE_TIMEOUT_MS,
+	MAX_RECONNECT_ATTEMPTS,
+	PING_INTERVAL_MS,
+	RECONNECT_INITIAL_DELAY_MS,
+	RECONNECT_POLL_INTERVAL_MS,
+	WEBSOCKET_NORMAL_CLOSURE
+} from './constants';
+import { detectCurrentFramework } from './frameworkDetect';
+import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
+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';
+import { handleSvelteUpdate } from './handlers/svelte';
+import { handleVueUpdate } from './handlers/vue';
+import { reloadCSSStylesheets } from './cssUtils';
+import {
+	handleFullReload,
+	handleManifest,
+	handleModuleUpdate,
+	handleRebuildComplete,
+	handleRebuildError
+} from './handlers/rebuild';
+
+// Initialize HMR globals
+if (typeof window !== 'undefined') {
+	installAngularRemountGlobal();
+	if (!window.__HMR_MANIFEST__) {
+		window.__HMR_MANIFEST__ = {};
+	}
+	if (!window.__HMR_MODULE_UPDATES__) {
+		window.__HMR_MODULE_UPDATES__ = [];
+	}
+	if (!window.__HMR_MODULE_VERSIONS__) {
+		window.__HMR_MODULE_VERSIONS__ = {};
+	}
+	if (!window.__HMR_SERVER_VERSIONS__) {
+		window.__HMR_SERVER_VERSIONS__ = {};
+	}
+}
+
+// Catch uncaught runtime errors and show the error overlay
+window.addEventListener('error', (evt) => {
+	if (!evt.error) return;
+	const isErr = evt.error instanceof Error;
+	showErrorOverlay({
+		framework: detectCurrentFramework() || undefined,
+		kind: 'runtime',
+		message: isErr ? evt.error.message : String(evt.error),
+		stack: isErr ? evt.error.stack : undefined
+	});
+});
+
+window.addEventListener('unhandledrejection', (evt) => {
+	if (!evt.reason) return;
+	const isErr = evt.reason instanceof Error;
+	showErrorOverlay({
+		framework: detectCurrentFramework() || undefined,
+		kind: 'runtime',
+		message: isErr ? evt.reason.message : String(evt.reason),
+		stack: isErr ? evt.reason.stack : undefined
+	});
+});
+
+const hmrUpdateTypes = new Set([
+	'angular:component-update',
+	'angular:component-remount',
+	'angular:rebootstrap',
+	'react-update',
+	'html-update',
+	'htmx-update',
+	'vue-update',
+	'svelte-update',
+	'style-update',
+	'module-update',
+	'rebuild-start'
+]);
+
+type HMRMessage = {
+	data: {
+		affectedFrameworks?: string[];
+		column?: number;
+		error?: string;
+		file?: string;
+		framework?: string;
+		hasCSSChanges?: boolean;
+		hasComponentChanges?: boolean;
+		html?: string;
+		line?: number;
+		lineText?: string;
+		manifest?: Record<string, string>;
+		moduleVersions?: Record<string, number>;
+		pageModuleUrl?: string;
+		primarySource?: string;
+		scriptUrl?: string;
+		serverDuration?: number;
+		serverVersions?: Record<string, number>;
+	};
+	type: string;
+};
+
+const handleHMRMessage = (message: HMRMessage) => {
+	if (hmrUpdateTypes.has(message.type)) {
+		hmrState.isHMRUpdating = true;
+		setTimeout(() => {
+			hmrState.isHMRUpdating = false;
+		}, HMR_UPDATE_TIMEOUT_MS);
+	}
+
+	switch (message.type) {
+		case 'manifest':
+			handleManifest(message);
+			break;
+		case 'rebuild-start':
+			break;
+		case 'rebuild-complete':
+			handleRebuildComplete(message);
+			break;
+		case 'framework-update':
+			break;
+		case 'module-update':
+			hideErrorOverlay();
+			handleModuleUpdate(message);
+			break;
+		case 'react-update':
+			handleReactUpdate(message);
+			break;
+		case 'script-update':
+			hideErrorOverlay();
+			handleScriptUpdate(message);
+			break;
+		case 'html-update':
+			hideErrorOverlay();
+			handleHTMLUpdate(message);
+			break;
+		case 'htmx-update':
+			hideErrorOverlay();
+			handleHTMXUpdate(message);
+			break;
+		case 'svelte-update':
+			hideErrorOverlay();
+			handleSvelteUpdate(message);
+			break;
+		case 'vue-update':
+			hideErrorOverlay();
+			handleVueUpdate(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.
+			hideErrorOverlay();
+			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 '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`.
+			hideErrorOverlay();
+			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
+			// (constructor/decorator/imports change, service edit,
+			// etc.). The bundle has already been rebuilt server-side
+			// and the manifest is updated. Call the chunk's baked-in
+			// hook (set by the hydration template in compileAngular.ts)
+			// to dynamic-import the fresh bundle URL — re-importing
+			// re-runs the destroy + bootstrapApplication block.
+			hideErrorOverlay();
+			const data = message.data as
+				| { manifest?: Record<string, string>; reason?: string }
+				| undefined;
+			if (data?.manifest) {
+				window.__HMR_MANIFEST__ = data.manifest;
+			}
+			const w = window as Window & {
+				__ABS_ANGULAR_REBOOTSTRAP__?: () => Promise<void>;
+			};
+			if (typeof w.__ABS_ANGULAR_REBOOTSTRAP__ === 'function') {
+				w.__ABS_ANGULAR_REBOOTSTRAP__().catch((err) => {
+					console.error(
+						'[absolutejs] angular:rebootstrap failed',
+						err
+					);
+				});
+			} else {
+				// No hook = no Angular page loaded, or the hook
+				// hasn't run yet. Falling back to a full reload is
+				// safe and correct.
+				window.location.reload();
+			}
+			break;
+		}
+		case 'rebuild-error':
+			handleRebuildError(message);
+			break;
+		case 'full-reload':
+			handleFullReload();
+			break;
+		case 'pong':
+			break;
+		case 'style-update':
+			reloadCSSStylesheets(message.data.manifest ?? {});
+			break;
+		default:
+			break;
+	}
+};
+
+// Prevent multiple WebSocket connections
+if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
+	// Determine WebSocket URL
+	const wsHost = location.hostname;
+	const wsPort =
+		location.port || (location.protocol === 'https:' ? '443' : '80');
+	const wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+	const wsUrl = `${wsProtocol}://${wsHost}:${wsPort}/hmr`;
+
+	const wsc = new WebSocket(wsUrl);
+	window.__HMR_WS__ = wsc;
+
+	wsc.onopen = function () {
+		hmrState.isConnected = true;
+		sessionStorage.setItem('__HMR_CONNECTED__', 'true');
+
+		const currentFramework = detectCurrentFramework();
+		wsc.send(
+			JSON.stringify({
+				framework: currentFramework,
+				type: 'ready'
+			})
+		);
+
+		if (hmrState.reconnectTimeout) {
+			clearTimeout(hmrState.reconnectTimeout);
+			hmrState.reconnectTimeout = null;
+		}
+
+		hmrState.pingInterval = setInterval(() => {
+			if (wsc.readyState === WebSocket.OPEN && hmrState.isConnected) {
+				wsc.send(JSON.stringify({ type: 'ping' }));
+			}
+		}, PING_INTERVAL_MS);
+	};
+
+	wsc.onmessage = function (event: MessageEvent) {
+		let message;
+		try {
+			message = JSON.parse(event.data);
+		} catch {
+			return;
+		}
+
+		handleHMRMessage(message);
+	};
+
+	wsc.onclose = function (event: CloseEvent) {
+		hmrState.isConnected = false;
+
+		if (hmrState.pingInterval) {
+			clearInterval(hmrState.pingInterval);
+			hmrState.pingInterval = null;
+		}
+
+		if (event.code !== WEBSOCKET_NORMAL_CLOSURE) {
+			let attempts = 0;
+			hmrState.reconnectTimeout = setTimeout(function pollServer() {
+				attempts++;
+				if (attempts > MAX_RECONNECT_ATTEMPTS) return;
+
+				fetch('/hmr-status', { cache: 'no-store' })
+					.then((res) => {
+						if (res.ok) {
+							window.location.reload();
+						} else {
+							hmrState.reconnectTimeout = setTimeout(
+								pollServer,
+								RECONNECT_POLL_INTERVAL_MS
+							);
+						}
+
+						return undefined;
+					})
+					.catch(() => {
+						hmrState.reconnectTimeout = setTimeout(
+							pollServer,
+							RECONNECT_POLL_INTERVAL_MS
+						);
+					});
+			}, RECONNECT_INITIAL_DELAY_MS);
+		}
+	};
+
+	wsc.onerror = function () {
+		hmrState.isConnected = false;
+	};
+
+	window.addEventListener('beforeunload', () => {
+		if (hmrState.isHMRUpdating) {
+			if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
+			if (hmrState.reconnectTimeout)
+				clearTimeout(hmrState.reconnectTimeout);
+
+			return;
+		}
+
+		if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
+		if (hmrState.reconnectTimeout) clearTimeout(hmrState.reconnectTimeout);
+	});
+}

package/dist/dev/client/hmrState.ts

@@ -0,0 +1,14 @@
+import type {} from '../../types/globals';
+export const hmrState: {
+	isConnected: boolean;
+	isFirstHMRUpdate: boolean;
+	isHMRUpdating: boolean;
+	pingInterval: ReturnType<typeof setInterval> | null;
+	reconnectTimeout: ReturnType<typeof setTimeout> | null;
+} = {
+	isConnected: false,
+	isFirstHMRUpdate: true,
+	isHMRUpdating: false,
+	pingInterval: null,
+	reconnectTimeout: null
+};

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 = () => {
+	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, {
+		bottom: '16px',
+		display: 'flex',
+		flexDirection: 'column',
+		fontFamily:
+			'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+		fontSize: '12px',
+		gap: '8px',
+		maxWidth: '420px',
+		pointerEvents: 'none',
+		position: 'fixed',
+		right: '16px',
+		zIndex: '2147483646'
+	});
+	document.body.appendChild(container);
+
+	return container;
+};
+
+const accentForType = (updateType: string | undefined) => {
+	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)',
+		borderLeft: `3px solid ${accent}`,
+		borderRadius: '6px',
+		boxShadow: '0 6px 24px rgba(0, 0, 0, 0.35)',
+		color: '#f8fafc',
+		maxWidth: '420px',
+		opacity: '0',
+		overflow: 'hidden',
+		padding: '8px 12px',
+		pointerEvents: 'auto',
+		textOverflow: 'ellipsis',
+		transform: 'translateY(6px)',
+		transition: `opacity ${FADE_MS}ms ease, transform ${FADE_MS}ms ease`,
+		whiteSpace: 'nowrap'
+	});
+
+	const label = document.createElement('div');
+	Object.assign(label.style, {
+		color: accent,
+		fontWeight: '600',
+		letterSpacing: '0.02em',
+		marginBottom: '2px'
+	});
+	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',
+			fontSize: '11px',
+			marginTop: '2px',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		});
+		// 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);
+	});
+};

package/dist/dev/client/moduleVersions.ts

@@ -0,0 +1,62 @@
+import type {} from '../../types/globals';
+/* Module version validation and sync */
+
+export const checkModuleVersions = (
+	serverVersions: Record<string, number> | undefined,
+	clientVersions: Record<string, number> | undefined
+) => {
+	if (!serverVersions || !clientVersions) {
+		return { needsSync: false, stale: [] };
+	}
+
+	const stale = Object.entries(serverVersions)
+		.filter(([modulePath, serverVersion]) => {
+			const clientVersion = clientVersions[modulePath];
+
+			return clientVersion === undefined || clientVersion < serverVersion;
+		})
+		.map(([modulePath]) => modulePath);
+
+	return { needsSync: stale.length > 0, stale };
+};
+
+const resolveManifestPath = (
+	modulePath: string,
+	manifest: Record<string, string> | undefined
+) => {
+	if (!manifest) {
+		return modulePath;
+	}
+	for (const key of Object.keys(manifest)) {
+		const path = manifest[key] ?? modulePath;
+		if (path === modulePath || path.includes(modulePath)) {
+			return path;
+		}
+	}
+
+	return modulePath;
+};
+
+export const prefetchModules = (
+	modulePaths: string[],
+	manifest: Record<string, string> | undefined
+) => {
+	const prefetchPromises: Promise<unknown>[] = [];
+
+	for (const modulePath of modulePaths) {
+		const manifestPath = resolveManifestPath(modulePath, manifest);
+
+		const cacheBuster = `?t=${Date.now()}`;
+		const fullPath = manifestPath.startsWith('/')
+			? manifestPath + cacheBuster
+			: `/${manifestPath}${cacheBuster}`;
+
+		prefetchPromises.push(
+			import(fullPath).catch(() => {
+				/* ignore */
+			})
+		);
+	}
+
+	return Promise.all(prefetchPromises);
+};

package/dist/dev/client/reactRefreshSetup.ts

@@ -0,0 +1,31 @@
+import type {} from '../../types/globals';
+/* React Refresh runtime setup — must be imported before any component modules.
+   Bun's reactFastRefresh flag injects $RefreshSig$/$RefreshReg$ calls into
+   component code. This module ensures those globals exist before components
+   initialize.
+
+   IMPORTANT: This module is idempotent. On HMR re-import the existing runtime
+   is preserved so new component registrations feed into the SAME RefreshRuntime
+   instance that owns the current React tree. */
+
+import * as RefreshRuntime from './vendor/reactRefreshRuntime.js';
+
+if (!window.$RefreshRuntime$) {
+	RefreshRuntime.injectIntoGlobalHook(window);
+	window.$RefreshRuntime$ = RefreshRuntime;
+	window.$RefreshReg$ = (type: unknown, id: string) =>
+		RefreshRuntime.register(type, id);
+	window.$RefreshSig$ = () =>
+		RefreshRuntime.createSignatureFunctionForTransform();
+
+	// Replay buffered registrations from the bootstrap script.
+	// The SSR HTML injects a buffering $RefreshReg$ that captures
+	// registrations before the runtime is ready.
+	const buffer = window.__REFRESH_BUFFER__;
+	if (buffer) {
+		for (const [type, id] of buffer) {
+			RefreshRuntime.register(type, id);
+		}
+		window.__REFRESH_BUFFER__ = undefined;
+	}
+}