lilact 0.17.0 → 0.18.0

package/src/components.jsx

@@ -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) {
@@ -308,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;
+		}
 
 	}
 
@@ -635,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) {
@@ -667,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;
 }
 
@@ -1089,8 +1102,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++) {
@@ -1181,6 +1198,20 @@ 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;

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.18",
 	
 	// Configuration
 

package/src/misc.jsx

@@ -220,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;
 	}
@@ -231,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();
 	}