lilact 0.30.1 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "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';
@@ -38,10 +38,30 @@ import { PropTypes } from './proptypes.jsx';
 const SVG_NS = "http://www.w3.org/2000/svg";
 
 
+
 function getComponentEntity(entity) {
 	return entity?.[MEMOIZED] ? entity.component : entity;
 }
 
+const hotEntityAliases = new Map();
+
+function resolveHotEntity(entity) {
+	entity = getComponentEntity(entity);
+
+	const visited = new Set();
+
+	while (
+		typeof entity === "function" &&
+		hotEntityAliases.has(entity) &&
+		!visited.has(entity)
+	) {
+		visited.add(entity);
+		entity = hotEntityAliases.get(entity);
+	}
+
+	return entity;
+}
+
 const componentInstances = new Map();
 
 function registerComponentCore(core) {
@@ -105,7 +125,7 @@ export function replaceComponentEntity(componentCore, nextEntity) {
 	}
 
 	const oldEntity = getComponentEntity(componentCore.entity);
-	const newEntity = getComponentEntity(nextEntity);
+	const newEntity = resolveHotEntity(nextEntity);
 
 	if (oldEntity === newEntity) {
 		return true;
@@ -148,6 +168,16 @@ export function replaceAllComponentInstances(oldEntity, newEntity) {
 		return 0;
 	}
 
+	newEntity = resolveHotEntity(newEntity);
+
+	if (oldEntity === newEntity) {
+		return 0;
+	}
+
+  // Keep this alias even when there are currently no instances.
+  // A future instance may still be created with oldEntity.
+	hotEntityAliases.set(oldEntity, newEntity);
+
 	const instances = componentInstances.get(oldEntity);
 
 	if (!instances) {
@@ -168,6 +198,7 @@ export function replaceAllComponentInstances(oldEntity, newEntity) {
 	return count;
 }
 
+
 /* 
 ComponentCache is for internal use. It is the heart of the JSX runtime,
 it holds child components and detects which one is being rendered or updated.
@@ -194,19 +225,18 @@ class ComponentCache
 			bucket[IDX]++;
 
 			const oldEntity = getComponentEntity(componentCore.entity);
-			const newEntity = getComponentEntity(nextEntity);
+			const newEntity = resolveHotEntity(nextEntity);
 
 			const incompatible =
-					typeof oldEntity !== typeof newEntity ||
-					(
-						typeof oldEntity === "function" &&
-						isClass(oldEntity) !== isClass(newEntity)
-					);
-			
+			typeof oldEntity !== typeof newEntity ||
+			(
+				typeof oldEntity === "function" &&
+				isClass(oldEntity) !== isClass(newEntity)
+			);
+
 			if (incompatible) {
 				componentCore = construct_func();
-			} 
-			else if (newEntity) {
+			} else if (newEntity) {
 				replaceComponentEntity(componentCore, newEntity);
 			}
 		} else {
@@ -810,92 +840,105 @@ const renderErrorHandler = (c, e) =>
 
 
 
-function constructFunc(core, parent) // returns {text} or component, and not component core.
-{
+function constructFunc(core, parent) {
 	let comp = core;
 
-	if( core[TEXT]!==undefined ) {
-		// do nothing...
-	}
-	else {
+	if (core[TEXT] === undefined) {
 		let entity = core.entity;
 		let memoized = false;
 
-		if(typeof(entity)==='object') {
-			if( entity[MEMOIZED] )  {
+		const loc = core.props[LOCATION];
+		if(loc) delete core.props[LOCATION];
+
+		if (typeof entity === "object") {
+			if (entity[MEMOIZED]) {
 				memoized = entity[MEMOIZED];
 				entity = entity.component;
-			}
-			else {
+			} else {
 				throw new Error("Invalid component.");
 			}
 		}
 
-		if(typeof(entity)==='string') {
-			comp = new HTMLComponent(entity, core.props);
-		}
-		else {
-
-			if( isClass(entity) ) {
-				if(entity?.defaultProps) {
-					core.props = { ...entity.defaultProps, ...core.props };
-				}
-
-				comp = new entity(core.props);
+		entity = resolveHotEntity(entity);
 
-				const desc = Object.getOwnPropertyDescriptor(comp, "state");
-				if(desc) {
-					if (typeof desc.get !== "function" && typeof desc.set !== "function") {
-						comp[CORE].state = comp.state;
+		if (typeof entity === "string") {
+			comp = new HTMLComponent(entity, core.props);
+		} 
+		else if (isClass(entity)) {
+			if (entity?.defaultProps) {
+				core.props = {
+					...entity.defaultProps,
+					...core.props,
+				};
+			}
 
-						Object.defineProperty(comp, "state", {
-							get() { return this[CORE].state },
-							set(v) { 
-								// todo: this should be changed, it should be only directly settable in constructor.
-								if(this[CORE].state===undefined) {
-									this[CORE].state = v;
-								}
-								else {
-									throw new Error('Assigning component state this way is not allowed.');
-								}
+			comp = new entity(core.props);
+
+			const desc = Object.getOwnPropertyDescriptor(comp, "state");
+
+			if (desc) {
+				if (
+					typeof desc.get !== "function" &&
+					typeof desc.set !== "function"
+				) {
+					comp[CORE].state = comp.state;
+
+					Object.defineProperty(comp, "state", {
+						get() {
+							return this[CORE].state;
+						},
+						set(value) {
+							if (this[CORE].state === undefined) {
+								this[CORE].state = value;
+							} else {
+								throw new Error(
+									"Assigning component state this way is not allowed."
+								);
 							}
-						});
-					}
+						},
+					});
 				}
 			}
-			else if(typeof(entity)==='function') {
+		} 
+		else if (typeof entity === "function") {
+			if (entity?.defaultProps) {
+				core.props = {
+					...entity.defaultProps,
+					...core.props,
+				};
+			}
 
-				if(entity?.defaultProps) {
-					core.props = { ...entity.defaultProps, ...core.props };
-				}
+			comp = new Component(core.props);
+			comp.render = entity.bind(comp);
+			comp[CORE].hooks = [];
+			comp[CORE].hook_index = 0;
+		}
+		else {
+			throw new Error("Error in constructing component.");
+		}
 
-				comp = new Component(core.props);
+		if(loc) comp[CORE].location = loc;
 
-				// the binding is not necessary and is not according to the specs, 
-				// probably not even recommended! but helpful.
-				comp.render = entity.bind(comp); 
-				comp[CORE].hooks = [];
-				comp[CORE].hook_index = 0;
-			}
-			else {
-				throw new Error("Error in constructing component.");
-			}
+		comp[CORE].entity = entity;
+		registerComponentCore(comp[CORE]);
 
-			comp[CORE].entity = entity;
-			registerComponentCore(comp[CORE]);
+		if (core.container) {
+			comp[CORE].container = core.container;
+		}
 
-			if (core.container) {
-				comp[CORE].container = core.container;
-			}
+		if (memoized) {
+			comp[CORE][MEMOIZED] = true;
 		}
+	}
 
-		if(memoized) comp[CORE][MEMOIZED] = true;
+	if (parent instanceof ComponentCore) {
+		comp[CORE].parent = parent;
 	}
 
-	if(parent instanceof ComponentCore) comp[CORE].parent = parent;
 	return comp;
 }
 
+
 function prepareCore(parent, core) {
 	try {
 		parent.cache ??= new ComponentCache(parent);
@@ -903,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,
@@ -920,10 +962,12 @@ function prepareCore(parent, core) {
 			),
 			entity
 		);
-	} catch (e) {
+	}
+	catch (e) {
 		if (core?.component?.componentDidCatch) {
 			core.component.componentDidCatch(e);
-		} else {
+		}
+		else {
 			throw e;
 		}
 	}
@@ -1383,7 +1427,6 @@ export function createRoot(element)
 		},
 
 		getCore() {
-			console.log(root, root[CORE]);
 			return root[CORE];
 		}
 	}
@@ -1391,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/lilact.jsx

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

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:1394</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>