lilact 0.31.0 → 0.31.2

package/package.json

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

package/src/components.jsx

@@ -30,7 +30,7 @@
 
 import Lilact from './lilact.jsx';
 
-import { CORE, COMPONENT, TEXT, IS_ZOMBIE, IDX, CHILD_CLASS_ADDENDUM, MEMOIZED } from "./symbols.jsx"
+import { CORE, COMPONENT, TEXT, IS_ZOMBIE, IDX, CHILD_CLASS_ADDENDUM, MEMOIZED, LOCATION } from "./symbols.jsx"
 import { shallowEqual, toBool, isClass, isThenable } from "./misc.jsx";
 
 import { PropTypes } from './proptypes.jsx';
@@ -847,6 +847,9 @@ function constructFunc(core, parent) {
 		let entity = core.entity;
 		let memoized = false;
 
+		const loc = core.props[LOCATION];
+		if(loc) delete core.props[LOCATION];
+
 		if (typeof entity === "object") {
 			if (entity[MEMOIZED]) {
 				memoized = entity[MEMOIZED];
@@ -860,7 +863,8 @@ function constructFunc(core, parent) {
 
 		if (typeof entity === "string") {
 			comp = new HTMLComponent(entity, core.props);
-		} else if (isClass(entity)) {
+		} 
+		else if (isClass(entity)) {
 			if (entity?.defaultProps) {
 				core.props = {
 					...entity.defaultProps,
@@ -895,7 +899,8 @@ function constructFunc(core, parent) {
 					});
 				}
 			}
-		} else if (typeof entity === "function") {
+		} 
+		else if (typeof entity === "function") {
 			if (entity?.defaultProps) {
 				core.props = {
 					...entity.defaultProps,
@@ -907,10 +912,13 @@ function constructFunc(core, parent) {
 			comp.render = entity.bind(comp);
 			comp[CORE].hooks = [];
 			comp[CORE].hook_index = 0;
-		} else {
+		}
+		else {
 			throw new Error("Error in constructing component.");
 		}
 
+		if(loc) comp[CORE].location = loc;
+
 		comp[CORE].entity = entity;
 		registerComponentCore(comp[CORE]);
 
@@ -938,13 +946,12 @@ function prepareCore(parent, core) {
 		const isText = core[TEXT] !== undefined;
 
 		const key = isText
-		? ':text:'
-		: core.props?.key;
+						? ':text:'
+						: core.props?.key;
 
-		const entity =
-		isText || core instanceof ComponentCore
-		? undefined
-		: core.entity;
+		const entity =	isText || core instanceof ComponentCore
+							? undefined
+							: core.entity;
 
 		return parent.cache.pick(
 			key,
@@ -955,10 +962,12 @@ function prepareCore(parent, core) {
 			),
 			entity
 		);
-	} catch (e) {
+	}
+	catch (e) {
 		if (core?.component?.componentDidCatch) {
 			core.component.componentDidCatch(e);
-		} else {
+		}
+		else {
 			throw e;
 		}
 	}
@@ -1418,7 +1427,6 @@ export function createRoot(element)
 		},
 
 		getCore() {
-			console.log(root, root[CORE]);
 			return root[CORE];
 		}
 	}
@@ -1426,26 +1434,6 @@ export function createRoot(element)
 
 
 
-export function hotReloadRoot(rootCore, nextEntity, props) {
-  if (!rootCore || !rootCore.component) {
-    throw new Error("Invalid root component.");
-  }
-
-  const replaced = replaceComponentEntity(rootCore, nextEntity);
-
-  if (!replaced) {
-    throw new Error(
-      "Cannot hot-reload the root from a class component to a function component, or vice versa."
-    );
-  }
-
-  rootCore.apply(props === undefined ? rootCore.props : {...rootCore.props, ...props});
-
-  return rootCore;
-}
-
-
-
 /**
  * Creates a portal — a way to render children into a DOM node
  * that exists outside the current component hierarchy.

package/src/jsx.js

@@ -50,7 +50,7 @@
 import * as vlq from './vlq.js' 
 import {processImportExports} from './expscan.js'
 
-
+const LOCATION = Symbol.for('LILACT:LOCATION'); // it is also defined in symbols.jsx. 
 
 /** @ignore */
 export const transpilerConfig = {
@@ -982,6 +982,7 @@ export function transpileJSX( jsx, {
 		discardComments = false,
 		produceCJS = false,
 		logErrors = false,
+		addLocationProp = false,
 
 		// lilact internal
 		mappings = [],
@@ -1175,7 +1176,10 @@ export function transpileJSX( jsx, {
 			}
 
 			const loc = getRowCol(eols,node.begin);
-			out = ` ${factory}( ${node.tag}, { ${out} )`; //lilact_jsx_loc:["${path}", ${loc}]
+			if(addLocationProp)
+				out = ` ${factory}( ${node.tag}, { [Lilact.LOCATION]:["${path}", ${loc}], ${out} )`;
+			else
+				out = ` ${factory}( ${node.tag}, { ${out} )`;
 
 			return out;
 		}

package/src/misc.jsx

@@ -311,33 +311,40 @@ export const forwardRef = (render)=>
  *
  * @returns A promise that is resolved when the user clicks on screen and its value will be the component if any.
  */
-export function getComponentByPointer()
+export function getComponentUnderPointer()
 {
-	let resolve_func;
+  let resolve_func;
 
-	const pr = new Promise( (res, rej)=> {
-		resolve_func = res;
-	});
+  const pr = new Promise( (res, rej)=> {
+    resolve_func = res;
+  });
 
-	function click_handler(event) {
+  const overlay = document.createElement('div');
+  overlay.style.cssText =
+    'position:fixed;inset:0;z-index:2147483647;cursor:crosshair;background:transparent;';
+  document.body.appendChild(overlay);
 
-		event.stopImmediatePropagation();
-		window.removeEventListener('click', click_handler, true);
+  function click_handler(event) {
 
-		let t = event.target;
+    event.stopImmediatePropagation();
+    window.removeEventListener('click', click_handler, true);
 
-		while( !t[COMPONENT] && t.parentNode ) {
-			t = t.parentNode;
-		}
+    overlay.style.display = 'none';
+    let t = document.elementFromPoint(event.clientX, event.clientY);
+    overlay.remove();
 
-		resolve_func( t[COMPONENT] );
+    while( !t[COMPONENT] && t.parentNode ) {
+      t = t.parentNode;
+    }
 
-		return false;
-	}
+    resolve_func( t[COMPONENT] );
+
+    return false;
+  }
 
-	window.addEventListener('click', click_handler, true);
+  window.addEventListener('click', click_handler, true);
 
-	return pr;
+  return pr;
 }
 
 

package/src/run.jsx

@@ -355,6 +355,7 @@ export function run(
 			appendSourcemap: true,
 			injectTraceLabels: true,
 			produceCJS: true,
+			addLocationProp: true,
 			blocksInfo: Lilact.blocksInfo,
 		});
 	} catch (value) {

package/src/symbols.jsx

@@ -30,6 +30,8 @@
 
 
 export const [ 	
+				LOCATION,
+
 				CORE,
 				COMPONENT,
 				TEXT,
@@ -44,9 +46,11 @@ export const [
 				CLEARED,
 				INTERVAL,
 				CALLBACK,
-				ARGS 
+				ARGS
 			] = 
 			[
+				Symbol.for('LILACT:LOCATION'),
+				
 				Symbol.for('LILACT:CORE'),
 				Symbol.for('LILACT:COMPONENT'),
 				Symbol.for('LILACT:TEXT'),

package/docs/functions/components.hotReloadRoot.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>hotReloadRoot | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/components.html">components</a></li><li><a href="" aria-current="page">hotReloadRoot</a></li></ul><h1>Function hotReloadRoot</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="hotreloadroot"><span class="tsd-kind-call-signature">hotReloadRoot</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">rootCore</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">nextEntity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><a href="#hotreloadroot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">rootCore</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-kind-parameter">nextEntity</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-type">any</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><ul><li>Defined in components.jsx:1429</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>