lilact 0.30.0 → 0.31.0

package/package.json

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

package/src/components.jsx

@@ -38,10 +38,85 @@ import { PropTypes } from './proptypes.jsx';
 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 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) {
+	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) {
@@ -50,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;
@@ -62,27 +137,67 @@ 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;
+	}
+
+	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) {
+		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,
@@ -110,17 +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" &&
-				typeof newEntity === "function" &&
-				isClass(oldEntity) !== isClass(newEntity);
+				isClass(oldEntity) !== isClass(newEntity)
+			);
 
 			if (incompatible) {
 				componentCore = construct_func();
-			} 
-			else if (newEntity) {
+			} else if (newEntity) {
 				replaceComponentEntity(componentCore, newEntity);
 			}
 		} else {
@@ -394,7 +510,8 @@ class ComponentCore
 
 	async cleanup()
 	{
-		try {
+  		unregisterComponentCore(this);
+  		try {
 			const promises = [];
 			
 			if(this.props?.ref) {
@@ -723,91 +840,97 @@ 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] )  {
+		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') {
-
-				if(entity?.defaultProps) {
-					core.props = { ...entity.defaultProps, ...core.props };
-				}
+		} else if (typeof entity === "function") {
+			if (entity?.defaultProps) {
+				core.props = {
+					...entity.defaultProps,
+					...core.props,
+				};
+			}
 
-				comp = new Component(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.");
+		}
 
-				// 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;
+		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);
@@ -1274,6 +1397,7 @@ export function createRoot(element)
 	let root;
 
 	return {
+
 		render(component) {
 			if(!root) {
 				root = new RootComponent( element, {children:[component]} );
@@ -1291,6 +1415,11 @@ export function createRoot(element)
 				root.cleanup();
 				element.innerHTML="";
 			}
+		},
+
+		getCore() {
+			console.log(root, root[CORE]);
+			return root[CORE];
 		}
 	}
 }
@@ -1299,7 +1428,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 +1439,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/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

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