canvasengine 2.0.0-beta.44 → 2.0.0-beta.45

package/dist/index.js

@@ -1,29 +1,29 @@
-import { h as a } from "./index-VPoz4ufu.js";
-import { A as r, a4 as i, a5 as n, B as l, M as c, H as u, C as p, k as m, a2 as S, a3 as g, au as d, m as C, D as b, at as h, ar as k, N as E, o as j, a7 as T, a as f, G as w, L as D, j as F, I as v, a6 as y, J as O, K as x, U as M, a1 as A, O as P, X as V, as as B, R as G, W as H, S as q, n as I, l as J, Y as N, Q as R, _ as z, $ as K, T as U, P as L, g as Q, Z as W, a0 as X, V as Y, aq as Z, ap as _, an as $, p as aa, ae as sa, ac as ea, af as ta, q as oa, f as ra, aj as ia, ao as na, s as la, t as ca, a8 as ua, ab as pa, v as ma, i as Sa, a9 as ga, w as da, ak as Ca, x as ba, ad as ha, ah as ka, ag as Ea, am as ja, r as Ta, aa as fa, y as wa, ai as Da, al as Fa, z as va, b as ya, e as Oa, c as xa, d as Ma, u as Aa } from "./index-VPoz4ufu.js";
+import { h as a } from "./index-DH2ZMhYm.js";
+import { A as o, a4 as r, a5 as n, B as c, M as l, H as u, C as p, k as m, a2 as S, a3 as d, aw as g, m as C, D as b, av as h, at as k, N as w, o as D, a7 as E, a as j, G as F, L as T, j as f, I as v, a6 as y, J as O, K as x, U as M, a1 as A, O as P, X as V, au as B, R as G, W as H, S as q, n as I, l as J, Y as N, Q as R, _ as z, $ as K, T as U, P as L, g as Q, Z as W, a0 as X, V as Y, as as Z, ar as _, ap as $, ab as aa, p as sa, ag as ea, ae as ta, ah as ia, q as oa, f as ra, al as na, aq as ca, s as la, t as ua, a8 as pa, ad as ma, v as Sa, i as da, a9 as ga, w as Ca, am as ba, x as ha, af as ka, aj as wa, ai as Da, ao as Ea, r as ja, aa as Fa, y as Ta, ak as fa, an as va, z as ya, b as Oa, e as xa, c as Ma, d as Aa, u as Pa, ac as Va } from "./index-DH2ZMhYm.js";
 const e = a.Howler;
 export {
-  r as ArraySubject,
-  i as Button,
+  o as ArraySubject,
+  r as Button,
   n as ButtonState,
-  l as Canvas,
-  c as Circle,
+  c as Canvas,
+  l as Circle,
   u as Container,
   p as ControlsBase,
   m as ControlsDirective,
   S as DOMContainer,
-  g as DOMElement,
-  d as DisplayObject,
+  d as DOMElement,
+  g as DisplayObject,
   C as Drag,
   b as Drop,
   h as EVENTS,
   k as Easing,
-  E as Ellipse,
-  j as Flash,
-  T as FocusContainer,
-  f as FocusManager,
-  w as GamepadControls,
-  D as Graphics,
-  F as Howl,
+  w as Ellipse,
+  D as Flash,
+  E as FocusContainer,
+  j as FocusManager,
+  F as GamepadControls,
+  T as Graphics,
+  f as Howl,
   e as Howler,
   v as Input,
   y as Joystick,
@@ -52,38 +52,40 @@ export {
   Z as animatedSequence,
   _ as animatedSignal,
   $ as bootstrapCanvas,
-  aa as computed,
-  sa as cond,
-  ea as createComponent,
-  ta as currentSubscriptionsTracker,
+  aa as checkDependencies,
+  sa as computed,
+  ea as cond,
+  ta as createComponent,
+  ia as currentSubscriptionsTracker,
   oa as effect,
   ra as focusManager,
-  ia as h,
-  na as isAnimatedSignal,
+  na as h,
+  ca as isAnimatedSignal,
   la as isArraySubject,
-  ca as isComputed,
-  ua as isElement,
-  pa as isElementFrozen,
-  ma as isObjectSubject,
-  Sa as isObservable,
+  ua as isComputed,
+  pa as isElement,
+  ma as isElementFrozen,
+  Sa as isObjectSubject,
+  da as isObservable,
   ga as isPrimitive,
-  da as isSignal,
-  Ca as isTrigger,
-  ba as linkedSignal,
-  ha as loop,
-  ka as mount,
-  Ea as mountTracker,
-  ja as on,
-  Ta as registerAllComponents,
-  fa as registerComponent,
-  wa as signal,
-  Da as tick,
-  Fa as trigger,
-  va as untracked,
-  ya as useDefineProps,
-  Oa as useFocusChange,
-  xa as useFocusIndex,
-  Ma as useFocusedElement,
-  Aa as useProps
+  Ca as isSignal,
+  ba as isTrigger,
+  ha as linkedSignal,
+  ka as loop,
+  wa as mount,
+  Da as mountTracker,
+  Ea as on,
+  ja as registerAllComponents,
+  Fa as registerComponent,
+  Ta as signal,
+  fa as tick,
+  va as trigger,
+  ya as untracked,
+  Oa as useDefineProps,
+  xa as useFocusChange,
+  Ma as useFocusIndex,
+  Aa as useFocusedElement,
+  Pa as useProps,
+  Va as waitForDependencies
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/engine/reactive.ts

@@ -120,6 +120,54 @@ export function registerAllComponents() {
   componentsRegistered = true;
 }
 
+/**
+ * Checks if all dependencies are ready (not undefined).
+ * Handles signals synchronously and promises asynchronously.
+ * For reactive signals, sets up subscriptions to mount when all become ready.
+ * 
+ * @param deps - Array of signals, promises, or direct values
+ * @returns Promise<boolean> - true if all dependencies are ready
+ */
+export async function checkDependencies(
+  deps: any[]
+): Promise<boolean> {
+  const values = await Promise.all(
+    deps.map(async (dep) => {
+      if (isSignal(dep)) {
+        return dep(); // Read current signal value
+      } else if (isPromise(dep)) {
+        return await dep; // Await promise resolution
+      }
+      return dep; // Direct value
+    })
+  );
+  return values.every((v) => v !== undefined);
+}
+
+export function waitForDependencies(deps: any[]): Promise<void> {
+  return new Promise(async (resolve) => {
+    const ready = await checkDependencies(deps);
+    if (ready) {
+      resolve();
+      return;
+    }
+
+    const signalDeps = deps.filter((dep) => isSignal(dep));
+    if (signalDeps.length === 0) {
+      return;
+    }
+
+    const signalObservables = signalDeps.map((sig) => sig.observable);
+    const subscription = combineLatest(signalObservables).subscribe(async () => {
+      const allReady = await checkDependencies(deps);
+      if (allReady) {
+        subscription.unsubscribe();
+        resolve();
+      }
+    });
+  });
+}
+
 /**
  * Checks if an element is currently frozen.
  * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),
@@ -376,22 +424,12 @@ export function createComponent(tag: string, props?: Props): Element {
    * @param deps - Array of signals, promises, or direct values
    * @returns Promise<boolean> - true if all dependencies are ready
    */
-  async function checkDependencies(
-    deps: any[]
-  ): Promise<boolean> {
-    const values = await Promise.all(
-      deps.map(async (dep) => {
-        if (isSignal(dep)) {
-          return dep(); // Read current signal value
-        } else if (isPromise(dep)) {
-          return await dep; // Await promise resolution
-        }
-        return dep; // Direct value
-      })
-    );
-    return values.every((v) => v !== undefined);
-  }
 
+
+  /**
+   * Sets up subscriptions to reactive signal dependencies.
+   * When all signals become defined, mounts the component.
+   */
   /**
    * Sets up subscriptions to reactive signal dependencies.
    * When all signals become defined, mounts the component.

package/src/engine/signal.ts

@@ -2,8 +2,10 @@ import {
   Observable,
   Subscription
 } from "rxjs";
+import { isSignal } from "@signe/reactive";
 import type { Element } from "./reactive";
-import { isElementFrozen } from "./reactive";
+import { isElementFrozen, waitForDependencies } from "./reactive";
+import { isPromise } from "./utils";
 import { Tick } from "../directives/Scheduler";
 import { Container } from "../components";
 
@@ -22,16 +24,16 @@ export let mountTracker: MountFunction | null = null;
  * @param {(element: Element) => void} fn - The function to be called on mount.
  * @example
  * ```ts
- * mount((el) => {
- *   console.log('mounted', el);
+  * mount((el) => {
+ * console.log('mounted', el);
  * });
  * ```
  * Unmount the component by returning a function:
  * ```ts
- * mount((el) => {
- *   console.log('mounted', el);
+  * mount((el) => {
+ * console.log('mounted', el);
  *   return () => {
- *     console.log('unmounted', el);
+ * console.log('unmounted', el);
  *   }
  * });
  * ```
@@ -45,8 +47,8 @@ export function mount(fn: (element: Element) => void) {
  * @param {(tickValue: Tick, element: Element) => void} fn - The function to be called on each tick.
  * @example
  * ```ts
- * tick((tickValue, el) => {
- *   console.log('tick', tickValue, el);
+  * tick((tickValue, el) => {
+ * console.log('tick', tickValue, el);
  * });
  * ```
  */
@@ -78,29 +80,29 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
  * @returns {ReturnType<C>}
  * @example
  * ```ts
- * const el = h(MyComponent, {
- *   x: 100,
- *   y: 100,
- * });
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * });
  * ```
  * 
  * with children:
  * ```ts
- * const el = h(MyComponent, {
- *   x: 100,
- *   y: 100,
- * }, 
- *   h(MyChildComponent, {
- *     x: 50,
- *     y: 50,
- *   }),
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * }, 
+ * h(MyChildComponent, {
+      *     x: 50,
+      *     y: 50,
+      *   }),
  * );
  * ```
  */
-export function h<C extends ComponentFunction<any>>(
+function _h<C extends ComponentFunction<any>>(
   componentFunction: C | Element,
   props: Parameters<C>[0] = {} as Parameters<C>[0],
-  ...children: any[]
+  children: any[]
 ): ReturnType<C> {
   const allSubscriptions = new Set<Subscription>();
   const allMounts = new Set<MountFunction>();
@@ -124,7 +126,7 @@ export function h<C extends ComponentFunction<any>>(
       component = componentFunction[0]
     }
     else {
-      component = h(Container, {}, ...componentFunction) as Element
+      component = _h(Container, {}, componentFunction) as Element
     }
   }
   else if ('tag' in componentFunction) {
@@ -167,3 +169,58 @@ export function h<C extends ComponentFunction<any>>(
 
   return component as ReturnType<C>;
 }
+
+/**
+ * Add tracking for subscriptions and mounts, then create an element from a component function.
+ * @template C
+ * @param {C} componentFunction - The component function to create an element from.
+ * @param {Parameters<C>[0]} [props={}] - The props to pass to the component function.
+ * @param {...any[]} children - The children elements of the component.
+ * @returns {ReturnType<C>}
+ * @example
+ * ```ts
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * });
+ * ```
+ * 
+ * with children:
+ * ```ts
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * }, 
+ * h(MyChildComponent, {
+      *     x: 50,
+      *     y: 50,
+      *   }),
+ * );
+ * ```
+ */
+export function h<C extends ComponentFunction<any>>(
+  componentFunction: C | Element,
+  props: Parameters<C>[0] = {} as Parameters<C>[0],
+  ...children: any[]
+): ReturnType<C> {
+  if (props?.dependencies) {
+    const hasPromise = props.dependencies.some(isPromise);
+    if (!hasPromise) {
+      const allReady = props.dependencies.every(dep => {
+        if (isSignal(dep)) return dep() !== undefined;
+        return dep !== undefined;
+      });
+      if (allReady) {
+        return _h(componentFunction, props, children);
+      }
+    }
+
+    return new Observable(subscriber => {
+      waitForDependencies(props.dependencies).then(() => {
+        const el = _h(componentFunction, props, children);
+        subscriber.next(el);
+      });
+    }) as any;
+  }
+  return _h(componentFunction, props, children);
+}