lilact 0.29.3 → 0.30.1

package/package.json

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

package/src/components.jsx

@@ -39,47 +39,134 @@ 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];
+const componentInstances = new Map();
 
-  if (!core || typeof nextEntity !== "function") {
-    return;
-  }
+function registerComponentCore(core) {
+	const entity = getComponentEntity(core.entity);
 
-  const oldEntity = getComponentEntity(core.entity);
-  const newEntity = getComponentEntity(nextEntity);
+	if (typeof entity !== "function") return;
 
-  if (oldEntity === newEntity) {
-    return;
-  }
+	let instances = componentInstances.get(entity);
 
-  const oldIsClass = isClass(oldEntity);
-  const newIsClass = isClass(newEntity);
+	if (!instances) {
+		instances = new Set();
+		componentInstances.set(entity, instances);
+	}
 
-  // 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;
-  }
+	instances.add(core);
+	core.registered_entity = entity;
+}
 
-  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);
-  }
+function unregisterComponentCore(core) {
+	const entity = core.registered_entity;
+	if (!entity) return;
+
+	const instances = componentInstances.get(entity);
+
+	if (instances) {
+		instances.delete(core);
 
-  core.entity = newEntity;
-  return true;
+		if (instances.size === 0) {
+			componentInstances.delete(entity);
+		}
+	}
+
+	delete core.registered_entity;
 }
 
+function moveComponentCore(core, oldEntity, newEntity) {
+	const oldInstances = componentInstances.get(oldEntity);
+
+	if (oldInstances) {
+		oldInstances.delete(core);
+
+		if (oldInstances.size === 0) {
+			componentInstances.delete(oldEntity);
+		}
+	}
+
+	let newInstances = componentInstances.get(newEntity);
+
+	if (!newInstances) {
+		newInstances = new Set();
+		componentInstances.set(newEntity, newInstances);
+	}
+
+	newInstances.add(core);
+	core.registered_entity = newEntity;
+}
+
+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;
+	}
+
+	if (
+		typeof oldEntity !== "function" ||
+		typeof newEntity !== "function" ||
+		isClass(oldEntity) !== isClass(newEntity)
+	) {
+		return false;
+	}
+
+	if (isClass(newEntity)) {
+		Object.setPrototypeOf(component, newEntity.prototype);
+	} else {
+		component.render = newEntity.bind(component);
+	}
+
+	componentCore.entity = newEntity;
+	moveComponentCore(componentCore, oldEntity, newEntity);
+
+	return true;
+}
+
+export function replaceAllComponentInstances(oldEntity, newEntity) {
+	oldEntity = getComponentEntity(oldEntity);
+	newEntity = getComponentEntity(newEntity);
+
+	if (
+		typeof oldEntity !== "function" ||
+		typeof newEntity !== "function"
+	) {
+		return 0;
+	}
+
+	const instances = componentInstances.get(oldEntity);
+
+	if (!instances) {
+		return 0;
+	}
+
+	let count = 0;
+
+	for (const core of [...instances]) {
+		if (!replaceComponentEntity(core, newEntity)) {
+			continue;
+		}
+
+		core.apply(core.props, core.state);
+		count++;
+	}
+
+	return count;
+}
 
 /* 
 ComponentCache is for internal use. It is the heart of the JSX runtime,
@@ -99,48 +186,48 @@ 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 !== typeof newEntity ||
+					(
+						typeof oldEntity === "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() 
@@ -393,7 +480,8 @@ class ComponentCore
 
 	async cleanup()
 	{
-		try {
+  		unregisterComponentCore(this);
+  		try {
 			const promises = [];
 			
 			if(this.props?.ref) {
@@ -794,8 +882,9 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 			}
 
 			comp[CORE].entity = entity;
+			registerComponentCore(comp[CORE]);
 
-			if(core.container) {
+			if (core.container) {
 				comp[CORE].container = core.container;
 			}
 		}
@@ -807,36 +896,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;
+		}
+	}
 }
 
 
@@ -1272,6 +1362,7 @@ export function createRoot(element)
 	let root;
 
 	return {
+
 		render(component) {
 			if(!root) {
 				root = new RootComponent( element, {children:[component]} );
@@ -1289,10 +1380,37 @@ export function createRoot(element)
 				root.cleanup();
 				element.innerHTML="";
 			}
+		},
+
+		getCore() {
+			console.log(root, root[CORE]);
+			return root[CORE];
 		}
 	}
 }
 
+
+
+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

@@ -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

@@ -245,76 +245,102 @@ export function require(path)
 
 
 function makeImportsObject(mod, options = {}) {
-  mod.importsObject = {};
+	mod.importsObject ??= {};
 
-  for (const path in mod.meta.imports) {
-    const imps = mod.meta.imports[path];
+	for (const key of Object.keys(mod.importsObject)) {
+		delete mod.importsObject[key];
+	}
 
-    const exps = loadModule(path, {
-      requirer: mod,
-      forceReload: options.forceReload,
-    });
+	for (const path in mod.meta.imports) {
+		const imps = mod.meta.imports[path];
 
-    for (const i in imps.named_imports) {
-      if (i === '') continue;
+		const exps = loadModule(path, {
+			requirer: mod,
+			forceReload: options.forceReload,
+		});
 
-      const exportedName = imps.named_imports[i];
+		for (const i in imps.named_imports) {
+			if (i === "") continue;
 
-      if (!Object.prototype.hasOwnProperty.call(exps, exportedName)) {
-        throw new Error(
-          `Imported module does not export any "${i}".`
-        );
-      }
+			const exportedName = imps.named_imports[i];
 
-      mod.importsObject[i] = exps[exportedName];
-    }
+			if (!Object.prototype.hasOwnProperty.call(exps, exportedName)) {
+				throw new Error(
+				`Imported module does not export any "${i}".`
+			);
+			}
 
-    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[exportedName];
+		}
 
-      mod.importsObject[i] = exps.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."
+				);
+			}
 
-    for (const i of imps.import_stars) {
-      mod.importsObject[i] = { ...exps };
-    }
-  }
+			mod.importsObject[i] = exps.default;
+		}
+
+		for (const i of imps.import_stars) {
+			mod.importsObject[i] = { ...exps };
+		}
+	}
+
+	return mod.importsObject;
+}
+
+
+function exportEntries(value) {
+	return value && typeof value === "object"
+			? value
+			: { default: value };
+}
+
+function replaceReloadedExports(previousExports, nextExports) {
+	if (!previousExports) return;
+
+	const oldExports = exportEntries(previousExports);
+	const newExports = exportEntries(nextExports);
+
+	for (const name of Object.keys(oldExports)) {
+		const oldExport = oldExports[name];
+		const newExport = newExports[name];
+
+		if (
+			typeof oldExport === "function" &&
+			typeof newExport === "function"
+		) {
+			Lilact.replaceAllComponentInstances(oldExport, newExport);
+		}
+	}
 }
 
 
 export function run(
-  jsx,
-  path = `InlineJSX-${++Lilact.eval_num}`,
-  options = {}
+	jsx,
+	path = `InlineJSX-${++Lilact.eval_num}`,
+	options = {}
 ) {
 	let module = required_scripts[path];
 
-	/*
-	* A module may already have been created by require() while its source is
-	* being fetched. Reuse that module so the request and its exports remain
-	* associated with the same entry.
-	*/
+	const previousExports =
+	module?.loaded
+	? module.exports
+	: undefined;
+
 	if (!module) {
 		module = createModule(path, {
 			code: jsx,
 		});
 	} else {
-		/*
-		* Preserve module.request. It may represent the request that led to this
-		* run() call, and clearing it here would make retry/deduplication logic
-		* fragile.
-		*/
 		module.path = path;
 		module.code = String(jsx);
 		module.mappings = [];
 		module.exports = {};
 		module.loaded = false;
 		module.error = undefined;
-		module.importsObject = undefined;
 		module.meta = {};
 	}
 
@@ -328,18 +354,19 @@ export function run(
 			factory: "createComponent",
 			appendSourcemap: true,
 			injectTraceLabels: true,
-			produceCJS: false,
-			referentiateImports: true,
+			produceCJS: true,
 			blocksInfo: Lilact.blocksInfo,
 		});
-	} 
-	catch (value) {
+	} catch (value) {
 		const error = asError(value);
+
 		error.fileName ??= path;
-		error.lilact_source ??= {path};
+		error.lilact_source ??= { path };
 		error.sourcePhase = "transpile";
+
 		module.error = error;
 		Lilact.error = error;
+
 		throw error;
 	}
 
@@ -347,28 +374,28 @@ export function run(
 		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.
-	*/
-
 	try {
 		globalThis.Lilact = Lilact;
 		globalThis.createComponent = Lilact.createComponent;
 		globalThis.Fragment = Lilact.Fragment;
 
-		makeImportsObject(module, options);
-
-		Lilact.scriptImportsObject = module.importsObject;
 		const result = eval(processed);
+
 		module.loaded = true;
 
-		return isEmpty(module.exports) ? result : module.exports;
-	} 
-	catch (value) {
+		const nextExports = isEmpty(module.exports)
+		? result
+		: module.exports;
+
+		replaceReloadedExports(previousExports, nextExports);
+
+		return nextExports;
+	} catch (value) {
 		const error = report(value, path);
+
 		error.sourcePhase ??= "runtime";
 		module.error = error;
+
 		throw error;
 	}
 }