canvasengine 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/utils/RadialGradient.d.ts

@@ -50,7 +50,7 @@ export declare class RadialGradient {
             y: number;
         };
     }): {
-        texture: Texture<import('pixi.js').TextureSource<any>> | null;
+        texture: Texture<import('pixi.js').TextureSource<any>>;
         matrix: Matrix;
     };
 }

package/package.json

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

package/src/components/DOMSprite.ts

@@ -515,7 +515,11 @@ export class CanvasDOMSprite extends CanvasDOMElement {
       if (resolvedSheet?.definition !== undefined) {
         const resolvedDefinition = this.resolveSheetDefinition(resolvedSheet.definition);
         if (resolvedDefinition instanceof Promise) {
-          void this.setSheetDefinition(resolvedDefinition);
+          void resolvedDefinition.then((definition) => {
+            if (definition) {
+              void this.setSheetDefinition(definition);
+            }
+          });
         } else if (resolvedDefinition && resolvedDefinition !== this.sheetDefinition) {
           void this.setSheetDefinition(resolvedDefinition);
         }
@@ -570,7 +574,7 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     }
   }
 
-  private resolveValue<T>(value: T | Signal<T> | { value?: T } | undefined): T | undefined {
+  private resolveValue<T = any>(value: any): T | undefined {
     if (value === undefined) return undefined;
     const resolved = isSignal(value as any) ? (value as any)() : value;
     if (resolved && typeof resolved === "object" && "value" in (resolved as any)) {
@@ -687,9 +691,9 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     ].some((value) => value !== undefined);
 
     if (hasTransformProps) {
-      let x = this.resolveValue(props.x) ?? 0;
-      let y = this.resolveValue(props.y) ?? 0;
-      const roundPixels = this.resolveValue(props.roundPixels);
+      let x = this.resolveValue<number>(props.x) ?? 0;
+      let y = this.resolveValue<number>(props.y) ?? 0;
+      const roundPixels = this.resolveValue<boolean>(props.roundPixels);
       if (roundPixels) {
         x = Math.round(x);
         y = Math.round(y);
@@ -698,8 +702,8 @@ export class CanvasDOMSprite extends CanvasDOMElement {
       const scale = this.resolvePoint(props.scale) ?? { x: 1, y: 1 };
       const skew = this.resolvePoint(props.skew);
 
-      const angle = this.resolveValue(props.angle);
-      const rotation = this.resolveValue(props.rotation);
+      const angle = this.resolveValue<number>(props.angle);
+      const rotation = this.resolveValue<number>(props.rotation);
       const rotationDeg = angle !== undefined
         ? angle
         : rotation !== undefined

package/src/components/DisplayObject.ts

@@ -100,7 +100,7 @@ export const EVENTS = [
 
 export type OnHook = (() => void) | (() => Promise<void> | void);
 
-export function DisplayObject(extendClass) {
+export function DisplayObject(extendClass): any {
   return class DisplayObject extends extendClass {
     #canvasContext: {
       [key: string]: any;

package/src/engine/reactive.ts

@@ -55,10 +55,15 @@ type FlowResult = {
   elements: Element[];
   prev?: Element;
   fullElements?: Element[];
+  reorder?: boolean;
 };
 
 type FlowObservable = Observable<FlowResult>;
 
+export interface LoopOptions<T> {
+  track?: (item: T, index: number | string) => string | number;
+}
+
 const components: { [key: string]: any } = {};
 
 export const isElement = (value: any): value is Element => {
@@ -698,7 +703,7 @@ export function createComponent(tag: string, props?: Props): Element {
     if (child instanceof Observable) {
       const mountedFlowElements = childGroup.mounted;
       const flowEffectSubscriptions = ((child as any).effectSubscriptions ?? []) as Subscription[];
-      const flowEffectMounts = ((child as any).effectMounts ?? []) as Array<(element: Element) => any>;
+      const flowEffectMounts = ((child as any).effectMounts ?? []) as Array<(element?: Element) => any>;
 
       const applyFlowEffects = (element: Element) => {
         if (!flowEffectMounts.length) {
@@ -730,9 +735,24 @@ export function createComponent(tag: string, props?: Props): Element {
       const mountFlowElement = (
         element: Element,
         sourceIndex: number,
-        orderedSources: any[]
+        orderedSources: any[],
+        shouldReorder = false
       ) => {
-        if (mountedFlowElements.has(element)) {
+        const mounted = mountedFlowElements.get(element);
+        if (mounted) {
+          if (shouldReorder) {
+            const insertIndex = getInsertIndex(sourceIndex, orderedSources);
+            const parentInstance = mounted.parent?.componentInstance as any;
+            const childInstance = mounted.componentInstance as any;
+            if (
+              insertIndex !== undefined &&
+              parentInstance &&
+              typeof parentInstance.addChildAt === "function" &&
+              parentInstance.children?.includes(childInstance)
+            ) {
+              parentInstance.addChildAt(childInstance, insertIndex);
+            }
+          }
           return;
         }
 
@@ -759,7 +779,8 @@ export function createComponent(tag: string, props?: Props): Element {
         component: any,
         nextElements: Set<any>,
         index: number,
-        orderedSources: any[]
+        orderedSources: any[],
+        shouldReorder = false
       ) => {
         if (component instanceof Observable) {
           nextElements.add(component);
@@ -772,7 +793,7 @@ export function createComponent(tag: string, props?: Props): Element {
         }
         if (Array.isArray(component)) {
           component.forEach((comp) =>
-            processFlowComponent(comp, nextElements, index, orderedSources)
+            processFlowComponent(comp, nextElements, index, orderedSources, shouldReorder)
           );
           return;
         }
@@ -781,7 +802,7 @@ export function createComponent(tag: string, props?: Props): Element {
         }
 
         nextElements.add(component);
-        mountFlowElement(component, index, orderedSources);
+        mountFlowElement(component, index, orderedSources, shouldReorder);
       };
 
       // Subscribe to the observable and handle the emitted values
@@ -793,9 +814,11 @@ export function createComponent(tag: string, props?: Props): Element {
             const {
               elements: comp,
               prev,
+              reorder,
             }: {
               elements: Element[];
               prev?: Element;
+              reorder?: boolean;
             } = value;
 
             const components = comp.filter((c) => c !== null);
@@ -809,7 +832,7 @@ export function createComponent(tag: string, props?: Props): Element {
               return;
             }
             components.forEach((component, index) => {
-              processFlowComponent(component, nextElements, index, components);
+              processFlowComponent(component, nextElements, index, components, reorder);
             });
             syncFlowElements(nextElements);
           } else if (isElement(value)) {
@@ -862,7 +885,8 @@ export function createComponent(tag: string, props?: Props): Element {
  */
 export function loop<T>(
   itemsSubject: any,
-  createElementFn: (item: T, index: number | string) => Element | null
+  createElementFn: (item: T, index: number | string) => Element | null,
+  options: LoopOptions<T> = {}
 ): FlowObservable {
 
   if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
@@ -876,6 +900,8 @@ export function loop<T>(
     let elements: Element[] = [];
     let elementMap = new Map<string | number, Element>();
     let isFirstSubscription = true;
+    const getTrackKey = (item: T, index: number | string) =>
+      options.track ? options.track(item, index) : index;
 
     const ensureElement = (itemResult: any): Element | null => {
       if (!itemResult) return null;
@@ -900,27 +926,111 @@ export function loop<T>(
     const isArraySignal = (signal: any): signal is WritableArraySignal<T[]> =>
       Array.isArray(signal());
 
+    const cleanupUntrackedElement = (element: Element | null) => {
+      if (!element) return;
+      element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+      element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+      element.effectUnmounts?.forEach((fn) => fn?.());
+    };
+
+    const patchTrackedElement = (target: Element, source: Element) => {
+      const nextProps = { ...source.props };
+      const nextPropObservables = source.propObservables;
+
+      if (target.props.context) {
+        nextProps.context = target.props.context;
+      }
+      if (target.props.children && !source.props.children) {
+        nextProps.children = target.props.children;
+      }
+
+      target.props = nextProps;
+      target.propObservables = nextPropObservables;
+      target.componentInstance.onUpdate?.(nextProps);
+      Object.entries(target.directives).forEach(([name, directive]) => {
+        if (name in nextProps) {
+          directive.onUpdate?.(nextProps[name], target);
+        }
+      });
+
+      cleanupUntrackedElement(source);
+    };
+
+    const removeElementFromMap = (element: Element) => {
+      for (const [key, mappedElement] of elementMap.entries()) {
+        if (mappedElement === element) {
+          elementMap.delete(key);
+          return;
+        }
+      }
+    };
+
+    const rebuildArrayElements = (items: T[] | undefined | null) => {
+      if (!options.track) {
+        elements.forEach(el => destroyElement(el));
+        elements = [];
+        elementMap.clear();
+
+        if (items) {
+          items.forEach((item, index) => {
+            const element = ensureElement(createElementFn(item, index));
+            if (element) {
+              elements.push(element);
+              elementMap.set(index, element);
+            }
+          });
+        }
+        return;
+      }
+
+      const previousMap = elementMap;
+      const nextElements: Element[] = [];
+      const nextMap = new Map<string | number, Element>();
+      const usedElements = new Set<Element>();
+
+      if (items) {
+        items.forEach((item, index) => {
+          const key = getTrackKey(item, index);
+          const existing = previousMap.get(key);
+          const nextElement = ensureElement(createElementFn(item, index));
+
+          if (existing) {
+            if (nextElement) {
+              patchTrackedElement(existing, nextElement);
+            }
+            nextElements.push(existing);
+            nextMap.set(key, existing);
+            usedElements.add(existing);
+            return;
+          }
+
+          if (nextElement) {
+            nextElements.push(nextElement);
+            nextMap.set(key, nextElement);
+            usedElements.add(nextElement);
+          }
+        });
+      }
+
+      elements.forEach((element) => {
+        if (!usedElements.has(element)) {
+          destroyElement(element);
+        }
+      });
+
+      elements = nextElements;
+      elementMap = nextMap;
+    };
+
     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 = ensureElement(createElementFn(item, index));
-                if (element) {
-                  elements.push(element);
-                  elementMap.set(index, element);
-                }
-              });
-            }
+            rebuildArrayElements(itemsSubject());
             subscriber.next({
-              elements: [...elements]
+              elements: [...elements],
+              reorder: Boolean(options.track)
             });
             return;
           }
@@ -930,25 +1040,13 @@ export function loop<T>(
           const isDirectArrayChange = Array.isArray(change) || (change && typeof change === 'object' && !('type' in change));
 
           if (change.type === 'init' || change.type === 'reset' || isDirectArrayChange) {
-            elements.forEach(el => destroyElement(el));
-            elements = [];
-            elementMap.clear();
-
-            const items = itemsSubject();
-            if (items) {
-              items.forEach((item, index) => {
-                const element = ensureElement(createElementFn(item, index));
-                if (element) {
-                  elements.push(element);
-                  elementMap.set(index, element);
-                }
-              });
-            }
+            rebuildArrayElements(itemsSubject());
           } else if (change.type === 'add' && change.index !== undefined) {
             const newElements = change.items.map((item, i) => {
-              const element = ensureElement(createElementFn(item as T, change.index! + i));
+              const index = change.index! + i;
+              const element = ensureElement(createElementFn(item as T, index));
               if (element) {
-                elementMap.set(change.index! + i, element);
+                elementMap.set(getTrackKey(item as T, index), element);
               }
               return element;
             }).filter((el): el is Element => el !== null);
@@ -958,19 +1056,20 @@ export function loop<T>(
             const removed = elements.splice(change.index, 1);
             removed.forEach(el => {
               destroyElement(el)
-              elementMap.delete(change.index!);
+              removeElementFromMap(el);
             });
           } else if (change.type === 'update' && change.index !== undefined && change.items.length === 1) {
             const index = change.index;
             const newItem = change.items[0];
+            const key = getTrackKey(newItem as T, index);
 
             // Check if the previous item at this index was effectively undefined or non-existent
-            if (index >= elements.length || elements[index] === undefined || !elementMap.has(index)) {
+            if (index >= elements.length || elements[index] === undefined || !elementMap.has(key)) {
               // Treat as add operation
               const newElement = ensureElement(createElementFn(newItem as T, index));
               if (newElement) {
                 elements.splice(index, 0, newElement); // Insert at the correct index
-                elementMap.set(index, newElement);
+                elementMap.set(key, 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 {
@@ -978,22 +1077,28 @@ export function loop<T>(
               }
             } else {
               // Treat as a standard update operation
-              const oldElement = elements[index];
-              destroyElement(oldElement)
+              const oldElement = elementMap.get(key) ?? elements[index];
               const newElement = ensureElement(createElementFn(newItem as T, index));
-              if (newElement) {
+              if (options.track && oldElement && newElement) {
+                patchTrackedElement(oldElement, newElement);
+                elements[index] = oldElement;
+                elementMap.set(key, oldElement);
+              } else if (newElement) {
+                destroyElement(oldElement)
                 elements[index] = newElement;
-                elementMap.set(index, newElement);
+                elementMap.set(key, newElement);
               } else {
                 // Handle case where new element creation returns null
+                destroyElement(oldElement)
                 elements.splice(index, 1);
-                elementMap.delete(index);
+                elementMap.delete(key);
               }
             }
           }
 
           subscriber.next({
-            elements: [...elements] // Create a new array to ensure change detection
+            elements: [...elements], // Create a new array to ensure change detection
+            reorder: Boolean(options.track)
           });
         })
         : (itemsSubject as WritableObjectSignal<T>).observable.subscribe(change => {
@@ -1007,7 +1112,7 @@ export function loop<T>(
             const items = (itemsSubject as WritableObjectSignal<T>)();
             if (items) {
               Object.entries(items).forEach(([key, value]) => {
-                const element = ensureElement(createElementFn(value, key));
+                const element = ensureElement(createElementFn(value as T, key));
                 if (element) {
                   elements.push(element);
                   elementMap.set(key, element);
@@ -1028,7 +1133,7 @@ export function loop<T>(
             const items = (itemsSubject as WritableObjectSignal<T>)();
             if (items) {
               Object.entries(items).forEach(([key, value]) => {
-                const element = ensureElement(createElementFn(value, key));
+                const element = ensureElement(createElementFn(value as T, key));
                 if (element) {
                   elements.push(element);
                   elementMap.set(key, element);

package/src/hooks/useProps.ts

@@ -46,6 +46,16 @@ type PropSchema = {
     [key: string]: PropType | PropType[] | PropConfig;
 }
 
+const toPropSignal = (value: any) => isSignal(value) ? value : signal(value)
+
+const definePropSignals = (props: any): any => {
+    const obj: any = {}
+    for (let key in props) {
+        obj[key] = toPropSignal(props[key])
+    }
+    return obj
+}
+
 /**
  * Validates and defines properties based on a schema.
  * 
@@ -109,13 +119,11 @@ export const useDefineProps = (props: any) => {
                 }
             }
 
-            validatedProps[key] = isSignal(validatedValue) 
-                ? validatedValue 
-                : signal(validatedValue)
+            validatedProps[key] = toPropSignal(validatedValue)
         }
         
         return {
-            ...useProps(rawProps),
+            ...definePropSignals(rawProps),
             ...validatedProps
         }
     }
@@ -152,4 +160,4 @@ function validateType(key: string, value: any, types: any[]) {
             `Expected ${types.map(t => t.name).join(' or ')}`
         )
     }
-}
+}

package/tsconfig.json

@@ -6,7 +6,11 @@
     "emitDeclarationOnly": false,
     "declarationMap": true,
     "rootDir": "src",
-    "module": "ESNext"
+    "module": "ESNext",
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictPropertyInitialization": false
   },
   "include": [
     "src/**/*"