lilact 0.26.14 → 0.26.16

package/src/errors.jsx

@@ -27,273 +27,561 @@
 	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
-import Lilact from './lilact.jsx';
+/*
+Lilact
+Copyright (C) 2024-2026 Arash Kazemi
+BSD-2-Clause
+*/
 
-import { required_scripts } from './run.jsx'
-import { pauseTimers } from './timers.jsx'
+import Lilact from "./lilact.jsx";
+import { required_scripts } from "./run.jsx";
 import { css } from "@emotion/css";
 
-// Lilact API
+function numberOrNull(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : null;
+}
+
+function firstNumber(...values) {
+  for (const value of values) {
+    const n = numberOrNull(value);
+    if (n !== null) return n;
+  }
+  return null;
+}
+
+function asError(value) {
+  if (value instanceof Error) return value;
+
+  if (value && typeof value === "object") {
+    if (value.error instanceof Error) return value.error;
+
+    const error = new Error(
+      value.message == null ? String(value) : String(value.message)
+    );
+
+    if (value.name) error.name = value.name;
+    if (value.stack) error.stack = value.stack;
+
+    for (const key of Object.keys(value)) {
+      if (!(key in error)) error[key] = value[key];
+    }
 
-function getErrorLocation(err) // works for both error and error-event, and also in node env
-{
-	if(err.lineno!==undefined || err.line!==undefined || err.lineNumber!==undefined) {
-		const l = err.lineNumber || err.lineno || err.line;
-		const c = err.columnNumber || err.colno || err.column;
+    return error;
+  }
 
-		return {line: l, col: c};
-	}
+  return new Error(String(value));
+}
 
-	let match = /:(\d+):(\d+)[\n].*/m.exec(err.stack);
-	if(match===null) {
-		match = /:(\d+):(\d+)\)\s+at .*/m.exec(err.stack);
-	}
+function isParserError(error) {
+  return  error?.name === "JSXParserError";
+}
 
-	if(match) {
-		return {line: parseInt(match[1]), col: parseInt(match[2])}
-	}
+/*
+Returns zero-based line and column numbers.
 
-	return null;
+Parser errors produced by jsx.js already use zero-based positions.
+Browser Error objects and ErrorEvents normally use one-based positions.
+*/
+function getErrorLocation(error, { zeroBased = false } = {}) {
+  const line = firstNumber(
+    error?.lineNumber,
+    error?.lineno,
+    error?.line
+  );
+
+  const column = firstNumber(
+    error?.columnNumber,
+    error?.colno,
+    error?.column
+  );
+
+  if (line !== null || column !== null) {
+    return {
+      line:
+        line === null
+          ? null
+          : zeroBased
+            ? line
+            : Math.max(0, line - 1),
+
+      col:
+        column === null
+          ? null
+          : zeroBased
+            ? column
+            : Math.max(0, column - 1),
+    };
+  }
+
+  return null;
 }
 
-// Extract { url, line, col } from an Error.stack.
-// Works with common formats like:
-// Chrome/Edge:   at fn (eval:xxx:LINE:COL)
-// Firefox:       fn@eval:xxx:LINE:COL
-// Safari:        @eval:xxx:LINE:COL   (sometimes)
-/** @ignore */
-function parseEvalLocationFromStack(stack, urlPrefix = "eval:/")
-{
-  const raw = typeof stack === "string" ? stack : String(stack || "");
-  const lines = raw.split(/\r?\n/);
-
-  // Match "... (eval:path:LINE:COL)" or "... eval:path:LINE:COL"
-  // Group 1: url, group 2: line, group 3: col (col optional in some formats)
-  const re = new RegExp(`\\(?((?:${escapeRegExp(urlPrefix)})[^\\s):]+):(\\d+):(?:(\\d+))?\\)?$`);
-
-  for (const l of lines) {
-    const line = l.trim();
-    if (!line.includes(urlPrefix)) continue;
-
-    const m = line.match(re);
-    if (!m) continue;
-
-    const url = m[1];
-    const parsedLine = Number(m[2]);
-    const parsedCol = m[3] == null ? null : Number(m[3]);
-
-    if (Number.isFinite(parsedLine) && (parsedCol === null || Number.isFinite(parsedCol))) {
-      return { url, line: parsedLine, col: parsedCol, matched: line };
+function sourceUrlFromStack(stack) {
+  const text = typeof stack === "string" ? stack : "";
+
+  /*
+   * The final two colon-separated numeric values are the line and column.
+   * The path is intentionally greedy so paths containing ':' still work.
+   *
+   * Examples:
+   *
+   *   at fn (eval:/components/App.jsx:12:8)
+   *   fn@eval:/components/App.jsx:12:8
+   *   eval:/components/App.jsx:12:8
+   */
+  const expression = /(?:^|[\s(@])((?:eval:\/)[\s\S]*):(\d+):(\d+)(?:\)?$)/;
+
+  for (const line of text.split(/\r?\n/)) {
+    const match = line.trim().match(expression);
+    if (!match) continue;
+
+    return {
+      url: match[1],
+      line: Number(match[2]),
+      col: Number(match[3]),
+    };
+  }
+
+  return null;
+}
+
+function sourcePathFromEvalUrl(url) {
+  if (typeof url !== "string") return null;
+
+  if (url.startsWith("eval:/")) {
+    return url.slice("eval:/".length);
+  }
+
+  if (url.startsWith("eval:")) {
+    return url.slice("eval:".length).replace(/^\/+/, "");
+  }
+
+  return null;
+}
+
+/*
+Mappings generated by jsx.js have this shape:
+
+[
+  generatedLine,
+  generatedColumn,
+  sourceLine,
+  sourceColumn,
+  node
+]
+
+All four coordinates are zero-based.
+
+The correct mapping is the closest mapping at or before the generated
+location. The old implementation searched in the opposite direction and
+used the final mapping for errors occurring before the first mapping.
+*/
+export function mapLocation(mappings, generatedLine, generatedColumn) {
+  if (!Array.isArray(mappings) || mappings.length === 0) {
+    return {
+      line: generatedLine,
+      col: generatedColumn,
+    };
+  }
+
+  const line = Number(generatedLine);
+  const col = Number(generatedColumn);
+
+  if (!Number.isFinite(line) || !Number.isFinite(col)) {
+    return {
+      line: null,
+      col: null,
+    };
+  }
+
+  const validMappings = mappings
+    .filter(
+      (mapping) =>
+        Array.isArray(mapping) &&
+        mapping.length >= 4 &&
+        Number.isFinite(Number(mapping[0])) &&
+        Number.isFinite(Number(mapping[1])) &&
+        Number.isFinite(Number(mapping[2])) &&
+        Number.isFinite(Number(mapping[3]))
+    )
+    .slice()
+    .sort((a, b) => {
+      const lineDifference = Number(a[0]) - Number(b[0]);
+
+      if (lineDifference !== 0) {
+        return lineDifference;
+      }
+
+      return Number(a[1]) - Number(b[1]);
+    });
+
+  if (validMappings.length === 0) {
+    return {
+      line,
+      col,
+    };
+  }
+
+  /*
+   * Find the last mapping whose generated position is before or equal
+   * to the runtime position.
+   */
+  let mapping = validMappings[0];
+
+  for (const candidate of validMappings) {
+    const generatedMappingLine = Number(candidate[0]);
+    const generatedMappingColumn = Number(candidate[1]);
+
+    if (
+      generatedMappingLine < line ||
+      (
+        generatedMappingLine === line &&
+        generatedMappingColumn <= col
+      )
+    ) {
+      mapping = candidate;
+      continue;
     }
+
+    break;
   }
 
-  return { url: null, line: null, col: null, matched: null, stackPreview: lines.slice(0, 6).join("\n") };
+  const mappingGeneratedLine = Number(mapping[0]);
+  const mappingGeneratedColumn = Number(mapping[1]);
+  const mappingSourceLine = Number(mapping[2]);
+  const mappingSourceColumn = Number(mapping[3]);
+
+  /*
+   * A mapping points to the beginning of a generated region. Preserve
+   * the relative line offset inside that region.
+   *
+   * This is the important part. Returning mappingSourceLine directly
+   * causes errors inside a generated multi-line block to point to the
+   * first line of the block.
+   */
+  const sourceLine =
+    mappingSourceLine + (line - mappingGeneratedLine);
+
+  /*
+   * Columns are only safely relative when the generated error is on the
+   * same generated line as the mapping. On later lines, use the source
+   * anchor column instead of carrying the generated column across lines.
+   */
+  const sourceColumn =
+    line === mappingGeneratedLine
+      ? Math.max(
+          0,
+          mappingSourceColumn +
+            (col - mappingGeneratedColumn)
+        )
+      : mappingSourceColumn;
+
+  return {
+    line: sourceLine,
+    col: sourceColumn,
+  };
 }
 
-function escapeRegExp(s)
-{
-  return String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function getBlockTrace(error) {
+  const trace = error?.lilact_trace;
+
+  if (Array.isArray(trace)) {
+    return trace[0];
+  }
+
+  return trace;
 }
 
-function mapLocation(mps, r,c)
-{
-	let map = null;
-
-	for(const i in mps) {
-		if(mps[i][0]<r) continue;
-		if(mps[i][0]>r || (mps[i][0]===r && mps[i][1]>=c)) {
-			map = mps[i-1];
-			break;
-		}
-	}
-	if(!map) map = mps[mps.length-1];
-	return {line: r-map[0]+map[2], col: ((r-map[0]===0)?map[3]:0) };
+function getBlockInfo(error) {
+  const trace = getBlockTrace(error);
+
+  if (trace === undefined || trace === null) {
+    return null;
+  }
+
+  return Lilact.blocks_info?.labels?.[trace] ?? null;
 }
 
+function applyBlockFallback(error, result, currentPath) {
+  const block = getBlockInfo(error);
+  if (!block) return result;
 
-/** @ignore */
-export function scanBlockLabels(code, path)
-{
-	const ls = Array.from( code.matchAll(/LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//mg) );
+  if (block.path) {
+    result.fileName = block.path;
+  } else if (!result.fileName) {
+    result.fileName = currentPath;
+  }
+
+  /*
+   * scanBlockLabels() stores the original source position of the block.
+   * This is more reliable than using the location of the generated catch
+   * wrapper.
+   */
+  if (
+    Number.isFinite(block.line) &&
+    Number.isFinite(block.col)
+  ) {
+    result.lineNumber = block.line;
+    result.columnNumber = block.col;
+  }
+
+  if (block.desc) {
+    result.label = block.desc;
+  }
 
-	// todo: this is not memory efficient, the structure should be upside-down
-	ls.forEach(
-		(x) => {
-			Lilact.blocks_info.labels[x[1]] = {
-				path,
-				desc: x[4]
-			}
-		} );
+  return result;
 }
 
+function copyErrorMetadata(source, target) {
+  if (!source || typeof source !== "object") return;
+
+  for (const key of [
+    "fileName",
+    "lineNumber",
+    "columnNumber",
+    "lineno",
+    "colno",
+    "line",
+    "column",
+    "componentStackLog",
+    "lilact_trace",
+  ]) {
+    if (source[key] !== undefined && target[key] === undefined) {
+      target[key] = source[key];
+    }
+  }
+}
 
 /**
- * Debug tool to get the Lilact traced location of an error. It can also produce some block based stack trace 
- * if `Lilact.transpilerConfig.enableLabelStack` is set to `true` before loading the script. This is `false`
- * by default for efficiency.
- * 
- * @param error - The error object 
- *
- * @returns A new object that includes `path`, `row`, `col`, `msg`, `name`, and optional `stack`. 
- * The exception itself is stored as `err`.
+ * Converts parser errors, runtime errors, ErrorEvents, and rejected
+ * promises into one consistent zero-based representation.
  */
-export function traceError(error, run_path)
-{
-	if(error?.is_traced) {
-		return error;
-	}
-
-	const loc = parseEvalLocationFromStack(error.stack);
-
-	const obj = {
-		fileName: loc.url?.slice(6) || run_path || error.fileName,
-		
-		lineNumber: loc.line,
-		columnNumber: loc.col,
-
-		message: error.message,
-		name: error.name,
-
-		stack: error.stack,
-		_error: error,
-
-		is_traced: true
-	};		
-
-	if( error.name!=='JSXParseError' ) {
-
-		let mps;
-
-		if(loc.url) {
-			const rm = required_scripts[obj.fileName];
-			mps = rm.mappings;
-			
-			const mloc = mapLocation(mps, obj.lineNumber-1, obj.columnNumber-1);
-
-			obj.lineNumber = mloc.line;
-			obj.columnNumber = mloc.col;
-		}
-		else {
-
-			let loc = getErrorLocation(error);
-
-			if( error.lilact_trace!==undefined) {
-				let mps;
-				let blk;
-
-				if(typeof(error.lilact_trace)==='object') {
-					blk = Lilact.blocks_info.labels[error.lilact_trace[0]];
-				}
-				else {
-					blk = Lilact.blocks_info.labels[error.lilact_trace];
-				}
-
-				if(blk) {
-					obj.fileName = blk.path;
-					obj.label = blk.label;
-
-					mps = required_scripts[blk.path].mappings;
-
-					loc = mapLocation(mps, loc.line-1, loc.col-1);
-				}
-			}
-
-			obj.lineNumber = loc.line;
-			obj.columnNumber = loc.col;
-		}
-		
-	}
-	else {
-		const loc = getErrorLocation(error);
-		if(error.fileName) obj.fileName = error.fileName;
-		else if(run_path) obj.fileName = run_path;
-		obj.lineNumber = loc.line;
-		obj.columnNumber = loc.col;
-	}
-
-	Lilact.error = obj;
-	return obj;
-	
+export function traceError(value, runPath) {
+  if (value?.isTraced) return value;
+
+  const original =
+    value?.error instanceof Error ? value.error : asError(value);
+
+  const parserError = isParserError(original);
+
+  const stackLocation = parserError
+    ? null
+    : sourceUrlFromStack(original.stack);
+
+  const eventLocation = parserError
+    ? getErrorLocation(original, { zeroBased: true })
+    : getErrorLocation(original);
+
+  const result = {
+    fileName:
+      sourcePathFromEvalUrl(stackLocation?.url) ||
+      original.fileName ||
+      runPath ||
+      null,
+
+    lineNumber:
+      stackLocation?.line != null
+        ? Math.max(0, stackLocation.line - 1)
+        : eventLocation?.line ?? null,
+
+    columnNumber:
+      stackLocation?.col != null
+        ? Math.max(0, stackLocation.col - 1)
+        : eventLocation?.col ?? null,
+
+    message:
+      original.message == null
+        ? String(original)
+        : String(original.message),
+
+    name: original.name || "Error",
+    stack: original.stack || null,
+    _error: original,
+    isTraced: true,
+  };
+
+  copyErrorMetadata(value, result);
+  copyErrorMetadata(original, result);
+
+  /*
+   * Parser errors already point into the original JSX source. Do not map
+   * them again.
+   */
+  if (!parserError && stackLocation?.url) {
+    const module = required_scripts[result.fileName];
+
+    if (module?.mappings) {
+      const mapped = mapLocation(
+        module.mappings,
+        result.lineNumber,
+        result.columnNumber
+      );
+
+      result.lineNumber = mapped.line;
+      result.columnNumber = mapped.col;
+    }
+  }
+
+  /*
+   * When the browser does not preserve the eval sourceURL, the injected
+   * Lilact block label is the reliable fallback.
+   */
+  if (!parserError && !stackLocation?.url) {
+    applyBlockFallback(original, result, runPath);
+  }
+
+  Lilact.error = result;
+  return result;
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function sourceExcerpt(module, zeroBasedLine) {
+  if (!module || !Number.isFinite(zeroBasedLine)) {
+    return null;
+  }
+
+  const lines = String(module.code ?? "").split(/\r?\n/);
+  const before = lines[zeroBasedLine - 1] ?? "";
+  const current = lines[zeroBasedLine] ?? "";
+  const after = lines[zeroBasedLine + 1] ?? "";
+
+  return { before, current, after };
 }
 
 /**
- * The global Lilact error handler that shows a modal containing information 
- * when an exception is not handled. 
- * 
- * It is  by default attached to the `window.onerror` when using the development 
- * bundle. It is not attached in the production mode, but it is available in the 
- * bundle and can be attached.
- *
- * 
- * `
- * window.addEventListener('error', (e) => {
- *	Lilact.globalErrorHandler(e);
- * });
- * `
- * @param error - The error object 
- * 
+ * Displays an unhandled error.
  */
-export function globalErrorHandler(error)
-{
-	if(error.error) error = error.error;
-
-	error = traceError(error);
-
-	const cls = css(`
-			background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
-			backdrop-filter: blur(10px);
-			border: 1px solid rgba(255,255,255,.25);
-			border-radius: 5px;
-			box-shadow: 0 10px 30px rgba(0,0,0,.35);
-			overflow:hidden;
-			min-width: 400px;
-			width: 66%;
-			red {
-				color:#d00;
-			}
-			code {
-				border: 1px solid #0003;
-				overflow: auto;
-				padding: 10px;
-				display: block;
-			}
-		`);
-
-	const el = document.createElement('dialog');
-
-	el.className=cls;
-	//<b>⚠</b> 
-	el.innerHTML = 
-		`<h3 style=""><red>Error!</red></h3>
-		<b>${error.fileName?'At '+error.fileName:''}
-		${Number.isFinite(error.lineNumber)?": Line "+(error.lineNumber+1):""}</b><br><br>
-		<b>${error.name}</b>:&nbsp;<span>${error.message}</span><br><br>
-		${required_scripts[error.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
-		${error._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+error._error.componentStackLog+'</pre></code>':''}
-		`;
-
-
-	document.body.appendChild(el);
-
-	const pres = el.querySelectorAll('pre');
-
-	if(required_scripts[error.fileName]) {
-		const lines = required_scripts[error.fileName].code.split("\n");
-
-		if(lines?.[error.lineNumber-1])
-			pres[0].innerText = lines[error.lineNumber-1];
-
-		if(lines?.[error.lineNumber]) el.querySelector('pre red').innerText = lines[error.lineNumber];
-
-		if(lines?.[error.lineNumber+1])
-			pres[2].innerText = lines[error.lineNumber+1];
-	}
-
-	el.showModal();
+export function globalErrorHandler(eventOrError) {
+  const raw =
+    eventOrError?.error instanceof Error
+      ? eventOrError.error
+      : eventOrError?.reason !== undefined
+        ? eventOrError.reason
+        : eventOrError;
+
+  const runPath =
+    eventOrError?.fileName ||
+    null;
+
+  const traced = traceError(raw, runPath);
+  const module = required_scripts[traced.fileName];
+  const excerpt = sourceExcerpt(module, traced.lineNumber);
+
+  const className = css(`
+    background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,.25);
+    border-radius: 5px;
+    box-shadow: 0 10px 30px rgba(0,0,0,.35);
+    overflow: hidden;
+    min-width: 400px;
+    width: 66%;
+
+    red {
+      color: #d00;
+    }
+
+    code {
+      border: 1px solid #0003;
+      overflow: auto;
+      padding: 10px;
+      display: block;
+    }
+  `);
+
+  const dialog = document.createElement("dialog");
+  dialog.className = className;
+
+  const location =
+    traced.fileName
+      ? `At ${escapeHtml(traced.fileName)}`
+      : "";
+
+  const line =
+    Number.isFinite(traced.lineNumber)
+      ? `: Line ${traced.lineNumber + 1}`
+      : "";
+
+  const componentStack =
+    traced._error?.componentStackLog ||
+    traced._error?.componentStack ||
+    "";
+
+  dialog.innerHTML = `
+    <h3><red>Error!</red></h3>
+    <b>${location}${line}</b><br><br>
+    <b>${escapeHtml(traced.name)}</b>:
+    <span>${escapeHtml(traced.message)}</span>
+    <br><br>
+
+    ${
+      excerpt
+        ? "<code><pre></pre><red><pre></pre></red><pre></pre></code>"
+        : ""
+    }
+
+    ${
+      componentStack
+        ? `
+          <br>
+          Component Stack:
+          <br>
+          <code><pre>${escapeHtml(componentStack)}</pre></code>
+        `
+        : ""
+    }
+  `;
+
+  if (excerpt) {
+    const pre = dialog.querySelectorAll("pre");
+    pre[0].innerText = excerpt.before;
+    pre[1].innerText = excerpt.current;
+    pre[2].innerText = excerpt.after;
+  }
+
+  document.body.appendChild(dialog);
+
+  if (typeof dialog.showModal === "function") {
+    dialog.showModal();
+  } else {
+    dialog.setAttribute("open", "");
+  }
+
+  return traced;
+}
+
+/**
+ * Registers the source location of an injected Lilact block.
+ */
+export function scanBlockLabels(code, path) {
+  const labels = String(code).matchAll(
+    /LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//gm
+  );
+
+  for (const match of labels) {
+    const id = match[1];
+
+    Lilact.blocks_info.labels[id] = {
+      path,
+      line: Number(match[2]),
+      col: Number(match[3]),
+      desc: match[4],
+    };
+  }
 }
 
-/** @ignore */
-export const blocks_info = { counter: 0, labels: {} };
+export const blocks_info = {
+  counter: 0,
+  labels: {},
+};
 
-/** @ignore */
-export let error = null; // this is only to ease debuggin,
+export let error = null;