lilact 0.26.15 → 0.27.0

package/src/run.jsx

@@ -27,297 +27,343 @@
 	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
-import Lilact from './lilact.jsx';
-import {isEmpty} from './misc.jsx';
+/*
+Lilact
+Copyright (C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>
+BSD-2-Clause
+*/
 
-import { CORE, COMPONENT, LAZY } from "./symbols.jsx"
-import { injectGlobal } from "@emotion/css"
+import Lilact from "./lilact.jsx";
+import { isEmpty } from "./misc.jsx";
+import { LAZY } from "./symbols.jsx";
+import { injectGlobal } from "@emotion/css";
 
 function joinPaths(basePath, relativePath) {
-	const isAbs = relativePath.startsWith("/");
-	const stack = [];
+  const absolute = relativePath.startsWith("/");
+  const parts = (absolute ? "" : basePath)
+    .split("/")
+    .filter(Boolean);
 
-	const parts = (isAbs ? "" : basePath).split("/").filter(Boolean);
-	for (const p of parts) stack.push(p);
+  if (!absolute && !basePath.endsWith("/")) parts.pop();
 
-	if(!basePath.endsWith("/")) stack.pop();
+  for (const part of relativePath.split("/")) {
+    if (!part || part === ".") continue;
+    if (part === "..") parts.pop();
+    else parts.push(part);
+  }
 
-	const relParts = relativePath.split("/");
+  return `${absolute ? "/" : ""}${parts.join("/")}`;
+}
 
-	for (const p of relParts) {
-		if (p === "" || p === ".") continue;
-		if (p === "..") {
-			if (stack.length > 0) stack.pop();
-		} else {
-			stack.push(p);
-		}
-	}
+function asError(value, fallback = "Unknown error") {
+  if (value instanceof Error) return value;
+  if (value?.error instanceof Error) return value.error;
 
-	return (isAbs ? "/" : "") + stack.join("/");
-}
+  const error = new Error(
+    value?.message == null ? fallback : String(value.message)
+  );
 
-// Examples:
-//console.log(joinPaths("a/b/c", "./../d")); // a/b/d
-//console.log(joinPaths("a/b/c", "../../d")); // a/d
+  if (value && typeof value === "object") {
+    if (value.name) error.name = value.name;
+    if (value.stack) error.stack = value.stack;
 
-/** @ignore */
-export const required_scripts = {};
+    for (const key of Object.keys(value)) {
+      if (!(key in error)) error[key] = value[key];
+    }
+  }
 
+  return error;
+}
 
-/**
- * Runs a jsx script. All scripts can access Lilact namespace as a global object. 
- *
- * @param jsx - The code to run.
- * @param path - The optional path to be used in reporting errors.
- * 
- * @returns An array representation of the children.
+/*
+ * The first module that catches an error owns its source location.
+ * Parent modules must never replace it.
  */
-export function run(jsx, path=`InlineJSX-${++Lilact.eval_num}`, {isInline, isModule}={isInline:true, isModule:true})
-{
-	const mappings = [];
-	const module = { 	
-		mappings,
-		isInline,
-		path,
-		code: jsx,
-		exports: {}
-	};
-
-	let processed;
-
-
-	required_scripts[path] = module;
-
-	try {
-		processed = Lilact.transpileJSX( jsx,
-		{
-			path,
-			mappings,
-			factory: "createComponent",
-			appendSourcemap: false,
-
-			injectTraceLabels: true,
-			produceCJS: true,
-
-			blocks_info: Lilact.blocks_info,
-		} );
-	}
-	catch(e) {
-		//e = Lilact.traceError(e);
-		Lilact.error = e;
-		throw e;
-	}
-
-if(DEBUG) {
-	required_scripts[path].processed = processed;
-}		
-	
-	processed += "\n//# sourceURL=eval:/" + path;
-
-	// todo: this seems to be only useful in safari, should be assessed later
-	Lilact.scanBlockLabels(processed, path);
-
-	try {
-		globalThis.Lilact = Lilact;
-		globalThis.createComponent = Lilact.createComponent;
-		globalThis.Fragment = Lilact.Fragment;
-
-		//const res = new Function( "module", processed )(module);
-		const res = eval(processed);
-
-		if( !isEmpty(module.exports) ) return module.exports;
-		return res;
-	}
-	catch(e) {
-		e = Lilact.traceError(e, path);
-		throw e;
-	}
-}
+function markSource(value, path) {
+  const error = asError(value);
 
+  if (!error.lilact_source) {
+    error.lilact_source = { path };
+  }
 
-/**
- * Loads a jsx script from a path. `require` loads synchronously, as it is expected to be loaded on the next instruction.
- * 
- * If the path is in the format #id, it will query the document for a script element with the given 
- * id and run its contents.
- * 
- * If require is called inside the function given to lazy, it will run async. See `lazy`.
- * 
- * All required scripts can access Lilact namespace as a global object. 
- * 
- * @param path - The path to the required file. Must be either absolute path or relative to the current 
- * module or document’s URL (the page/location that initiated the request).
- * 
- * @returns An array representation of the children.
- */
-export function require(path)
-{
-	let forceUpdate, checkExport, requirer, isLazy;
-
-	// note: instead of named props, just to bypass typedoc.
-	if(arguments.length===2 && typeof(arguments[1]==='object')) {
-		forceUpdate = arguments[1]?.forceUpdate;
-		checkExport = arguments[1]?.checkExport;
-		requirer = arguments[1]?.requirer;
-		isLazy = arguments[1]?.isLazy;
-	}
-
-	if(Lilact.importObjectPaths?.[path]) return Lilact.importObjectPaths[path];
-	if(required_scripts[path] && !forceUpdate) return required_scripts[path].exports;
-	
-
-	if(path[0]==='#') {
-		const el = document.getElementById(path);
-
-		if(el) {
-			return run(el.innerText, path);
-		}
-
-		throw new Error(`Required element not found (${path})`);
-	}
-	else {
-		if(requirer && requirer.path) {
-			path = joinPaths(requirer.path, path);
-		}
-
-		if(Lilact?.[LAZY] || isLazy) {
-			Lilact[LAZY]=false;
-
-			let p = Lilact.resolver?.(path);
-
-			if(p) {
-				p = Promise.resolve(p);
-			}
-			else {
-				p = fetch(path).then(res => {
-					if (!res.ok) throw new Error(`HTTP ${res.status}`);
-					return res.text();
-				});
-			}
-			return  p.then(res => {
-						if(path.endsWith(".css")) {
-							injectGlobal(res);
-							return;
-						}
-						res = run(res, path, {isInline:false});
-						return res?.default ?? res;
-					})
-					.catch(err => {
-						throw err;
-					});
-		}
-		else {
-			const p = Lilact.resolver?.(path);
-			if(p) {
-				if(path.endsWith(".css")) {
-					injectGlobal(p);
-					return;
-				}
-				return run(p, path, {isInline:false});
-			}
-			else {
-				const request = new XMLHttpRequest();
-				request.open("GET", path, false);
-				request.send(null);
-				if (request.status === 200) {
-					if(path.endsWith(".css")) {
-						injectGlobal(res);
-						return;
-					}
-					return run(request.responseText, path, {isInline:false});
-				}
-			}
-		}
-	}
-
-	throw new Error(`Required resource not found (${path})`);
+  return error;
 }
 
+function report(value, path) {
+  const error = markSource(value, path);
 
-/**
- * Wrapper that enables async, code-split component loading. `lazy` should be used
- * outside the component definintion or it will produce new components on each rerender.
- * 
- * Note that in factory function you should use require instead of `import`. Dynamic `import` 
- * would work, but it will not be wired correctly to the `Lilact` runtime.
- * 
- * Example: 
- * ``` 
- * const StopWatch = lazy( () => require('./stopwatch.jsx') );
- * ```
- * 
- * @param factory - A function with **no arguments** that returns a `Promise`.
- * The promise must resolve to a module whose module.exports.default is a Lilact component
- * or otherwise it will be whatever the module.exports is set to.
- * 
- * @returns A Lilact component that should be rendered inside a `Suspense` boundary.
- */
-export function lazy(factory) {
-	let status = "pending"; // pending | success | error
-	let result;             // component | error
-
-	Lilact[LAZY] = true;
-	result = factory();
-
-	if(Lilact.isThenable(result)) {
-		result.then(
-			(mod) => {
-				status = "success";
-				result = mod;
-				return result;
-			},
-			(err) => {
-				status = "error";
-				result = err;
-				throw err;
-			}
-		);
-	}
-	else {
-		status = "success";
-	}
-
-	function LazyComponent(props) {
-		if (status === "pending") throw result;
-		if (status === "error") throw result;   
-		const Component = result;
-		return <Component {...props} />;
-	}
-
-	return LazyComponent;
+  if (error.isTraced) return error;
+
+  if (typeof Lilact.traceError === "function") {
+    return Lilact.traceError(error, path);
+  }
+
+  Lilact.error = error;
+  return error;
 }
 
-function scanScriptTagsWithType() {
-	const scripts = Array.from(
-		document.querySelectorAll('script[type="text/jsx"]')
-	);
+export const required_scripts = {};
 
-	return scripts.map((el) => ({
-		src: el.getAttribute("src") ?? null,
-		content: el.textContent ?? ""
-	}));
+export function run(
+  jsx,
+  path = `InlineJSX-${++Lilact.eval_num}`,
+  {
+    isInline = true,
+    isModule = true,
+  } = {}
+) {
+
+
+  const module = {
+    path,
+    code: String(jsx),
+    mappings: [],
+    exports: {},
+    isInline,
+    isModule,
+  };
+
+  required_scripts[path] = module;
+
+  let processed;
+
+  try {
+    processed = Lilact.transpileJSX(String(jsx), {
+      path,
+      mappings: module.mappings,
+      factory: "createComponent",
+      appendSourcemap: false,
+      injectTraceLabels: true,
+      produceCJS: true,
+      blocks_info: Lilact.blocks_info,
+    });
+  } catch (value) {
+    const error = asError(value);
+    error.fileName ??= path;
+    error.sourcePhase = "transpile";
+    module.error = error;
+    Lilact.error = error;
+    throw error;
+  }
+
+  if (typeof Lilact.scanBlockLabels === "function") {
+    Lilact.scanBlockLabels(processed, path);
+  }
+
+  /*
+   * 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 {
+    globalThis.Lilact = Lilact;
+    globalThis.createComponent = Lilact.createComponent;
+    globalThis.Fragment = Lilact.Fragment;
+
+    const result = eval(processed);
+
+    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.
+     */
+    const error = report(value, path);
+
+    error.sourcePhase ??= "runtime";
+    module.error = error;
+
+    throw error;
+  }
 }
 
-/**
- * Scans the whole documents and runs all the script elements with type `text/jsx`.
- * It is automatically attached to document.onload when Lilact is loaded.
- * 
- * If element src is set, it will be loaded via `require`.
- * If element has inner content, it will be executed via `run`.
- * 
- * If both are present, first the src is loaded and then the inner content is executed.
- *
- * Note that it won't detect such elements that are added after document.onload.
- * @returns {void}
- */
+export function require(path) {
+  let options = {};
+
+  if (
+    arguments.length === 2 &&
+    arguments[1] &&
+    typeof arguments[1] === "object"
+  ) {
+    options = arguments[1];
+  }
+
+
+  if (Lilact.importObjectPaths?.[path]) {
+    return Lilact.importObjectPaths[path];
+  }
+
+
+  const loadAsync =
+    Boolean(Lilact[LAZY]) ||
+    Boolean(options.isLazy);
+
+
+  if (options.requirer?.path) {
+    path = joinPaths(options.requirer.path, path);
+  }
+
+  if (required_scripts[path] && !options.forceUpdate && !loadAsync) {
+    return required_scripts[path].exports;
+  }
+
+  if (path.startsWith("#")) {
+    const element = document.getElementById(path.slice(1));
+
+    if (!element) {
+      throw report(
+        new Error(`Required element not found (${path})`),
+        path
+      );
+    }
+
+    return run(element.textContent || "", path);
+  }
+
+  if (loadAsync) {
+    Lilact[LAZY] = false;
+
+    let request = Lilact.resolver?.(path);
+
+    if (request == null) {
+
+	  if (required_scripts[path] && !options.forceUpdate) {
+	      request = Promise.resolve(required_scripts[path].code);
+	  }
+	  else {
+	      request = fetch(path).then(response => {
+	        if (!response.ok) {
+	          throw report(
+	            new Error(
+	              `Unable to load ${path}: HTTP ${response.status}`
+	            ),
+	            path
+	          );
+	        }
+
+	        return response.text();
+	      });
+	  }
+    } 
+    else {
+      request = Promise.resolve(request);
+    }
+
+    return request
+      .then(source => {
+        if (path.endsWith(".css")) {
+          injectGlobal(String(source));
+          return;
+        }
+
+        return run(String(source), path, {
+          isInline: false,
+          isModule: true,
+        });
+      })
+      .then(result =>
+          result?.default ?? result
+      )
+      .catch(error => {
+        throw report(error, path);
+      });
+  }
+
+  const resolved = Lilact.resolver?.(path);
+
+  if (resolved != null) {
+    if (path.endsWith(".css")) {
+      injectGlobal(String(resolved));
+      return;
+    }
+
+    return run(String(resolved), path, {
+      isInline: false,
+      isModule: true,
+    });
+  }
+
+  const request = new XMLHttpRequest();
+
+  try {
+    request.open("GET", path, false);
+    request.send(null);
+  } catch (value) {
+    throw report(value, path);
+  }
+
+  if (request.status >= 200 && request.status < 300) {
+    if (path.endsWith(".css")) {
+      injectGlobal(request.responseText);
+      return;
+    }
+
+    return run(request.responseText, path, {
+      isInline: false,
+      isModule: true,
+    });
+  }
+
+  throw report(
+    new Error(`Unable to load ${path}: HTTP ${request.status || 0}`),
+    path
+  );
+}
 
-export function runScripts()
-{
-	const scripts = scanScriptTagsWithType();
+export function lazy(factory) {
+  let status = "pending";
+  let result;
+
+  Lilact[LAZY] = true;
+
+  try {
+    result = factory();
+  } catch (error) {
+    status = "error";
+    result = error;
+  }
+
+  if (Lilact.isThenable(result)) {
+    result.then(
+      value => {
+        status = "success";
+        result = value;
+      },
+      error => {
+        status = "error";
+        result = error;
+      }
+    );
+  } else if (status !== "error") {
+    status = "success";
+  }
+
+  function LazyComponent(props) {
+    if (status === "pending") throw result;
+    if (status === "error") throw result;
+
+    const Component = result;
+    return <Component {...props} />;
+  }
+
+  return LazyComponent;
+}
 
-	for(const s of scripts) {
-		if(s.src) require(s.src);
-		if(s.content) run(s.content);
-	}
+function scriptTags() {
+  return Array.from(
+    document.querySelectorAll('script[type="text/jsx"]')
+  ).map(element => ({
+    src: element.getAttribute("src"),
+    content: element.textContent || "",
+  }));
 }
 
+export function runScripts() {
+  for (const script of scriptTags()) {
+    if (script.src) require(script.src);
+    if (script.content) run(script.content);
+  }
+}