canvasengine 2.0.0-rc.1 → 2.0.0-rc.3

package/src/engine/reactive.ts

@@ -55,11 +55,19 @@ 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 } = {};
+const HOT_COMPONENT_PROPS = "__canvasEngineHotProps";
+const HOT_COMPONENT_UPDATE_PROPS = "__canvasEngineUpdateHotProps";
+const DEFINE_PROPS_SIGNALS = "__canvasEngineDefinePropsSignals";
 
 export const isElement = (value: any): value is Element => {
   return (
@@ -109,6 +117,24 @@ const DOM_UNSUPPORTED_TAGS = new Set([
   "FocusContainer",
 ]);
 
+const readSignalValue = (value: any) => isSignal(value) ? value() : value;
+
+const patchDefinePropsSignals = (target: Element, source: Element) => {
+  const targetSignals = (target as any)[DEFINE_PROPS_SIGNALS];
+  const sourceSignals = (source as any)[DEFINE_PROPS_SIGNALS];
+
+  if (!targetSignals || !sourceSignals) {
+    return;
+  }
+
+  Object.entries(sourceSignals as Record<string, any>).forEach(([key, sourceSignal]) => {
+    const targetSignal = targetSignals[key];
+    if (targetSignal && typeof targetSignal.set === "function") {
+      targetSignal.set(readSignalValue(sourceSignal));
+    }
+  });
+};
+
 const hasDomAncestor = (element: Element | null): boolean => {
   let current = element;
   while (current) {
@@ -695,10 +721,82 @@ export function createComponent(tag: string, props?: Props): Element {
       return getNextGroupIndex();
     };
 
+    const collectMountedInstances = (
+      element: Element,
+      instances: any[],
+      childIndex: Map<any, number>,
+      seen = new Set<Element>()
+    ) => {
+      if (!element || seen.has(element)) return;
+      seen.add(element);
+
+      const instance = element.componentInstance as any;
+      if (childIndex.has(instance)) {
+        instances.push(instance);
+        return;
+      }
+
+      const nestedGroups = ((element as any).__childGroups ?? [])
+        .slice()
+        .sort((a, b) => a.order - b.order);
+      for (const group of nestedGroups) {
+        for (const mounted of group.mounted.values()) {
+          collectMountedInstances(mounted, instances, childIndex, seen);
+        }
+      }
+    };
+
+    const reorderMountedChildGroups = () => {
+      if (childGroups.length < 2) return;
+
+      const parentInstance = parent.componentInstance as any;
+      const children = parentInstance?.children;
+      if (!children || typeof parentInstance.addChildAt !== "function") return;
+
+      const childIndex = new Map<any, number>();
+      children.forEach((child, index) => {
+        childIndex.set(child, index);
+      });
+
+      const orderedInstances: any[] = [];
+      const orderedGroups = childGroups
+        .slice()
+        .sort((a, b) => a.order - b.order);
+
+      for (const group of orderedGroups) {
+        for (const mounted of group.mounted.values()) {
+          collectMountedInstances(mounted, orderedInstances, childIndex);
+        }
+      }
+
+      const mountedIndices = orderedInstances
+        .map((instance) => childIndex.get(instance))
+        .filter((index): index is number => index !== undefined);
+      if (!mountedIndices.length) return;
+
+      let targetIndex = Math.min(...mountedIndices);
+      for (const instance of orderedInstances) {
+        if (children[targetIndex] !== instance) {
+          parentInstance.addChildAt(instance, targetIndex);
+        }
+        targetIndex++;
+      }
+    };
+
+    const mountElementAtDeclaredOrder = (
+      element: Element,
+      sourceIndex: number,
+      orderedSources: any[]
+    ) => {
+      const mountResult = onMount(parent, element, getInsertIndex(sourceIndex, orderedSources));
+      void Promise.resolve(mountResult).then(reorderMountedChildGroups);
+      return mountResult;
+    };
+
     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,16 +828,31 @@ 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;
         }
 
         const routed = routeDomComponent(parent, element);
         applyFlowEffects(routed);
         mountedFlowElements.set(element, routed);
-        onMount(parent, routed, getInsertIndex(sourceIndex, orderedSources));
+        mountElementAtDeclaredOrder(routed, sourceIndex, orderedSources);
         propagateContext(routed);
       };
 
@@ -759,7 +872,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 +886,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 +895,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 +907,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 +925,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)) {
@@ -817,7 +933,7 @@ export function createComponent(tag: string, props?: Props): Element {
             const routed = routeDomComponent(parent, value);
             applyFlowEffects(routed);
             childGroup.mounted.set(value, routed);
-            onMount(parent, routed, getInsertIndex(0, [value]));
+            mountElementAtDeclaredOrder(routed, 0, [value]);
             propagateContext(routed);
           } else if (Array.isArray(value)) {
             // Handle array of elements (which can also be observables)
@@ -844,7 +960,7 @@ export function createComponent(tag: string, props?: Props): Element {
     } else if (isElement(child)) {
       const routed = routeDomComponent(parent, child);
       childGroup.mounted.set(child, routed);
-      onMount(parent, routed, getInsertIndex(0, [child]));
+      mountElementAtDeclaredOrder(routed, 0, [child]);
       await propagateContext(routed);
     }
   }
@@ -862,7 +978,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 +993,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 +1019,133 @@ 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 updateTrackedHotChildren = (targetChildren: any, sourceChildren: any) => {
+      const targetList = Array.isArray(targetChildren) ? targetChildren : [targetChildren];
+      const sourceList = Array.isArray(sourceChildren) ? sourceChildren : [sourceChildren];
+      let updated = false;
+
+      targetList.forEach((targetChild, index) => {
+        const sourceChild = sourceList[index];
+        const updateProps = targetChild?.[HOT_COMPONENT_UPDATE_PROPS];
+        const nextProps = sourceChild?.[HOT_COMPONENT_PROPS];
+
+        if (typeof updateProps === "function" && nextProps !== undefined) {
+          updateProps(nextProps);
+          updated = true;
+        }
+      });
+
+      return updated;
+    };
+
+    const patchTrackedElement = (target: Element, source: Element) => {
+      const nextProps = { ...source.props };
+      const nextPropObservables = source.propObservables;
+      const updatedHotChildren = updateTrackedHotChildren(target.props.children, source.props.children);
+
+      patchDefinePropsSignals(target, source);
+
+      if (target.props.context) {
+        nextProps.context = target.props.context;
+      }
+      if (updatedHotChildren || (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 +1155,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 +1171,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 +1192,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 +1227,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 +1248,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/engine/signal.ts

@@ -22,7 +22,12 @@ type HotComponentRecord = {
   wrapper?: ComponentFunction<any>;
 };
 
+const HOT_COMPONENT_PROPS = "__canvasEngineHotProps";
+const HOT_COMPONENT_UPDATE_PROPS = "__canvasEngineUpdateHotProps";
+const DEFINE_PROPS_SIGNALS = "__canvasEngineDefinePropsSignals";
+
 export let currentSubscriptionsTracker: ((subscription: Subscription) => void) | null = null;
+export let currentDefinePropsTracker: ((signals: Record<string, any>) => void) | null = null;
 export let mountTracker: MountFunction | null = null;
 
 const getHotComponentRegistry = (): Map<string, HotComponentRecord> => {
@@ -163,11 +168,19 @@ function createTrackedComponent<C extends ComponentFunction<any>>(
 ): ReturnType<C> {
   const allSubscriptions = new Set<Subscription>();
   const allMounts = new Set<MountCallback>();
+  let allDefinePropSignals: Record<string, any> | null = null;
 
   currentSubscriptionsTracker = (subscription) => {
     allSubscriptions.add(subscription);
   };
 
+  currentDefinePropsTracker = (signals) => {
+    allDefinePropSignals = {
+      ...(allDefinePropSignals ?? {}),
+      ...signals,
+    };
+  };
+
   mountTracker = (fn: any) => {
     allMounts.add(fn);
   };
@@ -177,6 +190,7 @@ function createTrackedComponent<C extends ComponentFunction<any>>(
     component = componentFunction(props) as ReturnType<C>;
   } finally {
     currentSubscriptionsTracker = null;
+    currentDefinePropsTracker = null;
     mountTracker = null;
   }
 
@@ -190,6 +204,9 @@ function createTrackedComponent<C extends ComponentFunction<any>>(
       ...Array.from(allMounts),
       ...((element as any).effectMounts ?? [])
     ];
+    if (allDefinePropSignals) {
+      (element as any)[DEFINE_PROPS_SIGNALS] = allDefinePropSignals;
+    }
   };
 
   if (component instanceof Promise) {
@@ -208,6 +225,9 @@ function createTrackedComponent<C extends ComponentFunction<any>>(
       ...Array.from(allMounts),
       ...((component as any).effectMounts ?? [])
     ];
+    if (allDefinePropSignals) {
+      (component as any)[DEFINE_PROPS_SIGNALS] = allDefinePropSignals;
+    }
   } else {
     applyTrackedEffects(component as Element);
   }
@@ -235,14 +255,55 @@ export function createHotComponent<P>(
 
   if (!record.wrapper) {
     record.wrapper = ((props: P) => {
-      return new Observable<HotFlowResult>((subscriber) => {
+      let currentProps = props;
+
+      const observable = new Observable<HotFlowResult>((subscriber) => {
         let disposed = false;
         let currentElement: Element | null = null;
 
-        const emit = () => {
-          const rendered = createTrackedComponent(record!.component, props);
+        const patchElement = (target: Element, source: Element) => {
+          if (target.tag !== source.tag) {
+            return false;
+          }
+
+          const nextProps = { ...source.props };
+          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 = source.propObservables;
+          target.componentInstance.onUpdate?.(nextProps);
+          Object.entries(target.directives).forEach(([name, directive]) => {
+            if (name in nextProps) {
+              directive.onUpdate?.(nextProps[name], target);
+            }
+          });
+
+          source.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+          source.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+          source.effectUnmounts?.forEach((fn) => fn?.());
+
+          return true;
+        };
+
+        const emit = (preserveCurrentElement = false) => {
+          const rendered = createTrackedComponent(record!.component, currentProps);
           const next = (element: Element | null | undefined) => {
             if (!disposed) {
+              if (
+                preserveCurrentElement &&
+                currentElement &&
+                element &&
+                patchElement(currentElement, element)
+              ) {
+                subscriber.next({ elements: [currentElement] });
+                return;
+              }
+
               subscriber.next({ elements: element ? [element] : [] });
               if (currentElement && currentElement !== element) {
                 destroyElement(currentElement);
@@ -259,7 +320,12 @@ export function createHotComponent<P>(
         };
 
         emit();
-        const subscription = record!.updates.subscribe(emit);
+        (observable as any)[HOT_COMPONENT_UPDATE_PROPS] = (nextProps: P) => {
+          currentProps = nextProps;
+          emit(true);
+        };
+
+        const subscription = record!.updates.subscribe(() => emit());
 
         return () => {
           disposed = true;
@@ -270,6 +336,10 @@ export function createHotComponent<P>(
           subscription.unsubscribe();
         };
       }) as any;
+
+      (observable as any)[HOT_COMPONENT_PROPS] = props;
+
+      return observable;
     }) as ComponentFunction<any>;
   }
 

package/src/hooks/useProps.ts

@@ -1,5 +1,6 @@
 import { isSignal, signal } from "@signe/reactive"
 import { isPrimitive } from "../engine/reactive"
+import { currentDefinePropsTracker } from "../engine/signal"
 
 /**
  * Converts props into reactive signals if they are primitive values.
@@ -46,6 +47,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,15 +120,16 @@ export const useDefineProps = (props: any) => {
                 }
             }
 
-            validatedProps[key] = isSignal(validatedValue) 
-                ? validatedValue 
-                : signal(validatedValue)
+            validatedProps[key] = toPropSignal(validatedValue)
         }
         
-        return {
-            ...useProps(rawProps),
+        const definedProps = {
+            ...definePropSignals(rawProps),
             ...validatedProps
         }
+        currentDefinePropsTracker?.(definedProps)
+
+        return definedProps
     }
 }
 
@@ -152,4 +164,4 @@ function validateType(key: string, value: any, types: any[]) {
             `Expected ${types.map(t => t.name).join(' or ')}`
         )
     }
-}
+}