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

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

@@ -1,364 +0,0 @@
-import type {} from '../../../types/globals';
-/* HTML + script HMR update handlers */
-
-import { DOM_UPDATE_DELAY_MS } from '../constants';
-import { patchDOMInPlace } from '../domDiff';
-import {
-	saveDOMState,
-	restoreDOMState,
-	saveFormState,
-	restoreFormState,
-	saveScrollState,
-	restoreScrollState
-} from '../domState';
-import { processCSSLinks, waitForCSSAndUpdate } from '../cssUtils';
-import { patchHeadInPlace } from '../headPatch';
-import { detectCurrentFramework } from '../frameworkDetect';
-import type { ScriptInfo } from '../../../types/client';
-import { restoreDOMChanges, snapshotDOMChanges } from '../domTracker';
-import { hmrState } from '../hmrState';
-
-const parseHTMLMessage = (
-	html: string | { body?: string; head?: string } | null | undefined
-) => {
-	let body: string | null = null;
-	let head: string | null = null;
-	if (typeof html === 'string') {
-		body = html;
-	} else if (html && typeof html === 'object') {
-		body = html.body || null;
-		head = html.head || null;
-	}
-
-	return { body, head };
-};
-
-const applyHeadPatch = (htmlHead: string | null) => {
-	if (!htmlHead) {
-		return;
-	}
-
-	const doPatchHead = () => {
-		patchHeadInPlace(htmlHead);
-	};
-	if (hmrState.isFirstHMRUpdate) {
-		setTimeout(doPatchHead, DOM_UPDATE_DELAY_MS);
-	} else {
-		doPatchHead();
-	}
-};
-
-const handleHTMLBodyWithHead = (
-	htmlBody: string,
-	htmlHead: string,
-	htmlDomState: ReturnType<typeof saveDOMState>
-) => {
-	applyHeadPatch(htmlHead);
-
-	const cssResult = processCSSLinks(htmlHead);
-
-	const updateBodyAfterCSS = () => {
-		updateHTMLBody(htmlBody, htmlDomState, document.body);
-	};
-
-	waitForCSSAndUpdate(cssResult, updateBodyAfterCSS);
-};
-
-const handleHTMLBodyWithoutHead = (
-	htmlBody: string,
-	htmlDomState: ReturnType<typeof saveDOMState>
-) => {
-	const container = document.body;
-	if (!container) {
-		sessionStorage.removeItem('__HMR_ACTIVE__');
-
-		return;
-	}
-
-	updateHTMLBodyDirect(htmlBody, htmlDomState, container);
-	restoreDOMState(container, htmlDomState);
-};
-
-export const handleHTMLUpdate = (message: {
-	data: {
-		html?: string | { body?: string; head?: string } | null;
-	};
-}) => {
-	const htmlFrameworkCheck = detectCurrentFramework();
-	if (htmlFrameworkCheck !== 'html') {
-		return;
-	}
-
-	if (window.__REACT_ROOT__) {
-		window.__REACT_ROOT__ = undefined;
-	}
-
-	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
-
-	const htmlDomState = saveDOMState(document.body);
-	const { body: htmlBody, head: htmlHead } = parseHTMLMessage(
-		message.data.html
-	);
-
-	if (!htmlBody) {
-		sessionStorage.removeItem('__HMR_ACTIVE__');
-
-		return;
-	}
-
-	if (htmlHead) {
-		handleHTMLBodyWithHead(htmlBody, htmlHead, htmlDomState);
-	} else {
-		handleHTMLBodyWithoutHead(htmlBody, htmlDomState);
-	}
-};
-export const handleScriptUpdate = (message: {
-	data: { framework?: string; scriptPath?: string };
-}) => {
-	const scriptFramework = message.data.framework;
-	const currentFw = detectCurrentFramework();
-
-	if (currentFw !== scriptFramework) {
-		return;
-	}
-
-	const { scriptPath } = message.data;
-	if (!scriptPath) {
-		console.warn('[HMR] No script path in update');
-
-		return;
-	}
-
-	const interactiveSelectors =
-		'button, [onclick], [onchange], [oninput], details, input, select, textarea';
-	document.body.querySelectorAll(interactiveSelectors).forEach((elem) => {
-		const cloned = elem.cloneNode(true);
-		if (elem.parentNode) {
-			elem.parentNode.replaceChild(cloned, elem);
-		}
-	});
-
-	const cacheBustedPath = `${scriptPath}?t=${Date.now()}`;
-	import(cacheBustedPath)
-		.then(() => true)
-		.catch((err: unknown) => {
-			console.error(
-				'[HMR] Script hot-reload failed, falling back to page reload:',
-				err
-			);
-			window.location.reload();
-		});
-};
-
-const saveHTMLState = () => {
-	const forms = saveFormState();
-	const scroll = saveScrollState();
-
-	return { forms, scroll };
-};
-
-const preserveHmrScript = (
-	container: HTMLElement,
-	hmrScript: Element | null
-) => {
-	if (hmrScript && !container.querySelector('script[data-hmr-client]')) {
-		container.appendChild(hmrScript);
-	}
-};
-
-const updateHTMLBody = (
-	htmlBody: string,
-	htmlDomState: ReturnType<typeof saveDOMState>,
-	container: HTMLElement
-) => {
-	if (!container) {
-		return;
-	}
-
-	const savedState = saveHTMLState();
-	const domSnapshot = snapshotDOMChanges(container);
-
-	const existingScripts = collectScripts(container);
-	const hmrScript = container.querySelector('script[data-hmr-client]');
-	const tempDiv = document.createElement('div');
-	tempDiv.innerHTML = htmlBody;
-	const newScripts = collectScriptsFromElement(tempDiv);
-
-	const htmlStructureChanged = didHTMLStructureChange(container, tempDiv);
-
-	if (htmlStructureChanged || didScriptsChange(existingScripts, newScripts)) {
-		patchDOMInPlace(container, htmlBody);
-		restoreDOMChanges(container, domSnapshot, htmlBody);
-	}
-
-	preserveHmrScript(container, hmrScript);
-
-	requestAnimationFrame(() => {
-		restoreDOMState(container, htmlDomState);
-		restoreFormState(savedState.forms);
-		restoreScrollState(savedState.scroll);
-
-		if (
-			didScriptsChange(existingScripts, newScripts) ||
-			htmlStructureChanged
-		) {
-			cloneInteractiveElements(container);
-			reExecuteScripts(container, newScripts);
-		}
-	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
-};
-
-const cloneHmrListenerElements = (container: HTMLElement) => {
-	container
-		.querySelectorAll('[data-hmr-listeners-attached]')
-		.forEach((elem) => {
-			const cloned = elem.cloneNode(true);
-			if (elem.parentNode) {
-				elem.parentNode.replaceChild(cloned, elem);
-			}
-			if (cloned instanceof Element) {
-				cloned.removeAttribute('data-hmr-listeners-attached');
-			}
-		});
-};
-
-const replaceInlineScript = (script: Element) => {
-	if (script.hasAttribute('data-hmr-client')) {
-		return;
-	}
-
-	const newScript = document.createElement('script');
-	newScript.textContent = script.textContent || '';
-	const scriptEl = script instanceof HTMLScriptElement ? script : null;
-	newScript.type = scriptEl?.type || 'text/javascript';
-	if (script.parentNode) {
-		script.parentNode.replaceChild(newScript, script);
-	}
-};
-
-const updateHTMLBodyDirect = (
-	htmlBody: string,
-	htmlDomState: ReturnType<typeof saveDOMState>,
-	container: HTMLElement
-) => {
-	const savedState = saveHTMLState();
-	const domSnapshot = snapshotDOMChanges(container);
-
-	const tempDiv = document.createElement('div');
-	tempDiv.innerHTML = htmlBody;
-	const newScripts = collectScriptsFromElement(tempDiv);
-	const hmrScript = container.querySelector('script[data-hmr-client]');
-
-	patchDOMInPlace(container, htmlBody);
-	restoreDOMChanges(container, domSnapshot, htmlBody);
-
-	preserveHmrScript(container, hmrScript);
-
-	requestAnimationFrame(() => {
-		restoreDOMState(container, htmlDomState);
-		restoreFormState(savedState.forms);
-		restoreScrollState(savedState.scroll);
-
-		cloneHmrListenerElements(container);
-
-		removeOldScripts(container);
-		newScripts.forEach((scriptInfo) => {
-			const newScript = document.createElement('script');
-			const separator = scriptInfo.src.includes('?') ? '&' : '?';
-			newScript.src = `${scriptInfo.src + separator}t=${Date.now()}`;
-			newScript.type = scriptInfo.type;
-			container.appendChild(newScript);
-		});
-
-		const inlineScripts = container.querySelectorAll('script:not([src])');
-		inlineScripts.forEach(replaceInlineScript);
-	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
-};
-
-/* Shared helpers for HTML body updates */
-
-const collectScripts = (container: HTMLElement) =>
-	Array.from(container.querySelectorAll('script[src]')).map((script) => ({
-		src: script.getAttribute('src') || '',
-		type: script.getAttribute('type') || 'text/javascript'
-	}));
-
-const collectScriptsFromElement = (elem: HTMLElement) =>
-	Array.from(elem.querySelectorAll('script[src]')).map((script) => ({
-		src: script.getAttribute('src') || '',
-		type: script.getAttribute('type') || 'text/javascript'
-	}));
-
-const didScriptsChange = (oldScripts: ScriptInfo[], newScripts: ScriptInfo[]) =>
-	oldScripts.length !== newScripts.length ||
-	oldScripts.some((oldScript, idx) => {
-		const [oldSrcBase] = oldScript.src.split('?')[0]?.split('&') ?? [''];
-		const newScript = newScripts[idx];
-		if (!newScript) return true;
-		const [newSrcBase] = newScript.src.split('?')[0]?.split('&') ?? [''];
-
-		return oldSrcBase !== newSrcBase;
-	});
-
-const normalizeHTMLForComparison = (element: HTMLElement) => {
-	const clonedNode = element.cloneNode(true);
-	if (!(clonedNode instanceof HTMLElement)) return '';
-	const clone = clonedNode;
-	const scripts = clone.querySelectorAll('script');
-	scripts.forEach((script) => {
-		if (script.parentNode) {
-			script.parentNode.removeChild(script);
-		}
-	});
-	const allElements = clone.querySelectorAll('*');
-	allElements.forEach((elem) => {
-		elem.removeAttribute('data-hmr-listeners-attached');
-	});
-	if (clone.removeAttribute) {
-		clone.removeAttribute('data-hmr-listeners-attached');
-	}
-
-	return clone.innerHTML;
-};
-
-const didHTMLStructureChange = (container: HTMLElement, tempDiv: HTMLElement) =>
-	normalizeHTMLForComparison(container) !==
-	normalizeHTMLForComparison(tempDiv);
-
-const cloneInteractiveElements = (container: HTMLElement) => {
-	const interactiveSelectors =
-		'button, [onclick], [onchange], [oninput], [onsubmit], ' +
-		'details, input[type="button"], input[type="submit"], input[type="reset"]';
-	container.querySelectorAll(interactiveSelectors).forEach((elem) => {
-		const cloned = elem.cloneNode(true);
-		if (elem.parentNode) {
-			elem.parentNode.replaceChild(cloned, elem);
-		}
-	});
-};
-
-const removeOldScripts = (container: HTMLElement) => {
-	const scriptsInNewHTML = container.querySelectorAll('script[src]');
-	scriptsInNewHTML.forEach((script) => {
-		if (!script.hasAttribute('data-hmr-client')) {
-			script.remove();
-		}
-	});
-};
-
-const reExecuteScripts = (container: HTMLElement, newScripts: ScriptInfo[]) => {
-	removeOldScripts(container);
-
-	newScripts.forEach((scriptInfo) => {
-		const newScript = document.createElement('script');
-		const separator = scriptInfo.src.includes('?') ? '&' : '?';
-		newScript.src = `${scriptInfo.src + separator}t=${Date.now()}`;
-		newScript.type = scriptInfo.type;
-		container.appendChild(newScript);
-	});
-
-	const inlineScripts = container.querySelectorAll('script:not([src])');
-	inlineScripts.forEach(replaceInlineScript);
-};

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

@@ -1,278 +0,0 @@
-import type {} from '../../../types/globals';
-/* HTMX HMR update handler */
-
-import { DOM_UPDATE_DELAY_MS } from '../constants';
-import { patchDOMInPlace } from '../domDiff';
-import {
-	saveDOMState,
-	restoreDOMState,
-	saveFormState,
-	restoreFormState,
-	saveScrollState,
-	restoreScrollState
-} from '../domState';
-import { processCSSLinks, waitForCSSAndUpdate } from '../cssUtils';
-import { patchHeadInPlace } from '../headPatch';
-import { detectCurrentFramework } from '../frameworkDetect';
-import { type HTMXSavedState, type ScriptInfo } from '../../../types/client';
-import { hmrState } from '../hmrState';
-
-const parseHTMXMessage = (
-	html: string | { body?: string; head?: string } | null | undefined
-) => {
-	let body: string | null = null;
-	let head: string | null = null;
-	if (typeof html === 'string') {
-		body = html;
-	} else if (html && typeof html === 'object') {
-		body = html.body || null;
-		head = html.head || null;
-	}
-
-	return { body, head };
-};
-
-const applyHeadPatch = (htmxHead: string | null) => {
-	if (!htmxHead) {
-		return;
-	}
-
-	const doPatchHead = () => {
-		patchHeadInPlace(htmxHead);
-	};
-	if (hmrState.isFirstHMRUpdate) {
-		setTimeout(doPatchHead, DOM_UPDATE_DELAY_MS);
-	} else {
-		doPatchHead();
-	}
-};
-
-const handleHTMXBodyUpdate = (
-	htmxBody: string,
-	htmxHead: string | null,
-	htmxDomState: ReturnType<typeof saveDOMState>
-) => {
-	const updateHTMXBodyAfterCSS = () => {
-		updateHTMXBody(htmxBody, htmxDomState, document.body);
-	};
-
-	if (htmxHead) {
-		applyHeadPatch(htmxHead);
-		const cssResult = processCSSLinks(htmxHead);
-		waitForCSSAndUpdate(cssResult, updateHTMXBodyAfterCSS);
-	} else {
-		updateHTMXBodyAfterCSS();
-	}
-};
-
-export const handleHTMXUpdate = (message: {
-	data: {
-		html?: string | { body?: string; head?: string } | null;
-	};
-}) => {
-	const htmxFrameworkCheck = detectCurrentFramework();
-	if (htmxFrameworkCheck !== 'htmx') return;
-
-	if (window.__REACT_ROOT__) {
-		window.__REACT_ROOT__ = undefined;
-	}
-
-	sessionStorage.setItem('__HMR_ACTIVE__', 'true');
-
-	const htmxDomState = saveDOMState(document.body);
-	const { body: htmxBody, head: htmxHead } = parseHTMXMessage(
-		message.data.html
-	);
-
-	if (!htmxBody) {
-		sessionStorage.removeItem('__HMR_ACTIVE__');
-
-		return;
-	}
-
-	handleHTMXBodyUpdate(htmxBody, htmxHead, htmxDomState);
-};
-
-const cloneHmrListenerElements = (container: HTMLElement) => {
-	container
-		.querySelectorAll('[data-hmr-listeners-attached]')
-		.forEach((elem) => {
-			const cloned = elem.cloneNode(true);
-			if (!(cloned instanceof Element)) return;
-			if (elem.parentNode) {
-				elem.parentNode.replaceChild(cloned, elem);
-			}
-			cloned.removeAttribute('data-hmr-listeners-attached');
-		});
-};
-
-const removeOldScripts = (container: HTMLElement) => {
-	const scriptsInNewHTML = container.querySelectorAll('script[src]');
-	scriptsInNewHTML.forEach((script) => {
-		if (!script.hasAttribute('data-hmr-client')) {
-			script.remove();
-		}
-	});
-};
-
-const addNewScripts = (container: HTMLElement, newScripts: ScriptInfo[]) => {
-	newScripts.forEach((scriptInfo) => {
-		const newScript = document.createElement('script');
-		const separator = scriptInfo.src.includes('?') ? '&' : '?';
-		newScript.src = `${scriptInfo.src + separator}t=${Date.now()}`;
-		newScript.type = scriptInfo.type;
-		container.appendChild(newScript);
-	});
-};
-
-const replaceInlineScript = (script: Element) => {
-	if (script.hasAttribute('data-hmr-client')) {
-		return;
-	}
-
-	const newScript = document.createElement('script');
-	newScript.textContent = script.textContent || '';
-	newScript.type = script.getAttribute('type') || 'text/javascript';
-	if (script.parentNode) {
-		script.parentNode.replaceChild(newScript, script);
-	}
-};
-
-const reExecuteScripts = (container: HTMLElement, newScripts: ScriptInfo[]) => {
-	removeOldScripts(container);
-	addNewScripts(container, newScripts);
-
-	const inlineScripts = container.querySelectorAll('script:not([src])');
-	inlineScripts.forEach(replaceInlineScript);
-};
-
-const handleScriptsAndStructureChange = (
-	container: HTMLElement,
-	newScripts: ScriptInfo[]
-) => {
-	cloneHmrListenerElements(container);
-	reExecuteScripts(container, newScripts);
-};
-
-const restoreCounterSpan = (
-	container: HTMLElement,
-	count: number | undefined
-) => {
-	const newCountSpan = container.querySelector('#count');
-	if (newCountSpan && count !== undefined) {
-		newCountSpan.textContent = String(count);
-	}
-};
-
-const updateHTMXBody = (
-	htmxBody: string,
-	htmxDomState: ReturnType<typeof saveDOMState>,
-	container: HTMLElement
-) => {
-	if (!container) return;
-
-	const countSpan = container.querySelector('#count');
-	const countValue = countSpan
-		? parseInt(countSpan.textContent || '0', 10)
-		: 0;
-
-	const savedState: HTMXSavedState = {
-		componentState: { count: countValue },
-		forms: saveFormState(),
-		scroll: saveScrollState()
-	};
-
-	const existingScripts = collectScripts(container);
-
-	const tempDiv = document.createElement('div');
-	tempDiv.innerHTML = htmxBody;
-
-	if (savedState.componentState.count !== undefined) {
-		restoreCounterSpan(tempDiv, savedState.componentState.count);
-	}
-
-	const patchedBody = tempDiv.innerHTML;
-	const newScripts = collectScriptsFromElement(tempDiv);
-	const scriptsChanged = didScriptsChange(existingScripts, newScripts);
-
-	const htmlStructureChanged = didHTMLStructureChange(container, tempDiv);
-
-	const hmrScript = container.querySelector('script[data-hmr-client]');
-
-	patchDOMInPlace(container, patchedBody);
-
-	if (hmrScript && !container.querySelector('script[data-hmr-client]')) {
-		container.appendChild(hmrScript);
-	}
-
-	requestAnimationFrame(() => {
-		restoreFormState(savedState.forms);
-		restoreScrollState(savedState.scroll);
-		restoreCounterSpan(container, savedState.componentState.count);
-		restoreDOMState(container, htmxDomState);
-
-		if (scriptsChanged || htmlStructureChanged) {
-			handleScriptsAndStructureChange(container, newScripts);
-		}
-
-		if (window.htmx) {
-			window.htmx.process(container);
-		}
-	});
-	sessionStorage.removeItem('__HMR_ACTIVE__');
-};
-
-/* Shared helpers */
-
-const collectScripts = (container: HTMLElement) =>
-	Array.from(container.querySelectorAll('script[src]')).map((script) => ({
-		src: script.getAttribute('src') || '',
-		type: script.getAttribute('type') || 'text/javascript'
-	}));
-
-const collectScriptsFromElement = (elem: HTMLElement) =>
-	Array.from(elem.querySelectorAll('script[src]')).map((script) => ({
-		src: script.getAttribute('src') || '',
-		type: script.getAttribute('type') || 'text/javascript'
-	}));
-
-const didScriptsChange = (oldScripts: ScriptInfo[], newScripts: ScriptInfo[]) =>
-	oldScripts.length !== newScripts.length ||
-	oldScripts.some((oldScript, idx) => {
-		const [oldBeforeQuery = ''] = oldScript.src.split('?');
-		const [oldSrcBase] = oldBeforeQuery.split('&');
-		const newScript = newScripts[idx];
-		if (!newScript) return true;
-		const [newBeforeQuery = ''] = newScript.src.split('?');
-		const [newSrcBase] = newBeforeQuery.split('&');
-
-		return oldSrcBase !== newSrcBase;
-	});
-
-const normalizeHTMLForComparison = (element: HTMLElement) => {
-	const clonedNode = element.cloneNode(true);
-	if (!(clonedNode instanceof HTMLElement)) {
-		return element.innerHTML;
-	}
-
-	const clone = clonedNode;
-	const scripts = clone.querySelectorAll('script');
-	scripts.forEach((script) => {
-		if (script.parentNode) {
-			script.parentNode.removeChild(script);
-		}
-	});
-	const allElements = clone.querySelectorAll('*');
-	allElements.forEach((elem) => {
-		elem.removeAttribute('data-hmr-listeners-attached');
-	});
-	if (clone.removeAttribute) {
-		clone.removeAttribute('data-hmr-listeners-attached');
-	}
-
-	return clone.innerHTML;
-};
-
-const didHTMLStructureChange = (container: HTMLElement, tempDiv: HTMLElement) =>
-	normalizeHTMLForComparison(container) !==
-	normalizeHTMLForComparison(tempDiv);