@absolutejs/absolute 0.15.0 → 0.15.1

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();
+		});
+};

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

@@ -0,0 +1,254 @@
+/* Vue HMR update handler */
+
+import { saveDOMState, restoreDOMState } from '../domState';
+import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
+
+/* Local Vue internal types (avoids importing Vue) */
+interface VueVNode {
+	children?: VueVNode[];
+	component?: VueComponentInstance;
+}
+
+interface VueComponentInstance {
+	setupState?: Record<string, unknown>;
+	subTree?: VueVNode;
+}
+
+/* Extract state from child Vue component instances recursively */
+const extractChildComponentState = (
+	instance: VueComponentInstance,
+	state: Record<string, unknown>
+): void => {
+	if (!instance || !instance.subTree) return;
+
+	const walkVNode = (vnode: VueVNode | undefined): void => {
+		if (!vnode) return;
+
+		if (vnode.component && vnode.component.setupState) {
+			const childState = vnode.component.setupState;
+			const keys = Object.keys(childState);
+			for (let idx = 0; idx < keys.length; idx++) {
+				const key = keys[idx]!;
+				const value = childState[key];
+				if (
+					value &&
+					typeof value === 'object' &&
+					'value' in (value as Record<string, unknown>)
+				) {
+					state[key] = (value as { value: unknown }).value;
+				} else if (typeof value !== 'function') {
+					state[key] = value;
+				}
+			}
+		}
+
+		if (vnode.children && Array.isArray(vnode.children)) {
+			for (let jdx = 0; jdx < vnode.children.length; jdx++) {
+				walkVNode(vnode.children[jdx]);
+			}
+		}
+		if (vnode.component && vnode.component.subTree) {
+			walkVNode(vnode.component.subTree);
+		}
+	};
+
+	walkVNode(instance.subTree);
+};
+
+export const handleVueUpdate = (message: {
+	data: {
+		cssBaseName?: string;
+		cssUrl?: string;
+		html?: string;
+		manifest?: Record<string, string>;
+		sourceFile?: string;
+		updateType?: string;
+	};
+}) => {
+	const vueFrameworkCheck = detectCurrentFramework();
+	if (vueFrameworkCheck !== 'vue') return;
+
+	if (message.data.updateType === 'css-only' && message.data.cssUrl) {
+		console.log('[HMR] Vue CSS-only update (state preserved)');
+		const cssBaseName = message.data.cssBaseName || '';
+		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('vue')) {
+					existingLink = link as HTMLLinkElement;
+				}
+			});
+
+		if (existingLink) {
+			const capturedExisting = existingLink as HTMLLinkElement;
+			const newLink = document.createElement('link');
+			newLink.rel = 'stylesheet';
+			newLink.href = message.data.cssUrl + '?t=' + Date.now();
+			newLink.onload = function () {
+				if (capturedExisting && capturedExisting.parentNode) {
+					capturedExisting.remove();
+				}
+				console.log('[HMR] Vue CSS updated');
+			};
+			document.head.appendChild(newLink);
+		}
+		return;
+	}
+
+	console.log('[HMR] Vue update - remounting component');
+	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
+
+	const vueRoot = document.getElementById('root');
+	const vueDomState = vueRoot ? saveDOMState(vueRoot) : null;
+
+	/* Extract Vue reactive state from app instance (not DOM) */
+	const vuePreservedState: Record<string, unknown> = {};
+
+	if (window.__VUE_APP__ && window.__VUE_APP__._instance) {
+		const instance = window.__VUE_APP__._instance;
+
+		if (instance.setupState) {
+			const setupKeys = Object.keys(instance.setupState);
+			for (let idx = 0; idx < setupKeys.length; idx++) {
+				const key = setupKeys[idx]!;
+				const value = instance.setupState[key];
+				if (
+					value &&
+					typeof value === 'object' &&
+					'value' in (value as Record<string, unknown>)
+				) {
+					vuePreservedState[key] = (
+						value as { value: unknown }
+					).value;
+				} else if (typeof value !== 'function') {
+					vuePreservedState[key] = value;
+				}
+			}
+		}
+
+		extractChildComponentState(
+			instance as VueComponentInstance,
+			vuePreservedState
+		);
+	}
+
+	/* DOM fallback if app instance not available */
+	if (Object.keys(vuePreservedState).length === 0) {
+		const countButton = document.querySelector('button');
+		if (countButton && countButton.textContent) {
+			const countMatch = countButton.textContent.match(/count is (\d+)/i);
+			if (countMatch) {
+				vuePreservedState.initialCount = parseInt(countMatch[1]!, 10);
+			}
+		}
+	}
+
+	/* Map count -> initialCount for prop-based state (used by CountButton) */
+	if (
+		vuePreservedState.count !== undefined &&
+		vuePreservedState.initialCount === undefined
+	) {
+		vuePreservedState.initialCount = vuePreservedState.count;
+	}
+
+	/* Backup to sessionStorage for resilience */
+	try {
+		sessionStorage.setItem(
+			'__VUE_HMR_STATE__',
+			JSON.stringify(vuePreservedState)
+		);
+	} catch (_err) {
+		/* ignore */
+	}
+
+	window.__HMR_PRESERVED_STATE__ = vuePreservedState;
+	console.log(
+		'[HMR] Vue state preserved:',
+		JSON.stringify(vuePreservedState)
+	);
+
+	/* CSS pre-update: swap stylesheet BEFORE unmounting to prevent FOUC */
+	if (message.data.cssUrl) {
+		const vueCssBaseName = message.data.cssBaseName || '';
+		let vueExistingLink: HTMLLinkElement | null = null;
+		document
+			.querySelectorAll('link[rel="stylesheet"]')
+			.forEach(function (link) {
+				const href =
+					(link as HTMLLinkElement).getAttribute('href') || '';
+				if (href.includes(vueCssBaseName) || href.includes('vue')) {
+					vueExistingLink = link as HTMLLinkElement;
+				}
+			});
+		if (vueExistingLink) {
+			const capturedVueLink = vueExistingLink as HTMLLinkElement;
+			const vueCssLink = document.createElement('link');
+			vueCssLink.rel = 'stylesheet';
+			vueCssLink.href = message.data.cssUrl + '?t=' + Date.now();
+			vueCssLink.onload = function () {
+				if (capturedVueLink && capturedVueLink.parentNode) {
+					capturedVueLink.remove();
+				}
+			};
+			document.head.appendChild(vueCssLink);
+		}
+	}
+
+	/* Unmount old Vue app */
+	if (window.__VUE_APP__) {
+		window.__VUE_APP__.unmount();
+		window.__VUE_APP__ = null;
+	}
+
+	const newHTML = message.data.html;
+	if (!newHTML) {
+		window.location.reload();
+		return;
+	}
+
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = newHTML;
+	const newRootDiv = tempDiv.querySelector('#root');
+	let innerContent = newRootDiv ? newRootDiv.innerHTML : newHTML;
+
+	/* Pre-apply preserved state to HTML (prevents flicker showing count=0) */
+	if (vuePreservedState.initialCount !== undefined) {
+		innerContent = innerContent.replace(
+			/count is 0/g,
+			'count is ' + vuePreservedState.initialCount
+		);
+	}
+
+	if (vueRoot) {
+		vueRoot.innerHTML = innerContent;
+	}
+
+	const indexPath = findIndexPath(
+		message.data.manifest,
+		message.data.sourceFile,
+		'vue'
+	);
+	if (!indexPath) {
+		console.warn('[HMR] Vue index path not found, reloading');
+		window.location.reload();
+		return;
+	}
+
+	const modulePath = indexPath + '?t=' + Date.now();
+	import(/* @vite-ignore */ modulePath)
+		.then(function () {
+			if (vueRoot && vueDomState) {
+				restoreDOMState(vueRoot, vueDomState);
+			}
+			sessionStorage.removeItem('__HMR_ACTIVE__');
+			console.log('[HMR] Vue updated (state preserved)');
+		})
+		.catch(function (err: unknown) {
+			console.warn('[HMR] Vue import failed:', err);
+			sessionStorage.removeItem('__HMR_ACTIVE__');
+			window.location.reload();
+		});
+};