@absolutejs/absolute 0.19.0-beta.231 → 0.19.0-beta.232

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

@@ -1,331 +0,0 @@
-/* Svelte HMR update handler */
-
-import { SVELTE_CSS_LOAD_TIMEOUT_MS } from '../constants';
-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
-) => {
-	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;
-	}
-
-	// eslint-disable-next-line promise/avoid-new -- wrapping DOM event callbacks requires a new Promise
-	return new Promise<void>((resolve) => {
-		link.onload = () => {
-			resolve();
-		};
-		link.onerror = () => {
-			resolve();
-		};
-		setTimeout(resolve, SVELTE_CSS_LOAD_TIMEOUT_MS);
-	});
-};
-
-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()}`;
-
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-		const acceptRegistry = (window as any).__SVELTE_HMR_ACCEPT__ as
-			| Record<string, (mod: unknown) => void>
-			| undefined;
-
-		// 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();
-		});
-};

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

@@ -1,291 +0,0 @@
-/* Vue HMR update handler */
-
-import type { VueComponentInstance, VueVNode } from '../../../../types/vue';
-import { saveDOMState, restoreDOMState } from '../domState';
-import { detectCurrentFramework, findIndexPath } from '../frameworkDetect';
-
-/* Collect reactive value from a setup state entry into the target record */
-const collectSetupValue = (
-	target: Record<string, unknown>,
-	key: string,
-	value: unknown
-) => {
-	if (value && typeof value === 'object' && 'value' in value) {
-		target[key] = value.value;
-
-		return;
-	}
-
-	if (typeof value !== 'function') {
-		target[key] = value;
-	}
-};
-
-/* Copy all setup state entries from a record into the target */
-const collectSetupState = (
-	target: Record<string, unknown>,
-	setupState: Record<string, unknown>
-) => {
-	const keys = Object.keys(setupState);
-	for (let idx = 0; idx < keys.length; idx++) {
-		const key = keys[idx];
-		if (key === undefined) continue;
-		collectSetupValue(target, key, setupState[key]);
-	}
-};
-
-/* Walk a VNode tree and collect setup state from all child components */
-const walkVNode = (
-	vnode: VueVNode | undefined,
-	state: Record<string, unknown>
-) => {
-	if (!vnode) return;
-
-	if (vnode.component && vnode.component.setupState) {
-		collectSetupState(state, vnode.component.setupState);
-	}
-
-	if (vnode.children && Array.isArray(vnode.children)) {
-		vnode.children.forEach((child) => {
-			walkVNode(child, state);
-		});
-	}
-
-	if (vnode.component && vnode.component.subTree) {
-		walkVNode(vnode.component.subTree, state);
-	}
-};
-
-/* Extract state from child Vue component instances recursively */
-const extractChildComponentState = (
-	instance: VueComponentInstance,
-	state: Record<string, unknown>
-) => {
-	if (!instance || !instance.subTree) return;
-
-	walkVNode(instance.subTree, state);
-};
-
-/* Find an existing stylesheet link matching the given base name */
-const findMatchingStylesheetLink = (cssBaseName: string) => {
-	let found: HTMLLinkElement | null = null;
-	document
-		.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
-		.forEach((link) => {
-			const href = link.getAttribute('href') ?? '';
-			if (cssBaseName && href.includes(cssBaseName)) {
-				found = link;
-			}
-		});
-
-	return found;
-};
-
-/* Swap a stylesheet link with a new one, removing the old on load */
-const swapStylesheet = (cssUrl: string, cssBaseName: string) => {
-	const existingLink = findMatchingStylesheetLink(cssBaseName);
-	if (!existingLink) return;
-
-	const capturedExisting: HTMLLinkElement = existingLink;
-	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);
-};
-
-/* Extract Vue reactive state from app instance */
-const extractVueAppState = (vuePreservedState: Record<string, unknown>) => {
-	if (!window.__VUE_APP__ || !window.__VUE_APP__._instance) return;
-
-	const instance = window.__VUE_APP__._instance;
-
-	if (instance.setupState) {
-		collectSetupState(vuePreservedState, instance.setupState);
-	}
-
-	extractChildComponentState(instance, vuePreservedState);
-};
-
-/* DOM fallback: extract count from button text when app instance is unavailable */
-const extractCountFromDOM = (vuePreservedState: Record<string, unknown>) => {
-	if (Object.keys(vuePreservedState).length > 0) return;
-
-	const countButton = document.querySelector('button');
-	if (!countButton || !countButton.textContent) return;
-
-	const countMatch = countButton.textContent.match(/count is (\d+)/i);
-	if (!countMatch) return;
-
-	vuePreservedState.initialCount = parseInt(countMatch[1] ?? '0', 10);
-};
-
-/* Handle completion of Vue module reimport */
-const handleVueImportSuccess = (
-	vueRoot: HTMLElement | null,
-	vueDomState: ReturnType<typeof saveDOMState> | null
-) => {
-	if (vueRoot && vueDomState) {
-		restoreDOMState(vueRoot, vueDomState);
-	}
-	sessionStorage.removeItem('__HMR_ACTIVE__');
-};
-
-/* Force-reload a Vue component via HMR runtime when setup() must re-run */
-const forceReloadVueComponent = (mod: Record<string, unknown>) => {
-	const hmrRuntime = window.__VUE_HMR_RUNTIME__;
-	if (!hmrRuntime) return;
-
-	const component = mod?.default ?? Object.values(mod ?? {})[0];
-	if (!component || typeof component !== 'object') return;
-	if (!('__hmrId' in component)) return;
-
-	const { __hmrId: hmrId } = component;
-	if (typeof hmrId === 'string') {
-		hmrRuntime.reload(hmrId, component);
-	}
-};
-
-export const handleVueUpdate = (message: {
-	data: {
-		cssBaseName?: string;
-		cssUrl?: string;
-		forceReload?: boolean;
-		html?: string;
-		manifest?: Record<string, string>;
-		pageModuleUrl?: string;
-		serverDuration?: number;
-		sourceFile?: string;
-		updateType?: string;
-	};
-}) => {
-	const vueFrameworkCheck = detectCurrentFramework();
-	if (vueFrameworkCheck !== 'vue') return;
-
-	if (message.data.updateType === 'css-only' && message.data.cssUrl) {
-		swapStylesheet(message.data.cssUrl, message.data.cssBaseName || '');
-
-		return;
-	}
-
-	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> = {};
-
-	extractVueAppState(vuePreservedState);
-
-	/* DOM fallback if app instance not available */
-	extractCountFromDOM(vuePreservedState);
-
-	/* 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 {
-		/* ignore */
-	}
-
-	window.__HMR_PRESERVED_STATE__ = vuePreservedState;
-
-	// O(1) Vue HMR: import the changed module directly.
-	// __VUE_HMR_RUNTIME__.reload() inside the module hot-swaps the
-	// component in place — same pattern as React Fast Refresh.
-	const { pageModuleUrl } = message.data;
-	if (pageModuleUrl) {
-		const clientStart = performance.now();
-		const modulePath = `${pageModuleUrl}?t=${Date.now()}`;
-
-		import(modulePath)
-			.then((mod) => {
-				// When a composable/utility file changed (not the .vue file itself),
-				// force reload via __VUE_HMR_RUNTIME__ so setup() re-runs.
-				// Vue's rerender only swaps the template, not the setup closure.
-				if (message.data.forceReload) {
-					forceReloadVueComponent(mod);
-				}
-				sessionStorage.removeItem('__HMR_ACTIVE__');
-
-				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] Vue HMR failed, reloading:', err);
-				sessionStorage.removeItem('__HMR_ACTIVE__');
-				window.location.reload();
-			});
-
-		return;
-	}
-
-	/* CSS pre-update: swap stylesheet BEFORE unmounting to prevent FOUC */
-	if (message.data.cssUrl) {
-		swapStylesheet(message.data.cssUrl, message.data.cssBaseName || '');
-	}
-
-	/* Unmount old Vue app but keep DOM visually intact during async import.
-	   unmount() clears the container — snapshot and restore synchronously. */
-	const savedHTML = vueRoot ? vueRoot.innerHTML : '';
-	if (window.__VUE_APP__) {
-		window.__VUE_APP__.unmount();
-		window.__VUE_APP__ = null;
-	}
-	if (vueRoot) {
-		vueRoot.innerHTML = savedHTML;
-	}
-
-	// Bundled fallback: re-import the index file
-	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(modulePath)
-		.then(() => {
-			handleVueImportSuccess(vueRoot, vueDomState);
-
-			return undefined;
-		})
-		.catch((err: unknown) => {
-			console.warn('[HMR] Vue import failed:', err);
-			sessionStorage.removeItem('__HMR_ACTIVE__');
-			window.location.reload();
-		});
-};