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

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

@@ -1,292 +0,0 @@
-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

@@ -1,233 +0,0 @@
-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);
-		}
-	});
-};