lilact 0.29.2 → 0.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.29.2",
+  "version": "0.29.3",
   "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,50 @@ import { PropTypes } from './proptypes.jsx';
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
+
+function getComponentEntity(entity) {
+  return entity?.[MEMOIZED]
+    ? entity.component
+    : entity;
+}
+
+function replaceComponentEntity(comp, nextEntity) {
+  const core = comp?.[CORE];
+
+  if (!core || typeof nextEntity !== "function") {
+    return;
+  }
+
+  const oldEntity = getComponentEntity(core.entity);
+  const newEntity = getComponentEntity(nextEntity);
+
+  if (oldEntity === newEntity) {
+    return;
+  }
+
+  const oldIsClass = isClass(oldEntity);
+  const newIsClass = isClass(newEntity);
+
+  // 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;
+  }
+
+  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);
+  }
+
+  core.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,39 +98,46 @@ class ComponentCache
 		this.owner = owner;
 	}
 
-	pick(key, construct_func)
-	{
+	pick(key, construct_func, nextEntity) {
 		let comp;
-		let buck = this.current_map.get(key);
-
-		if(buck && buck.length>buck[IDX]) {
-			comp = buck[buck[IDX]];
-			buck[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;
+		let bucket = this.current_map.get(key);
+		const reusable =
+		bucket && bucket.length > bucket[IDX];
+
+		if (reusable) {
+			comp = bucket[bucket[IDX]];
+			bucket[IDX]++;
+
+			const oldEntity = getComponentEntity(comp?.[CORE]?.entity);
+			const newEntity = getComponentEntity(nextEntity);
+
+			const incompatible =
+			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);
 			}
-		}
-		else {
+		} 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 (bucket !== undefined) {
+			bucket.push(comp);
+		} else {
+			bucket = [comp];
+			this.new_map.set(key, bucket);
+			bucket[IDX] = 0;
+		}
 
-			if(comp[CORE]) comp[CORE].parent ??= this.owner;
+		if (comp[CORE]) {
+			comp[CORE].parent ??= this.owner;
 		}
 
 		return comp;
@@ -757,22 +808,35 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 }
 
 
-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) {
-			core.component.componentDidCatch(e);
-		}
-		else throw(e);
-	}
+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;
+    }
+  }
 }
 
 

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];
 
@@ -363,7 +357,7 @@ export function run(
 		globalThis.createComponent = Lilact.createComponent;
 		globalThis.Fragment = Lilact.Fragment;
 
-		makeImportsObject(module);
+		makeImportsObject(module, options);
 
 		Lilact.scriptImportsObject = module.importsObject;
 		const result = eval(processed);
@@ -383,7 +377,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 +424,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 => {