lilact 0.29.2 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.29.2",
+  "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

@@ -37,6 +37,53 @@ import { PropTypes } from './proptypes.jsx';
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
+
+function getComponentEntity(entity) {
+	return entity?.[MEMOIZED]
+	? entity.component
+	: entity;
+}
+
+export function replaceComponentEntity(componentCore, nextEntity) {
+	if (!componentCore || typeof nextEntity !== "function") {
+		return false;
+	}
+
+	const oldEntity = getComponentEntity(componentCore.entity);
+	const newEntity = getComponentEntity(nextEntity);
+
+	if (oldEntity === newEntity) {
+		return true;
+	}
+
+	const component = componentCore.component;
+
+	if (!component) {
+		return false;
+	}
+
+	const oldIsClass = isClass(oldEntity);
+	const newIsClass = isClass(newEntity);
+
+  // A function component cannot reuse a class instance, and vice versa.
+	if (oldIsClass !== newIsClass) {
+		return false;
+	}
+
+	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;
+}
+
+
 /* 
 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.
@@ -54,42 +101,47 @@ class ComponentCache
 		this.owner = owner;
 	}
 
-	pick(key, construct_func)
-	{
-		let comp;
-		let buck = this.current_map.get(key);
+	pick(key, construct_func, nextEntity) {
+		let componentCore;
+		let bucket = this.current_map.get(key);
 
-		if(buck && buck.length>buck[IDX]) {
-			comp = buck[buck[IDX]];
-			buck[IDX]++;
+		if (bucket && bucket.length > bucket[IDX]) {
+			componentCore = bucket[bucket[IDX]];
+			bucket[IDX]++;
 
-			buck = this.new_map.get(key);
-			if(buck!==undefined) {
-				buck.push( comp );
-			}
-			else {
-				buck = [ comp ];
-				this.new_map.set(key, buck);
-				buck[IDX]=0;
+			const oldEntity = getComponentEntity(componentCore.entity);
+			const newEntity = getComponentEntity(nextEntity);
+
+			const incompatible =
+				typeof oldEntity === "function" &&
+				typeof newEntity === "function" &&
+				isClass(oldEntity) !== isClass(newEntity);
+
+			if (incompatible) {
+				componentCore = construct_func();
+			} 
+			else if (newEntity) {
+				replaceComponentEntity(componentCore, newEntity);
 			}
+		} else {
+			componentCore = construct_func();
 		}
-		else {
-			comp = construct_func();
 
-			buck = this.new_map.get(key);
-			if(buck!==undefined) {
-				buck.push( comp );
-			}
-			else {
-				buck = [ comp ];
-				this.new_map.set(key, buck);
-				buck[IDX]=0;
-			}
+		bucket = this.new_map.get(key);
 
-			if(comp[CORE]) comp[CORE].parent ??= this.owner;
+		if (bucket) {
+			bucket.push(componentCore);
+		} else {
+			bucket = [componentCore];
+			this.new_map.set(key, bucket);
+			bucket[IDX] = 0;
 		}
 
-		return comp;
+		if (componentCore) {
+			componentCore.parent ??= this.owner;
+		}
+
+		return componentCore;
 	}
 
 	commit() 
@@ -756,22 +808,36 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 	return comp;
 }
 
-
-function prepareCore(parent, core)
-{
+function prepareCore(parent, core) {
 	try {
 		parent.cache ??= new ComponentCache(parent);
-		core =  parent.cache.pick( 	core[TEXT]===undefined?core?.props?.key:':text:', 
-									()=>(  (core[TEXT]!==undefined || core instanceof ComponentCore) ?   
-											 core : constructFunc(core, parent)[CORE]  ) 
-								);
-		return core;
-	}
-	catch(e) {
-		if(core?.component?.componentDidCatch) {
+
+		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;
 		}
-		else throw(e);
 	}
 }
 
@@ -1229,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

@@ -172,11 +172,11 @@ function loadModule(path, options = {}) {
   if (loadAsync) {
     Lilact[LAZY] = false;
 
-    if (module.request) {
-      return module.request;
-    }
+	if (module.request && !options.forceReload) {
+	  return module.request;
+	}
 
-    return loadAsyncResource(path, module);
+	return loadAsyncResource(path, module, options);
   }
 
   const resolved = Lilact.resolver?.(path);
@@ -244,58 +244,52 @@ export function require(path)
 }
 
 
-function makeImportsObject(mod)
-{
-	mod.importsObject = {};
+function makeImportsObject(mod, options = {}) {
+  mod.importsObject = {};
 
-	for (const path in mod.meta.imports) {
-		const imps = mod.meta.imports[path];
+  for (const path in mod.meta.imports) {
+    const imps = mod.meta.imports[path];
 
-/*
- * Do not use require() here. loadModule() resolves and loads the
- * dependency, then evaluates it directly through run().
- */
-		const exps = loadModule(path, {
-			requirer: mod,
-		});
+    const exps = loadModule(path, {
+      requirer: mod,
+      forceReload: options.forceReload,
+    });
 
-		for (const i in imps.named_imports) {
-			if (i === '') continue;
+    for (const i in imps.named_imports) {
+      if (i === '') continue;
 
-			const exportedName = imps.named_imports[i];
+      const exportedName = imps.named_imports[i];
 
-			if (!Object.prototype.hasOwnProperty.call(exps, exportedName)) {
-				throw new Error(
-				`Imported module does not export any "${i}".`
-			);
-			}
+      if (!Object.prototype.hasOwnProperty.call(exps, exportedName)) {
+        throw new Error(
+          `Imported module does not export any "${i}".`
+        );
+      }
 
-			mod.importsObject[i] = exps[exportedName];
-		}
+      mod.importsObject[i] = exps[exportedName];
+    }
 
-		for (const i of imps.import_defaults) {
-			if (!Object.prototype.hasOwnProperty.call(exps, 'default')) {
-				throw new Error(
-				`Imported module does not export a default.`
-			);
-			}
+    for (const i of imps.import_defaults) {
+      if (!Object.prototype.hasOwnProperty.call(exps, 'default')) {
+        throw new Error(
+          `Imported module does not export a default.`
+        );
+      }
 
-			mod.importsObject[i] = exps.default;
-		}
+      mod.importsObject[i] = exps.default;
+    }
 
-		for (const i of imps.import_stars) {
-			mod.importsObject[i] = {...exps};
-		}
-	}
+    for (const i of imps.import_stars) {
+      mod.importsObject[i] = { ...exps };
+    }
+  }
 }
 
-// ERROR IS FOUND WHEN run IS CALLED, AND NOT REQUIRE.
-// REQUIRE REWRITES MODULE ANYWAY. THAT IS ALSO A PROBLEM.
 
 export function run(
-	jsx,
-	path = `InlineJSX-${++Lilact.eval_num}`,
-	{} = {}
+  jsx,
+  path = `InlineJSX-${++Lilact.eval_num}`,
+  options = {}
 ) {
 	let module = required_scripts[path];
 
@@ -320,7 +314,6 @@ export function run(
 		module.exports = {};
 		module.loaded = false;
 		module.error = undefined;
-		module.importsObject = undefined;
 		module.meta = {};
 	}
 
@@ -334,8 +327,7 @@ export function run(
 			factory: "createComponent",
 			appendSourcemap: true,
 			injectTraceLabels: true,
-			produceCJS: false,
-			referentiateImports: true,
+			produceCJS: true,
 			blocksInfo: Lilact.blocksInfo,
 		});
 	} 
@@ -363,9 +355,6 @@ export function run(
 		globalThis.createComponent = Lilact.createComponent;
 		globalThis.Fragment = Lilact.Fragment;
 
-		makeImportsObject(module);
-
-		Lilact.scriptImportsObject = module.importsObject;
 		const result = eval(processed);
 		module.loaded = true;
 
@@ -383,7 +372,8 @@ function getOrCreateModule(path, options = {}) {
 	return required_scripts[path] || createModule(path, options);
 }
 
-function loadAsyncResource(path, module) {
+function loadAsyncResource(path, module, options = {}) 
+{
 	let source;
 
 	try {
@@ -429,7 +419,7 @@ function loadAsyncResource(path, module) {
 				return undefined;
 			}
 
-			return run(module.code, path, {});
+			return run(module.code, path, options);
 		})
 		.then(result => result?.default ?? result)
 		.catch(error => {