lilact 0.30.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.30.0",
+  "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,9 +39,64 @@ const SVG_NS = "http://www.w3.org/2000/svg";
 
 
 function getComponentEntity(entity) {
-	return entity?.[MEMOIZED]
-	? entity.component
-	: entity;
+	return entity?.[MEMOIZED] ? entity.component : entity;
+}
+
+const componentInstances = new Map();
+
+function registerComponentCore(core) {
+	const entity = getComponentEntity(core.entity);
+
+	if (typeof entity !== "function") return;
+
+	let instances = componentInstances.get(entity);
+
+	if (!instances) {
+		instances = new Set();
+		componentInstances.set(entity, instances);
+	}
+
+	instances.add(core);
+	core.registered_entity = entity;
+}
+
+function unregisterComponentCore(core) {
+	const entity = core.registered_entity;
+	if (!entity) return;
+
+	const instances = componentInstances.get(entity);
+
+	if (instances) {
+		instances.delete(core);
+
+		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) {
@@ -62,27 +117,56 @@ export function replaceComponentEntity(componentCore, nextEntity) {
 		return false;
 	}
 
-	const oldIsClass = isClass(oldEntity);
-	const newIsClass = isClass(newEntity);
-
-  // A function component cannot reuse a class instance, and vice versa.
-	if (oldIsClass !== newIsClass) {
+	if (
+		typeof oldEntity !== "function" ||
+		typeof newEntity !== "function" ||
+		isClass(oldEntity) !== isClass(newEntity)
+	) {
 		return false;
 	}
 
-	if (newIsClass) {
-    // componentCore.state and the component instance are preserved.
-    // Only the class implementation changes.
+	if (isClass(newEntity)) {
 		Object.setPrototypeOf(component, newEntity.prototype);
 	} else {
-    // The function is invoked with the ComponentCore as `this` by apply().
-		component.render = newEntity;
+		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,
@@ -113,10 +197,12 @@ class ComponentCache
 			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) {
 				componentCore = construct_func();
 			} 
@@ -394,7 +480,8 @@ class ComponentCore
 
 	async cleanup()
 	{
-		try {
+  		unregisterComponentCore(this);
+  		try {
 			const promises = [];
 			
 			if(this.props?.ref) {
@@ -795,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;
 			}
 		}
@@ -1274,6 +1362,7 @@ export function createRoot(element)
 	let root;
 
 	return {
+
 		render(component) {
 			if(!root) {
 				root = new RootComponent( element, {children:[component]} );
@@ -1291,6 +1380,11 @@ export function createRoot(element)
 				root.cleanup();
 				element.innerHTML="";
 			}
+		},
+
+		getCore() {
+			console.log(root, root[CORE]);
+			return root[CORE];
 		}
 	}
 }
@@ -1299,7 +1393,7 @@ export function createRoot(element)
 
 export function hotReloadRoot(rootCore, nextEntity, props) {
   if (!rootCore || !rootCore.component) {
-    throw new Error("Invalid Lilact root component.");
+    throw new Error("Invalid root component.");
   }
 
   const replaced = replaceComponentEntity(rootCore, nextEntity);
@@ -1310,7 +1404,7 @@ export function hotReloadRoot(rootCore, nextEntity, props) {
     );
   }
 
-  rootCore.apply(props === undefined ? rootCore.props : props);
+  rootCore.apply(props === undefined ? rootCore.props : {...rootCore.props, ...props});
 
   return rootCore;
 }

package/src/run.jsx

@@ -245,69 +245,96 @@ 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 = [];
@@ -330,14 +357,16 @@ export function run(
 			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;
 	}
 
@@ -345,25 +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;
 
 		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;
 	}
 }