lilact 0.28.0 → 0.28.4

package/package.json

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

package/scripts/build.mjs

@@ -104,7 +104,7 @@ await esbuild.build({
   platform: "browser",
 
   outfile: `dist/${outFile}`,
-  target: "es2018",
+  target: "es2020",
   sourcemap: mode === "development",
 
   minify,

package/src/accessories.jsx

@@ -32,10 +32,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, useImperativeHandle, useCallback } from "./hooks.jsx";
 import { Children, forwardRef, isThenable } from "./misc.jsx";
 
-//import {setTimeout, clearTimeout} from "./timers.jsx"
 import {Component} from "./components.jsx"
-import {emotion} from "./lilact.jsx"
-const {css,cx} = emotion;
 
 /**
  * A CSS-only loading spinner component.
@@ -375,7 +372,7 @@ export function DragHandle({
 			role="button"
 			tabIndex={0}
 			style={{ ...style, touchAction: "none" }}
-			className={cx(className, isDragging?"dragging":"")}
+			className={`${className}  ${isDragging?"dragging":""}`}
 			onPointerDown={onPointerDown}
 			onPointerMove={onPointerMove}
 			onPointerUp={onPointerUp}

package/src/components.jsx

@@ -420,10 +420,10 @@ if(DEBUG) {
 			}
 		}
 		else if(this.entity==="select") {
-			const s = String(patch.value);
-
-			if(s!==this.element.value) {
-				this.element.value=s;
+			if(typeof(patch.value)==='string') {
+			 	if(patch.value!==this.element.value) {
+					this.element.value=patch.value;
+				}
 			}
 		}
 		else if(this.entity==="option") {

package/src/errors.jsx

@@ -37,6 +37,15 @@ import Lilact from "./lilact.jsx";
 import { required_scripts } from "./run.jsx";
 import { css } from "@emotion/css";
 
+function isSafari() {
+  const userAgent = navigator.userAgent;
+
+  return (
+    /Safari/.test(userAgent) &&
+    !/Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS/.test(userAgent)
+  );
+}
+
 function number(value) {
 	const result = Number(value);
 	return Number.isFinite(result) ? result : null;
@@ -87,22 +96,29 @@ function stackLocation(stack) {
 }
 
 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),
-	};
+  const line = number(
+    error?.lineNumber ??
+    error?.lineno ??
+    error?.line
+  );
+  const column = number(
+    error?.columnNumber ??
+    error?.colno ??
+    error?.column
+  );
+
+  const lineOffset = isSafari() ? 0 : 1;
+
+  return {
+    line:
+      line == null
+        ? null
+        : Math.max(0, line - lineOffset),
+    column:
+      column == null
+        ? null
+        : Math.max(0, column - 1),
+  };
 }
 
 function traceBlock(error) {
@@ -203,15 +219,20 @@ export function traceError(value, runPath) {
 		runPath ||
 		null;
 
+	const sameSource =
+		!source?.path ||
+		!stack?.path ||
+		source.path === stack.path;
+
 	let line =
-		stack?.line ??
-		browser.line ??
-		null;
+		sameSource
+		? stack?.line ?? browser.line ?? null
+		: browser.line ?? null;
 
 	let column =
-		stack?.column ??
-		browser.column ??
-		null;
+		sameSource
+		? stack?.column ?? browser.column ?? null
+		: browser.column ?? null;
 
 	const result = {
 		fileName,
@@ -253,7 +274,7 @@ export function traceError(value, runPath) {
 	) {
 		result.fileName ||= block.path || runPath || null;
 		result.lineNumber ??= block.line;
-		result.columnNumber ??= block.col;
+		result.columnNumber ??= block.column;
 		result.label = block.desc;
 	}
 
@@ -301,8 +322,9 @@ export function globalErrorHandler(eventOrError) {
 	);
 
 	const className = css(`
-		background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
-		backdrop-filter: blur(10px);
+		background: #fff;
+		text-shadow: 0 0 3px #fff;
+		-backdrop-filter: blur(20px);
 		border: 1px solid rgba(255,255,255,.25);
 		border-radius: 5px;
 		box-shadow: 0 10px 30px rgba(0,0,0,.35);
@@ -315,10 +337,11 @@ export function globalErrorHandler(eventOrError) {
 		}
 
 		code {
-			border: 1px solid #0003;
+			background: #0001;
 			overflow: auto;
 			padding: 10px;
 			display: block;
+			border-radius: 3px;
 		}
 	`);
 
@@ -388,7 +411,7 @@ export function scanBlockLabels(code, path) {
 		Lilact.blocks_info.labels[match[1]] = {
 			path,
 			line: Number(match[2]),
-			col: Number(match[3]),
+			column: Number(match[3]),
 			desc: match[4],
 		};
 	}

package/src/jsx.js

@@ -950,8 +950,10 @@ function generateSourceMap(json, path, jsx_eols, out_eols, mappings=[])
 	}
 	sourcemap.mappings = mstr.substring(1).replace(/;,/g, ";"); 
 
-	return "\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(JSON.stringify(sourcemap));
+	let out = "\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(JSON.stringify(sourcemap));
+	out += `\n//# sourceURL=eval:/${path}`;
 
+	return out;
 }
 
 

package/src/lilact.jsx

@@ -126,10 +126,10 @@ export const Lilact =
 	redux,
 	emotion,
 
-	_setTimeout: window.setTimeout.bind(window),
-	_setInterval: window.setInterval.bind(window),
-	_clearTimeout: window.clearTimeout.bind(window),
-	_clearInterval: window.clearInterval.bind(window),
+	_setTimeout: globalThis.setTimeout.bind(globalThis),
+	_setInterval: globalThis.setInterval.bind(globalThis),
+	_clearTimeout: globalThis.clearTimeout.bind(globalThis),
+	_clearInterval: globalThis.clearInterval.bind(globalThis),
 
 }
 

package/src/run.jsx

@@ -181,20 +181,19 @@ export function run(
 			path,
 			mappings: module.mappings,
 			factory: "createComponent",
-			appendSourcemap: false,
+			appendSourcemap: true,
 			injectTraceLabels: true,
 			produceCJS: true,
 			blocks_info: Lilact.blocks_info,
 		});
-	} catch (value) {
+	} 
+	catch (value) {
 		const error = asError(value);
-
 		error.fileName ??= path;
+		error.lilact_source ??= {path};
 		error.sourcePhase = "transpile";
-
 		module.error = error;
 		Lilact.error = error;
-
 		throw error;
 	}
 
@@ -206,30 +205,23 @@ export function run(
 	* sourceURL helps when the browser includes eval locations in its stack.
 	* It is not used as the authoritative source; the catch block below is.
 	*/
-	processed += `\n//# sourceURL=eval:/${path}`;
 
 	try {
+		new Function(processed);
+
 		globalThis.Lilact = Lilact;
 		globalThis.createComponent = Lilact.createComponent;
 		globalThis.Fragment = Lilact.Fragment;
 
 		const result = eval(processed);
-
 		module.loaded = true;
 
-		return isEmpty(module.exports)
-			? result
-			: module.exports;
-	} catch (value) {
-		/*
-		* This catch executes in the module whose eval failed, including
-		* generated-JavaScript syntax errors. Therefore path is authoritative.
-		*/
+		return isEmpty(module.exports) ? result : module.exports;
+	} 
+	catch (value) {
 		const error = report(value, path);
-
 		error.sourcePhase ??= "runtime";
 		module.error = error;
-
 		throw error;
 	}
 }