lilact 0.26.15 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.26.15",
+  "version": "0.27.0",
   "description": "A Little React/JSX Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",

package/src/components.jsx

@@ -371,7 +371,7 @@ if(DEBUG) {
 			if(this.outlet!==undefined) {
 				for(let c of this.outlet) {
 					if(c.cleanup) {
-						c.cleanup();
+						promises.push(c.cleanup());
 					}
 				}
 			}
@@ -379,7 +379,7 @@ if(DEBUG) {
 			if(this.props?.children!==undefined) {
 				for(let c of this.props.children) {
 					if(c.cleanup) {
-						c.cleanup();
+						promises.push(c.cleanup());
 					}
 				}
 			}
@@ -387,10 +387,12 @@ if(DEBUG) {
 			if(this.hooks!==undefined) {
 				for(let h of this.hooks) {
 					if(h.cleanup) {
-						h.cleanup();
+						promises.push(h.cleanup());
 					}
 				}
 			}
+
+			await Promise.all(promises);
 		}
 
 		catch(e) {
@@ -400,6 +402,9 @@ if(DEBUG) {
 
 	updateElementProps(patch, force=false) 
 	{
+		// note: string.slice(0,undefined) returns the complete string. that's why
+		// the slices are correct even if maxLength is not set.
+
 		if(this.entity==="input") {
 			if(!patch?.type) patch.type = 'text';
 			if(patch.type!==this.element.type) {
@@ -432,7 +437,7 @@ if(DEBUG) {
 					this.event_detachers[al]();
 				}
 				else {
-					this.element.setAttribute(a, undefined);
+					this.element.removeAttribute(a);
 				}
 			}
 		}
@@ -485,6 +490,7 @@ if(DEBUG) {
 				}
 				else if(boolean_html_attributes_set.has(a)) { // not lower cased(al), as it is set as a js property
 					this.element[a] = toBool(patch[a]);
+					if(!this.element[a]) this.element.removeAttribute(a);
 				}
 				else if(a==='autoFocus') { // not lower cased(al), as it is set as a js property
 					this.element['autofocus'] = toBool(patch[a]);

package/src/errors.jsx

@@ -27,277 +27,376 @@
 	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
-import Lilact from './lilact.jsx';
+/*
+Lilact
+Copyright (C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>
+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 number(value) {
+  const result = Number(value);
+  return Number.isFinite(result) ? result : null;
+}
+
+function asError(value) {
+  if (value instanceof Error) return value;
+  if (value?.error instanceof Error) return value.error;
+
+  const error = new Error(
+    value?.message == null
+      ? String(value)
+      : String(value.message)
+  );
 
-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;
+  if (value && typeof value === "object") {
+    if (value.name) error.name = value.name;
+    if (value.stack) error.stack = value.stack;
 
-		return {line: l, col: c};
-	}
+    for (const key of Object.keys(value)) {
+      if (!(key in error)) error[key] = value[key];
+    }
+  }
 
-	let match = /:(\d+):(\d+)[\n].*/m.exec(err.stack);
-	if(match===null) {
-		match = /:(\d+):(\d+)\)\s+at .*/m.exec(err.stack);
-	}
+  return error;
+}
+
+function isParserError(error) {
+  return error?.name === "JSXParserError";
+}
+
+function stackLocation(stack) {
+  if (typeof stack !== "string") return null;
+
+  for (const line of stack.split(/\r?\n/)) {
+    const match = line.match(/(eval:\/.*):(\d+):(\d+)/);
+
+    if (!match) continue;
+
+    return {
+      path: match[1].replace(/^eval:\/+/, ""),
+      line: Number(match[2]) - 1,
+      column: Number(match[3]) - 1,
+    };
+  }
+
+  return null;
+}
+
+function browserLocation(error) {
+  const line = number(
+    error?.lineNumber ??
+    error?.lineno ??
+    error?.line
+  );
+
+  const column = number(
+    error?.columnNumber ??
+    error?.colno ??
+    error?.column
+  );
+
+  return {
+    line: line == null ? null : Math.max(0, line - 1),
+    column: column == null ? null : Math.max(0, column - 1),
+  };
+}
 
-	if(match) {
-		return {line: parseInt(match[1]), col: parseInt(match[2])}
-	}
+function traceBlock(error) {
+  const trace = error?.lilact_trace;
+  return Array.isArray(trace) ? trace[0] : trace;
+}
 
-	return null;
+function blockInfo(error) {
+  const trace = traceBlock(error);
+  return trace == null
+    ? null
+    : Lilact.blocks_info?.labels?.[trace];
 }
 
-// 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 mapLocation(mappings, line, column) {
+  if (
+    !Array.isArray(mappings) ||
+    !mappings.length ||
+    !Number.isFinite(line) ||
+    !Number.isFinite(column)
+  ) {
+    return { line, column };
+  }
+
+  const valid = mappings
+    .filter(mapping =>
+      Array.isArray(mapping) &&
+      mapping.length >= 4 &&
+      mapping
+        .slice(0, 4)
+        .every(value => Number.isFinite(Number(value)))
+    )
+    .sort((a, b) =>
+      Number(a[0]) - Number(b[0]) ||
+      Number(a[1]) - Number(b[1])
+    );
+
+  if (!valid.length) return { line, column };
+
+  let selected = valid[0];
+
+  for (const mapping of valid) {
+    const generatedLine = Number(mapping[0]);
+    const generatedColumn = Number(mapping[1]);
+
+    if (
+      generatedLine < line ||
+      (
+        generatedLine === line &&
+        generatedColumn <= column
+      )
+    ) {
+      selected = mapping;
+    } else {
+      break;
     }
   }
 
-  return { url: null, line: null, col: null, matched: null, stackPreview: lines.slice(0, 6).join("\n") };
+  const generatedLine = Number(selected[0]);
+  const generatedColumn = Number(selected[1]);
+  const sourceLine = Number(selected[2]);
+  const sourceColumn = Number(selected[3]);
+
+  return {
+    line:
+      sourceLine +
+      (line === generatedLine ? 0 : line - generatedLine),
+    column:
+      line === generatedLine
+        ? Math.max(0, sourceColumn + column - generatedColumn)
+        : sourceColumn,
+  };
 }
 
-function escapeRegExp(s)
-{
-  return String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+export function traceError(value, runPath) {
+  if (value?.isTraced) return value;
+
+  const error = asError(value);
+  const source = error.lilact_source;
+  const stack = isParserError(error)
+    ? null
+    : stackLocation(error.stack);
+  const browser = isParserError(error)
+    ? {
+        line: number(error.lineNumber),
+        column: number(error.columnNumber),
+      }
+    : browserLocation(error);
+
+  /*
+   * lilact_source is authoritative. In particular, it prevents a syntax
+   * error from a nested eval from inheriting the caller's eval filename.
+   */
+  const fileName =
+    source?.path ||
+    stack?.path ||
+    error.fileName ||
+    runPath ||
+    null;
+
+  let line =
+    stack?.line ??
+    browser.line ??
+    null;
+
+  let column =
+    stack?.column ??
+    browser.column ??
+    null;
+
+  const result = {
+    fileName,
+    lineNumber: line,
+    columnNumber: column,
+    message:
+      error.message == null
+        ? String(error)
+        : String(error.message),
+    name: error.name || "Error",
+    stack: error.stack || null,
+    lilact_source: source || null,
+    _error: error,
+    isTraced: true,
+  };
+
+  const module = fileName && required_scripts[fileName];
+
+  if (module) {
+    const mapped = mapLocation(
+      module.mappings,
+      result.lineNumber,
+      result.columnNumber
+    );
+
+    result.lineNumber = mapped.line;
+    result.columnNumber = mapped.column;
+  }
+
+  const block = blockInfo(error);
+
+  if (
+    block &&
+    (
+      result.lineNumber == null ||
+      result.columnNumber == null ||
+      !result.fileName
+    )
+  ) {
+    result.fileName ||= block.path || runPath || null;
+    result.lineNumber ??= block.line;
+    result.columnNumber ??= block.col;
+    result.label = block.desc;
+  }
+
+  Lilact.error = result;
+  return result;
 }
 
-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 escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
 }
 
+function sourceExcerpt(module, line) {
+  if (!module || !Number.isFinite(line)) return null;
 
-/** @ignore */
-export function scanBlockLabels(code, path)
-{
-	const ls = Array.from( code.matchAll(/LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//mg) );
+  const lines = String(module.code ?? "").split(/\r?\n/);
 
-	// 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 {
+    before: lines[line - 1] ?? "",
+    current: lines[line] ?? "",
+    after: lines[line + 1] ?? "",
+  };
 }
 
+export function globalErrorHandler(eventOrError) {
+  const value =
+    eventOrError?.error instanceof Error
+      ? eventOrError.error
+      : eventOrError?.reason !== undefined
+        ? eventOrError.reason
+        : eventOrError;
+
+  const error = traceError(
+    value,
+    eventOrError?.fileName || null
+  );
+
+  const excerpt = sourceExcerpt(
+    required_scripts[error.fileName],
+    error.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;
+    }
 
-/**
- * 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`.
- */
-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(!obj.fileName) {
-			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;
-	
+    code {
+      border: 1px solid #0003;
+      overflow: auto;
+      padding: 10px;
+      display: block;
+    }
+  `);
+
+  const dialog = document.createElement("dialog");
+  dialog.className = className;
+
+  const location = error.fileName
+    ? `At ${escapeHtml(error.fileName)}`
+    : "";
+
+  const line = Number.isFinite(error.lineNumber)
+    ? `: Line ${error.lineNumber + 1}`
+    : "";
+
+  const componentStack =
+    error._error?.componentStackLog ||
+    error._error?.componentStack ||
+    "";
+
+  dialog.innerHTML = `
+    <h3><red>Error!</red></h3>
+    <b>${location}${line}</b><br><br>
+    <b>${escapeHtml(error.name)}</b>:
+    <span>${escapeHtml(error.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 error;
 }
 
-/**
- * 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 
- * 
- */
-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 scanBlockLabels(code, path) {
+  for (const match of String(code).matchAll(
+    /LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//gm
+  )) {
+    Lilact.blocks_info.labels[match[1]] = {
+      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;