canvasengine 2.0.0-beta.4 → 2.0.0-beta.41

package/src/engine/signal.ts

@@ -1,8 +1,11 @@
 import {
-    Subscription
+  Observable,
+  Subscription
 } from "rxjs";
 import type { Element } from "./reactive";
+import { isElementFrozen } from "./reactive";
 import { Tick } from "../directives/Scheduler";
+import { Container } from "../components";
 
 type MountFunction = (fn: (element: Element) => void) => void;
 
@@ -53,7 +56,11 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
     let subscription: Subscription | undefined
     if (context.tick) {
       subscription = context.tick.observable.subscribe(({ value }) => {
-          fn(value, el)
+        // Block tick if element is frozen
+        if (isElementFrozen(el)) {
+          return;
+        }
+        fn(value, el)
       })
     }
     return () => {
@@ -91,7 +98,7 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
  * ```
  */
 export function h<C extends ComponentFunction<any>>(
-  componentFunction: C,
+  componentFunction: C | Element,
   props: Parameters<C>[0] = {} as Parameters<C>[0],
   ...children: any[]
 ): ReturnType<C> {
@@ -110,7 +117,25 @@ export function h<C extends ComponentFunction<any>>(
     children = children[0]
   }
 
-  let component = componentFunction({ ...props, children }) as Element;
+  let component: Element
+
+  if (Array.isArray(componentFunction)) {
+    if (componentFunction.length === 1) {
+      component = componentFunction[0]
+    }
+    else {
+      component = h(Container, {}, ...componentFunction) as Element
+    }
+  }
+  else if ('tag' in componentFunction) {
+    component = componentFunction
+  }
+  else if (componentFunction instanceof Observable) {
+    component = componentFunction as any
+  }
+  else {
+    component = componentFunction({ ...props, children }) as Element;
+  }
 
   if (!component) {
     component = {} as any
@@ -122,6 +147,12 @@ export function h<C extends ComponentFunction<any>>(
     ...((component as any).effectMounts ?? [])
   ];
 
+  // Copy dependencies prop to the returned element so it can be used for delayed mounting
+  if (props?.dependencies) {
+    component.props = component.props || {};
+    component.props.dependencies = props.dependencies;
+  }
+
   // call mount hook for root component
   if (component instanceof Promise) {
     component.then((component) => {

package/src/engine/trigger.ts

@@ -1,6 +1,6 @@
 import { effect, signal } from "@signe/reactive";
 
-interface Listen<T = any> {
+export interface Listen<T = any> {
   config: T | undefined;
   seed: {
     config: T | undefined;
@@ -9,7 +9,7 @@ interface Listen<T = any> {
   };
 }
 
-interface Trigger<T = any> {
+export interface Trigger<T = any> {
   start: () => Promise<void>;
   listen: () => Listen<T> | undefined;
 }
@@ -47,13 +47,14 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
   return {
     start: (config?: T) => {
       return new Promise((resolve: (value: any) => void) => {
+        const newValue = Math.random();
         _signal.set({
           config: {
             ...globalConfig,
             ...config,
           },
           resolve,
-          value: Math.random(),
+          value: newValue,
         });
       });
     },
@@ -70,27 +71,53 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
  * Subscribes to a trigger and executes a callback when the trigger is activated
  * @param triggerSignal - The trigger to subscribe to
  * @param callback - Function to execute when the trigger is activated
+ * @returns Subscription that can be unsubscribed to stop listening
  * @throws Error if triggerSignal is not a valid trigger
  * @example
  * ```ts
  * const click = trigger()
  * 
- * on(click, () => {
+ * const subscription = on(click, () => {
  *   console.log('Click triggered')
  * })
+ * 
+ * // Later, to stop listening:
+ * subscription.unsubscribe()
  * ```
  */
 export function on(triggerSignal: any, callback: (config: any) => void | Promise<void>) {
   if (!isTrigger(triggerSignal)) {
     throw new Error("In 'on(arg)' must have a trigger signal type");
   }
-  effect(() => {
+  let lastValue: number | undefined;
+
+  const effectResult = effect(() => {
     const result = triggerSignal.listen();
-    if (result?.seed.value) {
+    const seed = result?.seed;
+
+    if (!seed) return;
+
+    // Only run callback when the trigger value actually changes
+    if (lastValue === undefined) {
+      lastValue = seed.value;
+      return;
+    }
+    if (seed.value === lastValue) {
+      return;
+    }
+    lastValue = seed.value;
+
+    try {
       const ret = callback(result?.seed.config);
       if (ret && typeof ret.then === 'function') {
-        ret.then(result?.seed.resolve);
+        ret.then((value: any) => seed.resolve(value)).catch(() => seed.resolve(undefined));
+      } else {
+        seed.resolve(ret);
       }
+    } catch (err) {
+      seed.resolve(undefined);
     }
   });
+
+  return effectResult.subscription;
 }

package/src/engine/utils.ts

@@ -1,4 +1,6 @@
+import { isSignal } from "@signe/reactive"
 import { ObservablePoint } from "pixi.js"
+import { Observable } from "rxjs"
 
 /**
  * Checks if code is running in a browser environment
@@ -86,12 +88,23 @@ export function isFunction(val: unknown): boolean {
 }
 
 /**
- * Checks if a value is a plain object
+ * Checks if a value is a plain object (not an instance of a class)
  * @param {unknown} val - Value to check
- * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ * @returns {boolean} True if value is a plain object (not null, not array, not instance), false otherwise
+ * @example
+ * ```ts
+ * isObject({}) // true
+ * isObject(new Date()) // false
+ * isObject([]) // false
+ * isObject(null) // false
+ * ```
  */
 export function isObject(val: unknown): boolean {
-    return typeof val == 'object' && val != null && !Array.isArray(val)
+    return typeof val == 'object' && val != null && !Array.isArray(val) && val.constructor === Object
+}
+
+export function isObservable(val: unknown): boolean {
+    return val instanceof Observable
 }
 
 /**
@@ -186,6 +199,9 @@ export function setObservablePoint(
     else if (Array.isArray(point)) {
         observablePoint.set(point[0], point[1]);
     }
+    else if (isObject(point) && 'value' in point) {
+        observablePoint.set((point as any).value.x, (point as any).value.y);
+    }
     else {
         observablePoint.set(point.x, point.y);
     }

package/src/hooks/useProps.ts

@@ -25,7 +25,7 @@ export const useProps = (props, defaults = {}): any => {
     }
     for (let key in defaults) {
         if (!(key in obj)) {
-            obj[key] = signal(defaults[key])
+            obj[key] = isPrimitive(defaults[key]) ? signal(defaults[key]) : defaults[key]
         }
     }
     return obj

package/src/index.ts

@@ -1,4 +1,5 @@
-import './directives'
+
+export * from './directives'
 export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
@@ -12,4 +13,5 @@ export * from './utils/Ease'
 export * from './utils/RadialGradient'
 export * from './components/DisplayObject'
 export { isObservable } from 'rxjs'
-export * as Utils from './engine/utils'
+export * as Utils from './engine/utils'
+export * as Howl from 'howler'

package/src/utils/GlobalAssetLoader.ts

@@ -0,0 +1,257 @@
+/**
+ * Global Asset Loader
+ * 
+ * Tracks the loading progress of all assets (images, spritesheets, etc.) across all sprites in a component tree.
+ * This allows components to know when all assets are loaded, useful for displaying loaders or progress bars.
+ * 
+ * @example
+ * ```typescript
+ * const loader = new GlobalAssetLoader();
+ * 
+ * loader.onProgress((progress) => {
+ *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+ * });
+ * 
+ * loader.onComplete(() => {
+ *   console.log('All assets loaded!');
+ * });
+ * 
+ * // Register assets as they start loading
+ * const assetId = loader.registerAsset('path/to/image.png');
+ * 
+ * // Update progress
+ * loader.updateProgress(assetId, 0.5);
+ * 
+ * // Mark as complete
+ * loader.completeAsset(assetId);
+ * ```
+ */
+export class GlobalAssetLoader {
+  private assets: Map<string, { progress: number; completed: boolean }> = new Map();
+  private onProgressCallbacks: Set<(progress: number) => void> = new Set();
+  private onCompleteCallbacks: Set<() => void> = new Set();
+  private assetCounter: number = 0;
+  private isComplete: boolean = false;
+
+  /**
+   * Registers a new asset to track
+   * 
+   * @param assetPath - The path or identifier of the asset being loaded
+   * @returns A unique ID for this asset that should be used for progress updates
+   * 
+   * @example
+   * ```typescript
+   * const assetId = loader.registerAsset('path/to/image.png');
+   * ```
+   */
+  registerAsset(assetPath: string): string {
+    const assetId = `asset_${this.assetCounter++}_${assetPath}`;
+    this.assets.set(assetId, { progress: 0, completed: false });
+    this.isComplete = false;
+    this.updateGlobalProgress();
+    return assetId;
+  }
+
+  /**
+   * Updates the progress of a specific asset
+   * 
+   * @param assetId - The ID returned by registerAsset
+   * @param progress - Progress value between 0 and 1
+   * 
+   * @example
+   * ```typescript
+   * loader.updateProgress(assetId, 0.5); // 50% loaded
+   * ```
+   */
+  updateProgress(assetId: string, progress: number): void {
+    const asset = this.assets.get(assetId);
+    if (!asset) {
+      console.warn(`Asset ${assetId} not found in tracker`);
+      return;
+    }
+    
+    asset.progress = Math.max(0, Math.min(1, progress));
+    this.updateGlobalProgress();
+  }
+
+  /**
+   * Marks an asset as completely loaded
+   * 
+   * @param assetId - The ID returned by registerAsset
+   * 
+   * @example
+   * ```typescript
+   * loader.completeAsset(assetId);
+   * ```
+   */
+  completeAsset(assetId: string): void {
+    const asset = this.assets.get(assetId);
+    if (!asset) {
+      console.warn(`Asset ${assetId} not found in tracker`);
+      return;
+    }
+    
+    asset.progress = 1;
+    asset.completed = true;
+    this.updateGlobalProgress();
+    this.checkCompletion();
+  }
+
+  /**
+   * Removes an asset from tracking (useful for cleanup)
+   * 
+   * @param assetId - The ID returned by registerAsset
+   */
+  removeAsset(assetId: string): void {
+    this.assets.delete(assetId);
+    this.updateGlobalProgress();
+  }
+
+  /**
+   * Registers a callback that will be called whenever the global progress changes
+   * 
+   * @param callback - Function that receives the global progress (0-1)
+   * @returns A function to unregister the callback
+   * 
+   * @example
+   * ```typescript
+   * const unsubscribe = loader.onProgress((progress) => {
+   *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+   * });
+   * 
+   * // Later, to unsubscribe:
+   * unsubscribe();
+   * ```
+   */
+  onProgress(callback: (progress: number) => void): () => void {
+    this.onProgressCallbacks.add(callback);
+    
+    // Immediately call with current progress (wrap in try-catch for safety)
+    try {
+      callback(this.getGlobalProgress());
+    } catch (error) {
+      console.error('Error in onProgress callback:', error);
+    }
+    
+    return () => {
+      this.onProgressCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Registers a callback that will be called when all assets are loaded
+   * 
+   * @param callback - Function to call when all assets are complete
+   * @returns A function to unregister the callback
+   * 
+   * @example
+   * ```typescript
+   * const unsubscribe = loader.onComplete(() => {
+   *   console.log('All assets loaded!');
+   * });
+   * 
+   * // Later, to unsubscribe:
+   * unsubscribe();
+   * ```
+   */
+  onComplete(callback: () => void): () => void {
+    this.onCompleteCallbacks.add(callback);
+    
+    // If already complete, call immediately
+    if (this.isComplete) {
+      callback();
+    }
+    
+    return () => {
+      this.onCompleteCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Gets the current global progress (0-1)
+   * 
+   * @returns Progress value between 0 and 1
+   */
+  getGlobalProgress(): number {
+    if (this.assets.size === 0) {
+      return 1; // No assets means everything is "loaded"
+    }
+    
+    let totalProgress = 0;
+    for (const asset of this.assets.values()) {
+      totalProgress += asset.progress;
+    }
+    
+    return totalProgress / this.assets.size;
+  }
+
+  /**
+   * Gets the number of assets currently being tracked
+   * 
+   * @returns Number of registered assets
+   */
+  getAssetCount(): number {
+    return this.assets.size;
+  }
+
+  /**
+   * Gets the number of completed assets
+   * 
+   * @returns Number of completed assets
+   */
+  getCompletedCount(): number {
+    let count = 0;
+    for (const asset of this.assets.values()) {
+      if (asset.completed) count++;
+    }
+    return count;
+  }
+
+  /**
+   * Checks if all assets are loaded and triggers onComplete callbacks
+   */
+  private checkCompletion(): void {
+    if (this.isComplete) return;
+    
+    const allCompleted = Array.from(this.assets.values()).every(asset => asset.completed);
+    
+    if (allCompleted && this.assets.size > 0) {
+      this.isComplete = true;
+      this.onCompleteCallbacks.forEach(callback => {
+        try {
+          callback();
+        } catch (error) {
+          console.error('Error in onComplete callback:', error);
+        }
+      });
+    }
+  }
+
+  /**
+   * Updates global progress and notifies all progress callbacks
+   */
+  private updateGlobalProgress(): void {
+    const progress = this.getGlobalProgress();
+    // Create a copy of callbacks to avoid issues if callbacks modify the set
+    const callbacks = Array.from(this.onProgressCallbacks);
+    callbacks.forEach(callback => {
+      try {
+        callback(progress);
+      } catch (error) {
+        console.error('Error in onProgress callback:', error);
+      }
+    });
+  }
+
+  /**
+   * Resets the loader, clearing all assets and callbacks
+   */
+  reset(): void {
+    this.assets.clear();
+    this.onProgressCallbacks.clear();
+    this.onCompleteCallbacks.clear();
+    this.assetCounter = 0;
+    this.isComplete = false;
+  }
+}
+

package/src/utils/functions.ts

@@ -0,0 +1,7 @@
+export function isPercent(value?: string | number) {
+    if (!value) return false
+    if (typeof value === "string") {
+        return value.endsWith("%")
+    }
+    return false
+}

package/testing/index.ts

@@ -0,0 +1,12 @@
+import { bootstrapCanvas, Canvas, ComponentInstance, Element, h } from "canvasengine";
+
+export class TestBed {
+    static async createComponent(component: any, props: any = {}, children: any = []): Promise<Element<ComponentInstance>> {
+        const comp = () => h(Canvas, {
+            tickStart: false
+        }, h(component, props, children))
+        const { canvasElement, app } = await bootstrapCanvas(document.getElementById('root'), comp)
+        app.render()
+        return canvasElement.props.children?.[0]
+    }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "declarationMap": true,
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+} 

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  plugins: [dts()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'CanvasEngine'
+    },
+    rollupOptions: {
+      external: ['pixi.js'],
+      output: [
+        // ESM build
+        {
+          format: 'es',
+          dir: 'dist',
+          entryFileNames: 'index.js'
+        },
+        // IIFE build for global usage
+        {
+          format: 'iife',
+          dir: 'dist',
+          entryFileNames: 'index.global.js',
+          name: 'CanvasEngine',
+          globals: {
+            'pixi.js': 'PIXI'
+          },
+        }
+      ]
+    },
+    minify: true,
+    sourcemap: true
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
+  }
+})