@absolutejs/absolute 0.19.0-beta.231 → 0.19.0-beta.232

package/dist/dev/client/cssUtils.ts

@@ -1,305 +0,0 @@
-/* CSS reload/preload utilities for HMR */
-
-import { type CSSUpdateResult, hmrState } 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';
-
-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) =>
-	// eslint-disable-next-line promise/avoid-new
-	new Promise<void>((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(
-					(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);
-	});
-
-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

@@ -1,225 +0,0 @@
-/* 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();
-	});
-};