@absolutejs/absolute 0.15.0 → 0.15.1

package/dist/dev/client/cssUtils.ts

@@ -0,0 +1,288 @@
+/* CSS reload/preload utilities for HMR */
+
+import type { CSSUpdateResult } from '../../../types/client';
+import { hmrState } from '../../../types/client';
+
+export const getCSSBaseName = (href: string) => {
+	const fileName = href.split('?')[0]!.split('/').pop() || '';
+	return fileName.split('.')[0]!;
+};
+
+export const reloadCSSStylesheets = (manifest: Record<string, string>) => {
+	const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
+	stylesheets.forEach(function (link) {
+		const href = (link as HTMLLinkElement).getAttribute('href');
+		if (!href || href.includes('htmx.min.js')) return;
+
+		let newHref: string | null = null;
+		if (manifest) {
+			const baseName = href
+				.split('/')
+				.pop()!
+				.replace(/\.[^.]*$/, '');
+			const manifestKey =
+				baseName
+					.split('-')
+					.map(function (part) {
+						return part.charAt(0).toUpperCase() + part.slice(1);
+					})
+					.join('') + 'CSS';
+
+			if (manifest[manifestKey]) {
+				newHref = manifest[manifestKey]!;
+			} else {
+				for (const [key, value] of Object.entries(manifest)) {
+					if (key.endsWith('CSS') && value.includes(baseName)) {
+						newHref = value;
+						break;
+					}
+				}
+			}
+		}
+
+		if (newHref && newHref !== href) {
+			(link as HTMLLinkElement).href = newHref + '?t=' + Date.now();
+		} else {
+			const url = new URL(href, window.location.origin);
+			url.searchParams.set('t', Date.now().toString());
+			(link as HTMLLinkElement).href = url.toString();
+		}
+	});
+};
+
+/* Shared CSS preload/swap logic used by HTML and HTMX handlers.
+   Returns tracking arrays for coordinating CSS load with body patching. */
+export const processCSSLinks = (headHTML: string) => {
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = headHTML;
+	const newStylesheets = tempDiv.querySelectorAll('link[rel="stylesheet"]');
+	const existingStylesheets = Array.from(
+		document.head.querySelectorAll<HTMLLinkElement>(
+			'link[rel="stylesheet"]'
+		)
+	);
+
+	const newHrefs = Array.from(newStylesheets).map(function (link) {
+		const href = link.getAttribute('href') || '';
+		return getCSSBaseName(href);
+	});
+
+	const linksToRemove: HTMLLinkElement[] = [];
+	const linksToWaitFor: Promise<void>[] = [];
+	const linksToActivate: HTMLLinkElement[] = [];
+
+	newStylesheets.forEach(function (newLink) {
+		const href = newLink.getAttribute('href');
+		if (!href) return;
+
+		const baseNew = getCSSBaseName(href);
+
+		let existingLink: HTMLLinkElement | null = null;
+		document.head
+			.querySelectorAll('link[rel="stylesheet"]')
+			.forEach(function (existing) {
+				const existingHref =
+					(existing as HTMLLinkElement).getAttribute('href') || '';
+				const baseExisting = getCSSBaseName(existingHref);
+				if (
+					baseExisting === baseNew ||
+					baseExisting.includes(baseNew) ||
+					baseNew.includes(baseExisting)
+				) {
+					existingLink = existing as HTMLLinkElement;
+				}
+			});
+
+		if (existingLink) {
+			const existingHrefAttr = (
+				existingLink as HTMLLinkElement
+			).getAttribute('href');
+			const existingHref = existingHrefAttr
+				? existingHrefAttr.split('?')[0]
+				: '';
+			const newHrefBase = href.split('?')[0];
+			if (existingHref !== newHrefBase) {
+				const newLinkElement = document.createElement('link');
+				newLinkElement.rel = 'stylesheet';
+				newLinkElement.media = 'print';
+				const newHref =
+					href + (href.includes('?') ? '&' : '?') + 't=' + Date.now();
+				newLinkElement.href = newHref;
+
+				linksToRemove.push(existingLink as HTMLLinkElement);
+				linksToActivate.push(newLinkElement);
+
+				const loadPromise = createCSSLoadPromise(
+					newLinkElement,
+					newHref
+				);
+				document.head.appendChild(newLinkElement);
+				linksToWaitFor.push(loadPromise);
+			}
+		} else {
+			const newLinkElement = document.createElement('link');
+			newLinkElement.rel = 'stylesheet';
+			newLinkElement.media = 'print';
+			const newHref =
+				href + (href.includes('?') ? '&' : '?') + 't=' + Date.now();
+			newLinkElement.href = newHref;
+
+			linksToActivate.push(newLinkElement);
+
+			const loadPromise = createCSSLoadPromise(newLinkElement, newHref);
+			document.head.appendChild(newLinkElement);
+			linksToWaitFor.push(loadPromise);
+		}
+	});
+
+	existingStylesheets.forEach(function (existingLink) {
+		const existingHref = existingLink.getAttribute('href') || '';
+		const baseExisting = getCSSBaseName(existingHref);
+		const stillExists = newHrefs.some(function (newBase) {
+			return (
+				baseExisting === newBase ||
+				baseExisting.includes(newBase) ||
+				newBase.includes(baseExisting)
+			);
+		});
+
+		if (!stillExists) {
+			const wasHandled = Array.from(newStylesheets).some(
+				function (newLink) {
+					const newHref = newLink.getAttribute('href') || '';
+					const baseNewLocal = getCSSBaseName(newHref);
+					return (
+						baseExisting === baseNewLocal ||
+						baseExisting.includes(baseNewLocal) ||
+						baseNewLocal.includes(baseExisting)
+					);
+				}
+			);
+
+			if (!wasHandled) {
+				linksToRemove.push(existingLink);
+			}
+		}
+	});
+
+	return { linksToActivate, linksToRemove, linksToWaitFor };
+};
+
+const createCSSLoadPromise = (
+	linkElement: HTMLLinkElement,
+	newHref: string
+) => {
+	return new Promise<void>(function (resolve) {
+		let resolved = false;
+		const doResolve = function () {
+			if (resolved) return;
+			resolved = true;
+			resolve();
+		};
+
+		const verifyCSSOM = function () {
+			try {
+				const sheets = Array.from(document.styleSheets);
+				return sheets.some(function (sheet) {
+					return (
+						sheet.href &&
+						sheet.href.includes(newHref.split('?')[0]!)
+					);
+				});
+			} catch {
+				return false;
+			}
+		};
+
+		linkElement.onload = function () {
+			let checkCount = 0;
+			const checkCSSOM = function () {
+				checkCount++;
+				if (verifyCSSOM() || checkCount > 10) {
+					doResolve();
+				} else {
+					requestAnimationFrame(checkCSSOM);
+				}
+			};
+			requestAnimationFrame(checkCSSOM);
+		};
+
+		linkElement.onerror = function () {
+			setTimeout(function () {
+				doResolve();
+			}, 50);
+		};
+
+		setTimeout(function () {
+			if (linkElement.sheet && !resolved) {
+				doResolve();
+			}
+		}, 100);
+
+		setTimeout(function () {
+			if (!resolved) {
+				doResolve();
+			}
+		}, 500);
+	});
+};
+
+/* Coordinate CSS load with body update: waits for CSS, patches body,
+   activates new CSS, removes old CSS. Handles first-update delay. */
+export const waitForCSSAndUpdate = (
+	cssResult: CSSUpdateResult,
+	updateBody: () => void
+) => {
+	const { linksToActivate, linksToRemove, linksToWaitFor } = cssResult;
+
+	if (linksToWaitFor.length > 0) {
+		Promise.all(linksToWaitFor).then(function () {
+			setTimeout(function () {
+				requestAnimationFrame(function () {
+					requestAnimationFrame(function () {
+						requestAnimationFrame(function () {
+							updateBody();
+							linksToActivate.forEach(function (link) {
+								link.media = 'all';
+							});
+							requestAnimationFrame(function () {
+								linksToRemove.forEach(function (link) {
+									if (link.parentNode) {
+										link.remove();
+									}
+								});
+								if (hmrState.isFirstHMRUpdate) {
+									hmrState.isFirstHMRUpdate = false;
+								}
+							});
+						});
+					});
+				});
+			}, 50);
+		});
+	} else {
+		const doUpdate = function () {
+			requestAnimationFrame(function () {
+				requestAnimationFrame(function () {
+					requestAnimationFrame(function () {
+						updateBody();
+						requestAnimationFrame(function () {
+							linksToRemove.forEach(function (link) {
+								if (link.parentNode) {
+									link.remove();
+								}
+							});
+						});
+					});
+				});
+			});
+		};
+
+		if (hmrState.isFirstHMRUpdate) {
+			hmrState.isFirstHMRUpdate = false;
+			setTimeout(doUpdate, 50);
+		} else {
+			doUpdate();
+		}
+	}
+};

package/dist/dev/client/domDiff.ts

@@ -0,0 +1,261 @@
+/* DOM diffing/patching for in-place updates (zero flicker) */
+
+const getElementKey = (el: Node, index: number) => {
+	if (el.nodeType !== Node.ELEMENT_NODE) return 'text_' + index;
+	const element = el as Element;
+	if (element.id) return 'id_' + element.id;
+	if (element.hasAttribute('data-key'))
+		return 'key_' + element.getAttribute('data-key');
+	return 'tag_' + element.tagName + '_' + index;
+};
+
+const updateElementAttributes = (oldEl: Element, newEl: Element) => {
+	const newAttrs = Array.from(newEl.attributes);
+	const oldAttrs = Array.from(oldEl.attributes);
+	const runtimeAttrs = ['data-hmr-listeners-attached'];
+
+	oldAttrs.forEach(function (oldAttr) {
+		if (
+			!newEl.hasAttribute(oldAttr.name) &&
+			runtimeAttrs.indexOf(oldAttr.name) === -1
+		) {
+			oldEl.removeAttribute(oldAttr.name);
+		}
+	});
+
+	newAttrs.forEach(function (newAttr) {
+		if (
+			runtimeAttrs.indexOf(newAttr.name) !== -1 &&
+			oldEl.hasAttribute(newAttr.name)
+		) {
+			return;
+		}
+		const oldValue = oldEl.getAttribute(newAttr.name);
+		if (oldValue !== newAttr.value) {
+			oldEl.setAttribute(newAttr.name, newAttr.value);
+		}
+	});
+};
+
+const updateTextNode = (oldNode: Node, newNode: Node) => {
+	if (oldNode.nodeValue !== newNode.nodeValue) {
+		oldNode.nodeValue = newNode.nodeValue;
+	}
+};
+
+interface KeyedEntry {
+	index: number;
+	node: Node;
+}
+
+const matchChildren = (oldChildren: Node[], newChildren: Node[]) => {
+	const oldMap = new Map<string, KeyedEntry[]>();
+	const newMap = new Map<string, KeyedEntry[]>();
+
+	oldChildren.forEach(function (child, idx) {
+		const key = getElementKey(child, idx);
+		if (!oldMap.has(key)) {
+			oldMap.set(key, []);
+		}
+		oldMap.get(key)!.push({ index: idx, node: child });
+	});
+
+	newChildren.forEach(function (child, idx) {
+		const key = getElementKey(child, idx);
+		if (!newMap.has(key)) {
+			newMap.set(key, []);
+		}
+		newMap.get(key)!.push({ index: idx, node: child });
+	});
+
+	return { newMap, oldMap };
+};
+
+const isHMRScript = (el: Node) => {
+	return (
+		el.nodeType === Node.ELEMENT_NODE &&
+		(el as Element).hasAttribute &&
+		(el as Element).hasAttribute('data-hmr-client')
+	);
+};
+
+const isHMRPreserved = (el: Node) => {
+	return (
+		isHMRScript(el) ||
+		(el.nodeType === Node.ELEMENT_NODE &&
+			(el as Element).hasAttribute &&
+			(el as Element).hasAttribute('data-hmr-overlay'))
+	);
+};
+
+const patchNode = (oldNode: Node, newNode: Node) => {
+	if (
+		oldNode.nodeType === Node.TEXT_NODE &&
+		newNode.nodeType === Node.TEXT_NODE
+	) {
+		updateTextNode(oldNode, newNode);
+		return;
+	}
+
+	if (
+		oldNode.nodeType === Node.ELEMENT_NODE &&
+		newNode.nodeType === Node.ELEMENT_NODE
+	) {
+		const oldEl = oldNode as Element;
+		const newEl = newNode as Element;
+
+		if (oldEl.tagName !== newEl.tagName) {
+			const clone = newEl.cloneNode(true);
+			oldEl.replaceWith(clone);
+			return;
+		}
+
+		updateElementAttributes(oldEl, newEl);
+
+		const oldChildren = Array.from(oldNode.childNodes);
+		const newChildren = Array.from(newNode.childNodes);
+
+		const oldChildrenFiltered = oldChildren.filter(function (child) {
+			return (
+				!isHMRScript(child) &&
+				!(
+					child.nodeType === Node.ELEMENT_NODE &&
+					(child as Element).tagName === 'SCRIPT'
+				)
+			);
+		});
+		const newChildrenFiltered = newChildren.filter(function (child) {
+			return (
+				!isHMRScript(child) &&
+				!(
+					child.nodeType === Node.ELEMENT_NODE &&
+					(child as Element).tagName === 'SCRIPT'
+				)
+			);
+		});
+
+		const { oldMap } = matchChildren(
+			oldChildrenFiltered,
+			newChildrenFiltered
+		);
+		const matchedOld = new Set<Node>();
+
+		newChildrenFiltered.forEach(function (newChild, newIndex) {
+			const newKey = getElementKey(newChild, newIndex);
+			const oldMatches = oldMap.get(newKey) || [];
+
+			if (oldMatches.length > 0) {
+				let bestMatch: KeyedEntry | null = null;
+				for (let idx = 0; idx < oldMatches.length; idx++) {
+					if (!matchedOld.has(oldMatches[idx]!.node)) {
+						bestMatch = oldMatches[idx]!;
+						break;
+					}
+				}
+				if (!bestMatch && oldMatches.length > 0) {
+					bestMatch = oldMatches[0]!;
+				}
+				if (bestMatch && !matchedOld.has(bestMatch.node)) {
+					matchedOld.add(bestMatch.node);
+					patchNode(bestMatch.node, newChild);
+				} else if (oldMatches.length > 0) {
+					const clone = newChild.cloneNode(true);
+					oldNode.insertBefore(
+						clone,
+						oldChildrenFiltered[newIndex] || null
+					);
+				}
+			} else {
+				const clone = newChild.cloneNode(true);
+				oldNode.insertBefore(
+					clone,
+					oldChildrenFiltered[newIndex] || null
+				);
+			}
+		});
+
+		oldChildrenFiltered.forEach(function (oldChild) {
+			if (!matchedOld.has(oldChild) && !isHMRPreserved(oldChild)) {
+				oldChild.remove();
+			}
+		});
+	}
+};
+
+export const patchDOMInPlace = (oldContainer: HTMLElement, newHTML: string) => {
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = newHTML;
+	const newContainer = tempDiv;
+
+	const oldChildren = Array.from(oldContainer.childNodes);
+	const newChildren = Array.from(newContainer.childNodes);
+
+	const oldChildrenFiltered = oldChildren.filter(function (child) {
+		return !(
+			child.nodeType === Node.ELEMENT_NODE &&
+			(child as Element).tagName === 'SCRIPT' &&
+			!(child as Element).hasAttribute('data-hmr-client')
+		);
+	});
+	const newChildrenFiltered = newChildren.filter(function (child) {
+		return !(
+			child.nodeType === Node.ELEMENT_NODE &&
+			(child as Element).tagName === 'SCRIPT'
+		);
+	});
+
+	const { oldMap } = matchChildren(oldChildrenFiltered, newChildrenFiltered);
+	const matchedOld = new Set<Node>();
+
+	newChildrenFiltered.forEach(function (newChild, newIndex) {
+		const newKey = getElementKey(newChild, newIndex);
+		const oldMatches = oldMap.get(newKey) || [];
+
+		if (oldMatches.length > 0) {
+			let bestMatch: KeyedEntry | null = null;
+			for (let idx = 0; idx < oldMatches.length; idx++) {
+				if (!matchedOld.has(oldMatches[idx]!.node)) {
+					bestMatch = oldMatches[idx]!;
+					break;
+				}
+			}
+			if (!bestMatch && oldMatches.length > 0) {
+				bestMatch = oldMatches[0]!;
+			}
+			if (bestMatch && !matchedOld.has(bestMatch.node)) {
+				matchedOld.add(bestMatch.node);
+				patchNode(bestMatch.node, newChild);
+			} else {
+				const clone = newChild.cloneNode(true);
+				oldContainer.insertBefore(
+					clone,
+					oldChildrenFiltered[newIndex] || null
+				);
+			}
+		} else {
+			const clone = newChild.cloneNode(true);
+			oldContainer.insertBefore(
+				clone,
+				oldChildrenFiltered[newIndex] || null
+			);
+		}
+	});
+
+	oldChildrenFiltered.forEach(function (oldChild) {
+		if (
+			!matchedOld.has(oldChild) &&
+			!(
+				oldChild.nodeType === Node.ELEMENT_NODE &&
+				(oldChild as Element).tagName === 'SCRIPT' &&
+				(oldChild as Element).hasAttribute('data-hmr-client')
+			) &&
+			!(
+				oldChild.nodeType === Node.ELEMENT_NODE &&
+				(oldChild as Element).hasAttribute &&
+				(oldChild as Element).hasAttribute('data-hmr-overlay')
+			)
+		) {
+			oldChild.remove();
+		}
+	});
+};