lilact 0.17.0 → 0.19.0

package/src/components.jsx

@@ -97,7 +97,7 @@ class ComponentCache
 				if(ex.cleanup) {
 					ex.cleanup();
 				}
-				else if(ex.element) {
+				else if(ex.element && !ex.portal) {
 					ex.element.parentElement.removeChild(ex.element);
 				}
 			});
@@ -162,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) {
@@ -205,7 +209,6 @@ if(DEBUG) {
 				this.element[COMPONENT] = this.component;
 			}
 
-
 			if(next_props.ref) {
 				if(typeof(next_props.ref)==='function') {
 					next_props.ref(this.element || this.component);
@@ -262,6 +265,12 @@ if(DEBUG) {
 				}
 			}
 
+
+			if( this?.portal ) {
+				this.element = this.portal;
+			}
+
+
 			if(this.outlet?.constructor?.name!=='Array') {
 				this.outlet = [this.outlet];
 			}
@@ -308,13 +317,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;
+		}
 
 	}
 
@@ -336,7 +346,7 @@ if(DEBUG) {
 				this.component.componentWillUnmount();
 			}
 
-			if(this?.element?.parentElement) {
+			if(this?.element?.parentElement && !this.portal) {
 				this.element.parentElement.removeChild( this.element );
 			}
 
@@ -533,6 +543,8 @@ if(DEBUG) {
 
 	appendElement(core)
 	{
+		if(core.portal) return;
+
 		this.scanZombies(core.container, core.element);
 
 		if(core?.element.parentNode===null) {
@@ -635,17 +647,30 @@ 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') {
+			if( entity[MEMOIZED] )  {
+				memoized = entity[MEMOIZED];
+				entity = entity.component;
+			}
+			else {
+				throw new Error("Invalid component.");
+			}
+		}
+
+		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) {
@@ -667,35 +692,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;
 }
 
@@ -1089,8 +1114,12 @@ export class RootComponent extends HTMLComponent
 
 export function createComponent(entity, props={}, ...children)
 {
-	if(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++) {
@@ -1114,8 +1143,6 @@ export function createComponent(entity, props={}, ...children)
 		}
 	}
 
-	//if(entity===null) return children; // <> style fragment
-
 	props.key = generateComponentKey(entity, props);
 	props.children = children;
 
@@ -1162,6 +1189,27 @@ export function createRoot(element)
 	}
 }
 
+/**
+ * Creates a portal — a way to render children into a DOM node
+ * that exists outside the current component hierarchy.
+ * 
+ * Note: In React, events from portals propagate according to the React tree rather 
+ * than the DOM tree. For example, if you click inside a portal, and the portal is 
+ * wrapped in `<div onClick>`, that onClick handler will fire. Lilact doesn't act
+ * this way. In Lilact, event propagation follows DOM tree, while the ownership
+ * follow the JSX structure.
+ *
+ * @param {Component} children - The component(s) to render into the portal.
+ * @param {Element} element - The DOM node that will receive the portal content.
+ * @returns {Component} A portal object that can be rendered.
+ */
+
+export function createPortal(children, element)
+{
+	return <Lilact.Portal view={element}>{children}</Lilact.Portal>;
+}
+
+
 /**
  * Renders a component into a target DOM element.
  * If the component maintains internal state, this typically mounts it (or updates the existing tree) under `element`.
@@ -1181,6 +1229,26 @@ 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)
+{
+	if(typeof(component)==='object') {
+		component[MEMOIZED] = true;
+	}
+	else {
+		component = { component, [MEMOIZED]: true };
+	}
+	return component;
+}
+
 
 /** @ignore */
 export const createElement = createComponent;

package/src/hooks.jsx

@@ -269,7 +269,8 @@ export function useRef(initialValue = null)
  * Runs an effect synchronously after all DOM mutations but before the browser paints.
  *
  * @param {Function} effect - Effect callback.
- * @param deps - Optional dependency list (or an object for shallow comparison) used to determine when to re-run the effect.
+ * @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)
@@ -299,7 +300,8 @@ export function useLayoutEffect(effect, deps=undefined)
  * Runs a side effect after render commits.
  *
  * @param effect - Callback invoked.
- * @param deps - Optional dependency list (or an object for shallow comparison) used to determine when to re-run the effect.
+ * @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)
@@ -330,7 +332,8 @@ export function useEffect(effect, deps=undefined)
  * 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.
+ * @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)
@@ -361,7 +364,8 @@ export function useInsertionEffect(effect, deps=undefined)
  * Memoizes a computed value until dependencies change.
  *
  * @param {Function} factory - Function that creates the value.
- * @param deps - Optional dependency list (or an object for shallow comparison) used to determine when to re-run the effect.
+ * @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)
@@ -525,8 +529,8 @@ 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.
+ * 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.

package/src/lilact.jsx

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

package/src/misc.jsx

@@ -95,9 +95,26 @@ export const findDOMNode = (component)=>{
  *
  * @param children - The nodes to group without adding an extra DOM element.
  */
-export const Fragment = function ({children}) { return children };
+export function Fragment({children}) 
+{
+	return children;
+};
 Fragment.displayName = "Fragment";
 
+/**
+ * Portal helper/utility.
+ *
+ * @param view - The DOM node that will receive the portal content.
+ * @param children - The nodes to put in the portal element.
+ */
+export function Portal({children, view}) 
+{
+	this[CORE].portal = view;
+
+	return children;
+};
+Portal.displayName = "Portal";
+
 /**
  * Children namespace for utilities that operate on `props.children`. `Children` is deprecated
  * and not recommended by React documentation itself. But `only` and `toArray` are used 
@@ -220,9 +237,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;
 	}
@@ -231,9 +249,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();
 	}