@absolutejs/absolute 0.14.0 → 0.15.1

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

package/dist/dev/client/headPatch.ts

@@ -0,0 +1,213 @@
+/* Head element patching for HMR updates (title, meta, favicon, etc.) */
+
+const getHeadElementKey = (el: Element) => {
+	const tag = el.tagName.toLowerCase();
+
+	if (tag === 'title') return 'title';
+	if (tag === 'meta' && el.hasAttribute('charset')) return 'meta:charset';
+	if (tag === 'meta' && el.hasAttribute('name'))
+		return 'meta:name:' + el.getAttribute('name');
+	if (tag === 'meta' && el.hasAttribute('property'))
+		return 'meta:property:' + el.getAttribute('property');
+	if (tag === 'meta' && el.hasAttribute('http-equiv'))
+		return 'meta:http-equiv:' + el.getAttribute('http-equiv');
+
+	if (tag === 'link') {
+		const rel = (el.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:' + (el.getAttribute('href') || '');
+		if (rel === 'preload')
+			return 'link:preload:' + (el.getAttribute('href') || '');
+		if (rel === 'canonical') return 'link:canonical';
+		if (rel === 'dns-prefetch')
+			return 'link:dns-prefetch:' + (el.getAttribute('href') || '');
+	}
+
+	if (tag === 'script' && el.hasAttribute('data-hmr-id'))
+		return 'script:hmr:' + el.getAttribute('data-hmr-id');
+	if (tag === 'script') return null;
+	if (tag === 'base') return 'base';
+
+	return null;
+};
+
+const shouldPreserveElement = (el: Element) => {
+	if (el.hasAttribute('data-hmr-import-map')) return true;
+	if (el.hasAttribute('data-hmr-client')) return true;
+	if (el.hasAttribute('data-react-refresh-setup')) return true;
+
+	const attrs = Array.from(el.attributes);
+	for (let idx = 0; idx < attrs.length; idx++) {
+		if (attrs[idx]!.name.startsWith('data-hmr-')) return true;
+	}
+
+	if (el.tagName === 'SCRIPT') {
+		const src = el.getAttribute('src') || '';
+		if (src.includes('htmx.min.js') || src.includes('htmx.js')) return true;
+	}
+
+	return false;
+};
+
+const updateHeadElement = (oldEl: Element, newEl: Element, key: string) => {
+	const tag = oldEl.tagName.toLowerCase();
+
+	if (tag === 'title') {
+		const newTitle = newEl.textContent || '';
+		if (oldEl.textContent !== newTitle) {
+			oldEl.textContent = newTitle;
+			document.title = newTitle;
+			console.log('[HMR] Updated title to:', newTitle);
+		}
+		return;
+	}
+
+	if (tag === 'meta') {
+		const newContent = newEl.getAttribute('content');
+		const oldContent = oldEl.getAttribute('content');
+		if (oldContent !== newContent && newContent !== null) {
+			oldEl.setAttribute('content', newContent);
+			console.log('[HMR] Updated meta', key, 'to:', newContent);
+		}
+		if (newEl.hasAttribute('charset')) {
+			const newCharset = newEl.getAttribute('charset');
+			if (oldEl.getAttribute('charset') !== newCharset) {
+				oldEl.setAttribute('charset', newCharset!);
+			}
+		}
+		return;
+	}
+
+	if (tag === 'link') {
+		const rel = (oldEl.getAttribute('rel') || '').toLowerCase();
+		const newHref = newEl.getAttribute('href');
+		const oldHref = oldEl.getAttribute('href');
+
+		if (
+			rel === 'icon' ||
+			rel === 'shortcut icon' ||
+			rel === 'apple-touch-icon'
+		) {
+			if (newHref && oldHref) {
+				const oldBase = oldHref.split('?')[0];
+				const newBase = newHref.split('?')[0];
+				if (oldBase !== newBase) {
+					const cacheBustedHref =
+						newHref +
+						(newHref.includes('?') ? '&' : '?') +
+						't=' +
+						Date.now();
+					oldEl.setAttribute('href', cacheBustedHref);
+					console.log('[HMR] Updated favicon to:', newBase);
+				}
+			}
+		} else if (newHref && oldHref !== newHref) {
+			oldEl.setAttribute('href', newHref);
+			console.log('[HMR] Updated link', rel, 'to:', newHref);
+		}
+
+		const attrsToCheck = ['type', 'sizes', 'crossorigin', 'as', 'media'];
+		attrsToCheck.forEach(function (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);
+			}
+		});
+		return;
+	}
+
+	if (tag === 'base') {
+		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);
+		}
+		return;
+	}
+};
+
+const addHeadElement = (newEl: Element, key: string) => {
+	const clone = newEl.cloneNode(true) as Element;
+	clone.setAttribute('data-hmr-source', 'patched');
+
+	const tag = newEl.tagName.toLowerCase();
+	const head = document.head;
+	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);
+	}
+	console.log('[HMR] Added head element:', key);
+};
+
+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(function (el) {
+		if (shouldPreserveElement(el)) return;
+		const key = getHeadElementKey(el);
+		if (key) {
+			existingMap.set(key, el);
+		}
+	});
+
+	Array.from(tempDiv.children).forEach(function (el) {
+		const key = getHeadElementKey(el);
+		if (key) {
+			newMap.set(key, el);
+		}
+	});
+
+	newMap.forEach(function (newEl, key) {
+		const existingEl = existingMap.get(key);
+		if (existingEl) {
+			updateHeadElement(existingEl, newEl, key);
+		} else {
+			addHeadElement(newEl, key);
+		}
+	});
+
+	existingMap.forEach(function (existingEl, key) {
+		if (!newMap.has(key)) {
+			if (!shouldPreserveElement(existingEl)) {
+				const tag = existingEl.tagName.toLowerCase();
+				const rel = existingEl.getAttribute('rel') || '';
+				if (tag === 'link' && rel === 'stylesheet') return;
+				existingEl.remove();
+				console.log('[HMR] Removed head element:', key);
+			}
+		}
+	});
+};

package/dist/dev/client/hmrClient.ts

@@ -0,0 +1,204 @@
+/* AbsoluteJS HMR Client - Entry point
+   Initializes WebSocket connection, dispatches messages to framework handlers */
+
+import '../../../types/client'; // Window global type extensions
+
+import { hmrState } from '../../../types/client';
+import { detectCurrentFramework } from './frameworkDetect';
+import { handleReactUpdate } from './handlers/react';
+import { handleHTMLUpdate, handleScriptUpdate } from './handlers/html';
+import { handleHTMXUpdate } from './handlers/htmx';
+import { handleSvelteUpdate } from './handlers/svelte';
+import { handleVueUpdate } from './handlers/vue';
+import {
+	handleFullReload,
+	handleManifest,
+	handleModuleUpdate,
+	handleRebuildComplete,
+	handleRebuildError
+} from './handlers/rebuild';
+
+// Initialize HMR globals
+if (typeof window !== 'undefined') {
+	if (!window.__HMR_MANIFEST__) {
+		window.__HMR_MANIFEST__ = {};
+	}
+	if (!window.__HMR_MODULE_UPDATES__) {
+		window.__HMR_MODULE_UPDATES__ = [];
+	}
+	if (!window.__HMR_MODULE_VERSIONS__) {
+		window.__HMR_MODULE_VERSIONS__ = {};
+	}
+	if (!window.__HMR_SERVER_VERSIONS__) {
+		window.__HMR_SERVER_VERSIONS__ = {};
+	}
+}
+
+// Prevent multiple WebSocket connections
+if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
+	// Determine WebSocket URL
+	const wsHost = location.hostname;
+	const wsPort =
+		location.port || (location.protocol === 'https:' ? '443' : '80');
+	const wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+	const wsUrl = wsProtocol + '://' + wsHost + ':' + wsPort + '/hmr';
+
+	const wsc = new WebSocket(wsUrl);
+	window.__HMR_WS__ = wsc;
+
+	wsc.onopen = function () {
+		hmrState.isConnected = true;
+		sessionStorage.setItem('__HMR_CONNECTED__', 'true');
+
+		const currentFramework = detectCurrentFramework();
+		wsc.send(
+			JSON.stringify({
+				framework: currentFramework,
+				type: 'ready'
+			})
+		);
+
+		if (hmrState.reconnectTimeout) {
+			clearTimeout(hmrState.reconnectTimeout);
+			hmrState.reconnectTimeout = null;
+		}
+
+		hmrState.pingInterval = setInterval(function () {
+			if (wsc.readyState === WebSocket.OPEN && hmrState.isConnected) {
+				wsc.send(JSON.stringify({ type: 'ping' }));
+			}
+		}, 30000);
+	};
+
+	wsc.onmessage = function (event: MessageEvent) {
+		try {
+			const message = JSON.parse(event.data as string);
+
+			if (
+				message.type === 'react-update' ||
+				message.type === 'html-update' ||
+				message.type === 'htmx-update' ||
+				message.type === 'vue-update' ||
+				message.type === 'svelte-update' ||
+				message.type === 'module-update' ||
+				message.type === 'rebuild-start'
+			) {
+				hmrState.isHMRUpdating = true;
+				setTimeout(function () {
+					hmrState.isHMRUpdating = false;
+				}, 2000);
+			}
+
+			switch (message.type) {
+				case 'manifest':
+					handleManifest(message);
+					break;
+
+				case 'rebuild-start':
+					break;
+
+				case 'rebuild-complete':
+					handleRebuildComplete(message);
+					break;
+
+				case 'framework-update':
+					break;
+
+				case 'module-update':
+					handleModuleUpdate(message);
+					break;
+
+				case 'react-update':
+					handleReactUpdate(message);
+					break;
+
+				case 'script-update':
+					handleScriptUpdate(message);
+					break;
+
+				case 'html-update':
+					handleHTMLUpdate(message);
+					break;
+
+				case 'htmx-update':
+					handleHTMXUpdate(message);
+					break;
+
+				case 'svelte-update':
+					handleSvelteUpdate(message);
+					break;
+
+				case 'vue-update':
+					handleVueUpdate(message);
+					break;
+
+				case 'rebuild-error':
+					handleRebuildError(message);
+					break;
+
+				case 'full-reload':
+					handleFullReload();
+					break;
+
+				case 'pong':
+					break;
+
+				case 'connected':
+					break;
+
+				default:
+					break;
+			}
+		} catch {
+			/* ignore parse errors */
+		}
+	};
+
+	wsc.onclose = function (event: CloseEvent) {
+		hmrState.isConnected = false;
+
+		if (hmrState.pingInterval) {
+			clearInterval(hmrState.pingInterval);
+			hmrState.pingInterval = null;
+		}
+
+		if (event.code !== 1000) {
+			let attempts = 0;
+			hmrState.reconnectTimeout = setTimeout(function pollServer() {
+				attempts++;
+				if (attempts > 60) return;
+
+				fetch('/hmr-status', { cache: 'no-store' })
+					.then(function (res) {
+						if (res.ok) {
+							window.location.reload();
+						} else {
+							hmrState.reconnectTimeout = setTimeout(
+								pollServer,
+								300
+							);
+						}
+					})
+					.catch(function () {
+						hmrState.reconnectTimeout = setTimeout(pollServer, 300);
+					});
+			}, 500);
+		}
+	};
+
+	wsc.onerror = function () {
+		hmrState.isConnected = false;
+	};
+
+	window.addEventListener('beforeunload', function () {
+		if (hmrState.isHMRUpdating) {
+			if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
+			if (hmrState.reconnectTimeout)
+				clearTimeout(hmrState.reconnectTimeout);
+			return;
+		}
+
+		if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
+		if (hmrState.reconnectTimeout) clearTimeout(hmrState.reconnectTimeout);
+	});
+}