lilact 0.6.0 → 0.7.0

package/src/errors.jsx

@@ -31,14 +31,14 @@
 
 
 // Lilact API
-/** @ignore */
-export function getErrorLocation(err) // works for both error and error-event, and also in node env
+
+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 [l, c];
+		return {line: l, col: c};
 	}
 
 	let match = /:(\d+):(\d+)[\n].*/m.exec(err.stack);
@@ -47,26 +47,61 @@ export function getErrorLocation(err) // works for both error and error-event, a
 	}
 
 	if(match) {
-		return [parseInt(match[1]), parseInt(match[2])]
+		return {line: parseInt(match[1]), col: parseInt(match[2])}
 	}
 
 	return null;
 }
 
-/** @ignore */
-export function mapLocation(mps, r,c)
+// 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)
+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 };
+    }
+  }
+
+  return { url: null, line: null, col: null, matched: null, stackPreview: lines.slice(0, 6).join("\n") };
+}
+
+function escapeRegExp(s) {
+  return String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+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][1]>=c) {
+		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 [r-map[0]+map[2], ((r-map[0]===0)?map[3]:0)];
+	return {line: r-map[0]+map[2], col: ((r-map[0]===0)?map[3]:0) };
 }
 
 
@@ -100,62 +135,70 @@ export function traceError(err)
 		return err;
 	}
 
-	const loc = Lilact.getErrorLocation(err);
+	const loc = parseEvalLocationFromStack(err.stack);
 
 	const obj = {
-		fileName: err.fileName,
-		label: null,
+		fileName: loc.url?.slice(6) || err.fileName,
 		
-		lineNumber: loc[0],
-		columnNumber: loc[1],
+		lineNumber: loc.line,
+		columnNumber: loc.col,
 
 		message: err.message,
 		name: err.name,
 
-		stack: null,
+		stack: err.stack,
 		_error: err,
 
 		is_traced: true
 	};		
 
-	if( err.name!=='JSXParseError' && err.lilact_trace!==undefined ) {
-
-		// to be able to trace, we assume that all of the scripts are running inside lilact.
-		// if not, the error is returned unchanged and stack and label would remain null.
+	if( err.name!=='JSXParseError' ) {
 
 		let mps;
-		let blk;
 
-		if(typeof(err.lilact_trace)==='object') {
-			blk = Lilact.blocks_info.labels[err.lilact_trace[0]];
-		}
-		else {
-			blk = Lilact.blocks_info.labels[err.lilact_trace];
+		if(loc.url) {
+			const rm = Lilact.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 if( err.lilact_trace!==undefined) {
+
+			let loc = getErrorLocation(err);
+
+			let mps;
+			let blk;
 
-		if(blk) {
-			obj.fileName = blk.path;
-			obj.label = blk.label;
+			if(typeof(err.lilact_trace)==='object') {
+				blk = Lilact.blocks_info.labels[err.lilact_trace[0]];
+			}
+			else {
+				blk = Lilact.blocks_info.labels[err.lilact_trace];
+			}
 
-			mps = Lilact.required_scripts[blk.path].mappings;
+			if(blk) {
+				obj.fileName = blk.path;
+				obj.label = blk.label;
 
-			[obj.lineNumber, obj.columnNumber] = Lilact.mapLocation(mps, obj.lineNumber-1,obj.columnNumber-1);
+				mps = Lilact.required_scripts[blk.path].mappings;
 
-			//const rm = Lilact.block_labels[block_num].required;
+				loc = mapLocation(mps, loc.line-1, loc.col-1);
 
-			// Lilact.onError( err.message,
-			// 				rm.path,
-			// 				Lilact.block_labels[block_num].label,
-			// 				...Lilact.mapLocation(...loc,mps),
-			// 				Lilact.call_stack.map(
-			// 					(x)=>({ path: Lilact.block_labels[x].path,
-			// 							label: Lilact.block_labels[x].label,
-			// 							lineNumber: Lilact.block_labels[x].lineNumber
-			// 						})
-			// 				),	err );
+				obj.lineNumber = loc.line;
+				obj.columnNumber = loc.col;
+			}
 		}
 		
 	}
+	else {
+		const loc = getErrorLocation(err);
+		if(err.fileName) obj.fileName = err.fileName;
+		obj.lineNumber = loc.line;
+		obj.columnNumber = loc.col;
+	}
 
 	Lilact.error = obj;
 	return obj;
@@ -180,9 +223,11 @@ export function traceError(err)
  */
 export function globalErrorHandler(err)
 {
+	Lilact.pauseTimers();
 	if(err.error) err = err.error;
 
 	err = Lilact.traceError(err);
+
 	const cls = Lilact.emotion.css(`
 			background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
 			backdrop-filter: blur(10px);
@@ -199,6 +244,7 @@ export function globalErrorHandler(err)
 				border: 1px solid #0003;
 				overflow: auto;
 				padding: 10px;
+				display: block;
 			}
 		`);
 
@@ -208,25 +254,28 @@ export function globalErrorHandler(err)
 	//<b>⚠</b> 
 	el.innerHTML = 
 		`<h3 style=""><red>Error!</red></h3>
-		At <b>${err.fileName}: Line ${err.lineNumber+1}</b><br><br>
+		<b>${err.fileName?'At '+err.fileName:''}
+		${Number.isFinite(err.lineNumber)?": Line "+(err.lineNumber+1):""}</b><br><br>
 		<b>${err.name}</b>:&nbsp;<span>${err.message}</span><br><br>
-		<code><pre></pre><pre><red></red></pre><pre></pre></code>
+		${Lilact.required_scripts[err.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
 		${err._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+err._error.componentStackLog+'</pre></code>':''}
 		`;
 
 
 	document.body.appendChild(el);
 
+	const pres = el.querySelectorAll('pre');
 
 	if(Lilact.required_scripts[err.fileName]) {
 		const lines = Lilact.required_scripts[err.fileName].code.split("\n");
-		if(err.lineNumber>0)
-			el.querySelectorAll('pre')[0].innerText = lines[err.lineNumber-1];
 
-		el.querySelector('pre red').innerText = lines[err.lineNumber];
+		if(lines?.[err.lineNumber-1])
+			pres[0].innerText = lines[err.lineNumber-1];
+
+		if(lines?.[err.lineNumber]) el.querySelector('pre red').innerText = lines[err.lineNumber];
 
-		if(err.lineNumber<lines.length-1)
-			el.querySelectorAll('pre')[2].innerText = lines[err.lineNumber+1];
+		if(lines?.[err.lineNumber+1])
+			pres[2].innerText = lines[err.lineNumber+1];
 	}
 
 	el.showModal();

package/src/hooks.jsx

@@ -85,7 +85,7 @@ export function useState(val)
 export function useCallback(callback, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw "callback dependencies must be an array or omitted.";
+		throw new Error("Callback dependencies must be an array or omitted.");
 	}
 
 	const hk = Lilact.useHook();
@@ -272,7 +272,7 @@ export function useRef(initialValue = null)
 export function useLayoutEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw "layout effect dependencies must be an array or omitted.";
+		throw new Error("Layout effect dependencies must be an array or omitted.");
 	}
 
 	const hk = Lilact.useHook();
@@ -300,7 +300,7 @@ export function useLayoutEffect(effect, deps=undefined)
 export function useEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw "effect dependencies must be an array or omitted.";
+		throw new Error("Effect dependencies must be an array or omitted.");
 	}
 
 	const hk = Lilact.useHook();
@@ -328,7 +328,7 @@ export function useEffect(effect, deps=undefined)
 export function useMemo(factory,deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw "memo dependencies must be an array or omitted.";
+		throw new Error("Memo dependencies must be an array or omitted.");
 	}
 
 	const hk = Lilact.useHook();

package/src/jsx.js

@@ -336,9 +336,8 @@ function parseString(code, index, q, container)
 
 		case '$':
 			if(q==='`') {
-				index++;
-				if(code[index]==='{') {
-					[index] = lookAhead( parseJS, code, index, true, container );
+				if(code[index+1]==='{') {
+					[index] = lookAhead( parseJS, code, index+1, true, container );
 					index--;
 				}
 			}
@@ -934,7 +933,8 @@ function generateSourceMap(json, path, jsx_eols, out_eols, mappings=[])
  */
 
 export function transpileJSX( jsx, { 
-	factory = "Lilact.createComponent", 
+	factory = "createComponent", 
+	fragment = "Fragment", 
 	path = "anonymous", 
 	appendSourcemap = true,
 	blocks_info = {
@@ -1081,7 +1081,7 @@ export function transpileJSX( jsx, {
 		if(node.type==='xml') {
 
 			if(node.tag.length===0) {
-				node.tag = "null";
+				node.tag = fragment;
 			}
 			else if(node.tag[0]!==node.tag[0].toUpperCase()) {
 				node.tag = `"${node.tag}"`;

package/src/lilact.jsx

@@ -64,7 +64,7 @@ import {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.6",
+	VERSION: "beta.7",
 	
 	// Configuration
 

package/src/loader.cjs

@@ -48,7 +48,7 @@ module.exports = function loader(source) {
 								{ 
 									path: this.resource,
 									appendSourcemap: DEBUG,
-									//factory: "Lialct.createComponent", 
+									//factory: "createComponent", 
 									//mappings: [], 
 									//injectTraceLabels: false,
 									//discardComments: false

package/src/misc.jsx

@@ -78,7 +78,7 @@ export const findDOMNode = (comp)=>{
 
 	Unlike React, in Lilact findDOMNode can also be used on function components.
 	*/
-	if(!comp[CORE]?.element?.parentNode) throw "findDOMNode only works on mounted components.";
+	if(!comp[CORE]?.element?.parentNode) throw new Error("findDOMNode only works on mounted components.");
 	return comp[CORE].element;
 }
 
@@ -119,7 +119,7 @@ export const Children = {
 				i--;
 			}
 			if(i>1) {
-				throw "no child or child is not the only one";
+				throw new Error("No child or child is not the only one");
 			}
 			i++;
 		}
@@ -343,7 +343,7 @@ export let update_interval_margin = 0;
 /** @ignore */
 export let id_num = Math.floor(Math.random()*10000);
 /** @ignore */
-export let eval_num = Math.floor(Math.random()*10000);
+export let eval_num = 0;//Math.floor(Math.random()*10000);
 
 
 // todo =improve these stacks

package/src/pane.jsx

@@ -80,8 +80,6 @@ export const ResizablePane = forwardRef(function ResizablePane(
   },
   ref
 ) {
-  this.displayName = 'ResizablePane';
-
   const containerRef = useRef(null);
   const panes = Children.toArray(children);
   const leftChild = panes[0] ?? null;

package/src/run.jsx

@@ -35,12 +35,6 @@ import Lilact from './lilact.jsx';
 
 /**
  * Runs a jsx script. All scripts can access Lilact namespace as a global object. 
- * 
- * Notice that `run` uses eval internally. There is no standard way of getting the error location when
- * running it with eval. Lilact has its own experimental workarounds for this.
- * When an inline script raises an exception, the original exception does not report
- * which eval has caused the error, so Lilact should guess it from some labels, and for the sake of 
- * efficiency, it is block based and not exact.
  *
  * @param jsx - The code to run.
  * @param path - The optional path to be used in reporting errors.
@@ -48,10 +42,10 @@ import Lilact from './lilact.jsx';
  * 
  * @returns An array representation of the children.
  */
-export function run(jsx, path=`<string input ${++Lilact.eval_num}>`, is_inline=true)
+export function run(jsx, path=`InlineJSX-${++Lilact.eval_num}`, is_inline=true)
 {
 	const mappings = [];
-	const module = {};
+	const module = {exports: {}};
 	let processed;
 
 	Lilact.required_scripts[path] = { 	
@@ -68,8 +62,8 @@ export function run(jsx, path=`<string input ${++Lilact.eval_num}>`, is_inline=t
 		{
 			path,
 			mappings,
-			factory: "Lilact.createComponent",
-			append_sourcemap: !is_inline,
+			factory: "createComponent",
+			appendSourcemap: false,
 			blocks_info: Lilact.blocks_info,
 
 			injectTraceLabels: true,
@@ -85,12 +79,18 @@ export function run(jsx, path=`<string input ${++Lilact.eval_num}>`, is_inline=t
 		Lilact.required_scripts[path].processed = processed;
 ʔ }		
 	
+	processed += "\n//# sourceURL=eval:/" + path;
+
+	// todo: this seems to be only useful in safari, should be assessed latera
 	Lilact.scanBlockLabels(processed, path);
 
 	try {
 		globalThis.Lilact = Lilact;
+		globalThis.createComponent = Lilact.createComponent;
+		globalThis.Fragment = Lilact.Fragment;
 
-		const res = eval ( processed );
+		//const res = new Function( "module", processed )(module);
+		const res = eval(processed);
 		if(module.exports) return module.exports;
 		return res;
 	}
@@ -106,7 +106,7 @@ export function run(jsx, path=`<string input ${++Lilact.eval_num}>`, is_inline=t
  * 
  * `Lilact.require` loads synchronously, as it is expected to be loaded on the next instruction.
  * 
- * As running the transpiled scripts rely on `eval`, it is not possible to use module imports 
+ * As running the transpiled scripts rely on `new Function`, it is not possible to use module imports 
  * and exports. So to import you should use `const {useState} = Lilact` convention. And to 
  * export, you should use `module.exports = ...`. `Lilact.require` returns `module.exports` value
  * so you can import different modules using the convention above.
@@ -160,13 +160,12 @@ export function require(path, force_update)
 		const request = new XMLHttpRequest();
 		request.open("GET", path, false);
 		request.send(null);
-
 		if (request.status === 200) {
 			return Lilact.run(request.responseText, path, false);
 		}
 	}
 
-	throw `required resource not found (${path})`;
+	throw new Error(`Required resource not found (${path})`);
 }