lilact 0.4.0 → 0.5.0

package/src/errors.jsx

@@ -0,0 +1,217 @@
+/*
+
+	Lilact
+	Copyright (C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>
+	All rights reserved.
+
+	BSD-2-Clause
+
+	Redistribution and use in source and binary forms, with or without
+	modification, are permitted provided that the following conditions are met:
+
+	* Redistributions of source code must retain the above copyright
+		notice, this list of conditions and the following disclaimer.
+	* Redistributions in binary form must reproduce the above copyright
+		notice, this list of conditions and the following disclaimer in the
+		documentation and/or other materials provided with the distribution.
+
+	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+	IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+	ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+	DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+	ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+
+
+
+// Lilact API
+/** @ignore */
+export 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.lineno || err.line || err.lineNumber;
+		const c = err.colno || err.column || err.columnNumber;
+
+		return [l, c];
+	}
+
+	let match = /:(\d+):(\d+)[\n].*/m.exec(err.stack);
+	if(match===null) {
+		match = /:(\d+):(\d+)\)\s+at .*/m.exec(err.stack);
+	}
+
+	if(match) {
+		return [parseInt(match[1]), parseInt(match[2])]
+	}
+
+	return null;
+}
+
+/** @ignore */
+export function mapLocation(mps, r,c)
+{
+	let map = [0,0,0,0];
+
+	for(const i in mps) {
+		if(mps[i][0]<r) continue;
+		if(mps[i][0]>r || mps[i][1]>=c) {
+			map = mps[i-1];
+			break;
+		}
+	}
+
+	return [r-map[0]+map[2], ((r-map[0]===0)?map[3]:0)];
+}
+
+
+/** @ignore */
+export function scanBlockLabels(code, path)
+{
+	const ls = Array.from( code.matchAll(/LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//mg) );
+
+	ls.forEach(
+		(x) => {
+			Lilact.blocks_info.labels[x[1]] = {
+				path,
+				row: parseInt(x[2]),
+				col: parseInt(x[3]),
+				desc: x[4]
+			}
+			//console.log(Lilact.blocks_info.labels[x[1]]);
+		} );
+}
+
+
+/**
+ * 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.
+ *
+ * @returns A new object that includes `path`, `row`, `col`, `msg`, `name`, and optional `stack`. 
+ * The exception itself is stored as `err`.
+ */
+export function traceError(err)
+{
+	const loc = Lilact.getErrorLocation(err);
+
+	const obj = {
+		fileName: err.fileName,
+		label: null,
+		
+		lineNumber: loc[0],
+		columnNumber: loc[1],
+
+		message: err.message,
+		name: err.name,
+
+		stack: null,
+		error: err,
+
+		is_traced: true
+	};		
+
+	if(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.
+
+		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(blk) {
+			obj.fileName = blk.path;
+			obj.label = blk.label;
+
+			mps = Lilact.required_scripts[blk.path].mappings;
+
+			[obj.lineNumber, obj.columnNumber] = Lilact.mapLocation(mps, obj.lineNumber,obj.columnNumber);
+
+			//const rm = Lilact.block_labels[block_num].required;
+
+			// 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 );
+		}
+		
+	}
+	Lilact.error = obj;
+	return obj;
+	
+}
+
+export function globalErrorHandler(err)
+{
+	//console.log(err);
+	if(err.error) err = err.error;
+
+	if(!err?.is_traced && err.name!=='JSXParseError') err = Lilact.traceError(err);
+	const cls = Lilact.emotion.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;
+			}
+		`);
+
+	const el = document.createElement('dialog');
+
+
+	el.className=cls;
+	el.innerHTML = 
+		`<h3 style=""><red>Error!</red></h3>
+		At <b>${err.fileName}: Line ${err.lineNumber+1}, Column ${err.columnNumber+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>
+		`;
+	document.body.appendChild(el);
+
+
+	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(err.lineNumber<lines.length-1)
+			el.querySelectorAll('pre')[2].innerText = lines[err.lineNumber+1];
+	}
+
+	el.showModal();
+}
+
+/** @ignore */
+export const blocks_info = { counter: 0, labels: {} };
+
+/** @ignore */
+export let error = null; // this is only to ease debuggin,

package/src/events.jsx

@@ -58,7 +58,7 @@ if (typeof Event !== 'undefined' && !Event.prototype.composedPath) {
 const _pool = [];
 const MAX_POOL_SIZE = 10;
 
-function createSyntheticEvent(nativeEvent, currentTarget) {
+export function createSyntheticEvent(nativeEvent, currentTarget) {
 	// Reuse object from pool if available
 	const e = _pool.length ? _pool.pop() : {};
 
@@ -104,7 +104,7 @@ function createSyntheticEvent(nativeEvent, currentTarget) {
 	return e;
 }
 
-function releaseSyntheticEvent(e) {
+export function releaseSyntheticEvent(e) {
 	if (e && !e.isPersistent) {
 		// Clean up references to avoid leaks
 		e.nativeEvent = null;
@@ -133,7 +133,7 @@ function releaseSyntheticEvent(e) {
 // Main wrapper factory
 // fn: function(syntheticEvent) { ... }
 // opts: { capture: bool, passive: bool, once: bool, stopPropagationOnTrueReturn: bool }
-function wrapListener(fn, opts = {}) {
+export function wrapListener(fn, opts = {}) {
 	const { stopPropagationOnTrueReturn = false } = opts;
 
 	return function handler(nativeEvent) {
@@ -156,20 +156,10 @@ function wrapListener(fn, opts = {}) {
 }
 
 // Convenience: add/remove wrapper-managed listener
-function addWrappedEventListener(target, type, fn, options = {}) {
+export function addWrappedEventListener(target, type, fn, options = {}) {
 	const handler = wrapListener(fn, options);
 
 	target.addEventListener(type, handler, options);
 	// Return a remover
 	return () => target.removeEventListener(type, handler, options);
 }
-
-// Export (CommonJS / ES module-friendly)
-const EventWrapper = {
-	wrapListener,
-	addWrappedEventListener,
-	createSyntheticEvent, // exported for advanced use
-	releaseSyntheticEvent
-};
-
-export default EventWrapper;

package/src/jsx.js

@@ -54,17 +54,12 @@ import * as jsxAddons from './jsx.addons.js';
 /** @ignore */
 export const transpilerConfig = {
 	addons: jsxAddons,
-	setFunctionLabels: true,
+	setBlockLabels: true,
 	enableLabelStack: false,
 	injectLabels: true,
 	// todo: alt+shift+7 on apple abc extended layout is better i think, 
 	// but my current editor doesn't support syntax highlighting with it.
 	preprocessorDelimiter: 'ʔ', // alt+shift+. on apple abc extended layout   
-
-
-	required: {},
-	func_labels: {},
-	func_num: Math.floor(Math.random()*10000)
 }
 
 
@@ -163,7 +158,7 @@ function parseComment(code, index, container)
 		index++;
 	}
 
-	raiseError(`unterminated comment`, index);
+	raiseError(`Unterminated comment`, b.begin);
 }
 
 
@@ -215,7 +210,7 @@ function parseDirective(code, index, container)
 		}
 	}
 
-	raiseError('error in preprocessor statement.')
+	raiseError('Error in preprocessor statement', index);
 }
 
 
@@ -336,7 +331,7 @@ function parseString(code, index, q, container)
 			return b;
 
 		case '\n':
-			if(q!=='\`') raiseError(`unterminated string`, index);
+			if(q!=='\`') raiseError(`Unterminated string`, b.begin);
 			break;
 
 		case '$':
@@ -357,7 +352,7 @@ function parseString(code, index, q, container)
 		index++;
 	}
 
-	raiseError(`unterminated string`, index);
+	raiseError(`Unterminated string`, b.begin);
 }
 
 
@@ -387,7 +382,7 @@ function parseXMLContent(code, index, container, eols)
 				const tag = code.substring(i,j).trim();
 
 				if(container.tag!==tag) {
-					throw `ill-formed xml (close tag) [${container.tag},${tag}] ${j}`;
+					raiseError(`Ill-formed xml (not closed properly)`, index);
 				}
 
 				container.end = j+1;
@@ -623,7 +618,7 @@ function parseParanthesis(code, index, container)
 			break;
 
 		case '}':
-			raiseError(`unmatched curly bracket`, index);
+			raiseError(`Unmatched curly bracket`, b.begin);
 			break;
 
 		case ')':
@@ -646,7 +641,7 @@ function parseParanthesis(code, index, container)
 		}
 	}
 
-	raiseError(`unterminated paranthesis block (started at ${b.begin})`, index);
+	raiseError(`Unterminated paranthesis block`, b.begin);
 }
 
 
@@ -689,7 +684,7 @@ function parseJS(code, index=0, is_block=false, container)
 			break;
 
 		case ')': // this is only for function detection
-			raiseError(`unmatched paranthesis ${index} [from ${b.begin}]`, index);
+			raiseError(`Unmatched paranthesis`, b.begin);
 			break;
 
 		case '}':
@@ -699,7 +694,7 @@ function parseJS(code, index=0, is_block=false, container)
 				if(container) container.children.push(b);
 				return b;
 			}
-			raiseError(`unmatched curly bracket`, index);
+			raiseError(`Unmatched curly bracket`, b.begin);
 			break;
 
 		case '/':
@@ -726,7 +721,7 @@ function parseJS(code, index=0, is_block=false, container)
 		}
 	}
 
-	if(is_block) raiseError(`unterminated js block at ${index} (started at ${b.begin})`);
+	if(is_block) raiseError(`Unterminated JS block`, b.begin);
 
 	b.end = index;
 	b.cend = index;
@@ -738,7 +733,7 @@ function parseJS(code, index=0, is_block=false, container)
 // this is for lilact internal use, it is a workaround for approximating error location
 // in eval when transpiling and running jsx directly in browser.
 
-function labelFunctions(node, eols)
+function labelFunctions(node, eols, blocks_info)
 {
 
 	node.already_labeled = true;
@@ -781,12 +776,12 @@ function labelFunctions(node, eols)
 
 			if(transpilerConfig.injectTraceLabels && typeof(nxt)==='object' && nxt.type==='js') {
 				const begin = getRowCol(eols, chi); // begin is always the location of function args paranthesis
-				nxt.children.splice(1,0, `/*LILACTBLOCK${++transpilerConfig.func_num}:${begin}:${label}*/try{`);
+				nxt.children.splice(1,0, `/*LILACTBLOCK${++blocks_info.counter}:${begin}:${label}*/try{`);
 				if(transpilerConfig.enableLabelStack) {
-					nxt.children.splice(nxt.children.length-1, 0, `} catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${transpilerConfig.func_num},e.lilact_trace];throw e}`);
+					nxt.children.splice(nxt.children.length-1, 0, `} catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${blocks_info.counter},e.lilact_trace];throw e}`);
 				}
 				else {
-					nxt.children.splice(nxt.children.length-1, 0, `} catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${transpilerConfig.func_num};throw e}`);
+					nxt.children.splice(nxt.children.length-1, 0, `} catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${blocks_info.counter};throw e}`);
 				}
 				chi += 2;				
 			}
@@ -806,15 +801,15 @@ function labelFunctions(node, eols)
 					if(transpilerConfig.injectTraceLabels) {
 
 						nxt.children.splice(1,0, 
-							`/*LILACTBLOCK${++transpilerConfig.func_num}:${begin}:<ARROW>*/try {`);
+							`/*LILACTBLOCK${++blocks_info.counter}:${begin}:<ARROW>*/try {`);
 
 						if(transpilerConfig.enableLabelStack) {
 							nxt.children.splice(nxt.children.length-1, 0, 
-								`} catch(e){if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${transpilerConfig.func_num},e.lilact_trace];throw e}`);
+								`} catch(e){if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${blocks_info.counter},e.lilact_trace];throw e}`);
 						}
 						else {
 							nxt.children.splice(nxt.children.length-1, 0, 
-								`} catch(e){if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${transpilerConfig.func_num};throw e}`);
+								`} catch(e){if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${blocks_info.counter};throw e}`);
 						}
 
 					}					
@@ -943,17 +938,18 @@ export function transpileJSX( jsx, {
 	factory = "Lilact.createComponent", 
 	path = "anonymous", 
 	appendSourcemap = true,
-	mappings = [], 
+	blocks_info = {
+		labels: {},
+		counter: 0
+	},
+	mappings = [],
 	injectTraceLabels = false,
 	discardComments = false
 } = {} )
 {
 
-	// func_num is shared so consecutive transpilations create new ids each time.
-	transpilerConfig.func_num ??= 0;
 	transpilerConfig.preprocessorDelimiter ??= 'ʔ'; // alt+shift+. on apple abc extended layout  
-	
-	transpilerConfig.injectTraceLabels ??= injectTraceLabels; // alt+shift+. on apple abc extended layout  
+	transpilerConfig.injectTraceLabels ??= injectTraceLabels;
 
 	const eols = scanEOLs(jsx);
 
@@ -961,6 +957,7 @@ export function transpileJSX( jsx, {
 		const er = new Error(msg);
 		er.name = 'JSXParseError';
 		[er.lineNumber, er.columnNumber] = getRowCol(eols, index);
+		er.fileName = path;
 		er.lilact_trace = 'parse';
 		throw er;
 	}).bind(null, eols);
@@ -1026,8 +1023,8 @@ export function transpileJSX( jsx, {
 
 			node.children = node.children.filter( (x)=>x!=="" );
 
-			if(transpilerConfig.setFunctionLabels && !node.already_labeled) {
-				labelFunctions(node,eols);
+			if(transpilerConfig.setBlockLabels && !node.already_labeled) {
+				labelFunctions(node,eols, blocks_info);
 			}
 		}
 	}
@@ -1131,25 +1128,16 @@ export function transpileJSX( jsx, {
 
 	let out = '';
 	if(injectTraceLabels) {
-		out=`/*LILACTBLOCK${++transpilerConfig.func_num}:0,0:<EXEC>*/try{`
-
-		transpilerConfig.func_labels[transpilerConfig.func_num] = {
-			path,
-			row: 1,
-			col: 1,
-			label: transpilerConfig.func_num,
-			required: transpilerConfig.required[path]
-		};
-
+		out=`/*LILACTBLOCK${++blocks_info.counter}:0,0:<EXEC>*/try{`
 	}
 	out+=codify(0, json);
 
 	if(injectTraceLabels) {
 		if(transpilerConfig.enableLabelStack) {
-			out += `}catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${transpilerConfig.func_num},e.lilact_trace];throw e}`;
+			out += `}catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=[${blocks_info.counter},e.lilact_trace];throw e}`;
 		}
 		else {
-			out += `}catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${transpilerConfig.func_num};throw e}`;
+			out += `}catch(e){ if(typeof(e)!=='object') e=new Error(e);e.lilact_trace=${blocks_info.counter};throw e}`;
 		}
 	}
 

package/src/lilact.jsx

@@ -39,10 +39,11 @@ import * as components from './components.jsx';
 import * as hooks from './hooks.jsx';
 import * as run from './run.jsx';
 import * as transition from './transition.jsx';
-import EventWrapper from './events.jsx';
+import * as events from './events.jsx';
 import * as redux_wrapper from './redux.jsx';
 import * as timers from './timers.jsx';
 import * as misc from './misc.jsx';
+import * as errors from './errors.jsx';
 
 
 import * as router from './router.jsx';
@@ -63,7 +64,7 @@ import {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.4",
+	VERSION: "beta.5",
 	
 	// Configuration
 
@@ -73,14 +74,15 @@ export const Lilact =
 	
 	// Units 
 
+	...misc,
+	...run,
 	...components,
 	...hooks,
-	...run,
 	...transition,
 	...redux_wrapper,
 	...timers,
-	...misc,
-	...EventWrapper,
+	...events,
+	...errors,
 
 	...router,
 	...accessories,
@@ -97,10 +99,16 @@ export const Lilact =
 
 }
 
+globalThis.Lilact = Lilact;
+
 document.addEventListener('DOMContentLoaded', () => {
   Lilact.runScripts();
 });
 
+window.addEventListener('error', (e) => {
+	Lilact.globalErrorHandler(e);
+});
+
 ʔ if(DEBUG) {
 	console.log(`Lilact (Version: ${Lilact.VERSION}) - Debug Mode`);
 	console.log(`Copyright(C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>`);

package/src/misc.jsx

@@ -146,63 +146,6 @@ export const Children = {
 };
 
 
-// Lilact API
-/** @ignore */
-export 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.lineno || err.line || err.lineNumber;
-		const c = err.colno || err.column || err.columnNumber;
-
-		return [l, c];
-	}
-
-	let match = /:(\d+):(\d+)[\n].*/m.exec(err.stack);
-	if(match===null) {
-		match = /:(\d+):(\d+)\)\s+at .*/m.exec(err.stack);
-	}
-
-	if(match) {
-		return [parseInt(match[1]), parseInt(match[2])]
-	}
-
-	return null;
-}
-
-/** @ignore */
-export function mapLocation(mps, r,c)
-{
-	let map = [0,0,0,0];
-
-	for(const i in mps) {
-		if(mps[i][0]<r) continue;
-		if(mps[i][0]>r || mps[i][1]>=c) {
-			map = mps[i-1];
-			break;
-		}
-	}
-
-	return [r-map[0]+map[2], ((r-map[0]===0)?map[3]:0)];
-}
-
-
-/** @ignore */
-export function scanFunctionLabels(code, path)
-{
-	const ls = Array.from( code.matchAll(/LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//mg) );
-
-	ls.forEach(
-		(x) => Lilact.transpilerConfig.func_labels[x[1]] = {
-			path,
-			row: parseInt(x[2])+1,
-			col: parseInt(x[3])+1,
-			label: x[4],
-			required: Lilact.transpilerConfig.required[path]
-		} );
-
-}
-
-
 /**
  * Debug tool to detect the component visible at a point on screen.
  *
@@ -393,6 +336,8 @@ export function toBool(x) {
 
 // Internals
 
+export const required_scripts = {};
+
 /** @ignore */
 export let update_timeout = undefined;
 /** @ignore */
@@ -413,8 +358,6 @@ export let update_cbs  = new Set;
 /** @ignore */
 export let roots  = new Set;
 /** @ignore */
-export let err = null; // this is only to ease debuggin,
-/** @ignore */
 export let layout_effects = new Set;
 
 /** @ignore */