lilact 0.16.3 → 0.17.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);
+				}
 			});
 		});
 
@@ -716,23 +721,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,7 +1089,7 @@ export class RootComponent extends HTMLComponent
 
 export function createComponent(entity, props={}, ...children)
 {
-	if(entity!==undefined && typeof(entity)!=='string' && typeof(entity)!=='function') {
+	if(typeof(entity)!=='string' && typeof(entity)!=='function') {
 		throw new Error("Invalid entity for createComponent.");		
 	}
 
@@ -1141,6 +1181,7 @@ export function render(component, element)
 	return createRoot(element).render(component);
 }
 
+
 /** @ignore */
 export const createElement = createComponent;
 
@@ -1155,6 +1196,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 +1254,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,13 @@ 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 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 +290,53 @@ 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 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 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 +350,18 @@ 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 deps - Optional dependency list (or an object for shallow comparison) used to determine when to re-run the effect.
  * @returns {any} Memoized value.
  */
 export function useMemo(factory,deps=undefined)
@@ -487,3 +523,36 @@ export function useImperativeHandle(ref, factory, deps=undefined)
 
 }
 
+
+/**
+ * A hook for debug purposes. At the moment it only logs the output, but it can be overrided
+ * for each 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.17",
 	
 	// 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.
  *
@@ -337,10 +345,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 */