@absolutejs/absolute 0.14.0 → 0.15.1

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

@@ -0,0 +1,248 @@
+/* HTMX HMR update handler */
+
+import { patchDOMInPlace } from '../domDiff';
+import {
+	saveDOMState,
+	restoreDOMState,
+	saveFormState,
+	restoreFormState,
+	saveScrollState,
+	restoreScrollState
+} from '../domState';
+import { processCSSLinks, waitForCSSAndUpdate } from '../cssUtils';
+import { patchHeadInPlace } from '../headPatch';
+import { detectCurrentFramework } from '../frameworkDetect';
+import type { ScriptInfo } from '../../../../types/client';
+import { hmrState } from '../../../../types/client';
+
+export const handleHTMXUpdate = (message: {
+	data: {
+		html?: string | { body?: string; head?: string } | null;
+	};
+}) => {
+	const htmxFrameworkCheck = detectCurrentFramework();
+	if (htmxFrameworkCheck !== 'htmx') return;
+
+	if (window.__REACT_ROOT__) {
+		window.__REACT_ROOT__ = undefined;
+	}
+
+	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
+
+	const htmxDomState = saveDOMState(document.body);
+
+	let htmxBody: string | null = null;
+	let htmxHead: string | null = null;
+	if (typeof message.data.html === 'string') {
+		htmxBody = message.data.html;
+	} else if (message.data.html && typeof message.data.html === 'object') {
+		htmxBody = message.data.html.body || null;
+		htmxHead = message.data.html.head || null;
+	}
+
+	if (htmxBody) {
+		const capturedBody = htmxBody;
+
+		const updateHTMXBodyAfterCSS = function () {
+			updateHTMXBody(capturedBody, htmxDomState, document.body);
+		};
+
+		if (htmxHead) {
+			console.log('[HMR] Has htmxHead, patching head elements');
+
+			const doPatchHead = function () {
+				patchHeadInPlace(htmxHead!);
+			};
+			if (hmrState.isFirstHMRUpdate) {
+				console.log(
+					'[HMR] First update - adding head patch stabilization delay'
+				);
+				setTimeout(doPatchHead, 50);
+			} else {
+				doPatchHead();
+			}
+
+			console.log('[HMR] Processing CSS links');
+			const cssResult = processCSSLinks(htmxHead);
+
+			waitForCSSAndUpdate(cssResult, updateHTMXBodyAfterCSS);
+		} else {
+			updateHTMXBodyAfterCSS();
+		}
+	} else {
+		sessionStorage.removeItem('__HMR_ACTIVE__');
+	}
+};
+
+const updateHTMXBody = (
+	htmxBody: string,
+	htmxDomState: ReturnType<typeof saveDOMState>,
+	container: HTMLElement
+) => {
+	if (!container) return;
+
+	const countSpan = container.querySelector('#count');
+	const countValue = countSpan
+		? parseInt(countSpan.textContent || '0', 10)
+		: 0;
+
+	const savedState = {
+		componentState: { count: countValue },
+		forms: saveFormState(),
+		scroll: saveScrollState()
+	};
+
+	const existingScripts = collectScripts(container);
+
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = htmxBody;
+
+	if (savedState.componentState.count !== undefined) {
+		const newCounterSpan = tempDiv.querySelector('#count');
+		if (newCounterSpan) {
+			newCounterSpan.textContent = String(
+				savedState.componentState.count
+			);
+		}
+	}
+
+	const patchedBody = tempDiv.innerHTML;
+	const newScripts = collectScriptsFromElement(tempDiv);
+	const scriptsChanged = didScriptsChange(existingScripts, newScripts);
+
+	const htmlStructureChanged = didHTMLStructureChange(container, tempDiv);
+
+	const hmrScript = container.querySelector('script[data-hmr-client]');
+
+	patchDOMInPlace(container, patchedBody);
+
+	if (hmrScript && !container.querySelector('script[data-hmr-client]')) {
+		container.appendChild(hmrScript);
+	}
+
+	requestAnimationFrame(function () {
+		restoreFormState(savedState.forms);
+		restoreScrollState(savedState.scroll);
+
+		const newCountSpan = container.querySelector('#count');
+		if (newCountSpan && savedState.componentState.count !== undefined) {
+			newCountSpan.textContent = String(savedState.componentState.count);
+		}
+
+		restoreDOMState(container, htmxDomState);
+
+		if (scriptsChanged || htmlStructureChanged) {
+			container
+				.querySelectorAll('[data-hmr-listeners-attached]')
+				.forEach(function (el) {
+					const cloned = el.cloneNode(true) as Element;
+					if (el.parentNode) {
+						el.parentNode.replaceChild(cloned, el);
+					}
+					cloned.removeAttribute('data-hmr-listeners-attached');
+				});
+
+			const scriptsInNewHTML = container.querySelectorAll('script[src]');
+			scriptsInNewHTML.forEach(function (script) {
+				if (!(script as Element).hasAttribute('data-hmr-client')) {
+					script.remove();
+				}
+			});
+
+			newScripts.forEach(function (scriptInfo) {
+				const newScript = document.createElement('script');
+				const separator = scriptInfo.src.includes('?') ? '&' : '?';
+				newScript.src = scriptInfo.src + separator + 't=' + Date.now();
+				newScript.type = scriptInfo.type;
+				container.appendChild(newScript);
+			});
+
+			const inlineScripts =
+				container.querySelectorAll('script:not([src])');
+			inlineScripts.forEach(function (script) {
+				if (!(script as Element).hasAttribute('data-hmr-client')) {
+					const newScript = document.createElement('script');
+					newScript.textContent = script.textContent || '';
+					newScript.type =
+						(script as HTMLScriptElement).type || 'text/javascript';
+					if (script.parentNode) {
+						script.parentNode.replaceChild(newScript, script);
+					}
+				}
+			});
+		}
+
+		if (window.htmx) {
+			window.htmx.process(container);
+		}
+	});
+	sessionStorage.removeItem('__HMR_ACTIVE__');
+};
+
+/* Shared helpers */
+
+const collectScripts = (container: HTMLElement) => {
+	return Array.from(container.querySelectorAll('script[src]')).map(
+		function (script) {
+			return {
+				src: script.getAttribute('src') || '',
+				type: script.getAttribute('type') || 'text/javascript'
+			};
+		}
+	);
+};
+
+const collectScriptsFromElement = (el: HTMLElement) => {
+	return Array.from(el.querySelectorAll('script[src]')).map(
+		function (script) {
+			return {
+				src: script.getAttribute('src') || '',
+				type: script.getAttribute('type') || 'text/javascript'
+			};
+		}
+	);
+};
+
+const didScriptsChange = (
+	oldScripts: ScriptInfo[],
+	newScripts: ScriptInfo[]
+) => {
+	return (
+		oldScripts.length !== newScripts.length ||
+		oldScripts.some(function (oldScript, idx) {
+			const oldSrcBase = oldScript.src.split('?')[0]!.split('&')[0];
+			const newScript = newScripts[idx];
+			if (!newScript) return true;
+			const newSrcBase = newScript.src.split('?')[0]!.split('&')[0];
+			return oldSrcBase !== newSrcBase;
+		})
+	);
+};
+
+const normalizeHTMLForComparison = (element: HTMLElement) => {
+	const clone = element.cloneNode(true) as HTMLElement;
+	const scripts = clone.querySelectorAll('script');
+	scripts.forEach(function (script) {
+		if (script.parentNode) {
+			script.parentNode.removeChild(script);
+		}
+	});
+	const allElements = clone.querySelectorAll('*');
+	allElements.forEach(function (el) {
+		el.removeAttribute('data-hmr-listeners-attached');
+	});
+	if (clone.removeAttribute) {
+		clone.removeAttribute('data-hmr-listeners-attached');
+	}
+	return clone.innerHTML;
+};
+
+const didHTMLStructureChange = (
+	container: HTMLElement,
+	tempDiv: HTMLElement
+) => {
+	return (
+		normalizeHTMLForComparison(container) !==
+		normalizeHTMLForComparison(tempDiv)
+	);
+};

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

@@ -0,0 +1,80 @@
+/* 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 { detectCurrentFramework } from '../frameworkDetect';
+
+export const handleReactUpdate = (message: {
+	data: {
+		hasCSSChanges?: boolean;
+		hasComponentChanges?: boolean;
+		manifest?: Record<string, string>;
+		primarySource?: string;
+	};
+}) => {
+	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;
+
+	// CSS-only change: hot-swap the stylesheet link without reloading
+	if (!hasComponentChanges && hasCSSChanges && cssPath) {
+		reloadReactCSS(cssPath);
+		return;
+	}
+
+	// Component change: use React Fast Refresh to preserve state
+	const win = window as unknown as Record<string, unknown>;
+	const componentKey = win.__REACT_COMPONENT_KEY__ as string | undefined;
+	const newUrl = componentKey && message.data.manifest?.[componentKey];
+	const refreshRuntime = win.$RefreshRuntime$ as
+		| { performReactRefresh: () => void }
+		| undefined;
+
+	if (newUrl && refreshRuntime) {
+		import(newUrl + '?t=' + Date.now())
+			.then(() => {
+				refreshRuntime.performReactRefresh();
+			})
+			.catch((err) => {
+				console.warn(
+					'[HMR] React Fast Refresh failed, falling back to reload:',
+					err
+				);
+				window.location.reload();
+			});
+		return;
+	}
+
+	// Fallback: full page reload
+	window.location.reload();
+};
+
+const reloadReactCSS = (cssPath: string) => {
+	const existingCSSLinks = document.head.querySelectorAll(
+		'link[rel="stylesheet"]'
+	);
+	existingCSSLinks.forEach(function (link) {
+		const href = (link as HTMLLinkElement).getAttribute('href');
+		if (href) {
+			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 as HTMLLinkElement).href = newHref;
+			}
+		}
+	});
+};

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

@@ -0,0 +1,147 @@
+/* Rebuild, manifest, module-update, and error handlers */
+
+import { hideErrorOverlay, showErrorOverlay } from '../errorOverlay';
+
+export const handleManifest = (message: {
+	data: {
+		manifest?: Record<string, string>;
+		serverVersions?: Record<string, number>;
+	};
+}) => {
+	window.__HMR_MANIFEST__ =
+		message.data.manifest ||
+		(message.data as unknown as Record<string, string>);
+
+	if (message.data.serverVersions) {
+		window.__HMR_SERVER_VERSIONS__ = message.data.serverVersions;
+	}
+
+	if (!window.__HMR_MODULE_VERSIONS__) {
+		window.__HMR_MODULE_VERSIONS__ = {};
+	}
+
+	window.__HMR_MODULE_UPDATES__ = [];
+};
+
+export const handleRebuildComplete = (message: {
+	data: {
+		affectedFrameworks?: string[];
+		manifest?: Record<string, string>;
+	};
+}) => {
+	hideErrorOverlay();
+	if (window.__HMR_MANIFEST__) {
+		window.__HMR_MANIFEST__ = message.data.manifest;
+	}
+
+	if (
+		message.data.affectedFrameworks &&
+		!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 handleModuleUpdate = (message: {
+	data: {
+		framework?: string;
+		manifest?: Record<string, string>;
+		moduleVersions?: Record<string, number>;
+		serverVersions?: Record<string, number>;
+	};
+}) => {
+	const hasHMRHandler =
+		message.data.framework === 'react' ||
+		message.data.framework === 'vue' ||
+		message.data.framework === 'svelte' ||
+		message.data.framework === 'html' ||
+		message.data.framework === 'htmx';
+
+	if (hasHMRHandler) {
+		if (message.data.serverVersions) {
+			const serverVersions = window.__HMR_SERVER_VERSIONS__ || {};
+			for (const key in message.data.serverVersions) {
+				if (
+					Object.prototype.hasOwnProperty.call(
+						message.data.serverVersions,
+						key
+					)
+				) {
+					serverVersions[key] = message.data.serverVersions[key]!;
+				}
+			}
+			window.__HMR_SERVER_VERSIONS__ = serverVersions;
+		}
+		if (message.data.moduleVersions) {
+			const moduleVersions = window.__HMR_MODULE_VERSIONS__ || {};
+			for (const key in message.data.moduleVersions) {
+				if (
+					Object.prototype.hasOwnProperty.call(
+						message.data.moduleVersions,
+						key
+					)
+				) {
+					moduleVersions[key] = message.data.moduleVersions[key]!;
+				}
+			}
+			window.__HMR_MODULE_VERSIONS__ = moduleVersions;
+		}
+		if (message.data.manifest) {
+			const manifest = window.__HMR_MANIFEST__ || {};
+			for (const key in message.data.manifest) {
+				if (
+					Object.prototype.hasOwnProperty.call(
+						message.data.manifest,
+						key
+					)
+				) {
+					manifest[key] = message.data.manifest[key]!;
+				}
+			}
+			window.__HMR_MANIFEST__ = manifest;
+		}
+		if (!window.__HMR_MODULE_UPDATES__) {
+			window.__HMR_MODULE_UPDATES__ = [];
+		}
+		window.__HMR_MODULE_UPDATES__.push(message.data);
+		return;
+	}
+
+	window.location.reload();
+};
+
+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'
+	});
+};
+
+export const handleFullReload = () => {
+	setTimeout(function () {
+		window.location.reload();
+	}, 200);
+};

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

@@ -0,0 +1,129 @@
+/* Svelte HMR update handler */
+
+import {
+	saveDOMState,
+	restoreDOMState,
+	saveScrollState,
+	restoreScrollState
+} from '../domState';
+import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
+
+/* Swap a stylesheet link by matching cssBaseName or framework name */
+const swapStylesheet = (
+	cssUrl: string,
+	cssBaseName: string,
+	framework: string
+): void => {
+	let existingLink: HTMLLinkElement | null = null;
+	document
+		.querySelectorAll('link[rel="stylesheet"]')
+		.forEach(function (link) {
+			const href = (link as HTMLLinkElement).getAttribute('href') || '';
+			if (href.includes(cssBaseName) || href.includes(framework)) {
+				existingLink = link as HTMLLinkElement;
+			}
+		});
+
+	if (existingLink) {
+		const capturedExisting = existingLink as HTMLLinkElement;
+		const newLink = document.createElement('link');
+		newLink.rel = 'stylesheet';
+		newLink.href = cssUrl + '?t=' + Date.now();
+		newLink.onload = function () {
+			if (capturedExisting && capturedExisting.parentNode) {
+				capturedExisting.remove();
+			}
+		};
+		document.head.appendChild(newLink);
+	}
+};
+
+export const handleSvelteUpdate = (message: {
+	data: {
+		cssBaseName?: string;
+		cssUrl?: string;
+		html?: string;
+		manifest?: Record<string, string>;
+		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) {
+		console.log('[HMR] Svelte CSS-only update');
+		swapStylesheet(
+			message.data.cssUrl,
+			message.data.cssBaseName || '',
+			'svelte'
+		);
+		console.log('[HMR] Svelte CSS updated');
+		return;
+	}
+
+	/* Component update: preserve state, re-import (bootstrap handles unmount + mount) */
+	console.log('[HMR] Svelte update - remounting component');
+
+	/* Save DOM state and scroll position */
+	const domState = saveDOMState(document.body);
+	const scrollState = saveScrollState();
+
+	/* Extract state from DOM (Svelte 5 $state is not externally accessible) */
+	const preservedState: Record<string, unknown> = {};
+	const countButton = document.querySelector('button');
+	if (countButton && countButton.textContent) {
+		const countMatch = countButton.textContent.match(/count is (\d+)/i);
+		if (countMatch) {
+			preservedState.initialCount = parseInt(countMatch[1]!, 10);
+		}
+	}
+
+	/* Set preserved state on window + backup to sessionStorage */
+	window.__HMR_PRESERVED_STATE__ = preservedState;
+	try {
+		sessionStorage.setItem(
+			'__SVELTE_HMR_STATE__',
+			JSON.stringify(preservedState)
+		);
+	} catch (_err) {
+		/* ignore */
+	}
+	console.log(
+		'[HMR] Svelte state preserved:',
+		JSON.stringify(preservedState)
+	);
+
+	/* CSS pre-update: swap stylesheet BEFORE unmounting to prevent FOUC */
+	if (message.data.cssUrl) {
+		swapStylesheet(
+			message.data.cssUrl,
+			message.data.cssBaseName || '',
+			'svelte'
+		);
+	}
+
+	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;
+	}
+
+	const modulePath = indexPath + '?t=' + Date.now();
+	import(/* @vite-ignore */ modulePath)
+		.then(function () {
+			restoreDOMState(document.body, domState);
+			restoreScrollState(scrollState);
+			console.log('[HMR] Svelte component updated (state preserved)');
+		})
+		.catch(function (err: unknown) {
+			console.warn('[HMR] Svelte import failed, reloading:', err);
+			window.location.reload();
+		});
+};