canvasengine 2.0.0-rc.2 → 2.0.0-rc.3

package/package.json

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

package/src/components/Container.ts

@@ -1,4 +1,4 @@
-import { Container as PixiContainer } from "pixi.js";
+import { Container as PixiContainer, type ContainerChild } from "pixi.js";
 import { createComponent, registerComponent } from "../engine/reactive";
 import { DisplayObject } from "./DisplayObject";
 import { ComponentFunction } from "../engine/signal";
@@ -6,8 +6,16 @@ import { DisplayObjectProps } from "./types/DisplayObject";
 import { setObservablePoint } from "../engine/utils";
 import { isPercent } from "../utils/functions";
 
-interface ContainerProps extends DisplayObjectProps {
+export interface ContainerProps extends DisplayObjectProps {
   sortableChildren?: boolean;
+  /**
+   * Native PixiJS display objects to add to this container when it mounts.
+   *
+   * This is an escape hatch for rendering PixiJS objects directly inside the
+   * CanvasEngine scene graph. CanvasEngine does not manage these children's
+   * props or lifecycle; destroy or update them manually when needed.
+   */
+  pixiChildren?: ContainerChild[];
 }
 
 export class CanvasContainer extends DisplayObject(PixiContainer) {

package/src/components/DOMContainer.ts

@@ -343,6 +343,14 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
   }
 
   async onMount(element: Element<any>, index?: number) {
+    const parentTag = element.parent?.tag;
+    if (parentTag === "DOMContainer" || parentTag === "DOMElement") {
+      this.onUpdate(element.props);
+      this.syncCanvasSizeEffect();
+      this.applyElementSize();
+      return;
+    }
+
     await super.onMount(element, index);
     this.syncCanvasSizeEffect();
     this.applyElementSize();

package/src/components/Graphic.ts

@@ -88,6 +88,9 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
    */
   async onMount(element: Element<any>, index?: number): Promise<void> {
     await super.onMount(element, index);
+    if (this.destroyed || !this.parent) {
+      return;
+    }
     const { props, propObservables } = element;
     
     // Use original signals from propObservables if available, otherwise create new ones
@@ -111,6 +114,9 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
         if (typeof w == 'string' || typeof h == 'string') {
           return
         }
+        if (this.destroyed || !this.parent) {
+          return
+        }
         this.clear();
         props.draw?.(this, w, h, a);
         this.subjectInit.next(this)

package/src/components/Mesh.ts

@@ -1,9 +1,8 @@
-import { Effect, effect } from "@signe/reactive";
+import { isSignal } from "@signe/reactive";
 import { Mesh as PixiMesh, Geometry, Shader, Texture, Assets, BLEND_MODES } from "pixi.js";
 import { createComponent, Element, registerComponent } from "../engine/reactive";
 import { ComponentInstance, DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
-import { useProps } from "../hooks/useProps";
 import { SignalOrPrimitive } from "./types";
 import { ComponentFunction } from "../engine/signal";
 
@@ -13,19 +12,31 @@ import { ComponentFunction } from "../engine/signal";
  */
 interface MeshProps extends DisplayObjectProps {
   /** The geometry defining the mesh structure (vertices, indices, UVs, etc.) */
-  geometry?: Geometry;
+  geometry?: SignalOrPrimitive<Geometry>;
   /** The shader to render the mesh with */
-  shader?: Shader;
+  shader?: SignalOrPrimitive<Shader>;
   /** The texture to apply to the mesh */
-  texture?: Texture | string;
+  texture?: SignalOrPrimitive<Texture | string>;
   /** The image URL to load as texture */
-  image?: string;
+  image?: SignalOrPrimitive<string>;
   /** The tint color to apply to the mesh */
   tint?: SignalOrPrimitive<number>;
   /** Whether to round pixels for sharper rendering */
   roundPixels?: SignalOrPrimitive<boolean>;
 }
 
+const resolveProp = <T>(value: SignalOrPrimitive<T> | undefined): T | undefined => {
+  return isSignal(value as any) ? (value as any)() : value as T | undefined;
+};
+
+const isValidGeometry = (value: Geometry | undefined): value is Geometry => {
+  if (!value) return false;
+  if (value instanceof Geometry) return true;
+
+  const geometry = value as any;
+  return typeof geometry.on === 'function' && typeof geometry.off === 'function';
+};
+
 /**
  * Canvas Mesh component class that extends DisplayObject with PixiMesh functionality.
  * This component allows rendering of custom 3D meshes with shaders and textures.
@@ -87,17 +98,19 @@ class CanvasMesh extends DisplayObject(PixiMesh) {
     super.onInit(props);
 
     // Set initial geometry if provided
-    if (props.geometry) {
+    const geometry = resolveProp(props.geometry);
+    if (isValidGeometry(geometry)) {
       try {
-        this.geometry = props.geometry;
+        this.geometry = geometry;
       } catch (error) {
         console.warn('Failed to set geometry:', error);
       }
     }
     
     // Set initial shader if provided
-    if (props.shader) {
-      this.shader = props.shader;
+    const shader = resolveProp(props.shader);
+    if (shader) {
+      this.shader = shader;
     }
   }
 
@@ -119,28 +132,32 @@ class CanvasMesh extends DisplayObject(PixiMesh) {
     super.onUpdate(props);
 
     // Handle geometry updates
-    if (props.geometry) {
+    const geometry = resolveProp(props.geometry);
+    if (isValidGeometry(geometry)) {
       try {
-        this.geometry = props.geometry;
+        this.geometry = geometry;
       } catch (error) {
         console.warn('Failed to update geometry:', error);
       }
     }
 
     // Handle shader/material updates
-    if (props.shader) {
-      this.shader = props.shader;
+    const shader = resolveProp(props.shader);
+    if (shader) {
+      this.shader = shader;
     }
 
     // Handle texture updates
-    if (props.texture) {
-      if (typeof props.texture === 'string') {
-        this.texture = await Assets.load(props.texture);
+    const texture = resolveProp(props.texture);
+    const image = resolveProp(props.image);
+    if (texture) {
+      if (typeof texture === 'string') {
+        this.texture = await Assets.load(texture);
       } else {
-        this.texture = props.texture;
+        this.texture = texture;
       }
-    } else if (props.image) {
-      this.texture = await Assets.load(props.image);
+    } else if (image) {
+      this.texture = await Assets.load(image);
     }
 
     // Handle tint updates
@@ -219,4 +236,4 @@ export const Mesh: ComponentFunction<MeshProps> = (props) => {
 export { CanvasMesh };
 
 // Export the props interface for TypeScript users
-export type { MeshProps };
+export type { MeshProps };

package/src/components/Viewport.ts

@@ -181,10 +181,10 @@ export class CanvasViewport extends DisplayObject(Container) {
 
     private updateMask() {
         if (!this.#mask) return
-        this.#mask.clear()
-        this.#mask.beginFill(0xffffff)
-        this.#mask.drawRect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
-        this.#mask.endFill()
+        this.#mask
+            .clear()
+            .rect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
+            .fill(0xffffff)
     }
 
     /**

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export { Canvas } from './Canvas'
-export { Container } from './Container'
+export { Container, type ContainerProps } from './Container'
 export { Graphics, Rect, Circle, Ellipse, Triangle, Svg } from './Graphic'
 export { Mesh } from './Mesh'
 export { Scene } from './Scene'

package/src/engine/reactive.ts

@@ -65,6 +65,9 @@ export interface LoopOptions<T> {
 }
 
 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 (
@@ -114,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) {
@@ -700,6 +721,78 @@ 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[];
@@ -759,7 +852,7 @@ export function createComponent(tag: string, props?: Props): Element {
         const routed = routeDomComponent(parent, element);
         applyFlowEffects(routed);
         mountedFlowElements.set(element, routed);
-        onMount(parent, routed, getInsertIndex(sourceIndex, orderedSources));
+        mountElementAtDeclaredOrder(routed, sourceIndex, orderedSources);
         propagateContext(routed);
       };
 
@@ -840,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)
@@ -867,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);
     }
   }
@@ -933,14 +1026,36 @@ export function loop<T>(
       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 (target.props.children && !source.props.children) {
+      if (updatedHotChildren || (target.props.children && !source.props.children)) {
         nextProps.children = target.props.children;
       }
 

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.
@@ -122,10 +123,13 @@ export const useDefineProps = (props: any) => {
             validatedProps[key] = toPropSignal(validatedValue)
         }
         
-        return {
+        const definedProps = {
             ...definePropSignals(rawProps),
             ...validatedProps
         }
+        currentDefinePropsTracker?.(definedProps)
+
+        return definedProps
     }
 }