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

package/dist/dev/client/domState.ts

@@ -1,420 +0,0 @@
-/* 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

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

package/dist/dev/client/errorOverlay.ts

@@ -1,183 +0,0 @@
-/* AbsoluteJS Error Overlay - branded, per-framework, modern styling */
-
-import type { ErrorOverlayOptions } from '../../../types/client';
-import { OVERLAY_FADE_DURATION_MS } from './constants';
-
-let errorOverlayElement: HTMLDivElement | null = null;
-let currentOverlayKind: 'compilation' | 'runtime' | null = null;
-
-const frameworkLabels: Record<string, string> = {
-	angular: 'Angular',
-	assets: 'Assets',
-	html: 'HTML',
-	htmx: 'HTMX',
-	react: 'React',
-	svelte: 'Svelte',
-	unknown: 'Unknown',
-	vue: 'Vue'
-};
-
-const frameworkColors: Record<string, string> = {
-	angular: '#dd0031',
-	assets: '#563d7c',
-	html: '#e34c26',
-	htmx: '#1a365d',
-	react: '#61dafb',
-	svelte: '#ff3e00',
-	unknown: '#94a3b8',
-	vue: '#42b883'
-};
-
-const removeOverlayElement = () => {
-	if (errorOverlayElement && errorOverlayElement.parentNode) {
-		errorOverlayElement.parentNode.removeChild(errorOverlayElement);
-	}
-	errorOverlayElement = null;
-	currentOverlayKind = null;
-};
-
-export const hideErrorOverlay = () => {
-	const elm = errorOverlayElement;
-	if (!elm || !elm.parentNode) {
-		removeOverlayElement();
-
-		return;
-	}
-	elm.style.transition = 'opacity 150ms ease-out';
-	elm.style.opacity = '0';
-	errorOverlayElement = null;
-	currentOverlayKind = null;
-	setTimeout(() => {
-		if (elm.parentNode) elm.parentNode.removeChild(elm);
-	}, OVERLAY_FADE_DURATION_MS);
-};
-
-export const isRuntimeErrorOverlay = () => currentOverlayKind === 'runtime';
-
-const buildLocationSection = (
-	file: string | undefined,
-	line: number | undefined,
-	column: number | undefined,
-	lineText: string | undefined
-) => {
-	if (!file && line === undefined && column === undefined && !lineText) {
-		return null;
-	}
-
-	const locSection = document.createElement('div');
-	locSection.style.cssText = 'margin-bottom:20px;';
-
-	const locLabel = document.createElement('div');
-	locLabel.style.cssText =
-		'font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px;';
-	locLabel.textContent = 'Where';
-	locSection.appendChild(locLabel);
-
-	const locParts: string[] = [];
-	if (file) locParts.push(file);
-	if (line !== undefined) locParts.push(String(line));
-	if (column !== undefined) locParts.push(String(column));
-	const loc = locParts.join(':') || 'Unknown location';
-
-	const locEl = document.createElement('div');
-	locEl.style.cssText =
-		'padding:12px 20px;background:rgba(71,85,105,0.3);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#cbd5e1;font-size:13px;';
-	locEl.textContent = loc;
-	locSection.appendChild(locEl);
-
-	if (lineText) {
-		const codeBlock = document.createElement('pre');
-		codeBlock.style.cssText =
-			'margin:8px 0 0;padding:14px 20px;background:rgba(15,23,42,0.8);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#94a3b8;font-size:13px;overflow-x:auto;white-space:pre;';
-		codeBlock.textContent = lineText;
-		locSection.appendChild(codeBlock);
-	}
-
-	return locSection;
-};
-
-export const showErrorOverlay = (opts: ErrorOverlayOptions) => {
-	const message = opts.message || 'Build failed';
-	const { file } = opts;
-	const { line } = opts;
-	const { column } = opts;
-	const { lineText } = opts;
-	const framework = (opts.framework || 'unknown').toLowerCase();
-	const frameworkLabel = frameworkLabels[framework] || framework;
-	const accent = frameworkColors[framework] || '#94a3b8';
-
-	removeOverlayElement();
-	currentOverlayKind = opts.kind || 'compilation';
-
-	const overlay = document.createElement('div');
-	overlay.id = 'absolutejs-error-overlay';
-	overlay.setAttribute('data-hmr-overlay', 'true');
-	overlay.style.cssText =
-		'position:fixed;inset:0;z-index:2147483647;background:linear-gradient(135deg,rgba(15,23,42,0.98) 0%,rgba(30,41,59,0.98) 100%);backdrop-filter:blur(12px);color:#e2e8f0;font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.6;overflow:auto;padding:32px;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;';
-
-	const card = document.createElement('div');
-	card.style.cssText =
-		'max-width:720px;width:100%;background:rgba(30,41,59,0.6);border:1px solid rgba(71,85,105,0.5);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);overflow:hidden;';
-
-	const header = document.createElement('div');
-	header.style.cssText =
-		'display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:rgba(15,23,42,0.5);border-bottom:1px solid rgba(71,85,105,0.4);';
-	header.innerHTML = `<div style="display:flex;align-items:center;gap:12px;"><span style="font-weight:700;font-size:20px;color:#fff;letter-spacing:-0.02em;">AbsoluteJS</span><span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;background:${
-		accent
-	};color:#fff;opacity:0.95;box-shadow:0 2px 4px rgba(0,0,0,0.2);">${
-		frameworkLabel
-	}</span></div><span style="color:#94a3b8;font-size:13px;font-weight:500;">${
-		opts.kind === 'runtime' ? 'Runtime Error' : 'Compilation Error'
-	}</span>`;
-	card.appendChild(header);
-
-	const content = document.createElement('div');
-	content.style.cssText = 'padding:24px;';
-
-	const errorSection = document.createElement('div');
-	errorSection.style.cssText = 'margin-bottom:20px;';
-
-	const errorLabel = document.createElement('div');
-	errorLabel.style.cssText =
-		'font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px;';
-	errorLabel.textContent = 'What went wrong';
-	errorSection.appendChild(errorLabel);
-
-	const msgEl = document.createElement('pre');
-	msgEl.style.cssText =
-		'margin:0;padding:16px 20px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#fca5a5;font-size:13px;line-height:1.5;';
-	msgEl.textContent = message;
-	errorSection.appendChild(msgEl);
-	content.appendChild(errorSection);
-
-	const locSection = buildLocationSection(file, line, column, lineText);
-	if (locSection) {
-		content.appendChild(locSection);
-	}
-
-	const footer = document.createElement('div');
-	footer.style.cssText =
-		'display:flex;justify-content:flex-end;padding-top:8px;';
-
-	const dismiss = document.createElement('button');
-	dismiss.textContent = 'Dismiss';
-	dismiss.style.cssText = `padding:10px 20px;background:${
-		accent
-	};color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:opacity 0.15s,transform 0.15s;`;
-	dismiss.onmouseover = function () {
-		dismiss.style.opacity = '0.9';
-		dismiss.style.transform = 'translateY(-1px)';
-	};
-	dismiss.onmouseout = function () {
-		dismiss.style.opacity = '1';
-		dismiss.style.transform = 'translateY(0)';
-	};
-	dismiss.onclick = hideErrorOverlay;
-	footer.appendChild(dismiss);
-	content.appendChild(footer);
-	card.appendChild(content);
-	overlay.appendChild(card);
-	if (!document.body) return;
-	document.body.appendChild(overlay);
-	errorOverlayElement = overlay;
-};