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

package/dist/dev/client/errorOverlay.ts

@@ -0,0 +1,184 @@
+import type {} from '../../types/globals';
+/* 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;
+};

package/dist/dev/client/frameworkDetect.ts

@@ -0,0 +1,63 @@
+import type {} from '../../types/globals';
+/* Framework detection and manifest lookup utilities */
+
+export const detectCurrentFramework = () => {
+	if (window.__HMR_FRAMEWORK__) return window.__HMR_FRAMEWORK__;
+	if (window.__REACT_ROOT__) return 'react';
+	const path = window.location.pathname;
+	if (path === '/vue' || path.startsWith('/vue/')) return 'vue';
+	if (path === '/svelte' || path.startsWith('/svelte/')) return 'svelte';
+	if (path === '/angular' || path.startsWith('/angular/')) return 'angular';
+	if (path === '/htmx' || path.startsWith('/htmx/')) return 'htmx';
+	if (path === '/html' || path.startsWith('/html/')) return 'html';
+	if (path === '/react' || path.startsWith('/react/')) return 'react';
+
+	return null;
+};
+export const findIndexPath = (
+	manifest: Record<string, string> | undefined,
+	sourceFile: string | undefined,
+	framework: string
+) => {
+	if (!manifest) return null;
+
+	if (sourceFile) {
+		const componentName = getComponentNameFromPath(sourceFile);
+		const indexKey = componentName ? `${componentName}Index` : null;
+		if (indexKey && manifest[indexKey]) {
+			return manifest[indexKey];
+		}
+	}
+
+	const frameworkPatterns: Record<string, RegExp> = {
+		angular: /angular/i,
+		react: /react/i,
+		svelte: /svelte/i,
+		vue: /vue/i
+	};
+	const pattern = frameworkPatterns[framework];
+
+	for (const key in manifest) {
+		const value = manifest[key];
+		if (
+			key.endsWith('Index') &&
+			value &&
+			(!pattern || pattern.test(key) || value.includes(`/${framework}/`))
+		) {
+			return value;
+		}
+	}
+
+	return null;
+};
+export const getComponentNameFromPath = (filePath: string) => {
+	if (!filePath) return null;
+	const parts = filePath.replace(/\\/g, '/').split('/');
+	const fileName = parts[parts.length - 1] || '';
+	const baseName = fileName.replace(/\.(tsx?|jsx?|vue|svelte|html)$/, '');
+
+	return baseName
+		.split(/[-_]/)
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join('');
+};