canvasengine 2.0.0-beta.5 → 2.0.0-beta.7

package/package.json

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

package/src/components/Video.ts

@@ -5,7 +5,7 @@ import { Sprite } from "./Sprite";
 import { effect, Signal, signal } from "@signe/reactive";
 
 interface VideoProps {
-    source: string;
+    src: string;
     paused?: boolean;
     loop?: boolean;
     muted?: boolean;
@@ -87,7 +87,7 @@ export function Video(props: VideoProps) {
 
     return h(Sprite, {
         ...props,
-        image: props.source,
+        image: props.src,
         loader: {
             onComplete: (texture) => {
                 const source = texture.source.resource

package/src/components/types/DisplayObject.ts

@@ -8,6 +8,7 @@ export type Size = number | `${number}%`
 export type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>
 
 export interface DisplayObjectProps {
+    attach?: any;
     ref?: string;
     x?: SignalOrPrimitive<number>;
     y?: SignalOrPrimitive<number>;

package/src/engine/reactive.ts

@@ -1,4 +1,4 @@
-import { Signal, WritableArraySignal, isSignal } from "@signe/reactive";
+import { Signal, WritableArraySignal, WritableObjectSignal, isSignal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -23,8 +23,15 @@ export type ArrayChange<T> = {
   items: T[];
 };
 
+export type ObjectChange<T> = {
+  type: "add" | "remove" | "update" | "init" | "reset";
+  key?: string;
+  value?: T;
+  items: T[];
+};
+
 type ElementObservable<T> = Observable<
-  ArrayChange<T> & {
+  (ArrayChange<T> | ObjectChange<T>) & {
     value: Element | Element[];
   }
 >;
@@ -53,10 +60,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 } = {};
 
@@ -292,32 +302,59 @@ 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: WritableArraySignal<T[]> | WritableObjectSignal<T>,
+  createElementFn: (item: T, index: number | string) => Element | null
 ): FlowObservable {
   let elements: Element[] = [];
 
-  const addAt = (items, insertIndex: number) => {
+  const isArraySignal = '_subject' in itemsSubject && 'items' in (itemsSubject as any)._subject;
+
+  const addAt = (items: T[], insertIndex: number | string, keys?: string[]): Element[] => {
     return items.map((item, index) => {
-      const element = createElementFn(item, insertIndex + index);
-      elements.splice(insertIndex + index, 0, element as Element);
+      const key = keys ? keys[index] : (typeof insertIndex === 'number' ? insertIndex + index : insertIndex);
+      const element = createElementFn(item, key);
+      if (typeof insertIndex === 'number') {
+        elements.splice(insertIndex + index, 0, element);
+      } else {
+        elements.push(element);
+      }
       return element;
     });
   };
 
+  const getInitialItems = () => {
+    if (isArraySignal) {
+      return {
+        items: (itemsSubject as any)._subject.items as T[],
+        keys: undefined as string[] | undefined
+      };
+    } else {
+      const entries = Object.entries((itemsSubject as any)._subject.value.value) as [string, T][];
+      return {
+        items: entries.map(([_, value]) => value),
+        keys: entries.map(([key]) => key)
+      };
+    }
+  };
+
+  const { items, keys } = getInitialItems();
+
   return defer(() => {
-    let initialItems = [...itemsSubject._subject.items];
+    let initialItems = [...items];
+    let initialKeys = keys ? [...keys] : undefined;
     let init = true;
-    return itemsSubject.observable.pipe(
-      map((event: ArrayChange<T>) => {
-        const { type, items, index } = event;
+    return (itemsSubject.observable as Observable<ArrayChange<T> | ObjectChange<T>>).pipe(
+      map((event: ArrayChange<T> | ObjectChange<T>): FlowResult => {
+        const { type, items } = event;
+        const index = 'index' in event ? event.index : (event as ObjectChange<T>).key;
+
         if (init) {
           if (elements.length > 0) {
             return {
@@ -325,8 +362,9 @@ export function loop<T = any>(
               fullElements: elements,
             };
           }
-          const newElements = addAt(initialItems, 0);
+          const newElements = addAt(initialItems, 0, initialKeys);
           initialItems = [];
+          initialKeys = undefined;
           init = false;
           return {
             elements: newElements,
@@ -339,25 +377,64 @@ export function loop<T = any>(
             });
             elements = [];
           }
-          const newElements = addAt(items, 0);
+          if (!isArraySignal) {
+            const entries = Object.entries((itemsSubject as any)._subject.value.value) as [string, T][];
+            const newElements = addAt(
+              entries.map(([_, value]) => value),
+              0,
+              entries.map(([key]) => key)
+            );
+            return {
+              elements: newElements,
+              fullElements: elements,
+            };
+          }
+          const newElements = addAt(items as T[], 0);
           return {
             elements: newElements,
             fullElements: elements,
           };
         } else if (type == "add" && index != undefined) {
-          const lastElement = elements[index - 1];
-          const newElements = addAt(items, index);
+          const lastElement = typeof index === 'number' ? elements[index - 1] : elements[elements.length - 1];
+          let newElements: Element[];
+          if (!isArraySignal && typeof index === 'string') {
+            // For object updates, create a single element with the new value
+            const value = (event as ObjectChange<T>).value;
+            if (value !== undefined) {
+              newElements = [createElementFn(value, index)];
+              elements.push(newElements[0]);
+            } else {
+              newElements = [];
+            }
+          } else {
+            // For array updates, use addAt with the items array
+            newElements = addAt(items as T[], index);
+          }
           return {
             prev: lastElement,
             elements: newElements,
             fullElements: elements,
           };
-        } else if (index != undefined && type == "remove") {
-          const currentElement = elements[index];
-          destroyElement(currentElement);
-          elements.splice(index, 1);
+        } else if (type == "remove") {
+          if (!isArraySignal && typeof index === 'string') {
+            // For object property deletion
+            const elementIndex = elements.findIndex(el => {
+              return el.props.text === index || el.props.key === index;
+            });
+            if (elementIndex !== -1) {
+              const currentElement = elements[elementIndex];
+              destroyElement(currentElement);
+              elements.splice(elementIndex, 1);
+            }
+          } else if (typeof index === 'number') {
+            // For array element deletion
+            const currentElement = elements[index];
+            destroyElement(currentElement);
+            elements.splice(index, 1);
+          }
           return {
             elements: [],
+            fullElements: elements,
           };
         }
         return {
@@ -369,37 +446,71 @@ export function loop<T = any>(
   });
 }
 
+/**
+ * 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);
+      });
+    });
+  } 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: [],
+    });
+  }
 }