lilact 0.18.0 → 0.20.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);
 				}
 			});
@@ -209,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);
@@ -266,6 +265,12 @@ if(DEBUG) {
 				}
 			}
 
+
+			if( this?.portal ) {
+				this.element = this.portal;
+			}
+
+
 			if(this.outlet?.constructor?.name!=='Array') {
 				this.outlet = [this.outlet];
 			}
@@ -341,7 +346,7 @@ if(DEBUG) {
 				this.component.componentWillUnmount();
 			}
 
-			if(this?.element?.parentElement) {
+			if(this?.element?.parentElement && !this.portal) {
 				this.element.parentElement.removeChild( this.element );
 			}
 
@@ -538,6 +543,8 @@ if(DEBUG) {
 
 	appendElement(core)
 	{
+		if(core.portal) return;
+
 		this.scanZombies(core.container, core.element);
 
 		if(core?.element.parentNode===null) {
@@ -643,9 +650,14 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 		let entity = core.entity;
 		let memoized = false;
 
-		if(typeof(entity)==='object' && entity[MEMOIZED]) {
-			memoized = true;
-			entity = entity[MEMOIZED];
+		if(typeof(entity)==='object') {
+			if( entity[MEMOIZED] )  {
+				memoized = entity[MEMOIZED];
+				entity = entity.component;
+			}
+			else {
+				throw new Error("Invalid component.");
+			}
 		}
 
 		if(typeof(entity)==='string') {
@@ -1131,8 +1143,6 @@ export function createComponent(entity, props={}, ...children)
 		}
 	}
 
-	//if(entity===null) return children; // <> style fragment
-
 	props.key = generateComponentKey(entity, props);
 	props.children = children;
 
@@ -1179,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`.
@@ -1209,7 +1240,13 @@ export function render(component, element)
 
 export function memo(component)
 {
-	return { [MEMOIZED]: component }
+	if(typeof(component)==='object') {
+		component[MEMOIZED] = true;
+	}
+	else {
+		component = { component, [MEMOIZED]: true };
+	}
+	return component;
 }
 
 

package/src/lilact.jsx

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

package/src/misc.jsx

@@ -95,59 +95,194 @@ 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";
 
 /**
- * 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 
- * extensively everywhere, so I included them.
- *
- * @property only - Filters to the single child (or returns null/throws based on count).
- * @property toArray - Converts children to a flat array.
- */
-export const Children = {
-	
-/**
- * Returns the only child from a children collection.
+ * Portal helper/utility.
  *
- * @param children - The children to read.
- * @returns The single child (or null/exception based on the number of children).
+ * @param view - The DOM node that will receive the portal content.
+ * @param children - The nodes to put in the portal element.
  */
-	only(children) {
-		children = [...children];
-		let i=0;
-		while(i<children.length) {
-			if(children[i]?.constructor?.name==='Array') {
-				children.splice(i, 1, ...children[i]);
-				i--;
-			}
-			else if(children[i]===null || children[i]===undefined) {
-				children.splice(i, 1);
-				i--;
-			}
-			if(i>1) {
-				throw new Error("No child or child is not the only one");
-			}
-			i++;
-		}
-		if(children.length===1) return children[0];
+export function Portal({children, view}) 
+{
+	this[CORE].portal = view;
 
-	},
+	return children;
+};
+Portal.displayName = "Portal";
 
 /**
- * Converts component children into a flat array.
+ * Children namespace for utilities that operate on `props.children`.
  *
- * @param children - The children to convert.
- * @returns An array representation of the children.
+ * - Flattens nested arrays recursively.
+ * - Omits `null` and `undefined` items (common React-like behavior).
  */
-	toArray(children) {
-		if(children) {
-			if(children?.constructor?.name==='Array') return [...children];
-			return [children];
-		}
-		return [];
-	}
+export const Children = {
+  /**
+   * @param {any} x
+   * @returns {boolean}
+   */
+  _isNil(x) {
+    return x === null || x === undefined;
+  },
+
+  /**
+   * Recursively flattens nested arrays into `out`, omitting null/undefined.
+   * @param {Array<any>} out
+   * @param {any} input
+   */
+  _flattenInto(out, input) {
+    if (this._isNil(input)) return;
+
+    if (Array.isArray(input)) {
+      for (const v of input) this._flattenInto(out, v);
+      return;
+    }
+
+    out.push(input);
+  },
+
+  /**
+   * Converts an iterable children collection into a flat array,
+   * omitting `null`/`undefined`.
+   *
+   * @param {Iterable<any>} children
+   * @returns {Array<any>}
+   */
+  toArray(children) {
+    const out = [];
+    // Per your rule, children is always iterable (often []), but keep it robust anyway.
+    if (!children) return out;
+
+    for (const item of children) {
+      this._flattenInto(out, item);
+    }
+    return out;
+  },
+
+  /**
+   * Returns the number of non-null/undefined children (after flattening).
+   * @param {Iterable<any>} children
+   * @returns {number}
+   */
+  count(children) {
+    return this.toArray(children).length;
+  },
+
+  /**
+   * Returns the single child from a children collection (after flattening & omitting nil),
+   * or throws if the remaining count is not exactly 1.
+   *
+   * @param {Iterable<any>} children
+   * @returns {any}
+   */
+  only(children) {
+    const arr = this.toArray(children);
+    if (arr.length !== 1) {
+      throw new Error(
+        arr.length === 0
+          ? "Expected exactly one child, but received none."
+          : "Expected exactly one child, but received more than one."
+      );
+    }
+    return arr[0];
+  },
+
+  /**
+   * Maps over children (after flattening & omitting nil).
+   *
+   * @param {Iterable<any>} children
+   * @param {(child:any, index:number)=>any} fn
+   * @returns {Array<any>}
+   */
+  map(children, fn) {
+    const arr = this.toArray(children);
+    const out = [];
+    for (let i = 0; i < arr.length; i++) out.push(fn(arr[i], i));
+    return out;
+  },
+
+  /**
+   * Iterates over children (after flattening & omitting nil).
+   * @param {Iterable<any>} children
+   * @param {(child:any, index:number)=>void} fn
+   */
+  forEach(children, fn) {
+    const arr = this.toArray(children);
+    for (let i = 0; i < arr.length; i++) fn(arr[i], i);
+  },
+
+  /**
+   * Finds the first child for which predicate returns true.
+   *
+   * @param {Iterable<any>} children
+   * @param {(child:any, index:number)=>boolean} predicate
+   * @returns {any|undefined}
+   */
+  find(children, predicate) {
+    const arr = this.toArray(children);
+    for (let i = 0; i < arr.length; i++) {
+      if (predicate(arr[i], i)) return arr[i];
+    }
+    return undefined;
+  },
+
+  /**
+   * Finds exactly one matching child.
+   * Throws if matched count is not exactly 1.
+   *
+   * @param {Iterable<any>} children
+   * @param {(child:any, index:number)=>boolean} predicate
+   * @returns {any}
+   */
+  pickOne(children, predicate) {
+    const arr = this.toArray(children);
+
+    let found;
+    let matches = 0;
+
+    for (let i = 0; i < arr.length; i++) {
+      if (predicate(arr[i], i)) {
+        matches++;
+        found = arr[i];
+        if (matches > 1) break;
+      }
+    }
+
+    if (matches !== 1) {
+      throw new Error(
+        matches === 0
+          ? "pickOne expected exactly one matching child, but matched none."
+          : "pickOne expected exactly one matching child, but matched multiple."
+      );
+    }
+
+    return found;
+  },
+
+  /**
+   * Returns the first non-nil child (after flattening), or undefined.
+   * @param {Iterable<any>} children
+   * @returns {any|undefined}
+   */
+  first(children) {
+    const arr = this.toArray(children);
+    return arr[0];
+  },
+
+  /**
+   * Returns the last non-nil child (after flattening), or undefined.
+   * @param {Iterable<any>} children
+   * @returns {any|undefined}
+   */
+  last(children) {
+    const arr = this.toArray(children);
+    return arr.length ? arr[arr.length - 1] : undefined;
+  }
 };