lilact 0.29.1 → 0.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.29.1",
+  "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;
+    }
+  }
 }
 
 
@@ -1392,7 +1456,7 @@ export const events_set = new Set([
 	"onafterprint","onbeforeprint","onbeforeunload","onerror","onhashchange","onload","onmessage",
 	"onoffline","ononline","onpagehide","onpageshow","onpopstate","onresize","onstorage","onunload",
 	"onblur","onchange","oncontextmenu","onfocus","oninput","oninvalid","onreset","onsearch","onselect",
-	"onsubmit",
+	"onsubmit", "oncancel",
 	"onkeydown","onkeypress","onkeyup",
 	"onclick","ondblclick","onmousedown","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel",
 	"onwheel",

package/src/run.jsx

@@ -133,44 +133,163 @@ function createModule(path, {
 	return module;
 }
 
-function makeImportsObject(mod)
-{
-	mod.importsObject ??= {};
+function loadModule(path, options = {}) {
+  if (Lilact.importObjectPaths?.[path]) {
+    return Lilact.importObjectPaths[path];
+  }
 
-	for(const path in mod.meta.imports) {
-		let exps = required_scripts[path];
-		let imps = mod.meta.imports[path];
-		if(!exps) {
-			exps = Lilact.require(path, {requirer: mod});
-		}
+  if (options.requirer?.path) {
+    path = joinPaths(options.requirer.path, path);
+  }
 
-		for(const i in imps.named_imports) {
-			if(i==='') continue;
-			const j = imps.named_imports[i];
-			if(!exps.hasOwnProperty(j)) throw new Error(`Imported module does not export any "${i}".`);
-			mod.importsObject[i] = exps[j];
-		}
+  const loadAsync =
+    Boolean(Lilact[LAZY]) ||
+    Boolean(options.isLazy);
 
-		for(const i of imps.import_defaults) {
-			if(!exps.hasOwnProperty('default')) throw new Error(`Imported module does not export a default.`);
-			mod.importsObject[i] = exps.default;
-		}
+  const module = getOrCreateModule(path, {});
 
+  if (module.loaded && !options.forceReload) {
+    return module.exports;
+  }
 
-		for(const i of imps.import_stars) {
-			mod.importsObject[i] = {...exps};
-		}
+  if (path.startsWith("#")) {
+    const element = document.getElementById(path.slice(1));
+
+    if (!element) {
+      throw report(
+        new Error(`Required element not found (${path})`),
+        path
+      );
+    }
+
+    return run(
+      element.textContent || "",
+      path,
+      {forceReload: options.forceReload}
+    );
+  }
+
+  if (loadAsync) {
+    Lilact[LAZY] = false;
+
+	if (module.request && !options.forceReload) {
+	  return module.request;
 	}
+
+	return loadAsyncResource(path, module, options);
+  }
+
+  const resolved = Lilact.resolver?.(path);
+
+  if (resolved != null) {
+    if (path.endsWith(".css")) {
+      injectGlobal(String(resolved));
+      module.code = String(resolved);
+      module.loaded = true;
+      return undefined;
+    }
+
+    return run(
+      String(resolved),
+      path,
+      {forceReload: options.forceReload}
+    );
+  }
+
+  const request = new XMLHttpRequest();
+
+  try {
+    request.open("GET", path, false);
+    request.send(null);
+  } catch (value) {
+    throw report(value, path);
+  }
+
+  if (request.status >= 200 && request.status < 300) {
+    if (path.endsWith(".css")) {
+      module.code = request.responseText;
+      injectGlobal(module.code);
+      module.loaded = true;
+      return undefined;
+    }
+
+    return run(
+      request.responseText,
+      path,
+      {forceReload: true}
+    );
+  }
+
+  throw report(
+    new Error(
+      `Unable to load ${path}: HTTP ${request.status || 0}`
+    ),
+    path
+  );
 }
 
+export function require(path) 
+{
+  let options = {};
+
+  if (
+    arguments.length === 2 &&
+    arguments[1] &&
+    typeof arguments[1] === "object"
+  ) {
+    options = arguments[1];
+  }
+
+  return loadModule(path, options);
+}
+
+
+function makeImportsObject(mod, options = {}) {
+  mod.importsObject = {};
+
+  for (const path in mod.meta.imports) {
+    const imps = mod.meta.imports[path];
+
+    const exps = loadModule(path, {
+      requirer: mod,
+      forceReload: options.forceReload,
+    });
+
+    for (const i in imps.named_imports) {
+      if (i === '') continue;
+
+      const exportedName = imps.named_imports[i];
+
+      if (!Object.prototype.hasOwnProperty.call(exps, exportedName)) {
+        throw new Error(
+          `Imported module does not export any "${i}".`
+        );
+      }
+
+      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.`
+        );
+      }
+
+      mod.importsObject[i] = exps.default;
+    }
+
+    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];
 
@@ -238,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);
@@ -258,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 {
@@ -304,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 => {
@@ -325,108 +445,6 @@ function loadAsyncResource(path, module) {
 	return request;
 }
 
-export function require(path) {
-	let options = {};
-
-	if (
-		arguments.length === 2 &&
-		arguments[1] &&
-		typeof arguments[1] === "object"
-	) {
-		options = arguments[1];
-	}
-
-	if (Lilact.importObjectPaths?.[path]) {
-		return Lilact.importObjectPaths[path];
-	}
-
-	if (options?.requirer?.path) {
-		path = joinPaths(options.requirer.path, path);
-	}
-
-	const loadAsync =
-		Boolean(Lilact[LAZY]) ||
-		Boolean(options.isLazy);
-
-
-	const module = getOrCreateModule(path, {});
-
-	/*
-	* A completed module can be returned synchronously unless the caller
-	* explicitly requests lazy loading.
-	*/
-	if (module.loaded && !options.forceReload) {
-		return module.exports;
-	}
-
-	if (path.startsWith("#")) {
-		const element = document.getElementById(path.slice(1));
-
-		if (!element) {
-			throw report(
-				new Error(`Required element not found (${path})`),
-				path
-			);
-		}
-
-		return run(element.textContent || "", path, {forceReload: options.forceReload});
-	}
-
-	if (loadAsync) {
-		Lilact[LAZY] = false;
-
-		/*
-		* Every subsequent lazy require() receives the first request promise.
-		* This applies even when the module is still being fetched and even when
-		* the first caller used forceReload.
-		*/
-		if (module.request) {
-			return module.request;
-		}
-
-		return loadAsyncResource(path, module);
-	}
-
-	const resolved = Lilact.resolver?.(path);
-
-	if (resolved != null) {
-		if (path.endsWith(".css")) {
-			injectGlobal(String(resolved));
-			module.code = String(resolved);
-			module.loaded = true;
-			return undefined;
-		}
-
-		return run(String(resolved), path, {forceReload: options.forceReload});
-	}
-
-	const request = new XMLHttpRequest();
-
-	try {
-		request.open("GET", path, false);
-		request.send(null);
-	} catch (value) {
-		throw report(value, path);
-	}
-
-	if (request.status >= 200 && request.status < 300) {
-		if (path.endsWith(".css")) {
-			module.code = request.responseText;
-			injectGlobal(module.code);
-			module.loaded = true;
-			return undefined;
-		}
-
-		return run(request.responseText, path, {forceReload: true});
-	}
-
-	throw report(
-		new Error(
-			`Unable to load ${path}: HTTP ${request.status || 0}`
-		),
-		path
-	);
-}
 
 export function lazy(factory) {
 	let status = "pending";