lilact 0.16.3 → 0.18.0

package/src/components.jsx

@@ -94,7 +94,12 @@ class ComponentCache
 	{
 		this.current_map.forEach( (arr)=>{
 			arr.slice(arr[IDX]).forEach((ex)=>{
-				if(ex.cleanup) ex.cleanup();
+				if(ex.cleanup) {
+					ex.cleanup();
+				}
+				else if(ex.element) {
+					ex.element.parentElement.removeChild(ex.element);
+				}
 			});
 		});
 
@@ -157,19 +162,23 @@ class ComponentCore
 	}
 
 	/*
-		//let do_rerender = true;
-
-		// if(this.outlet && this.entity[MEMOIZED]) {
-		// 	if(shallowEqual(this.props, next_props)) do_rerender=false;
-		// 	delete this.entity[MEMOIZED];
-		// }
-
-		if(do_rerender) {
 	*/
 	// TODO: should componentDidUpdate be called after arranging/appending the outlet or before?
 	apply(next_props = this.props, next_state = this.next_state || this.state)
 	{
 
+		let do_rerender = true;
+
+		if(this.outlet && this?.[MEMOIZED]) {
+
+			if( shallowEqual(this.props, next_props, "children") && 
+				shallowEqual(this.props?.children, next_props?.children) ) {
+					do_rerender=false;
+			}
+		}
+
+		if(do_rerender) {
+
 if(DEBUG) {
 
 			if(this.entity?.propTypes) {
@@ -303,13 +312,14 @@ if(DEBUG) {
 			if(this.cache) this.cache.commit();
 
 
-		if(this.element) this.arrangeOutlet();
+			if(this.element) this.arrangeOutlet();
 
-		if(this.component.componentDidUpdate) {
-			this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
-		}
+			if(this.component.componentDidUpdate) {
+				this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
+			}
 
-		if(this.last_snapshot) delete this.last_snapshot;
+			if(this.last_snapshot) delete this.last_snapshot;
+		}
 
 	}
 
@@ -630,17 +640,25 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 		// do nothing...
 	}
 	else {
-		if(typeof(core.entity)==='string') {
-			comp = new HTMLComponent(core.entity, core.props);
+		let entity = core.entity;
+		let memoized = false;
+
+		if(typeof(entity)==='object' && entity[MEMOIZED]) {
+			memoized = true;
+			entity = entity[MEMOIZED];
+		}
+
+		if(typeof(entity)==='string') {
+			comp = new HTMLComponent(entity, core.props);
 		}
 		else {
 
-			if( isClass(core.entity) ) {
-				if(core.entity?.defaultProps) {
-					core.props = { ...core.entity.defaultProps, ...core.props };
+			if( isClass(entity) ) {
+				if(entity?.defaultProps) {
+					core.props = { ...entity.defaultProps, ...core.props };
 				}
 
-				comp = new core.entity(core.props);
+				comp = new entity(core.props);
 
 				const desc = Object.getOwnPropertyDescriptor(comp, "state");
 				if(desc) {
@@ -662,35 +680,35 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 					}
 				}
 			}
-			else if(typeof(core.entity)==='function') {
+			else if(typeof(entity)==='function') {
 
-				if(core.entity?.defaultProps) {
-					core.props = { ...core.entity.defaultProps, ...core.props };
+				if(entity?.defaultProps) {
+					core.props = { ...entity.defaultProps, ...core.props };
 				}
 
 				comp = new Component(core.props);
 
 				// the binding is not necessary and is not according to the specs, 
 				// probably not even recommended! but helpful.
-				comp.render = core.entity.bind(comp); 
+				comp.render = entity.bind(comp); 
 				comp[CORE].hooks = [];
 				comp[CORE].hook_index = 0;
 			}
 			else {
-				throw new Error("Invalid entity for createComponent.");
+				throw new Error("Error in constructing component.");
 			}
 
-			comp[CORE].entity = core.entity;
+			comp[CORE].entity = entity;
 
 			if(core.container) {
 				comp[CORE].container = core.container;
 			}
 		}
 
+		if(memoized) comp[CORE][MEMOIZED] = true;
 	}
 
 	if(parent instanceof ComponentCore) comp[CORE].parent = parent;
-
 	return comp;
 }
 
@@ -716,23 +734,58 @@ function prepareCore(parent, core)
 
 function doUpdates()
 {
-	requestAnimationFrame(()=>{
-		let _layout_effects = Lilact.layout_effects;
-		let _update_cbs = Lilact.update_cbs;
-		let _update_set = Lilact.update_set;
+	/*
+	Priority:
 
-		Lilact.layout_effects = new Set;
-		Lilact.update_cbs = new Set;
-		Lilact.update_set = new Set;
+	- Render + enqueue DOM work (runs in the same task where you schedule the update).
+	- Apply DOM updates (do this synchronously before you schedule any effects that must happen before paint).
+	- Insertion effects (run immediately after DOM is in place, still before paint).
+	- Layout effects (run immediately after insertion effects, still before paint).
+	- Passive effects (useEffect)
 
-		for(const le of _layout_effects) le();
+    schedule them for after paint using requestAnimationFrame, typically:
+        run the “after paint” work in the next frame or in a callback scheduled such that it runs after the browser has performed the paint.
+
+
+	Current task: render → DOM updates → insertion effects → layout effects
+	Next paint timing boundary: requestAnimationFrame callback → passive effects (useEffect)
+	*/
+
+
+	clearTimeout(Lilact.effect_timeout);
+
+	const _update_set = Lilact.update_set;
+	const _update_cbs = Lilact.update_cbs;
+	Lilact.update_set = new Set;
+	Lilact.update_cbs = new Set;
+
+	for(const u of _update_set)  u.apply();
+	for(const cb of _update_cbs)  cb();
+	processEffects();
 
-		for(const u of _update_set)  u.apply();
-		for(const cb of _update_cbs) cb();
-	});
 }
 
 
+/** @ignore */
+export function processEffects()
+{
+	const _insertion_effects = Lilact.insertion_effects;
+	const _layout_effects = Lilact.layout_effects;
+	const _passive_effects = Lilact.passive_effects;
+
+	Lilact.insertion_effects = new Set;
+	Lilact.layout_effects = new Set;
+	Lilact.passive_effects = new Set;
+
+	for(const ie of _insertion_effects) ie();
+	for(const le of _layout_effects) le();
+
+	requestAnimationFrame(()=>{
+		for(const pe of _passive_effects) pe();
+	});
+
+}
+
 function decode(html) 
 {
 	decode.parser ??= new DOMParser;
@@ -1049,8 +1102,12 @@ export class RootComponent extends HTMLComponent
 
 export function createComponent(entity, props={}, ...children)
 {
-	if(entity!==undefined && typeof(entity)!=='string' && typeof(entity)!=='function') {
-		throw new Error("Invalid entity for createComponent.");		
+
+	if (typeof(entity)!=='string' && typeof(entity)!=='function' )
+	{
+		if(typeof(entity)!=='object' || !entity[MEMOIZED]) {
+			throw new Error("Invalid entity for createComponent.");		
+		}
 	}
 
 	for(let i=0; i<children.length; i++) {
@@ -1141,6 +1198,21 @@ export function render(component, element)
 	return createRoot(element).render(component);
 }
 
+/**
+ * Memoizes the given component. The memoized component will only rerender if its props or children are modified.
+ * Unlike React, Lilact memo also works on class components.
+ * 
+ * @param {Object} component - Component instance to render.
+ *
+ * @returns {component} - Memoized component.
+ */
+
+export function memo(component)
+{
+	return { [MEMOIZED]: component }
+}
+
+
 /** @ignore */
 export const createElement = createComponent;
 
@@ -1155,6 +1227,18 @@ export let update_cbs  = new Set;
 export let roots  = new Set;
 /** @ignore */
 export let layout_effects = new Set;
+/** @ignore */
+export let insertion_effects = new Set;
+/** @ignore */
+export let passive_effects = new Set;
+
+
+/** @ignore */
+export let update_timeout = undefined;
+/** @ignore */
+export let effect_timeout = undefined;
+/** @ignore */
+export let update_interval_margin = 0;
 
 /** @ignore */
 export const special_attributes = new Set([
@@ -1201,3 +1285,5 @@ export const length_css_attributes_set = new Set([
 export const boolean_html_attributes_set = new 
 	Set(["disabled", "readOnly", "required", "checked", "multiple",
 			 "hidden","open","loop","muted","controls","playsInline","allowFullScreen"]);
+
+

package/src/hooks.jsx

@@ -182,12 +182,12 @@ export function useTransition()
 
 		(async function(core, hk, fn) {
 
-			hk.count++;
-
-			if(hk.count===1) {
+			if(hk.count===0) {
 				core.component.forceUpdate();
 			}
 
+			hk.count++;
+
 			await fn();
 
 			hk.count--;
@@ -269,13 +269,14 @@ export function useRef(initialValue = null)
  * Runs an effect synchronously after all DOM mutations but before the browser paints.
  *
  * @param {Function} effect - Effect callback.
- * @param {Array<any>} [deps] - Dependency list.
+ * @param {Array<any>} [deps] Optional dependency list (or an object for shallow comparison)
+ * 						used to determine when to re-run the effect.
  * @returns {void}
  */
 export function useLayoutEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw new Error("Layout effect dependencies must be an array or omitted.");
+		throw new Error("Layout effect dependencies must be an array, object or omitted.");
 	}
 
 	const hk = useHook();
@@ -290,20 +291,55 @@ export function useLayoutEffect(effect, deps=undefined)
 
 	hk.deps = deps;
 	Lilact.layout_effects.add( ()=>{ hk.cleanup = effect(); });
-	Lilact.current_component[0].component.forceUpdate();
+	
+	Lilact.clearTimeout( Lilact.effect_timeout );
+	Lilact.setTimeout( Lilact.processEffects, 0 );
 }
 
 /**
  * Runs a side effect after render commits.
  *
- * @param {Function} effect - Effect callback.
- * @param {Array<any>} [deps] - Dependency list.
+ * @param effect - Callback invoked.
+ * @param {Array<any>} [deps] Optional dependency list (or an object for shallow comparison)
+ * 						used to determine when to re-run the effect.
  * @returns {void}
  */
 export function useEffect(effect, deps=undefined)
 {
 	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
-		throw new Error("Effect dependencies must be an array or omitted.");
+		throw new Error("Effect dependencies must be an array, object or omitted.");
+	}
+
+	const hk = useHook();
+
+	if( !isEmpty(hk) ) {
+		if(deps!==undefined && hk?.deps!==undefined && shallowEqual(deps, hk.deps)) return;
+	}
+
+	if(hk?.cleanup) {
+		hk.cleanup();
+	}
+
+	hk.deps = deps;
+	Lilact.passive_effects.add( ()=>{ hk.cleanup = effect(); });
+
+	Lilact.clearTimeout( Lilact.effect_timeout );
+	Lilact.setTimeout( Lilact.processEffects, 0 );
+}
+
+
+/**
+ * Executes a side effect after the DOM updates have been committed.
+ *
+ * @param effect - Callback invoked after render commit.
+ * @param {Array<any>} [deps] Optional dependency list (or an object for shallow comparison)
+ * 						used to determine when to re-run the effect.
+ * @returns void
+ */
+export function useInsertionEffect(effect, deps=undefined)
+{
+	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
+		throw new Error("Insertion effect dependencies must be an array, object, or omitted.");
 	}
 
 	const hk = useHook();
@@ -317,15 +353,19 @@ export function useEffect(effect, deps=undefined)
 	}
 
 	hk.deps = deps;
-	Lilact.setTimeout( ()=>{ hk.cleanup = effect(); }, 0 );
+	Lilact.insertion_effects.add( ()=>{ hk.cleanup = effect(); });
 
+	Lilact.clearTimeout( Lilact.effect_timeout );
+	Lilact.setTimeout( Lilact.processEffects, 0 );
 }
 
+
 /**
  * Memoizes a computed value until dependencies change.
  *
  * @param {Function} factory - Function that creates the value.
- * @param {Array<any>} deps - Dependency list.
+ * @param {Array<any>} [deps] Optional dependency list (or an object for shallow comparison)
+ * 						used to determine when to recompute the value.
  * @returns {any} Memoized value.
  */
 export function useMemo(factory,deps=undefined)
@@ -487,3 +527,36 @@ export function useImperativeHandle(ref, factory, deps=undefined)
 
 }
 
+
+/**
+ * A hook for debug purposes. By default it only logs the output to console, but it can be overrided
+ * for the development environment.
+ *
+ * @param {any} val
+ *   The debug value.
+ * @param {function(): any} formatter
+ *   Function that creates a representation of the value.
+ * @returns {void}
+ */
+export function useDebugValue(val, formatter=(x)=>x)
+{
+	if(DEBUG) {	
+		console.log(formatter(val));
+	}
+}
+
+
+/**
+ * Schedule a state update as a low-priority transition.
+ *
+ * Updates triggered inside the transition callback are treated as lower priority than
+ * updates outside of it.
+ *
+ * @param transition - Function that performs the state updates for the transition.
+ * @returns void
+ */
+export function startTransition(transition)
+{
+	transition();
+}
+

package/src/lilact.jsx

@@ -92,7 +92,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.16",
+	VERSION: "beta.18",
 	
 	// Configuration
 

package/src/misc.jsx

@@ -54,10 +54,18 @@ const typeOf = (input) => {
  * @param value - Value to inspect.
  * @returns True if the value is a class component; otherwise false.
  */
-export const isValidElement = (value) => {
+export const isValidComponent = (value) => {
 	return value[CORE]!==undefined || value[TEXT]!==undefined;
 }
 
+/**
+ * Checks whether a value is a Lilact component. It is the same as `isValidComponent`.
+ *
+ * @param value - Value to inspect.
+ * @returns True if the value is a class component; otherwise false.
+ */
+export const isValidElement = isValidComponent
+
 /**
  * Utility to find the underlying DOM node for a mounted Lilact component.
  *
@@ -212,9 +220,10 @@ export function isEmpty(value)  {
  *
  * @param source - First object to compare.
  * @param target - Second object to compare.
+ * @param ignore - specific property/index to be ignored in comparison.
  * @returns True if shallowly equal; otherwise false.
  */
-export const shallowEqual = (source, target) => {
+export const shallowEqual = (source, target, ignore) => {
 	if (typeOf(source) !== typeOf(target)) {
 		return false;
 	}
@@ -223,9 +232,9 @@ export const shallowEqual = (source, target) => {
 		if (source.length !== target.length) {
 			return false;
 		}
-		return source.every((el, index) => el === target[index]);
+		return source.every((el, index) => el === target[index] || index===ignore );
 	} else if (typeOf(source) === "object") {
-		return Object.keys(source).every((key) => source[key] === target[key]);
+		return Object.keys(source).every((key) => source[key] === target[key] || key===ignore );
 	} else if (typeOf(source) === "date") {
 		return source.getTime() === target.getTime();
 	}
@@ -337,10 +346,6 @@ export function toBool(value) {
 
 // Internals
 
-/** @ignore */
-export let update_timeout = undefined;
-/** @ignore */
-export let update_interval_margin = 0;
 /** @ignore */
 export let id_num = Math.floor(Math.random()*10000);
 /** @ignore */