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

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

@@ -0,0 +1,292 @@
+import type {} from '../../../types/globals';
+/* 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();
+		});
+};

package/dist/dev/client/headPatch.ts

@@ -0,0 +1,233 @@
+import type {} from '../../types/globals';
+/* Head element patching for HMR updates (title, meta, favicon, etc.) */
+
+const getLinkElementKey = (elem: Element) => {
+	const rel = (elem.getAttribute('rel') || '').toLowerCase();
+	if (rel === 'icon' || rel === 'shortcut icon' || rel === 'apple-touch-icon')
+		return `link:icon:${rel}`;
+	if (rel === 'stylesheet') return null;
+	if (rel === 'preconnect')
+		return `link:preconnect:${elem.getAttribute('href') || ''}`;
+	if (rel === 'preload')
+		return `link:preload:${elem.getAttribute('href') || ''}`;
+	if (rel === 'canonical') return 'link:canonical';
+	if (rel === 'dns-prefetch')
+		return `link:dns-prefetch:${elem.getAttribute('href') || ''}`;
+
+	return null;
+};
+
+const getHeadElementKey = (elem: Element) => {
+	const tag = elem.tagName.toLowerCase();
+
+	if (tag === 'title') return 'title';
+	if (tag === 'meta' && elem.hasAttribute('charset')) return 'meta:charset';
+	if (tag === 'meta' && elem.hasAttribute('name'))
+		return `meta:name:${elem.getAttribute('name')}`;
+	if (tag === 'meta' && elem.hasAttribute('property'))
+		return `meta:property:${elem.getAttribute('property')}`;
+	if (tag === 'meta' && elem.hasAttribute('http-equiv'))
+		return `meta:http-equiv:${elem.getAttribute('http-equiv')}`;
+
+	if (tag === 'link') return getLinkElementKey(elem);
+
+	if (tag === 'script' && elem.hasAttribute('data-hmr-id'))
+		return `script:hmr:${elem.getAttribute('data-hmr-id')}`;
+	if (tag === 'script') return null;
+	if (tag === 'base') return 'base';
+
+	return null;
+};
+
+const shouldPreserveElement = (elem: Element) => {
+	if (elem.hasAttribute('data-hmr-import-map')) return true;
+	if (elem.hasAttribute('data-hmr-client')) return true;
+	if (elem.hasAttribute('data-react-refresh-setup')) return true;
+
+	const attrs = Array.from(elem.attributes);
+	for (let idx = 0; idx < attrs.length; idx++) {
+		if (attrs[idx]?.name.startsWith('data-hmr-')) return true;
+	}
+
+	if (elem.tagName === 'SCRIPT') {
+		const src = elem.getAttribute('src') || '';
+		if (src.includes('htmx.min.js') || src.includes('htmx.js')) return true;
+	}
+
+	return false;
+};
+
+const updateTitleElement = (oldEl: Element, newEl: Element) => {
+	const newTitle = newEl.textContent || '';
+	if (oldEl.textContent === newTitle) return;
+	oldEl.textContent = newTitle;
+	document.title = newTitle;
+};
+
+const updateMetaElement = (oldEl: Element, newEl: Element) => {
+	const newContent = newEl.getAttribute('content');
+	const oldContent = oldEl.getAttribute('content');
+	if (oldContent !== newContent && newContent !== null) {
+		oldEl.setAttribute('content', newContent);
+	}
+	if (!newEl.hasAttribute('charset')) return;
+	const newCharset = newEl.getAttribute('charset');
+	if (oldEl.getAttribute('charset') !== newCharset && newCharset !== null) {
+		oldEl.setAttribute('charset', newCharset);
+	}
+};
+
+const updateFaviconHref = (
+	oldEl: Element,
+	newHref: string,
+	oldHref: string
+) => {
+	const [oldBase] = oldHref.split('?');
+	const [newBase] = newHref.split('?');
+	if (oldBase === newBase) return;
+	const cacheBustedHref = `${
+		newHref + (newHref.includes('?') ? '&' : '?')
+	}t=${Date.now()}`;
+	oldEl.setAttribute('href', cacheBustedHref);
+};
+
+const updateLinkElement = (oldEl: Element, newEl: Element) => {
+	const rel = (oldEl.getAttribute('rel') || '').toLowerCase();
+	const newHref = newEl.getAttribute('href');
+	const oldHref = oldEl.getAttribute('href');
+
+	const isIcon =
+		rel === 'icon' || rel === 'shortcut icon' || rel === 'apple-touch-icon';
+
+	if (isIcon && newHref && oldHref) {
+		updateFaviconHref(oldEl, newHref, oldHref);
+	} else if (!isIcon && newHref && oldHref !== newHref) {
+		oldEl.setAttribute('href', newHref);
+	}
+
+	const attrsToCheck = ['type', 'sizes', 'crossorigin', 'as', 'media'];
+	attrsToCheck.forEach((attr) => {
+		const newVal = newEl.getAttribute(attr);
+		const oldVal = oldEl.getAttribute(attr);
+		if (newVal !== null && oldVal !== newVal) {
+			oldEl.setAttribute(attr, newVal);
+		} else if (newVal === null && oldVal !== null) {
+			oldEl.removeAttribute(attr);
+		}
+	});
+};
+
+const updateBaseElement = (oldEl: Element, newEl: Element) => {
+	const newHref = newEl.getAttribute('href');
+	const newTarget = newEl.getAttribute('target');
+	if (newHref && oldEl.getAttribute('href') !== newHref) {
+		oldEl.setAttribute('href', newHref);
+	}
+	if (newTarget && oldEl.getAttribute('target') !== newTarget) {
+		oldEl.setAttribute('target', newTarget);
+	}
+};
+
+const updateHeadElement = (oldEl: Element, newEl: Element) => {
+	const tag = oldEl.tagName.toLowerCase();
+
+	if (tag === 'title') {
+		updateTitleElement(oldEl, newEl);
+
+		return;
+	}
+
+	if (tag === 'meta') {
+		updateMetaElement(oldEl, newEl);
+
+		return;
+	}
+
+	if (tag === 'link') {
+		updateLinkElement(oldEl, newEl);
+
+		return;
+	}
+
+	if (tag === 'base') {
+		updateBaseElement(oldEl, newEl);
+	}
+};
+
+const addHeadElement = (newEl: Element) => {
+	const clone = document.createElement(newEl.tagName.toLowerCase());
+	for (const attr of Array.from(newEl.attributes)) {
+		clone.setAttribute(attr.name, attr.value);
+	}
+	clone.textContent = newEl.textContent;
+	clone.setAttribute('data-hmr-source', 'patched');
+
+	const tag = newEl.tagName.toLowerCase();
+	const { head } = document;
+	let insertBefore: Node | null = null;
+
+	if (tag === 'title') {
+		insertBefore = head.firstChild;
+	} else if (tag === 'meta') {
+		const firstLink = head.querySelector('link');
+		const firstScript = head.querySelector('script');
+		insertBefore = firstLink || firstScript;
+	} else if (tag === 'link') {
+		const firstScript = head.querySelector('script');
+		insertBefore = firstScript;
+	}
+
+	if (insertBefore) {
+		head.insertBefore(clone, insertBefore);
+	} else {
+		head.appendChild(clone);
+	}
+};
+
+const removeStaleElement = (existingEl: Element) => {
+	if (shouldPreserveElement(existingEl)) return;
+	const tag = existingEl.tagName.toLowerCase();
+	const rel = existingEl.getAttribute('rel') || '';
+	if (tag === 'link' && rel === 'stylesheet') return;
+	existingEl.remove();
+};
+
+export const patchHeadInPlace = (newHeadHTML: string) => {
+	if (!newHeadHTML) return;
+
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = newHeadHTML;
+
+	const existingMap = new Map<string, Element>();
+	const newMap = new Map<string, Element>();
+
+	Array.from(document.head.children).forEach((elem) => {
+		if (shouldPreserveElement(elem)) return;
+		const key = getHeadElementKey(elem);
+		if (key) {
+			existingMap.set(key, elem);
+		}
+	});
+
+	Array.from(tempDiv.children).forEach((elem) => {
+		const key = getHeadElementKey(elem);
+		if (key) {
+			newMap.set(key, elem);
+		}
+	});
+
+	newMap.forEach((newEl, key) => {
+		const existingEl = existingMap.get(key);
+		if (existingEl) {
+			updateHeadElement(existingEl, newEl);
+		} else {
+			addHeadElement(newEl);
+		}
+	});
+
+	existingMap.forEach((existingEl, key) => {
+		if (!newMap.has(key)) {
+			removeStaleElement(existingEl);
+		}
+	});
+};