lilact 0.31.6 → 0.31.8

package/package.json

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

package/src/components.jsx

@@ -30,7 +30,7 @@
 
 import Lilact from './lilact.jsx';
 
-import { CORE, COMPONENT, TEXT, IS_ZOMBIE, IDX, CHILD_CLASS_ADDENDUM, MEMOIZED, LOCATION } from "./symbols.jsx"
+import { CORE, COMPONENT, TEXT, IS_ZOMBIE, IDX, CHILD_CLASS_ADDENDUM, MEMOIZED, LOCATION, CLONED_STYLE } from "./symbols.jsx"
 import { shallowEqual, toBool, isClass, isThenable } from "./misc.jsx";
 
 import { PropTypes } from './proptypes.jsx';
@@ -44,6 +44,26 @@ function getComponentEntity(entity) {
 }
 
 const hotEntityAliases = new Map();
+const hotEntityCacheTokens = new WeakMap();
+
+function getHotEntityCacheToken(entity) {
+	entity = getComponentEntity(entity);
+
+	if (typeof entity !== "function") {
+		return entity;
+	}
+
+	let token = hotEntityCacheTokens.get(entity);
+
+	if (!token) {
+		const resolved = resolveHotEntity(entity);
+		token = hotEntityCacheTokens.get(resolved) || {};
+		hotEntityCacheTokens.set(entity, token);
+		hotEntityCacheTokens.set(resolved, token);
+	}
+
+	return token;
+}
 
 function resolveHotEntity(entity) {
 	entity = getComponentEntity(entity);
@@ -127,6 +147,11 @@ export function replaceComponentEntity(componentCore, nextEntity) {
 	const oldEntity = getComponentEntity(componentCore.entity);
 	const newEntity = resolveHotEntity(nextEntity);
 
+	const cacheToken = hotEntityCacheTokens.get(oldEntity) || hotEntityCacheTokens.get(newEntity) || {};
+
+	hotEntityCacheTokens.set(oldEntity, cacheToken);
+	hotEntityCacheTokens.set(newEntity, cacheToken);
+
 	if (oldEntity === newEntity) {
 		return true;
 	}
@@ -157,7 +182,8 @@ export function replaceComponentEntity(componentCore, nextEntity) {
 	return true;
 }
 
-export function replaceAllComponentInstances(oldEntity, newEntity) {
+export function replaceAllComponentInstances(oldEntity, newEntity) 
+{
 	oldEntity = getComponentEntity(oldEntity);
 	newEntity = getComponentEntity(newEntity);
 
@@ -174,8 +200,11 @@ export function replaceAllComponentInstances(oldEntity, newEntity) {
 		return 0;
 	}
 
-  // Keep this alias even when there are currently no instances.
-  // A future instance may still be created with oldEntity.
+	const cacheToken = hotEntityCacheTokens.get(oldEntity) || hotEntityCacheTokens.get(newEntity) || {};
+
+	hotEntityCacheTokens.set(oldEntity, cacheToken);
+	hotEntityCacheTokens.set(newEntity, cacheToken);
+
 	hotEntityAliases.set(oldEntity, newEntity);
 
 	const instances = componentInstances.get(oldEntity);
@@ -199,6 +228,7 @@ export function replaceAllComponentInstances(oldEntity, newEntity) {
 }
 
 
+
 /* 
 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.
@@ -268,7 +298,7 @@ class ComponentCache
 					ex.cleanup();
 				}
 				else if(ex.element && !ex.portal) {
-					ex.element.parentElement.removeChild(ex.element);
+					ex.element.parentElement?.removeChild?.(ex.element);
 				}
 			});
 		});
@@ -351,20 +381,28 @@ class ComponentCore
 
 			if(do_rerender) {
 
-	if(DEBUG) {
-
-				if(this.entity?.propTypes) {
-					PropTypes.checkPropTypes(this.entity.propTypes, this.props, 'prop', this.entity.name);
-				}
-				else if(this.component?.propTypes) {
-					PropTypes.checkPropTypes(this.component.propTypes, this.props, 'prop', this.component.name);
+				if(DEBUG) {
+					if(this.entity?.propTypes) {
+						PropTypes.checkPropTypes( this.entity.propTypes, next_props, 'prop', this.entity.name );
+					}
+					else if(this.component?.propTypes) {
+						PropTypes.checkPropTypes( this.component.propTypes, next_props, 'prop', this.component.name );
+					}
 				}
 
-	}	
 				if(typeof(next_state)==='function') next_state = next_state(this.state);
 
-				if(this.component.constructor.defaultProps) {
-					next_props = {...this.component.constructor.defaultProps, ...next_props};
+				const defaultProps = this.entity?.defaultProps || this.component?.constructor?.defaultProps;
+
+				if (defaultProps) {
+					next_props = {
+						...defaultProps,
+						...(next_props || {}),
+					};
+				}
+
+				if(next_props?.style && typeof next_props.style === 'object' && !next_props.style[CLONED_STYLE]) {
+					next_props.style = { ...next_props.style, [CLONED_STYLE]: true };
 				}
 
 				if(this?.parent?.component?.context || this?.parent?.component?.getChildContext ) {
@@ -519,7 +557,7 @@ class ComponentCore
 					this.props.ref(null);
 				}
 				else {
-					this.props.current = null;
+					this.props.ref.current = null;
 				}
 			}
 
@@ -645,7 +683,7 @@ class ComponentCore
 							}
 							else {
 								for(let p in this.props.style) {
-									if( !patch.style.hasOwnProperty(p) ) {
+									if( p!==CLONED_STYLE && !patch.style.hasOwnProperty(p) ) {
 										this.element.style[p] = "";
 									}
 								}
@@ -671,7 +709,7 @@ class ComponentCore
 				else if(a==='autoFocus') { // not lower cased(al), as it is set as a js property
 					this.element['autofocus'] = toBool(patch[a]);
 				}
-				else if(a==='htmlFor') { // not lower cased(al), as it is set as a js property
+				else if(a==='htmlFor' || a==='for') { // not lower cased(al), as it is set as a js property
 					this.element.setAttribute('for', patch[a]);
 				}
 				else if(al!=='value' || ['input', 'textarea', 'select'].indexOf(this.entity)===-1) {
@@ -939,24 +977,43 @@ function constructFunc(core, parent) {
 }
 
 
-function prepareCore(parent, core) {
+function prepareCore(parent, core) 
+{
 	try {
 		parent.cache ??= new ComponentCache(parent);
 
 		const isText = core[TEXT] !== undefined;
+		const isExistingCore = core instanceof ComponentCore;
+
+		const entity = isText || isExistingCore
+		? undefined
+		: resolveHotEntity(core.entity);
 
-		const key = isText
-						? ':text:'
-						: core.props?.key;
+		const hasExplicitKey =
+		!isText &&
+		core.props &&
+		core.props.key !== undefined &&
+		core.props.key !== null;
 
-		const entity =	isText || core instanceof ComponentCore
-							? undefined
-							: core.entity;
+		let key;
+
+		if (isText) {
+			key = ':text:';
+		}
+		else if (hasExplicitKey) {
+			key = core.props.key;
+		}
+		else if (typeof entity === "function") {
+			key = getHotEntityCacheToken(entity);
+		}
+		else {
+			key = entity;
+		}
 
 		return parent.cache.pick(
 			key,
 			() => (
-				isText || core instanceof ComponentCore
+				isText || isExistingCore
 				? core
 				: constructFunc(core, parent)[CORE]
 			),
@@ -1352,7 +1409,6 @@ export class RootComponent extends HTMLComponent
 
 export function createComponent(entity, props={}, ...children)
 {
-
 	if (typeof(entity)!=='string' && typeof(entity)!=='function' )
 	{
 		if(typeof(entity)!=='object' || !entity[MEMOIZED]) {

package/src/hooks.jsx

@@ -85,7 +85,7 @@ export function useState(initialValue)
  * @param {Array<any>} deps - Dependency list.
  * @returns {Function} Memoized callback.
  */
-export function useCallback(callback, deps=undefined)
+export function useCallback(callback, deps)
 {
 	if(
 			deps !== undefined && !Array.isArray(deps) &&
@@ -270,7 +270,7 @@ export function useRef(initialValue = null)
  * 						used to determine when to re-run the effect.
  * @returns {void}
  */
-export async function useLayoutEffect(effect, deps=undefined)
+export async function useLayoutEffect(effect, deps)
 {
 	if(
 			deps !== undefined && !Array.isArray(deps) &&
@@ -306,7 +306,7 @@ export async function useLayoutEffect(effect, deps=undefined)
  * 						used to determine when to re-run the effect.
  * @returns {void}
  */
-export async function useEffect(effect, deps=undefined)
+export async function useEffect(effect, deps)
 {
 	if(
 			deps !== undefined && !Array.isArray(deps) &&
@@ -343,7 +343,7 @@ export async function useEffect(effect, deps=undefined)
  * 						used to determine when to re-run the effect.
  * @returns void
  */
-export async function useInsertionEffect(effect, deps=undefined)
+export async function useInsertionEffect(effect, deps)
 {
 	if(
 			deps !== undefined && !Array.isArray(deps) &&
@@ -380,7 +380,7 @@ export async function useInsertionEffect(effect, deps=undefined)
  * 						used to determine when to recompute the value.
  * @returns {any} Memoized value.
  */
-export function useMemo(factory,deps=undefined)
+export function useMemo(factory,deps)
 {
 	if(
 			deps !== undefined && !Array.isArray(deps) &&
@@ -427,8 +427,7 @@ export function useActionState(action, initialState)
 					async ()=> {
 						const form_data = new FormData(event.target, event.submitter);
 						hk.state = await action(hk.state, form_data);
-					},
-					[]
+					}
 				);
 
 			return false;
@@ -533,7 +532,7 @@ export function useDeferredValue(value, initialValue)
  *   Dependency list that controls when the exposed value is recalculated.
  * @returns {void}
  */
-export function useImperativeHandle(ref, factory, deps=undefined)
+export function useImperativeHandle(ref, factory, deps)
 {
 	if(deps!==undefined && ref?.deps!==undefined && shallowEqual(deps, ref.deps)) return;
 

package/src/run.jsx

@@ -107,6 +107,7 @@ function report(value, path) {
 	return error;
 }
 
+/** @ignore */
 export const required_scripts = {};
 
 function createModule(path, {
@@ -118,14 +119,8 @@ function createModule(path, {
 		mappings: [],
 		meta: {},
 		exports: {},
-
-		// True only after the module has been successfully evaluated.
 		loaded: false,
-
-		// The promise for the request currently loading this resource.
-		// This is deliberately stored on the module to deduplicate requests.
 		request: undefined,
-
 		error: undefined,
 	};
 
@@ -228,6 +223,23 @@ function loadModule(path, options = {}) {
 	);
 }
 
+
+/**
+ * Loads a module using Lilact's module loader.
+ *
+ * This function provides the runtime `require()` implementation used by
+ * transpiled Lilact modules.
+ *
+ * @param {string} path - Module path or URL to load.
+ * @param {object} [options] - Module-loading options.
+ * @param {{path: string}} [options.requirer] - Module that requested this
+ * resource.
+ * @param {boolean} [options.isLazy=false] - Forces asynchronous loading.
+ * @param {boolean} [options.forceReload=false] - Reloads the module even if
+ * it has already been evaluated.
+ * @returns {*} The module exports, or a Promise for asynchronous modules.
+ * @throws {Error} If the module cannot be loaded or evaluated.
+ */
 export function require(path) 
 {
 	let options = {};
@@ -318,6 +330,24 @@ function replaceReloadedExports(previousExports, nextExports) {
 }
 
 
+/**
+ * Transpiles and evaluates JSX source code as a Lilact module.
+ *
+ * The source is registered under the supplied path, transpiled with source
+ * mappings and runtime tracing enabled, evaluated in the global Lilact
+ * runtime, and returned as module exports. Reloaded component exports are
+ * compared with their previous versions to support hot loading.
+ *
+ * @param {string} jsx - JSX or JavaScript source code to evaluate.
+ * @param {string} [path=`InlineJSX-${Lilact.eval_num + 1}`] - Module path
+ * used for caching, diagnostics, and source mapping.
+ * @param {object} [options] - Evaluation options.
+ * @param {boolean} [options.forceReload=false] - Forces dependent resources
+ * to reload when they are required.
+ * @returns {*} The evaluated module exports.
+ * @throws {Error} If transpilation or runtime evaluation fails.
+ */
+
 export function run(
 	jsx,
 	path = `InlineJSX-${++Lilact.eval_num}`,
@@ -371,6 +401,7 @@ export function run(
 		throw error;
 	}
 
+	// console.log(processed)
 	if (typeof Lilact.scanBlockLabels === "function") {
 		Lilact.scanBlockLabels(processed, path);
 	}
@@ -473,6 +504,19 @@ function loadAsyncResource(path, module, options = {})
 	return request;
 }
 
+/**
+ * Creates a lazily evaluated component from a module or promise factory.
+ *
+ * The factory is executed while lazy-loading mode is enabled. The returned
+ * component suspends by throwing the pending promise until the factory
+ * resolves, or throws the loading error if the factory fails.
+ *
+ * @param {Function} factory - Function that returns a component, module,
+ * promise, or thenable resolving to a component or module.
+ * @returns {Function} A component that renders the resolved component.
+ * @throws {*} The pending promise or loading error while the component is
+ * unresolved.
+ */
 export function lazy(factory) 
 {
 	let status = "pending";
@@ -526,6 +570,18 @@ function scriptTags()
 	}));
 }
 
+/**
+ * Loads and evaluates every JSX script in the current document.
+ *
+ * External scripts are loaded through {@link require}. Inline scripts are
+ * evaluated directly through {@link run}. Scripts are processed in document
+ * order.
+ *
+ * @returns {Promise<void>} A promise that resolves after all scripts finish.
+ * @throws {Error} If an external or inline script cannot be loaded or
+ * evaluated.
+ */
+
 export async function runScripts() {
   for (const script of scriptTags()) {
     if (script.src) {

package/src/symbols.jsx

@@ -40,6 +40,7 @@ export const [
 				CHILD_CLASS_ADDENDUM,
 				MEMOIZED,
 				LAZY,
+				CLONED_STYLE,
 
 				DUE,
 				REPEAT,
@@ -59,6 +60,7 @@ export const [
 				Symbol.for('LILACT:CHILD_CLASS_ADDENDUM'),
 				Symbol.for('LILACT:MEMOIZED'),
 				Symbol.for('LILACT:LAZY'),
+				Symbol.for('LILACT:CLONED_STYLE'),
 
 				Symbol.for('LILACT:TIMERS:DUE'),
 				Symbol.for('LILACT:TIMERS:REPEAT'),

package/docs/variables/run.required_scripts.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>required_scripts | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/run.html">run</a></li><li><a href="" aria-current="page">required_scripts</a></li></ul><h1>Variable required_scripts<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">required_scripts</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{}</span><span class="tsd-signature-symbol"> = {}</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"></ul></div><aside class="tsd-sources"><ul><li>Defined in run.jsx:110</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>