canvasengine 2.0.0-beta.2 → 2.0.0-beta.21

package/src/engine/reactive.ts

@@ -1,4 +1,4 @@
-import { Signal, WritableArraySignal, isSignal } from "@signe/reactive";
+import { ArrayChange, ObjectChange, Signal, WritableArraySignal, WritableObjectSignal, isComputed, isSignal, signal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -7,6 +7,7 @@ import {
   from,
   map,
   of,
+  share,
   switchMap,
 } from "rxjs";
 import { ComponentInstance } from "../components/DisplayObject";
@@ -17,18 +18,6 @@ export interface Props {
   [key: string]: any;
 }
 
-export type ArrayChange<T> = {
-  type: "add" | "remove" | "update" | "init" | "reset";
-  index?: number;
-  items: T[];
-};
-
-type ElementObservable<T> = Observable<
-  ArrayChange<T> & {
-    value: Element | Element[];
-  }
->;
-
 type NestedSignalObjects = {
   [Key in string]: NestedSignalObjects | Signal<any>;
 };
@@ -53,10 +42,13 @@ export interface Element<T = ComponentInstance> {
   allElements: Subject<void>;
 }
 
-type FlowObservable = Observable<{
+type FlowResult = {
   elements: Element[];
   prev?: Element;
-}>;
+  fullElements?: Element[];
+};
+
+type FlowObservable = Observable<FlowResult>;
 
 const components: { [key: string]: any } = {};
 
@@ -92,13 +84,14 @@ function destroyElement(element: Element | Element[]) {
   if (!element) {
     return;
   }
-  element.propSubscriptions.forEach((sub) => sub.unsubscribe());
-  element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
   for (let name in element.directives) {
-    element.directives[name].onDestroy?.();
+    element.directives[name].onDestroy?.(element);
   }
-  element.componentInstance.onDestroy?.(element.parent as any);
-  element.effectUnmounts.forEach((fn) => fn?.());
+  element.componentInstance.onDestroy(element.parent as any, () => {
+    element.propSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectUnmounts.forEach((fn) => fn?.());
+  });
 }
 
 /**
@@ -155,7 +148,7 @@ export function createComponent(tag: string, props?: Props): Element {
             _value.observable.subscribe((value) => {
               _set(path, key, value);
               if (element.directives[key]) {
-                element.directives[key].onUpdate?.(value);
+                element.directives[key].onUpdate?.(value, element);
               }
               if (key == "tick") {
                 return
@@ -182,9 +175,24 @@ export function createComponent(tag: string, props?: Props): Element {
   }
 
   instance.onInit?.(element.props);
-  instance.onUpdate?.(element.props);
 
-  const onMount = (parent: Element, element: Element, index?: number) => {
+  const elementsListen = new Subject<any>()
+
+  if (props?.isRoot) {
+    element.allElements = elementsListen
+    element.props.context.rootElement = element;
+    element.componentInstance.onMount?.(element);
+    propagateContext(element);
+  }
+
+  if (props) {
+    for (let key in props) {
+      const directive = applyDirective(element, key);
+      if (directive) element.directives[key] = directive;
+    }
+  }
+
+  function onMount(parent: Element, element: Element, index?: number) {
     element.props.context = parent.props.context;
     element.parent = parent;
     element.componentInstance.onMount?.(element, index);
@@ -196,68 +204,79 @@ export function createComponent(tag: string, props?: Props): Element {
     });
   };
 
-  const elementsListen = new Subject<any>()
-
-  if (props?.isRoot) {
-    // propagate recrusively context in all children
-    const propagateContext = async (element) => {
-      if (!element.props.children) {
-        return;
+  async function propagateContext(element) {
+    if (element.props.attach) {
+      const isReactiveAttach = isSignal(element.propObservables?.attach)
+      if (!isReactiveAttach) {
+        element.props.children.push(element.props.attach)
       }
-      for (let child of element.props.children) {
-        if (!child) continue;
-        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 = element.props.children.indexOf(prev.props.key);
-                  onMount(element, c, index + 1);
-                  propagateContext(c);
-                });
-                return;
-              }
-              components.forEach((component) => {
-                if (!Array.isArray(component)) {
-                  onMount(element, component);
-                  propagateContext(component);
-                } else {
-                  component.forEach((comp) => {
-                    onMount(element, comp);
-                    propagateContext(comp);
-                  });
+      else {
+        await new Promise((resolve) => {
+            let lastElement = null
+            element.propSubscriptions.push(element.propObservables.attach.observable.subscribe(async (args) => {
+                const value = args?.value ?? args
+                if (!value) {
+                  throw new Error(`attach in ${element.tag} is undefined or null, add a component`)
+                }
+                if (lastElement) {
+                  destroyElement(lastElement)
                 }
+                lastElement = value
+                await createElement(element, value)
+                resolve(undefined)
+            }))
+        })
+      }
+    }
+    if (!element.props.children) {
+      return;
+    }
+    for (let child of element.props.children) {
+      if (!child) continue;
+      await createElement(element, child)
+    }
+  };
+
+  async function createElement(parent: Element, child: 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)
             }
-          );
-        } else {
-          onMount(element, child);
-          await propagateContext(child);
+          });
+          elementsListen.next(undefined)
         }
-      }
-    };
-    element.allElements = elementsListen
-    element.props.context.rootElement = element;
-    element.componentInstance.onMount?.(element);
-    propagateContext(element);
-  }
-
-  if (props) {
-    for (let key in props) {
-      const directive = applyDirective(element, key);
-      if (directive) element.directives[key] = directive;
+      );
+    } else {
+      onMount(parent, child);
+      await propagateContext(child);
     }
   }
 
@@ -266,114 +285,264 @@ export function createComponent(tag: string, props?: Props): Element {
 }
 
 /**
- * Observes a BehaviorSubject containing an array of items and dynamically creates child elements for each item.
+ * Observes a BehaviorSubject containing an array or object of items and dynamically creates child elements for each item.
  *
- * @param {BehaviorSubject<Array>} itemsSubject - A BehaviorSubject that emits an array of items.
+ * @param {WritableArraySignal<T> | WritableObjectSignal<T>} itemsSubject - A signal that emits an array or object of items.
  * @param {Function} createElementFn - A function that takes an item and returns an element representation.
  * @returns {Observable} An observable that emits the list of created child elements.
  */
-export function loop<T = any>(
-  itemsSubject: WritableArraySignal<T>,
-  createElementFn: (item: any, index: number) => Element | Promise<Element>
+export function loop<T>(
+  itemsSubject: any,
+  createElementFn: (item: T, index: number | string) => Element | null
 ): FlowObservable {
-  let elements: Element[] = [];
 
-  const addAt = (items, insertIndex: number) => {
-    return items.map((item, index) => {
-      const element = createElementFn(item, insertIndex + index);
-      elements.splice(insertIndex + index, 0, element as Element);
-      return element;
-    });
-  };
+  if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
+    itemsSubject = signal(itemsSubject());
+  }
+  else if (!isSignal(itemsSubject)) {
+    itemsSubject = signal(itemsSubject);
+  }
 
   return defer(() => {
-    let initialItems = [...itemsSubject._subject.items];
-    let init = true;
-    return itemsSubject.observable.pipe(
-      map((event: ArrayChange<T>) => {
-        const { type, items, index } = event;
-        if (init) {
-          if (elements.length > 0) {
-            return {
-              elements: elements,
-              fullElements: elements,
-            };
-          }
-          const newElements = addAt(initialItems, 0);
-          initialItems = [];
-          init = false;
-          return {
-            elements: newElements,
-            fullElements: elements,
-          };
-        } else if (type == "reset") {
-          if (elements.length != 0) {
-            elements.forEach((element) => {
-              destroyElement(element);
+    let elements: Element[] = [];
+    let elementMap = new Map<string | number, Element>();
+    let isFirstSubscription = true;
+
+    const isArraySignal = (signal: any): signal is WritableArraySignal<T[]> => 
+      Array.isArray(signal());
+
+    return new Observable<FlowResult>(subscriber => {
+      const subscription = isArraySignal(itemsSubject)
+        ? itemsSubject.observable.subscribe(change => {
+            if (isFirstSubscription) {
+              isFirstSubscription = false;
+              elements.forEach(el => el.destroy());
+              elements = [];
+              elementMap.clear();
+
+              const items = itemsSubject();
+              if (items) {
+                items.forEach((item, index) => {
+                  const element = createElementFn(item, index);
+                  if (element) {
+                    elements.push(element);
+                    elementMap.set(index, element);
+                  }
+                });
+              }
+              subscriber.next({
+                elements: [...elements]
+              });
+              return;
+            }
+
+            if (change.type === 'init' || change.type === 'reset') {
+              elements.forEach(el => el.destroy());
+              elements = [];
+              elementMap.clear();
+
+              const items = itemsSubject();
+              if (items) {
+                items.forEach((item, index) => {
+                  const element = createElementFn(item, index);
+                  if (element) {
+                    elements.push(element);
+                    elementMap.set(index, element);
+                  }
+                });
+              }
+            } else if (change.type === 'add' && change.index !== undefined) {
+              const newElements = change.items.map((item, i) => {
+                const element = createElementFn(item as T, change.index! + i);
+                if (element) {
+                  elementMap.set(change.index! + i, element);
+                }
+                return element;
+              }).filter((el): el is Element => el !== null);
+              
+              elements.splice(change.index, 0, ...newElements);
+            } else if (change.type === 'remove' && change.index !== undefined) {
+              const removed = elements.splice(change.index, 1);
+              removed.forEach(el => {
+                el.destroy();
+                elementMap.delete(change.index!);
+              });
+            } else if (change.type === 'update' && change.index !== undefined && change.items.length === 1) {
+              const index = change.index;
+              const newItem = change.items[0];
+
+              // Check if the previous item at this index was effectively undefined or non-existent
+              if (index >= elements.length || elements[index] === undefined || !elementMap.has(index)) {
+                // Treat as add operation
+                const newElement = createElementFn(newItem as T, index);
+                if (newElement) {
+                  elements.splice(index, 0, newElement); // Insert at the correct index
+                  elementMap.set(index, newElement);
+                  // Adjust indices in elementMap for subsequent elements might be needed if map relied on exact indices
+                  // This simple implementation assumes keys are stable or createElementFn handles context correctly
+                } else {
+                     console.warn(`Element creation returned null for index ${index} during add-like update.`);
+                }
+              } else {
+                // Treat as a standard update operation
+                const oldElement = elements[index];
+                oldElement.destroy();
+                const newElement = createElementFn(newItem as T, index);
+                if (newElement) {
+                  elements[index] = newElement;
+                  elementMap.set(index, newElement);
+                } else {
+                  // Handle case where new element creation returns null
+                  elements.splice(index, 1);
+                  elementMap.delete(index);
+                }
+              }
+            }
+
+            subscriber.next({
+              elements: [...elements] // Create a new array to ensure change detection
             });
-            elements = [];
-          }
-          const newElements = addAt(items, 0);
-          return {
-            elements: newElements,
-            fullElements: elements,
-          };
-        } else if (type == "add" && index != undefined) {
-          const lastElement = elements[index - 1];
-          const newElements = addAt(items, index);
-          return {
-            prev: lastElement,
-            elements: newElements,
-            fullElements: elements,
-          };
-        } else if (index != undefined && type == "remove") {
-          const currentElement = elements[index];
-          destroyElement(currentElement);
-          elements.splice(index, 1);
-          return {
-            elements: [],
-          };
-        }
-        return {
-          elements: [],
-          fullElements: elements,
-        };
-      })
-    );
+          })
+        : (itemsSubject as WritableObjectSignal<T>).observable.subscribe(change => {
+            const key = change.key as string | number
+            if (isFirstSubscription) {
+              isFirstSubscription = false;
+              elements.forEach(el => el.destroy());
+              elements = [];
+              elementMap.clear();
+
+              const items = (itemsSubject as WritableObjectSignal<T>)();
+              if (items) {
+                Object.entries(items).forEach(([key, value]) => {
+                  const element = createElementFn(value, key);
+                  if (element) {
+                    elements.push(element);
+                    elementMap.set(key, element);
+                  }
+                });
+              }
+              subscriber.next({
+                elements: [...elements]
+              });
+              return;
+            }
+
+            if (change.type === 'init' || change.type === 'reset') {
+              elements.forEach(el => el.destroy());
+              elements = [];
+              elementMap.clear();
+
+              const items = (itemsSubject as WritableObjectSignal<T>)();
+              if (items) {
+                Object.entries(items).forEach(([key, value]) => {
+                  const element = createElementFn(value, key);
+                  if (element) {
+                    elements.push(element);
+                    elementMap.set(key, element);
+                  }
+                });
+              }
+            } else if (change.type === 'add' && change.key && change.value !== undefined) {
+              const element = createElementFn(change.value as T, key);
+              if (element) {
+                elements.push(element);
+                elementMap.set(key, element);
+              }
+            } else if (change.type === 'remove' && change.key) {
+              const index = elements.findIndex(el => elementMap.get(key) === el);
+              if (index !== -1) {
+                const [removed] = elements.splice(index, 1);
+                removed.destroy();
+                elementMap.delete(key);
+              }
+            } else if (change.type === 'update' && change.key && change.value !== undefined) {
+              const index = elements.findIndex(el => elementMap.get(key) === el);
+              if (index !== -1) {
+                const oldElement = elements[index];
+                oldElement.destroy();
+                const newElement = createElementFn(change.value as T, key);
+                if (newElement) {
+                  elements[index] = newElement;
+                  elementMap.set(key, newElement);
+                }
+              }
+            }
+
+            subscriber.next({
+              elements: [...elements] // Create a new array to ensure change detection
+            });
+          });
+
+      return subscription;
+    });
   });
 }
 
+/**
+ * Conditionally creates and destroys elements based on a condition signal.
+ *
+ * @param {Signal<boolean> | boolean} condition - A signal or boolean that determines whether to create an element.
+ * @param {Function} createElementFn - A function that returns an element or a promise that resolves to an element.
+ * @returns {Observable} An observable that emits the created or destroyed element.
+ */
 export function cond(
-  condition: Signal,
+  condition: Signal<boolean> | boolean,
   createElementFn: () => Element | Promise<Element>
 ): FlowObservable {
   let element: Element | null = null;
-  return (condition.observable as Observable<boolean>).pipe(
-    switchMap((bool) => {
-      if (bool) {
-        let _el = createElementFn();
-        if (isPromise(_el)) {
-          return from(_el as Promise<Element>).pipe(
-            map((el) => {
-              element = _el as Element;
-              return {
+
+  if (isSignal(condition)) {
+    const signalCondition = condition as WritableObjectSignal<boolean>;
+    return new Observable<{elements: Element[], type?: "init" | "remove"}>(subscriber => {
+      return signalCondition.observable.subscribe(bool => {
+        if (bool) {
+          let _el = createElementFn();
+          if (isPromise(_el)) {
+            from(_el as Promise<Element>).subscribe(el => {
+              element = el;
+              subscriber.next({
                 type: "init",
                 elements: [el],
-              };
-            })
-          );
+              });
+            });
+          } else {
+            element = _el as Element;
+            subscriber.next({
+              type: "init",
+              elements: [element],
+            });
+          }
+        } else if (element) {
+          destroyElement(element);
+          subscriber.next({
+            elements: [],
+          });
+        } else {
+          subscriber.next({
+            elements: [],
+          });
         }
-        element = _el as Element;
-        return of({
-          type: "init",
-          elements: [element],
-        });
-      } else if (element) {
-        destroyElement(element);
+      });
+    }).pipe(share())
+  } else {
+    // Handle boolean case
+    if (condition) {
+      let _el = createElementFn();
+      if (isPromise(_el)) {
+        return from(_el as Promise<Element>).pipe(
+          map((el) => ({
+            type: "init",
+            elements: [el],
+          }))
+        );
       }
       return of({
-        elements: [],
+        type: "init",
+        elements: [_el as Element],
       });
-    })
-  );
+    }
+    return of({
+      elements: [],
+    });
+  }
 }