lilact 0.29.3 → 0.30.0

package/package.json

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

package/src/components.jsx

@@ -39,45 +39,48 @@ const SVG_NS = "http://www.w3.org/2000/svg";
 
 
 function getComponentEntity(entity) {
-  return entity?.[MEMOIZED]
-    ? entity.component
-    : entity;
+	return entity?.[MEMOIZED]
+	? entity.component
+	: entity;
 }
 
-function replaceComponentEntity(comp, nextEntity) {
-  const core = comp?.[CORE];
+export function replaceComponentEntity(componentCore, nextEntity) {
+	if (!componentCore || typeof nextEntity !== "function") {
+		return false;
+	}
 
-  if (!core || typeof nextEntity !== "function") {
-    return;
-  }
+	const oldEntity = getComponentEntity(componentCore.entity);
+	const newEntity = getComponentEntity(nextEntity);
 
-  const oldEntity = getComponentEntity(core.entity);
-  const newEntity = getComponentEntity(nextEntity);
+	if (oldEntity === newEntity) {
+		return true;
+	}
 
-  if (oldEntity === newEntity) {
-    return;
-  }
+	const component = componentCore.component;
 
-  const oldIsClass = isClass(oldEntity);
-  const newIsClass = isClass(newEntity);
+	if (!component) {
+		return false;
+	}
 
-  // A function component and a class component have different instance
-  // semantics. Let the cache create a fresh instance in that case.
-  if (oldIsClass !== newIsClass) {
-    return false;
-  }
+	const oldIsClass = isClass(oldEntity);
+	const newIsClass = isClass(newEntity);
 
-  if (newIsClass) {
-    // Preserve the existing instance and state, but use the new class
-    // prototype and therefore the new render/lifecycle methods.
-    Object.setPrototypeOf(comp, newEntity.prototype);
-  } else {
-    // Preserve hooks and state, but replace the function implementation.
-    comp.render = newEntity.bind(comp);
-  }
+  // A function component cannot reuse a class instance, and vice versa.
+	if (oldIsClass !== newIsClass) {
+		return false;
+	}
 
-  core.entity = newEntity;
-  return true;
+	if (newIsClass) {
+    // componentCore.state and the component instance are preserved.
+    // Only the class implementation changes.
+		Object.setPrototypeOf(component, newEntity.prototype);
+	} else {
+    // The function is invoked with the ComponentCore as `this` by apply().
+		component.render = newEntity;
+	}
+
+	componentCore.entity = newEntity;
+	return true;
 }
 
 
@@ -99,48 +102,46 @@ class ComponentCache
 	}
 
 	pick(key, construct_func, nextEntity) {
-		let comp;
+		let componentCore;
 		let bucket = this.current_map.get(key);
-		const reusable =
-		bucket && bucket.length > bucket[IDX];
 
-		if (reusable) {
-			comp = bucket[bucket[IDX]];
+		if (bucket && bucket.length > bucket[IDX]) {
+			componentCore = bucket[bucket[IDX]];
 			bucket[IDX]++;
 
-			const oldEntity = getComponentEntity(comp?.[CORE]?.entity);
+			const oldEntity = getComponentEntity(componentCore.entity);
 			const newEntity = getComponentEntity(nextEntity);
 
 			const incompatible =
-			typeof oldEntity === "function" &&
-			typeof newEntity === "function" &&
-			isClass(oldEntity) !== isClass(newEntity);
+				typeof oldEntity === "function" &&
+				typeof newEntity === "function" &&
+				isClass(oldEntity) !== isClass(newEntity);
 
 			if (incompatible) {
-	      	// Do not reuse a class instance as a function component or vice versa.
-				comp = construct_func();
-			} else {
-				replaceComponentEntity(comp, nextEntity);
+				componentCore = construct_func();
+			} 
+			else if (newEntity) {
+				replaceComponentEntity(componentCore, newEntity);
 			}
 		} else {
-			comp = construct_func();
+			componentCore = construct_func();
 		}
 
 		bucket = this.new_map.get(key);
 
-		if (bucket !== undefined) {
-			bucket.push(comp);
+		if (bucket) {
+			bucket.push(componentCore);
 		} else {
-			bucket = [comp];
+			bucket = [componentCore];
 			this.new_map.set(key, bucket);
 			bucket[IDX] = 0;
 		}
 
-		if (comp[CORE]) {
-			comp[CORE].parent ??= this.owner;
+		if (componentCore) {
+			componentCore.parent ??= this.owner;
 		}
 
-		return comp;
+		return componentCore;
 	}
 
 	commit() 
@@ -807,36 +808,37 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 	return comp;
 }
 
-
 function prepareCore(parent, core) {
-  try {
-    parent.cache ??= new ComponentCache(parent);
-
-    const isText = core[TEXT] !== undefined;
-    const key = isText
-      ? ':text:'
-      : core.props?.key;
-
-    const entity = isText || core instanceof ComponentCore
-      ? undefined
-      : core.entity;
-
-    return parent.cache.pick(
-      key,
-      () => (
-        isText || core instanceof ComponentCore
-          ? core
-          : constructFunc(core, parent)[CORE]
-      ),
-      entity
-    );
-  } catch (e) {
-    if (core?.component?.componentDidCatch) {
-      core.component.componentDidCatch(e);
-    } else {
-      throw e;
-    }
-  }
+	try {
+		parent.cache ??= new ComponentCache(parent);
+
+		const isText = core[TEXT] !== undefined;
+
+		const key = isText
+		? ':text:'
+		: core.props?.key;
+
+		const entity =
+		isText || core instanceof ComponentCore
+		? undefined
+		: core.entity;
+
+		return parent.cache.pick(
+			key,
+			() => (
+				isText || core instanceof ComponentCore
+				? core
+				: constructFunc(core, parent)[CORE]
+			),
+			entity
+		);
+	} catch (e) {
+		if (core?.component?.componentDidCatch) {
+			core.component.componentDidCatch(e);
+		} else {
+			throw e;
+		}
+	}
 }
 
 
@@ -1293,6 +1295,28 @@ export function createRoot(element)
 	}
 }
 
+
+
+export function hotReloadRoot(rootCore, nextEntity, props) {
+  if (!rootCore || !rootCore.component) {
+    throw new Error("Invalid Lilact 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 : 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

@@ -981,9 +981,6 @@ export function transpileJSX( jsx, {
 		injectTraceLabels = false,
 		discardComments = false,
 		produceCJS = false,
-		referentiateImports = false,
-		importsObject = "Lilact.scriptImportsObject", // first letter must be capital so components work as expected
-		importsObjectVar = "LilactImports", // first letter must be capital so components work as expected
 		logErrors = false,
 
 		// lilact internal
@@ -1086,41 +1083,26 @@ export function transpileJSX( jsx, {
 
 	const codify = (outlen, node, is_attr=false, is_xml=false)=> {
 
-		flattened_nodes.push(node);
 
-		if(typeof(node)!=='object') {
-			if(referentiateImports && typeof(node)==='string') {
-				if(meta?.imported_names.has(node)) {
-					let j = flattened_nodes.length-2;
-					while( (typeof(flattened_nodes[j])==='string' && flattened_nodes[j].trim()==='') ||
-									(typeof(flattened_nodes[j])==='object' && flattened_nodes[j].type==='comment') ) j--;
+		flattened_nodes.push(node);
 
-					if( typeof(flattened_nodes[j])!=='string' || flattened_nodes[j]!==".") {
-						return importsObjectVar+"."+node;
-					}
-				}
-			}
-			return node;
-		}
-		if(node===null) return '';
+		if(typeof(node)!=='object') return node;
+		if(!node) return '';
 
 		node.out_index = outlen;
 
-		//console.log("CODIFY", node, node.out_index);
-
 		if(node.type==='string') return jsx.substring(node.begin, node.end);
-		if(node.type==='import') return referentiateImports?'':node.cjs;
+		if(node.type==='import') return node.cjs;
 		if(node.type==='export') return node.cjs;
 		if(node.type==='regex') return jsx.substring(node.begin, node.end);
 		if(node.type==='comment') return (discardComments || is_attr)?'':jsx.substring(node.begin, node.end);
 		if(node.type==='directive') return node.value;
 
-
 		if(node.type==='parenthesis') {
 			let out = "(";
 
 			if(node.out) {
-				if(produceCJS || referentiateImports) processImportExports(node, jsx, meta);
+				if(produceCJS) processImportExports(node, jsx, meta);
 				for(const ch of node.out) {
 					out+=codify(outlen+out.length-1, ch);
 				}
@@ -1132,7 +1114,7 @@ export function transpileJSX( jsx, {
 			let out = "";
 
 			if(node.out) {
-				if(produceCJS || referentiateImports) processImportExports(node, jsx, meta);
+				if(produceCJS) processImportExports(node, jsx, meta);
 				for(const ch of node.out) {
 					if(is_xml && ch.type==='comment') continue;
 					out+=codify( outlen + out.length - (is_attr?1:0), ch);
@@ -1153,10 +1135,6 @@ export function transpileJSX( jsx, {
 
 		if(node.type==='xml') {
 			
-			if(referentiateImports && meta?.imported_names?.has(node.tag) && node.tag[0]===node.tag[0].toUpperCase()) {
-				node.tag=importsObjectVar+"."+node.tag;
-			}
-
 			if(node.tag.length===0) {
 				node.tag = fragment;
 			}
@@ -1207,9 +1185,6 @@ export function transpileJSX( jsx, {
 	if(injectTraceLabels) {
 		out=`/*LILACTBLOCK${++blocksInfo.counter}:0,0:<EXEC>*/try{`
 	}
-	if(referentiateImports) {
-		out+=`const ${importsObjectVar} = ${importsObject};`;
-	}
 	out+=codify(out.length, json);
 
 	if(injectTraceLabels) {
@@ -1225,7 +1200,7 @@ export function transpileJSX( jsx, {
 	if(appendSourcemap) {
 		out += inline_sm;
 	}
-	//console.log(out);
+	// console.log(out);
 
 	return out;
 }

package/src/lilact.jsx

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

package/src/run.jsx

@@ -314,7 +314,6 @@ export function run(
 		module.exports = {};
 		module.loaded = false;
 		module.error = undefined;
-		module.importsObject = undefined;
 		module.meta = {};
 	}
 
@@ -328,8 +327,7 @@ export function run(
 			factory: "createComponent",
 			appendSourcemap: true,
 			injectTraceLabels: true,
-			produceCJS: false,
-			referentiateImports: true,
+			produceCJS: true,
 			blocksInfo: Lilact.blocksInfo,
 		});
 	} 
@@ -357,9 +355,6 @@ export function run(
 		globalThis.createComponent = Lilact.createComponent;
 		globalThis.Fragment = Lilact.Fragment;
 
-		makeImportsObject(module, options);
-
-		Lilact.scriptImportsObject = module.importsObject;
 		const result = eval(processed);
 		module.loaded = true;