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

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

@@ -0,0 +1,108 @@
+import type {} from '../../../types/globals';
+/* React HMR update handler
+   Uses React Fast Refresh to hot-swap components while preserving state.
+   Code splitting ensures React lives in a shared chunk that stays cached,
+   so dynamic import of the rebuilt entry reuses the same React instance. */
+
+import { hideErrorOverlay } from '../errorOverlay';
+import { detectCurrentFramework } from '../frameworkDetect';
+
+export const handleReactUpdate = (message: {
+	data: {
+		hasCSSChanges?: boolean;
+		hasComponentChanges?: boolean;
+		manifest?: Record<string, string>;
+		pageModuleUrl?: string;
+		primarySource?: string;
+		serverDuration?: number;
+	};
+}) => {
+	const currentFramework = detectCurrentFramework();
+	if (currentFramework !== 'react') return;
+
+	const hasComponentChanges = message.data.hasComponentChanges !== false;
+	const hasCSSChanges = message.data.hasCSSChanges === true;
+	const cssPath =
+		message.data.manifest && message.data.manifest.ReactExampleCSS;
+
+	if (!hasComponentChanges && hasCSSChanges && cssPath) {
+		reloadReactCSS(cssPath);
+
+		return;
+	}
+
+	const refreshRuntime = window.$RefreshRuntime$;
+	const { serverDuration } = message.data;
+	const { pageModuleUrl } = message.data;
+
+	if (pageModuleUrl && refreshRuntime) {
+		applyRefreshImport(pageModuleUrl, refreshRuntime, serverDuration);
+
+		return;
+	}
+
+	// No module URL — shouldn't happen, but reload as safety fallback
+	window.location.reload();
+};
+
+const sendTiming = (clientStart: number, serverDuration?: number) => {
+	if (window.__HMR_WS__) {
+		const clientMs = Math.round(performance.now() - clientStart);
+		const total = (serverDuration ?? 0) + clientMs;
+		window.__HMR_WS__.send(
+			JSON.stringify({ duration: total, type: 'hmr-timing' })
+		);
+	}
+	if (window.__ERROR_BOUNDARY__) {
+		window.__ERROR_BOUNDARY__.reset();
+	} else {
+		hideErrorOverlay();
+	}
+};
+
+const applyRefreshImport = (
+	moduleUrl: string,
+	refreshRuntime: { performReactRefresh: () => unknown },
+	serverDuration?: number
+) => {
+	const clientStart = performance.now();
+	import(`${moduleUrl}?t=${Date.now()}`)
+		.then(() => {
+			refreshRuntime.performReactRefresh();
+			sendTiming(clientStart, serverDuration);
+
+			return undefined;
+		})
+		.catch((err) => {
+			console.warn(
+				'[HMR] React Fast Refresh failed, falling back to reload:',
+				err
+			);
+			window.location.reload();
+		});
+};
+
+const reloadReactCSS = (cssPath: string) => {
+	const existingCSSLinks = document.head.querySelectorAll<HTMLLinkElement>(
+		'link[rel="stylesheet"]'
+	);
+	existingCSSLinks.forEach((link) => {
+		const href = link.getAttribute('href');
+		if (!href) {
+			return;
+		}
+		const hrefBase = (href.split('?')[0] ?? '').split('/').pop() ?? '';
+		const cssPathBase =
+			(cssPath.split('?')[0] ?? '').split('/').pop() ?? '';
+		if (
+			hrefBase === cssPathBase ||
+			href.includes('react-example') ||
+			cssPathBase.includes(hrefBase)
+		) {
+			const newHref = `${
+				cssPath + (cssPath.includes('?') ? '&' : '?')
+			}t=${Date.now()}`;
+			link.href = newHref;
+		}
+	});
+};

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

@@ -0,0 +1,153 @@
+import type {} from '../../../types/globals';
+/* Rebuild, manifest, module-update, and error handlers */
+
+import { REBUILD_RELOAD_DELAY_MS } from '../constants';
+import {
+	hideErrorOverlay,
+	isRuntimeErrorOverlay,
+	showErrorOverlay
+} from '../errorOverlay';
+
+export const handleFullReload = () => {
+	setTimeout(() => {
+		window.location.reload();
+	}, REBUILD_RELOAD_DELAY_MS);
+};
+
+export const handleManifest = (message: {
+	data: {
+		manifest?: Record<string, string>;
+		serverVersions?: Record<string, number>;
+	};
+}) => {
+	window.__HMR_MANIFEST__ = message.data.manifest;
+
+	if (message.data.serverVersions) {
+		window.__HMR_SERVER_VERSIONS__ = message.data.serverVersions;
+	}
+
+	if (!window.__HMR_MODULE_VERSIONS__) {
+		window.__HMR_MODULE_VERSIONS__ = {};
+	}
+
+	window.__HMR_MODULE_UPDATES__ = [];
+};
+
+const HMR_FRAMEWORKS = ['angular', 'react', 'vue', 'svelte', 'html', 'htmx'];
+
+const mergeRecord = (
+	source: Record<string, string | number>,
+	target: Record<string, string | number>
+) => {
+	Object.keys(source)
+		.filter((key) => Object.prototype.hasOwnProperty.call(source, key))
+		.forEach((key) => {
+			const value = source[key];
+			if (value !== undefined) {
+				target[key] = value;
+			}
+		});
+};
+
+const mergeServerVersions = (
+	serverVersions: Record<string, number> | undefined
+) => {
+	if (!serverVersions) return;
+	const existing = window.__HMR_SERVER_VERSIONS__ ?? {};
+	mergeRecord(serverVersions, existing);
+	window.__HMR_SERVER_VERSIONS__ = existing;
+};
+
+const mergeModuleVersions = (
+	moduleVersions: Record<string, number> | undefined
+) => {
+	if (!moduleVersions) return;
+	const existing = window.__HMR_MODULE_VERSIONS__ ?? {};
+	mergeRecord(moduleVersions, existing);
+	window.__HMR_MODULE_VERSIONS__ = existing;
+};
+
+const mergeManifest = (manifest: Record<string, string> | undefined) => {
+	if (!manifest) return;
+	const existing = window.__HMR_MANIFEST__ ?? {};
+	mergeRecord(manifest, existing);
+	window.__HMR_MANIFEST__ = existing;
+};
+
+export const handleModuleUpdate = (message: {
+	data: {
+		framework?: string;
+		manifest?: Record<string, string>;
+		moduleVersions?: Record<string, number>;
+		serverVersions?: Record<string, number>;
+	};
+}) => {
+	const hasHMRHandler = HMR_FRAMEWORKS.includes(message.data.framework || '');
+
+	if (!hasHMRHandler) {
+		window.location.reload();
+
+		return;
+	}
+
+	mergeServerVersions(message.data.serverVersions);
+	mergeModuleVersions(message.data.moduleVersions);
+	mergeManifest(message.data.manifest);
+
+	if (!window.__HMR_MODULE_UPDATES__) {
+		window.__HMR_MODULE_UPDATES__ = [];
+	}
+	window.__HMR_MODULE_UPDATES__.push(message.data);
+};
+
+export const handleRebuildComplete = (message: {
+	data: {
+		affectedFrameworks?: string[];
+		manifest?: Record<string, string>;
+	};
+}) => {
+	if (!isRuntimeErrorOverlay()) {
+		hideErrorOverlay();
+	}
+	if (window.__HMR_MANIFEST__) {
+		window.__HMR_MANIFEST__ = message.data.manifest;
+	}
+
+	if (
+		message.data.affectedFrameworks &&
+		!message.data.affectedFrameworks.includes('angular') &&
+		!message.data.affectedFrameworks.includes('react') &&
+		!message.data.affectedFrameworks.includes('html') &&
+		!message.data.affectedFrameworks.includes('htmx') &&
+		!message.data.affectedFrameworks.includes('vue') &&
+		!message.data.affectedFrameworks.includes('svelte')
+	) {
+		const url = new URL(window.location.href);
+		url.searchParams.set('_cb', Date.now().toString());
+		window.location.href = url.toString();
+	}
+};
+
+export const handleRebuildError = (message: {
+	data: {
+		affectedFrameworks?: string[];
+		column?: number;
+		error?: string;
+		file?: string;
+		framework?: string;
+		line?: number;
+		lineText?: string;
+	};
+}) => {
+	const errData = message.data || {};
+	showErrorOverlay({
+		column: errData.column,
+		file: errData.file,
+		framework:
+			errData.framework ||
+			(errData.affectedFrameworks && errData.affectedFrameworks[0]),
+		line: errData.line,
+		lineText: errData.lineText,
+		message: errData.error || 'Build failed'
+	});
+};

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

@@ -0,0 +1,334 @@
+import type {} from '../../../types/globals';
+/* Svelte HMR update handler */
+
+import { SVELTE_CSS_LOAD_TIMEOUT_MS } from '../constants';
+import {
+	saveDOMState,
+	restoreDOMState,
+	saveScrollState,
+	restoreScrollState
+} from '../domState';
+import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
+
+type SvelteHmrWindow = Window & {
+	__SVELTE_HMR_ACCEPT__?: Record<string, (mod: unknown) => void>;
+};
+
+/* Swap a stylesheet link by matching cssBaseName or framework name */
+const swapStylesheet = (
+	cssUrl: string,
+	cssBaseName: string,
+	framework: string
+) => {
+	let existingLink: HTMLLinkElement | null = null;
+	document
+		.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+		.forEach((link) => {
+			const href = link.getAttribute('href') ?? '';
+			if (href.includes(cssBaseName) || href.includes(framework)) {
+				existingLink = link;
+			}
+		});
+
+	if (!existingLink) {
+		return;
+	}
+
+	const capturedExisting: HTMLLinkElement = existingLink;
+	const newLink = document.createElement('link');
+	newLink.rel = 'stylesheet';
+	newLink.href = `${cssUrl}?t=${Date.now()}`;
+	newLink.onload = () => {
+		if (capturedExisting && capturedExisting.parentNode) {
+			capturedExisting.remove();
+		}
+	};
+	document.head.appendChild(newLink);
+};
+
+const extractCountFromDOM = () => {
+	const countButton = document.querySelector('button');
+	if (!countButton || !countButton.textContent) {
+		return {};
+	}
+
+	const countMatch = countButton.textContent.match(/(\d+)/);
+	if (!countMatch) {
+		return {};
+	}
+
+	return { initialCount: parseInt(countMatch[1] ?? '0', 10) };
+};
+
+const loadStateFromSession = () => {
+	try {
+		const stored = sessionStorage.getItem('__SVELTE_HMR_STATE__');
+		if (!stored) {
+			return {};
+		}
+
+		const parsed: Record<string, unknown> = JSON.parse(stored);
+		if (parsed && Object.keys(parsed).length > 0) {
+			return parsed;
+		}
+
+		return {};
+	} catch {
+		return {};
+	}
+};
+
+const saveStateToSession = (preservedState: Record<string, unknown>) => {
+	if (Object.keys(preservedState).length === 0) {
+		return;
+	}
+
+	try {
+		sessionStorage.setItem(
+			'__SVELTE_HMR_STATE__',
+			JSON.stringify(preservedState)
+		);
+	} catch {
+		/* ignore */
+	}
+};
+
+const collectCssRules = (sheet: CSSStyleSheet) => {
+	let rules = '';
+	for (let idx = 0; idx < sheet.cssRules.length; idx++) {
+		const rule = sheet.cssRules[idx];
+		if (!rule) continue;
+		rules += `${rule.cssText}\n`;
+	}
+
+	return rules;
+};
+
+const preserveLinkAsInlineStyle = (link: HTMLLinkElement) => {
+	try {
+		const { sheet } = link;
+		if (!sheet || sheet.cssRules.length === 0) {
+			return null;
+		}
+
+		const style = document.createElement('style');
+		style.dataset.hmrPreserved = 'true';
+		style.textContent = collectCssRules(sheet);
+		document.head.appendChild(style);
+
+		return style;
+	} catch {
+		/* Cross-origin sheets (e.g. Google Fonts) — clone as fallback */
+		const clone = document.createElement('link');
+		clone.rel = link.rel;
+		clone.href = link.href;
+		clone.dataset.hmrPreserved = 'true';
+		document.head.appendChild(clone);
+
+		return null;
+	}
+};
+
+const preserveAllStylesheets = () => {
+	const preservedStyles: HTMLStyleElement[] = [];
+	document
+		.querySelectorAll<HTMLLinkElement>('head link[rel="stylesheet"]')
+		.forEach((link) => {
+			const style = preserveLinkAsInlineStyle(link);
+			if (style) {
+				preservedStyles.push(style);
+			}
+		});
+
+	/* Also preserve Svelte injected <style> tags (css: 'injected' mode) */
+	document
+		.querySelectorAll<HTMLStyleElement>(
+			'head style:not([data-hmr-preserved])'
+		)
+		.forEach((style) => {
+			const clone = document.createElement('style');
+			clone.dataset.hmrPreserved = 'true';
+			clone.textContent = style.textContent;
+			document.head.appendChild(clone);
+		});
+
+	return preservedStyles;
+};
+
+const buildLinkLoadPromise = (link: HTMLLinkElement) => {
+	if (link.sheet && link.sheet.cssRules.length > 0) {
+		return null;
+	}
+
+	const { promise, resolve } = Promise.withResolvers<void>();
+	link.onload = () => {
+		resolve();
+	};
+	link.onerror = () => {
+		resolve();
+	};
+	setTimeout(resolve, SVELTE_CSS_LOAD_TIMEOUT_MS);
+
+	return promise;
+};
+
+const cleanupAfterImport = (
+	domState: ReturnType<typeof saveDOMState>,
+	scrollState: ReturnType<typeof saveScrollState>
+) => {
+	document
+		.querySelectorAll('[data-hmr-preserved="true"]')
+		.forEach((element) => {
+			element.remove();
+		});
+	restoreDOMState(document.body, domState);
+	restoreScrollState(scrollState);
+};
+
+const waitForStylesAndCleanup = (
+	domState: ReturnType<typeof saveDOMState>,
+	scrollState: ReturnType<typeof saveScrollState>
+) => {
+	const newLinks = document.querySelectorAll<HTMLLinkElement>(
+		'head link[rel="stylesheet"]:not([data-hmr-preserved])'
+	);
+	const loadPromises: Promise<void>[] = [];
+	newLinks.forEach((link) => {
+		const promise = buildLinkLoadPromise(link);
+		if (promise) {
+			loadPromises.push(promise);
+		}
+	});
+
+	const cleanup = () => {
+		cleanupAfterImport(domState, scrollState);
+	};
+
+	if (loadPromises.length > 0) {
+		void Promise.all(loadPromises).then(cleanup);
+	} else {
+		cleanup();
+	}
+};
+
+export const handleSvelteUpdate = (message: {
+	data: {
+		cssBaseName?: string;
+		cssUrl?: string;
+		html?: string;
+		manifest?: Record<string, string>;
+		pageModuleUrl?: string;
+		serverDuration?: number;
+		sourceFile?: string;
+		updateType?: string;
+	};
+}) => {
+	const svelteFrameworkCheck = detectCurrentFramework();
+	if (svelteFrameworkCheck !== 'svelte') return;
+
+	/* CSS-only update: hot-swap stylesheet, no remount needed */
+	if (message.data.updateType === 'css-only' && message.data.cssUrl) {
+		swapStylesheet(
+			message.data.cssUrl,
+			message.data.cssBaseName || '',
+			'svelte'
+		);
+
+		return;
+	}
+
+	/* Component update: preserve state, re-import (bootstrap handles unmount + mount) */
+
+	/* Save DOM state and scroll position */
+	const domState = saveDOMState(document.body);
+	const scrollState = saveScrollState();
+
+	let preservedState: Record<string, unknown> = extractCountFromDOM();
+
+	if (Object.keys(preservedState).length === 0) {
+		preservedState = loadStateFromSession();
+	}
+
+	/* Set preserved state on window + backup to sessionStorage */
+	window.__HMR_PRESERVED_STATE__ = preservedState;
+	saveStateToSession(preservedState);
+
+	/* CSS pre-update: swap stylesheet BEFORE importing to prevent FOUC */
+	if (message.data.cssUrl) {
+		swapStylesheet(
+			message.data.cssUrl,
+			message.data.cssBaseName || '',
+			'svelte'
+		);
+	}
+
+	// O(1) Svelte 5 HMR: import the changed module, then call its
+	// accept callback. Svelte's $.hmr() reactive wrapper swaps the
+	// component in place — parent state and DOM survive untouched.
+	const { pageModuleUrl } = message.data;
+	if (pageModuleUrl) {
+		const clientStart = performance.now();
+		const modulePath = `${pageModuleUrl}?t=${Date.now()}`;
+
+		const svelteWindow: SvelteHmrWindow = window;
+		const acceptRegistry = svelteWindow.__SVELTE_HMR_ACCEPT__;
+
+		// Save the OLD module's accept callback BEFORE importing.
+		const acceptFn = acceptRegistry?.[pageModuleUrl];
+
+		import(modulePath)
+			.then((newModule) => {
+				if (acceptFn) {
+					acceptFn(newModule);
+				}
+
+				if (
+					window.__HMR_WS__ &&
+					message.data.serverDuration !== undefined
+				) {
+					const clientMs = Math.round(
+						performance.now() - clientStart
+					);
+					const total = (message.data.serverDuration ?? 0) + clientMs;
+					window.__HMR_WS__.send(
+						JSON.stringify({ duration: total, type: 'hmr-timing' })
+					);
+				}
+
+				return undefined;
+			})
+			.catch((err: unknown) => {
+				console.warn('[HMR] Svelte HMR failed, reloading:', err);
+				window.location.reload();
+			});
+
+		return;
+	}
+
+	// Bundled fallback: re-import the index file
+	const indexPath = findIndexPath(
+		message.data.manifest,
+		message.data.sourceFile,
+		'svelte'
+	);
+	if (!indexPath) {
+		console.warn('[HMR] Svelte index path not found, reloading');
+		window.location.reload();
+
+		return;
+	}
+
+	preserveAllStylesheets();
+
+	const modulePath = `${indexPath}?t=${Date.now()}`;
+	import(modulePath)
+		.then(() => {
+			waitForStylesAndCleanup(domState, scrollState);
+
+			return undefined;
+		})
+		.catch((err: unknown) => {
+			console.warn('[HMR] Svelte import failed, reloading:', err);
+			window.location.reload();
+		});
+};