@absolutejs/absolute 0.19.0-beta.706 → 0.19.0-beta.708

package/dist/dev/client/cssUtils.ts

@@ -0,0 +1,307 @@
+import type {} from '../../types/globals';
+/* CSS reload/preload utilities for HMR */
+
+import type { CSSUpdateResult } from '../../types/client';
+import {
+	CSS_ERROR_RESOLVE_DELAY_MS,
+	CSS_MAX_CHECK_ATTEMPTS,
+	CSS_MAX_PARSE_TIMEOUT_MS,
+	CSS_SHEET_READY_TIMEOUT_MS,
+	DOM_UPDATE_DELAY_MS,
+	RAF_BATCH_COUNT
+} from './constants';
+import { hmrState } from './hmrState';
+
+export const getCSSBaseName = (href: string) => {
+	const fileName = href.split('?')[0]?.split('/').pop() || '';
+
+	return fileName.split('.')[0] ?? '';
+};
+
+const baseNamesMatch = (baseA: string, baseB: string) =>
+	baseA === baseB || baseA.includes(baseB) || baseB.includes(baseA);
+
+const findMatchingLink = (baseNew: string) => {
+	const links = document.head.querySelectorAll('link[rel="stylesheet"]');
+	for (const existing of links) {
+		if (!(existing instanceof HTMLLinkElement)) continue;
+		const existingHref = existing.getAttribute('href') || '';
+		const baseExisting = getCSSBaseName(existingHref);
+		if (baseNamesMatch(baseExisting, baseNew)) {
+			return existing;
+		}
+	}
+
+	return null;
+};
+
+const createTimestampedLink = (href: string) => {
+	const newLinkElement = document.createElement('link');
+	newLinkElement.rel = 'stylesheet';
+	newLinkElement.media = 'print';
+	const newHref = `${href + (href.includes('?') ? '&' : '?')}t=${Date.now()}`;
+	newLinkElement.href = newHref;
+
+	return { newHref, newLinkElement };
+};
+
+const processNewLink = (
+	newLink: Element,
+	linksToRemove: HTMLLinkElement[],
+	linksToActivate: HTMLLinkElement[],
+	linksToWaitFor: Promise<void>[]
+) => {
+	const href = newLink.getAttribute('href');
+	if (!href) return;
+
+	const baseNew = getCSSBaseName(href);
+	const existingLink = findMatchingLink(baseNew);
+
+	if (!existingLink) {
+		const { newHref, newLinkElement } = createTimestampedLink(href);
+		linksToActivate.push(newLinkElement);
+		const loadPromise = createCSSLoadPromise(newLinkElement, newHref);
+		document.head.appendChild(newLinkElement);
+		linksToWaitFor.push(loadPromise);
+
+		return;
+	}
+
+	const existingHrefAttr = existingLink.getAttribute('href');
+	const existingHref = existingHrefAttr ? existingHrefAttr.split('?')[0] : '';
+	const [newHrefBase] = href.split('?');
+	if (existingHref === newHrefBase) return;
+
+	const { newHref, newLinkElement } = createTimestampedLink(href);
+	linksToRemove.push(existingLink);
+	linksToActivate.push(newLinkElement);
+	const loadPromise = createCSSLoadPromise(newLinkElement, newHref);
+	document.head.appendChild(newLinkElement);
+	linksToWaitFor.push(loadPromise);
+};
+
+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((link) => {
+		const href = link.getAttribute('href') || '';
+
+		return getCSSBaseName(href);
+	});
+
+	const linksToRemove: HTMLLinkElement[] = [];
+	const linksToWaitFor: Promise<void>[] = [];
+	const linksToActivate: HTMLLinkElement[] = [];
+
+	newStylesheets.forEach((newLink) => {
+		processNewLink(newLink, linksToRemove, linksToActivate, linksToWaitFor);
+	});
+
+	existingStylesheets.forEach((existingLink) => {
+		const existingHref = existingLink.getAttribute('href') || '';
+		const baseExisting = getCSSBaseName(existingHref);
+		const stillExists = newHrefs.some((newBase) =>
+			baseNamesMatch(baseExisting, newBase)
+		);
+		if (stillExists) return;
+
+		const wasHandled = Array.from(newStylesheets).some((newLink) => {
+			const newHref = newLink.getAttribute('href') || '';
+			const baseNewLocal = getCSSBaseName(newHref);
+
+			return baseNamesMatch(baseExisting, baseNewLocal);
+		});
+
+		if (!wasHandled) {
+			linksToRemove.push(existingLink);
+		}
+	});
+
+	return { linksToActivate, linksToRemove, linksToWaitFor };
+};
+
+const findManifestHref = (
+	manifest: Record<string, string>,
+	baseName: string
+) => {
+	const manifestKey = `${baseName
+		.split('-')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join('')}CSS`;
+
+	if (manifest[manifestKey]) {
+		return manifest[manifestKey];
+	}
+
+	for (const [key, value] of Object.entries(manifest)) {
+		if (key.endsWith('CSS') && value.includes(baseName)) {
+			return value;
+		}
+	}
+
+	return null;
+};
+
+const updateStylesheetLink = (
+	link: Element,
+	manifest: Record<string, string>
+) => {
+	if (!(link instanceof HTMLLinkElement)) return;
+	const href = link.getAttribute('href');
+	if (!href || href.includes('htmx.min.js')) return;
+
+	let newHref: string | null = null;
+	if (manifest) {
+		const baseName = getCSSBaseName(href);
+		newHref = findManifestHref(manifest, baseName);
+	}
+
+	if (newHref && newHref !== href) {
+		link.href = `${newHref}?t=${Date.now()}`;
+	} else {
+		const url = new URL(href, window.location.origin);
+		url.searchParams.set('t', Date.now().toString());
+		link.href = url.toString();
+	}
+};
+
+export const reloadCSSStylesheets = (manifest: Record<string, string>) => {
+	const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
+	stylesheets.forEach((link) => {
+		updateStylesheetLink(link, manifest);
+	});
+};
+
+const createCSSLoadPromise = (linkElement: HTMLLinkElement, newHref: string) => {
+	const { promise, resolve } = Promise.withResolvers<void>();
+	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(
+				(sheet) =>
+					sheet.href && sheet.href.includes(newHref.split('?')[0] ?? '')
+			);
+		} catch {
+			return false;
+		}
+	};
+
+	linkElement.onload = function () {
+		let checkCount = 0;
+		const checkCSSOM = function () {
+			checkCount++;
+			if (verifyCSSOM() || checkCount > CSS_MAX_CHECK_ATTEMPTS) {
+				doResolve();
+			} else {
+				requestAnimationFrame(checkCSSOM);
+			}
+		};
+		requestAnimationFrame(checkCSSOM);
+	};
+
+	linkElement.onerror = function () {
+		setTimeout(() => {
+			doResolve();
+		}, CSS_ERROR_RESOLVE_DELAY_MS);
+	};
+
+	setTimeout(() => {
+		if (linkElement.sheet && !resolved) {
+			doResolve();
+		}
+	}, CSS_SHEET_READY_TIMEOUT_MS);
+
+	setTimeout(() => {
+		if (!resolved) {
+			doResolve();
+		}
+	}, CSS_MAX_PARSE_TIMEOUT_MS);
+
+	return promise;
+};
+
+const removeLinks = (linksToRemove: HTMLLinkElement[]) => {
+	linksToRemove.forEach((link) => {
+		if (link.parentNode) {
+			link.remove();
+		}
+	});
+};
+
+const activateLinks = (linksToActivate: HTMLLinkElement[]) => {
+	linksToActivate.forEach((link) => {
+		link.media = 'all';
+	});
+};
+
+const chainRAF = (depth: number, callback: () => void) => {
+	if (depth <= 0) {
+		callback();
+
+		return;
+	}
+	requestAnimationFrame(() => {
+		chainRAF(depth - 1, callback);
+	});
+};
+
+/* 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) {
+		void Promise.all(linksToWaitFor).then(() => {
+			setTimeout(() => {
+				chainRAF(RAF_BATCH_COUNT, () => {
+					updateBody();
+					activateLinks(linksToActivate);
+					requestAnimationFrame(() => {
+						removeLinks(linksToRemove);
+						if (hmrState.isFirstHMRUpdate) {
+							hmrState.isFirstHMRUpdate = false;
+						}
+					});
+				});
+			}, DOM_UPDATE_DELAY_MS);
+
+			return undefined;
+		});
+
+		return;
+	}
+
+	const doUpdate = function () {
+		chainRAF(RAF_BATCH_COUNT, () => {
+			updateBody();
+			requestAnimationFrame(() => {
+				removeLinks(linksToRemove);
+			});
+		});
+	};
+
+	if (hmrState.isFirstHMRUpdate) {
+		hmrState.isFirstHMRUpdate = false;
+		setTimeout(doUpdate, DOM_UPDATE_DELAY_MS);
+	} else {
+		doUpdate();
+	}
+};

package/dist/dev/client/domDiff.ts

@@ -0,0 +1,226 @@
+import type {} from '../../types/globals';
+/* DOM diffing/patching for in-place updates (zero flicker) */
+
+import { UNFOUND_INDEX } from './constants';
+
+type KeyedEntry = {
+	index: number;
+	node: Node;
+};
+
+const getElementKey = (elem: Node, index: number) => {
+	if (elem.nodeType !== Node.ELEMENT_NODE) return `text_${index}`;
+	if (!(elem instanceof Element)) return `text_${index}`;
+	if (elem.id) return `id_${elem.id}`;
+	if (elem.hasAttribute('data-key'))
+		return `key_${elem.getAttribute('data-key')}`;
+
+	return `tag_${elem.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((oldAttr) => {
+		if (
+			!newEl.hasAttribute(oldAttr.name) &&
+			runtimeAttrs.indexOf(oldAttr.name) === UNFOUND_INDEX
+		) {
+			oldEl.removeAttribute(oldAttr.name);
+		}
+	});
+
+	newAttrs.forEach((newAttr) => {
+		if (
+			runtimeAttrs.indexOf(newAttr.name) !== UNFOUND_INDEX &&
+			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;
+	}
+};
+
+const matchChildren = (oldChildren: Node[], newChildren: Node[]) => {
+	const oldMap = new Map<string, KeyedEntry[]>();
+	const newMap = new Map<string, KeyedEntry[]>();
+
+	oldChildren.forEach((child, idx) => {
+		const key = getElementKey(child, idx);
+		if (!oldMap.has(key)) {
+			oldMap.set(key, []);
+		}
+		oldMap.get(key)?.push({ index: idx, node: child });
+	});
+
+	newChildren.forEach((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 = (elem: Node) =>
+	elem instanceof Element && elem.hasAttribute('data-hmr-client');
+
+const isHMRPreserved = (elem: Node) =>
+	isHMRScript(elem) ||
+	(elem instanceof Element && elem.hasAttribute('data-hmr-overlay'));
+
+const isNonHMRScript = (child: Node) =>
+	child instanceof Element && child.tagName === 'SCRIPT';
+
+const findBestMatch = (oldMatches: KeyedEntry[], matchedOld: Set<Node>) => {
+	const unmatched = oldMatches.find((entry) => !matchedOld.has(entry.node));
+	if (unmatched) return unmatched;
+	if (oldMatches.length > 0) return oldMatches[0] ?? null;
+
+	return null;
+};
+
+const reconcileChild = (
+	newChild: Node,
+	newIndex: number,
+	oldMap: Map<string, KeyedEntry[]>,
+	matchedOld: Set<Node>,
+	parentNode: Node,
+	oldChildrenFiltered: Node[]
+) => {
+	const newKey = getElementKey(newChild, newIndex);
+	const oldMatches = oldMap.get(newKey) || [];
+
+	if (oldMatches.length === 0) {
+		const clone = newChild.cloneNode(true);
+		parentNode.insertBefore(clone, oldChildrenFiltered[newIndex] || null);
+
+		return;
+	}
+
+	const bestMatch = findBestMatch(oldMatches, matchedOld);
+	if (bestMatch && !matchedOld.has(bestMatch.node)) {
+		matchedOld.add(bestMatch.node);
+		patchNode(bestMatch.node, newChild);
+
+		return;
+	}
+
+	const clone = newChild.cloneNode(true);
+	parentNode.insertBefore(clone, oldChildrenFiltered[newIndex] || null);
+};
+
+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
+	) {
+		return;
+	}
+
+	if (!(oldNode instanceof Element) || !(newNode instanceof Element)) return;
+	const oldEl = oldNode;
+	const newEl = newNode;
+
+	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(
+		(child) => !isHMRScript(child) && !isNonHMRScript(child)
+	);
+	const newChildrenFiltered = newChildren.filter(
+		(child) => !isHMRScript(child) && !isNonHMRScript(child)
+	);
+
+	const { oldMap } = matchChildren(oldChildrenFiltered, newChildrenFiltered);
+	const matchedOld = new Set<Node>();
+
+	newChildrenFiltered.forEach((newChild, newIndex) => {
+		reconcileChild(
+			newChild,
+			newIndex,
+			oldMap,
+			matchedOld,
+			oldNode,
+			oldChildrenFiltered
+		);
+	});
+
+	oldChildrenFiltered.forEach((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(
+		(child) =>
+			!(
+				child instanceof Element &&
+				child.tagName === 'SCRIPT' &&
+				!child.hasAttribute('data-hmr-client')
+			)
+	);
+	const newChildrenFiltered = newChildren.filter(
+		(child) => !isNonHMRScript(child)
+	);
+
+	const { oldMap } = matchChildren(oldChildrenFiltered, newChildrenFiltered);
+	const matchedOld = new Set<Node>();
+
+	newChildrenFiltered.forEach((newChild, newIndex) => {
+		reconcileChild(
+			newChild,
+			newIndex,
+			oldMap,
+			matchedOld,
+			oldContainer,
+			oldChildrenFiltered
+		);
+	});
+
+	oldChildrenFiltered.forEach((oldChild) => {
+		if (matchedOld.has(oldChild)) return;
+		if (isHMRPreserved(oldChild)) return;
+		oldChild.remove();
+	});
+};