canvasengine 2.0.0-beta.30 → 2.0.0-beta.31

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-C-iY-lCt.js";
-import { A as r, B as n, w as o, C as c, m as l, l as p, D as S, v as m, a5 as u, a4 as g, a2 as b, n as d, G as C, c as j, M as T, N as E, O, P as f, a3 as v, R as w, o as h, p as D, S as P, q as k, r as x, T as y, b as A, V as H, t as M, a1 as V, a0 as B, _ as G, d as N, J as R, H as q, K as U, e as z, W as I, $ as J, f as K, g as L, x as Q, j as W, i as X, y as Y, k as Z, X as _, I as $, Q as F, L as aa, Z as sa, z as ea, s as ta, U as ia, Y as ra, a as na, u as oa } from "./index-C-iY-lCt.js";
+import { h as a } from "./index-DNDNQN-q.js";
+import { A as r, B as n, w as o, C as c, m as l, l as p, D as S, v as m, a5 as u, a4 as g, a2 as b, n as d, G as C, c as j, M as T, N as E, O, P as f, a3 as v, R as w, o as h, p as D, S as P, q as k, r as x, T as y, b as A, V as H, t as M, a1 as V, a0 as B, _ as G, d as N, J as R, H as q, K as U, e as z, W as I, $ as J, f as K, g as L, x as Q, j as W, i as X, y as Y, k as Z, X as _, I as $, Q as F, L as aa, Z as sa, z as ea, s as ta, U as ia, Y as ra, a as na, u as oa } from "./index-DNDNQN-q.js";
 const e = a.Howler;
 export {
   r as ArraySubject,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.30",
+  "version": "2.0.0-beta.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/engine/reactive.ts

@@ -254,44 +254,116 @@ export function createComponent(tag: string, props?: Props): Element {
     }
   };
 
-  async function createElement(parent: Element, child: Element) {
+     /**
+    * Creates and mounts a child element to a parent element.
+    * Handles different types of children: Elements, Promises resolving to Elements, and Observables.
+    * 
+    * @description This function is designed to handle reactive child components that can be:
+    * - Direct Element instances
+    * - Promises that resolve to Elements (for async components)
+    * - Observables that emit Elements, arrays of Elements, or FlowObservable results
+    * - Nested observables within arrays or FlowObservable results (handled recursively)
+    * 
+    * For Observables, it subscribes to the stream and automatically mounts/unmounts elements
+    * as they are emitted. The function handles nested observables recursively, ensuring that
+    * observables within arrays or FlowObservable results are also properly subscribed to.
+    * All subscriptions are stored in the parent's effectSubscriptions for automatic cleanup.
+    * 
+    * @param {Element} parent - The parent element to mount the child to
+    * @param {Element | Observable<any> | Promise<Element>} child - The child to create and mount
+    * 
+    * @example
+    * ```typescript
+    * // Direct element
+    * await createElement(parent, childElement);
+    * 
+    * // Observable of elements (from cond, loop, etc.)
+    * await createElement(parent, cond(signal(visible), () => h(Container)));
+    * 
+    * // Observable that emits arrays containing other observables
+    * await createElement(parent, observableOfObservables);
+    * 
+    * // Promise resolving to element
+    * await createElement(parent, import('./MyComponent').then(mod => h(mod.default)));
+    * ```
+    */
+  async function createElement(parent: Element, child: Element | Observable<any> | Promise<Element>) {
     if (isPromise(child)) {
       child = await child;
     }
     if (child instanceof Observable) {
-      child.subscribe(
-        ({
-          elements: comp,
-          prev,
-        }: {
-          elements: Element[];
-          prev?: Element;
-        }) => {
-          // if prev, insert element after this
-          const components = comp.filter((c) => c !== null);
-          if (prev) {
-            components.forEach((c) => {
-              const index = parent.props.children.indexOf(prev.props.key);
-              onMount(parent, c, index + 1);
-              propagateContext(c);
-            });
-            return;
-          }
-          components.forEach((component) => {
-            if (!Array.isArray(component)) {
-              onMount(parent, component);
-              propagateContext(component);
-            } else {
-              component.forEach((comp) => {
-                onMount(parent, comp);
-                propagateContext(comp);
-              });
-            }
-          });
-          elementsListen.next(undefined)
+      // Subscribe to the observable and handle the emitted values
+      const subscription = child.subscribe(
+        (value: any) => {
+          // Handle different types of observable emissions
+          if (value && typeof value === 'object' && 'elements' in value) {
+            // Handle FlowObservable result (from loop, cond, etc.)
+            const {
+              elements: comp,
+              prev,
+            }: {
+              elements: Element[];
+              prev?: Element;
+            } = value;
+            
+            const components = comp.filter((c) => c !== null);
+                         if (prev) {
+               components.forEach(async (c) => {
+                 const index = parent.props.children.indexOf(prev.props.key);
+                 if (c instanceof Observable) {
+                   // Handle observable component recursively
+                   await createElement(parent, c);
+                 } else if (isElement(c)) {
+                   onMount(parent, c, index + 1);
+                   propagateContext(c);
+                 }
+               });
+               return;
+             }
+                         components.forEach(async (component) => {
+               if (!Array.isArray(component)) {
+                 if (component instanceof Observable) {
+                   // Handle observable component recursively
+                   await createElement(parent, component);
+                 } else if (isElement(component)) {
+                   onMount(parent, component);
+                   propagateContext(component);
+                 }
+               } else {
+                 component.forEach(async (comp) => {
+                   if (comp instanceof Observable) {
+                     // Handle observable component recursively
+                     await createElement(parent, comp);
+                   } else if (isElement(comp)) {
+                     onMount(parent, comp);
+                     propagateContext(comp);
+                   }
+                 });
+               }
+             });
+          } else if (isElement(value)) {
+            // Handle direct Element emission
+            onMount(parent, value);
+            propagateContext(value);
+                     } else if (Array.isArray(value)) {
+             // Handle array of elements (which can also be observables)
+             value.forEach(async (element) => {
+               if (element instanceof Observable) {
+                 // Handle observable element recursively
+                 await createElement(parent, element);
+               } else if (isElement(element)) {
+                 onMount(parent, element);
+                 propagateContext(element);
+               }
+             });
+           }
+          elementsListen.next(undefined);
         }
       );
-    } else {
+      
+      // Store subscription for cleanup
+      parent.effectSubscriptions.push(subscription);
+    } else if (isElement(child)) {
       onMount(parent, child);
       await propagateContext(child);
     }

package/src/engine/signal.ts

@@ -1,4 +1,5 @@
 import {
+  Observable,
     Subscription
 } from "rxjs";
 import type { Element } from "./reactive";
@@ -124,6 +125,9 @@ export function h<C extends ComponentFunction<any>>(
   else if ('tag' in componentFunction) {
     component = componentFunction
   }
+  else if (componentFunction instanceof Observable) {
+    component = componentFunction as any
+  }
   else {
     component = componentFunction({ ...props, children }) as Element;
   }