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

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

package/dist/dev/client/domState.ts

@@ -0,0 +1,421 @@
+import type {} from '../../types/globals';
+/* DOM state snapshot/restore to preserve user-visible state across HMR */
+
+import type { DOMStateEntry, DOMStateSnapshot } from '../../types/client';
+import {
+	FOCUS_ID_PREFIX_LENGTH,
+	FOCUS_IDX_PREFIX_LENGTH,
+	FOCUS_NAME_PREFIX_LENGTH,
+	UNFOUND_INDEX
+} from './constants';
+
+const trySetSelectionRange = (
+	element: HTMLInputElement | HTMLTextAreaElement,
+	start: number,
+	end: number
+) => {
+	try {
+		element.setSelectionRange(start, end);
+	} catch {
+		/* ignore */
+	}
+};
+
+const restoreSelectionRange = (
+	element: HTMLInputElement | HTMLTextAreaElement,
+	entry: DOMStateEntry
+) => {
+	if (
+		entry.selStart === undefined ||
+		entry.selEnd === undefined ||
+		!element.setSelectionRange
+	)
+		return;
+	trySetSelectionRange(element, entry.selStart, entry.selEnd);
+};
+
+const restoreInputEntry = (target: Element, entry: DOMStateEntry) => {
+	if (!(target instanceof HTMLInputElement)) return;
+	const input = target;
+	const type = entry.type || input.getAttribute('type') || 'text';
+	if (type === 'checkbox' || type === 'radio') {
+		if (entry.checked !== undefined) input.checked = entry.checked;
+	} else if (entry.value !== undefined) {
+		input.value = entry.value;
+	}
+	restoreSelectionRange(input, entry);
+};
+
+const restoreTextareaEntry = (target: Element, entry: DOMStateEntry) => {
+	if (!(target instanceof HTMLTextAreaElement)) return;
+	const textarea = target;
+	if (entry.value !== undefined) textarea.value = entry.value;
+	restoreSelectionRange(textarea, entry);
+};
+
+const restoreSelectEntry = (target: Element, entry: DOMStateEntry) => {
+	if (!Array.isArray(entry.values)) return;
+	if (!(target instanceof HTMLSelectElement)) return;
+	const select = target;
+	const { values } = entry;
+	Array.from(select.options).forEach((opt) => {
+		opt.selected = values.indexOf(opt.value) !== UNFOUND_INDEX;
+	});
+};
+
+const restoreEntry = (target: Element, entry: DOMStateEntry) => {
+	if (target.tagName === 'INPUT') {
+		restoreInputEntry(target, entry);
+
+		return;
+	}
+	if (target.tagName === 'TEXTAREA') {
+		restoreTextareaEntry(target, entry);
+
+		return;
+	}
+	if (target.tagName === 'SELECT') {
+		restoreSelectEntry(target, entry);
+
+		return;
+	}
+	if (target.tagName === 'OPTION') {
+		if (entry.selected !== undefined && target instanceof HTMLOptionElement)
+			target.selected = entry.selected;
+
+		return;
+	}
+	if (target.tagName === 'DETAILS') {
+		if (entry.open !== undefined && target instanceof HTMLDetailsElement)
+			target.open = entry.open;
+
+		return;
+	}
+	if (target.getAttribute('contenteditable') === 'true') {
+		if (entry.text !== undefined) target.textContent = entry.text;
+	}
+};
+
+const findEntryTarget = (
+	root: HTMLElement,
+	elements: NodeListOf<Element>,
+	entry: DOMStateEntry
+) => {
+	if (entry.id) return root.querySelector(`#${CSS.escape(entry.id)}`);
+	if (entry.name)
+		return root.querySelector(`[name="${CSS.escape(entry.name)}"]`);
+	if (elements[entry.idx]) return elements[entry.idx] ?? null;
+
+	return null;
+};
+
+const resolveFocusElement = (
+	root: HTMLElement,
+	elements: NodeListOf<Element>,
+	activeKey: string
+) => {
+	if (activeKey.startsWith('id:'))
+		return root.querySelector(
+			`#${CSS.escape(activeKey.slice(FOCUS_ID_PREFIX_LENGTH))}`
+		);
+	if (activeKey.startsWith('name:'))
+		return root.querySelector(
+			`[name="${CSS.escape(activeKey.slice(FOCUS_NAME_PREFIX_LENGTH))}"]`
+		);
+	if (!activeKey.startsWith('idx:')) return null;
+	const idx = parseInt(activeKey.slice(FOCUS_IDX_PREFIX_LENGTH), 10);
+	if (isNaN(idx) || !elements[idx]) return null;
+
+	return elements[idx];
+};
+
+export const restoreDOMState = (
+	root: HTMLElement,
+	snapshot: DOMStateSnapshot
+) => {
+	if (!snapshot || !snapshot.items) return;
+	const selector =
+		'input, textarea, select, option, [contenteditable="true"], details';
+	const elements = root.querySelectorAll(selector);
+
+	snapshot.items.forEach((entry) => {
+		const target = findEntryTarget(root, elements, entry);
+		if (!target) return;
+		restoreEntry(target, entry);
+	});
+
+	if (!snapshot.activeKey) return;
+	const focusEl = resolveFocusElement(root, elements, snapshot.activeKey);
+	if (focusEl instanceof HTMLElement) {
+		focusEl.focus();
+	}
+};
+
+const resolveFormElement = (
+	isStandalone: boolean,
+	form: Element | null,
+	name: string
+) => {
+	if (isStandalone) {
+		const element: HTMLInputElement | null = document.querySelector(
+			`input[name="${name}"], textarea[name="${name}"], select[name="${name}"]`
+		);
+		if (element) return element;
+
+		const byId = document.getElementById(name);
+		if (byId instanceof HTMLInputElement) return byId;
+
+		return null;
+	}
+	if (!form) return null;
+
+	const found = form.querySelector(`[name="${name}"], #${name}`);
+	if (
+		found instanceof HTMLInputElement ||
+		found instanceof HTMLTextAreaElement ||
+		found instanceof HTMLSelectElement
+	)
+		return found;
+
+	return null;
+};
+
+const applyFormValue = (
+	element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+	value: boolean | string
+) => {
+	if (
+		element instanceof HTMLInputElement &&
+		(element.type === 'checkbox' || element.type === 'radio')
+	) {
+		element.checked = value === true;
+
+		return;
+	}
+	element.value = String(value);
+};
+
+const resolveForm = (formId: string) => {
+	const formIndex = parseInt(formId.replace('form-', ''));
+	const form = document.getElementById(formId);
+	if (form) return form;
+	if (isNaN(formIndex)) return null;
+	try {
+		return document.querySelector(`form:nth-of-type(${formIndex + 1})`);
+	} catch {
+		return null;
+	}
+};
+
+const restoreRadioGroup = (
+	isStandalone: boolean,
+	form: Element | null,
+	groupName: string,
+	selectedValue: string
+) => {
+	const scope = isStandalone ? document : form;
+	if (!scope) return;
+
+	const escapedName = CSS.escape(groupName);
+	const escapedValue = CSS.escape(selectedValue);
+	const radio = scope.querySelector<HTMLInputElement>(
+		`input[type="radio"][name="${escapedName}"][value="${escapedValue}"]`
+	);
+
+	if (radio) {
+		radio.checked = true;
+	}
+};
+
+const RADIO_PREFIX = '__radio__';
+
+export const restoreFormState = (
+	formState: Record<string, Record<string, boolean | string>>
+) => {
+	Object.keys(formState).forEach((formId) => {
+		const isStandalone = formId === '__standalone__';
+		const form = isStandalone ? null : resolveForm(formId);
+		const formData = formState[formId];
+		if (!formData) return;
+		Object.keys(formData).forEach((name) => {
+			if (name.startsWith(RADIO_PREFIX)) {
+				const groupName = name.slice(RADIO_PREFIX.length);
+				const value = formData[name];
+				if (value === undefined) return;
+				restoreRadioGroup(isStandalone, form, groupName, String(value));
+
+				return;
+			}
+			const element = resolveFormElement(isStandalone, form, name);
+			if (!element) return;
+			const value = formData[name];
+			if (value === undefined) return;
+			applyFormValue(element, value);
+		});
+	});
+};
+
+export const restoreScrollState = (scrollState: {
+	window: { x: number; y: number };
+}) => {
+	if (scrollState && scrollState.window) {
+		window.scrollTo(scrollState.window.x, scrollState.window.y);
+	}
+};
+
+const saveInputEntry = (elem: Element, entry: DOMStateEntry) => {
+	if (!(elem instanceof HTMLInputElement)) return;
+	const input = elem;
+	const type = input.getAttribute('type') || 'text';
+	entry.type = type;
+	if (type === 'checkbox' || type === 'radio') {
+		entry.checked = input.checked;
+	} else {
+		entry.value = input.value;
+	}
+	if (input.selectionStart !== null && input.selectionEnd !== null) {
+		entry.selStart = input.selectionStart;
+		entry.selEnd = input.selectionEnd;
+	}
+};
+
+const saveTextareaEntry = (elem: Element, entry: DOMStateEntry) => {
+	if (!(elem instanceof HTMLTextAreaElement)) return;
+	const textarea = elem;
+	entry.value = textarea.value;
+	if (textarea.selectionStart !== null && textarea.selectionEnd !== null) {
+		entry.selStart = textarea.selectionStart;
+		entry.selEnd = textarea.selectionEnd;
+	}
+};
+
+const saveSelectEntry = (elem: Element, entry: DOMStateEntry) => {
+	if (!(elem instanceof HTMLSelectElement)) return;
+	const select = elem;
+	const vals: string[] = [];
+	Array.from(select.options).forEach((opt) => {
+		if (opt.selected) vals.push(opt.value);
+	});
+	entry.values = vals;
+};
+
+const saveElementEntry = (elem: Element, entry: DOMStateEntry) => {
+	if (elem.tagName === 'INPUT') {
+		saveInputEntry(elem, entry);
+
+		return;
+	}
+	if (elem.tagName === 'TEXTAREA') {
+		saveTextareaEntry(elem, entry);
+
+		return;
+	}
+	if (elem.tagName === 'SELECT') {
+		saveSelectEntry(elem, entry);
+
+		return;
+	}
+	if (elem.tagName === 'OPTION') {
+		if (elem instanceof HTMLOptionElement) entry.selected = elem.selected;
+
+		return;
+	}
+	if (elem.tagName === 'DETAILS') {
+		if (elem instanceof HTMLDetailsElement) entry.open = elem.open;
+
+		return;
+	}
+	if (elem.getAttribute('contenteditable') === 'true') {
+		entry.text = elem.textContent || undefined;
+	}
+};
+
+export const saveDOMState = (root: HTMLElement) => {
+	const snapshot: DOMStateSnapshot = { activeKey: null, items: [] };
+	const selector =
+		'input, textarea, select, option, [contenteditable="true"], details';
+	const elements = root.querySelectorAll(selector);
+
+	elements.forEach((el, idx) => {
+		const entry: DOMStateEntry = {
+			idx,
+			tag: el.tagName.toLowerCase()
+		};
+		const id = el.getAttribute('id');
+		const name = el.getAttribute('name');
+		if (id) entry.id = id;
+		else if (name) entry.name = name;
+		saveElementEntry(el, entry);
+		snapshot.items.push(entry);
+	});
+
+	const active = document.activeElement;
+	if (!active || !root.contains(active)) return snapshot;
+	const id = active.getAttribute('id');
+	const name = active.getAttribute('name');
+	if (id) snapshot.activeKey = `id:${id}`;
+	else if (name) snapshot.activeKey = `name:${name}`;
+	else
+		snapshot.activeKey = `idx:${Array.prototype.indexOf.call(elements, active)}`;
+
+	return snapshot;
+};
+
+const collectInputState = (
+	element: HTMLInputElement,
+	name: string,
+	target: Record<string, boolean | string>
+) => {
+	if (element.type === 'radio') {
+		if (element.checked) target[`__radio__${name}`] = element.value;
+
+		return;
+	}
+	if (element.type === 'checkbox') {
+		target[name] = element.checked;
+
+		return;
+	}
+	target[name] = element.value;
+};
+
+export const saveFormState = () => {
+	const formState: Record<string, Record<string, boolean | string>> = {};
+	const forms = document.querySelectorAll('form');
+	forms.forEach((form, formIndex) => {
+		const formId = form.id || `form-${formIndex}`;
+		const formData: Record<string, boolean | string> = {};
+		formState[formId] = formData;
+		const inputs = form.querySelectorAll('input, textarea, select');
+		inputs.forEach((input) => {
+			if (!(input instanceof HTMLInputElement)) return;
+			const name =
+				input.name || input.id || `input-${formIndex}-${inputs.length}`;
+			collectInputState(input, name, formData);
+		});
+	});
+
+	const standaloneInputs = document.querySelectorAll(
+		'input:not(form input), textarea:not(form textarea), select:not(form select)'
+	);
+	if (standaloneInputs.length <= 0) return formState;
+	const standaloneData: Record<string, boolean | string> = {};
+	formState['__standalone__'] = standaloneData;
+	standaloneInputs.forEach((input) => {
+		if (!(input instanceof HTMLInputElement)) return;
+		const name =
+			input.name || input.id || `standalone-${standaloneInputs.length}`;
+		collectInputState(input, name, standaloneData);
+	});
+
+	return formState;
+};
+
+export const saveScrollState = () => {
+	const scrollX = window.scrollX || window.pageXOffset;
+	const scrollY = window.scrollY || window.pageYOffset;
+
+	return {
+		window: { x: scrollX, y: scrollY }
+	};
+};

package/dist/dev/client/domTracker.ts

@@ -0,0 +1,61 @@
+import type {} from '../../types/globals';
+/* Snapshot/restore for JS-modified DOM state across HMR updates.
+ * Before patching, captures text and dynamic children of elements with IDs.
+ * After patching, restores values that were changed by user scripts. */
+
+type DOMSnapshot = {
+	children: Map<string, string>;
+	text: Map<string, string>;
+};
+
+export const restoreDOMChanges = (
+	root: HTMLElement,
+	snapshot: DOMSnapshot,
+	newHTML: string
+) => {
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = newHTML;
+
+	/* Restore JS-modified text on leaf elements */
+	snapshot.text.forEach((liveText, elId) => {
+		const newEl = tempDiv.querySelector(`#${CSS.escape(elId)}`);
+		const newText = newEl ? newEl.textContent || '' : '';
+		if (liveText === newText) return;
+
+		const liveEl = root.querySelector(`#${CSS.escape(elId)}`);
+		if (liveEl) {
+			liveEl.textContent = liveText;
+		}
+	});
+
+	/* Restore JS-added children (e.g. dynamically appended list items) */
+	snapshot.children.forEach((liveHTML, elId) => {
+		const newEl = tempDiv.querySelector(`#${CSS.escape(elId)}`);
+		const newInner = newEl ? newEl.innerHTML : '';
+		if (liveHTML === newInner || liveHTML.length <= newInner.length) return;
+
+		const liveEl = root.querySelector(`#${CSS.escape(elId)}`);
+		if (liveEl) {
+			liveEl.innerHTML = liveHTML;
+		}
+	});
+};
+export const snapshotDOMChanges = (root: HTMLElement): DOMSnapshot => {
+	const text = new Map<string, string>();
+	const children = new Map<string, string>();
+
+	root.querySelectorAll('[id]').forEach((elem) => {
+		const { childNodes } = elem;
+		const isTextLeaf = Array.from(childNodes).every(
+			(child) => child.nodeType === Node.TEXT_NODE
+		);
+
+		if (isTextLeaf && childNodes.length > 0) {
+			text.set(elem.id, elem.textContent || '');
+		} else if (elem.children.length > 0) {
+			children.set(elem.id, elem.innerHTML);
+		}
+	});
+
+	return { children, text };
+};