canvasengine 2.0.0-beta.6 → 2.0.0-beta.61

package/src/engine/signal.ts

@@ -1,17 +1,38 @@
 import {
-    Subscription
+  Observable,
+  Subject,
+  Subscription
 } from "rxjs";
+import { isSignal } from "@signe/reactive";
 import type { Element } from "./reactive";
+import { destroyElement, isElementFrozen, waitForDependencies } from "./reactive";
+import { isPromise } from "./utils";
 import { Tick } from "../directives/Scheduler";
+import { Container } from "../components";
 
-type MountFunction = (fn: (element: Element) => void) => void;
+type MountCallback = (element: Element) => any;
+type MountFunction = (fn: MountCallback) => void;
 
 // Define ComponentFunction type
 export type ComponentFunction<P = {}> = (props: P) => Element | Promise<Element>;
+type HotFlowResult = { elements: Element[] };
+type HotComponentRecord = {
+  component: ComponentFunction<any>;
+  updates: Subject<void>;
+  wrapper?: ComponentFunction<any>;
+};
 
 export let currentSubscriptionsTracker: ((subscription: Subscription) => void) | null = null;
 export let mountTracker: MountFunction | null = null;
 
+const getHotComponentRegistry = (): Map<string, HotComponentRecord> => {
+  const hotGlobal = globalThis as any;
+  if (!hotGlobal.__CANVAS_ENGINE_HOT_COMPONENTS__) {
+    hotGlobal.__CANVAS_ENGINE_HOT_COMPONENTS__ = new Map<string, HotComponentRecord>();
+  }
+  return hotGlobal.__CANVAS_ENGINE_HOT_COMPONENTS__;
+};
+
 /**
  * Registers a mount function to be called when the component is mounted.
  * To unmount the component, the function must return a function that will be called by the engine.
@@ -19,16 +40,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);
  *   }
  * });
  * ```
@@ -42,8 +63,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);
  * });
  * ```
  */
@@ -52,8 +73,12 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
     const { context } = el.props
     let subscription: Subscription | undefined
     if (context.tick) {
-      subscription = context.tick.observable.subscribe(({ value }) => {
-          fn(value, el)
+      subscription = context.tick.observable.subscribe(({ value }: { value: Tick }) => {
+        // Block tick if element is frozen
+        if (isElementFrozen(el)) {
+          return;
+        }
+        fn(value, el)
       })
     }
     return () => {
@@ -71,32 +96,73 @@ 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>>(
-  componentFunction: C,
+function _h<C extends ComponentFunction<any>>(
+  componentFunction: C | Element,
   props: Parameters<C>[0] = {} as Parameters<C>[0],
-  ...children: any[]
+  children: any[]
+): ReturnType<C> {
+  if (children[0] instanceof Array) {
+    children = children[0]
+  }
+
+  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 = createTrackedComponent(componentFunction, { ...props, children }) as Element;
+  }
+
+  if (!component) {
+    component = {} as any
+  }
+
+  // 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;
+  }
+
+  return component as ReturnType<C>;
+}
+
+function createTrackedComponent<C extends ComponentFunction<any>>(
+  componentFunction: C,
+  props: Parameters<C>[0]
 ): ReturnType<C> {
   const allSubscriptions = new Set<Subscription>();
-  const allMounts = new Set<MountFunction>();
+  const allMounts = new Set<MountCallback>();
 
   currentSubscriptionsTracker = (subscription) => {
     allSubscriptions.add(subscription);
@@ -106,33 +172,161 @@ export function h<C extends ComponentFunction<any>>(
     allMounts.add(fn);
   };
 
-  if (children[0] instanceof Array) {
-    children = children[0]
+  let component: ReturnType<C> = undefined as any;
+  try {
+    component = componentFunction(props) as ReturnType<C>;
+  } finally {
+    currentSubscriptionsTracker = null;
+    mountTracker = null;
   }
 
-  let component = componentFunction({ ...props, children }) as Element;
+  const applyTrackedEffects = (element: Element) => {
+    if (!element) return;
+    element.effectSubscriptions = [
+      ...Array.from(allSubscriptions),
+      ...((element as any).effectSubscriptions ?? [])
+    ];
+    element.effectMounts = [
+      ...Array.from(allMounts),
+      ...((element as any).effectMounts ?? [])
+    ];
+  };
 
-  if (!component) {
-    component = {} as any
+  if (component instanceof Promise) {
+    component.then((element) => {
+      applyTrackedEffects(element);
+      if (element?.props?.isRoot) {
+        allMounts.forEach((fn) => fn(element));
+      }
+    });
+  } else if (component instanceof Observable) {
+    (component as any).effectSubscriptions = [
+      ...Array.from(allSubscriptions),
+      ...((component as any).effectSubscriptions ?? [])
+    ];
+    (component as any).effectMounts = [
+      ...Array.from(allMounts),
+      ...((component as any).effectMounts ?? [])
+    ];
+  } else {
+    applyTrackedEffects(component as Element);
   }
 
-  component.effectSubscriptions = Array.from(allSubscriptions);
-  component.effectMounts = [
-    ...Array.from(allMounts),
-    ...((component as any).effectMounts ?? [])
-  ];
+  return component;
+}
 
-  // call mount hook for root component
-  if (component instanceof Promise) {
-    component.then((component) => {
-      if (component.props.isRoot) {
-        allMounts.forEach((fn) => fn(component));
-      }
-    })
+export function createHotComponent<P>(
+  id: string,
+  component: ComponentFunction<P>
+): ComponentFunction<P> {
+  const registry = getHotComponentRegistry();
+  let record = registry.get(id);
+
+  if (!record) {
+    record = {
+      component,
+      updates: new Subject<void>(),
+    };
+    registry.set(id, record);
+  } else {
+    record.component = component;
+    record.updates.next();
   }
 
-  currentSubscriptionsTracker = null;
-  mountTracker = null;
+  if (!record.wrapper) {
+    record.wrapper = ((props: P) => {
+      return new Observable<HotFlowResult>((subscriber) => {
+        let disposed = false;
+        let currentElement: Element | null = null;
 
-  return component as ReturnType<C>;
+        const emit = () => {
+          const rendered = createTrackedComponent(record!.component, props);
+          const next = (element: Element | null | undefined) => {
+            if (!disposed) {
+              subscriber.next({ elements: element ? [element] : [] });
+              if (currentElement && currentElement !== element) {
+                destroyElement(currentElement);
+              }
+              currentElement = element ?? null;
+            }
+          };
+
+          if (rendered instanceof Promise) {
+            rendered.then(next).catch((error) => subscriber.error(error));
+          } else {
+            next(rendered as Element);
+          }
+        };
+
+        emit();
+        const subscription = record!.updates.subscribe(emit);
+
+        return () => {
+          disposed = true;
+          if (currentElement) {
+            destroyElement(currentElement);
+            currentElement = null;
+          }
+          subscription.unsubscribe();
+        };
+      }) as any;
+    }) as ComponentFunction<any>;
+  }
+
+  return record.wrapper as ComponentFunction<P>;
+}
+
+/**
+ * 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: any) => {
+        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);
 }

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/useFocus.ts

@@ -0,0 +1,91 @@
+import { Signal } from "@signe/reactive";
+import { Element } from "../engine/reactive";
+import { focusManager } from "../engine/FocusManager";
+import { effect } from "@signe/reactive";
+
+/**
+ * Get the current focus index signal for a container
+ * 
+ * Returns a reactive signal that updates when the focus index changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focus index, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusIndex = useFocusIndex('myContainer');
+ * effect(() => {
+ *   console.log('Current focus index:', focusIndex?.());
+ * });
+ * ```
+ */
+export function useFocusIndex(containerId: string): Signal<number | null> | null {
+  return focusManager.getCurrentIndexSignal(containerId);
+}
+
+/**
+ * Get the current focused element signal for a container
+ * 
+ * Returns a reactive signal that updates when the focused element changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focused element, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusedElement = useFocusedElement('myContainer');
+ * effect(() => {
+ *   const element = focusedElement?.();
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusedElement(containerId: string): Signal<Element | null> | null {
+  return focusManager.getFocusedElementSignal(containerId);
+}
+
+/**
+ * Hook to react to focus changes
+ * 
+ * Sets up a reactive effect that calls the callback whenever the focus changes.
+ * 
+ * @param containerId - Container identifier
+ * @param callback - Function to call when focus changes
+ * @returns Cleanup function to unsubscribe
+ * 
+ * @example
+ * ```typescript
+ * useFocusChange('myContainer', (index, element) => {
+ *   console.log('Focus changed to index', index);
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusChange(
+  containerId: string,
+  callback: (index: number | null, element: Element | null) => void
+): () => void {
+  const indexSignal = focusManager.getCurrentIndexSignal(containerId);
+  const elementSignal = focusManager.getFocusedElementSignal(containerId);
+
+  if (!indexSignal || !elementSignal) {
+    console.warn(`FocusContainer with id "${containerId}" not found`);
+    return () => {};
+  }
+
+  // Set up reactive effect
+  const effectResult = effect(() => {
+    const index = indexSignal();
+    const element = elementSignal();
+    callback(index, element);
+  });
+
+  // Return cleanup function
+  return () => {
+    effectResult.subscription?.unsubscribe();
+  };
+}

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,15 +1,21 @@
-import './directives'
+
+export * from './directives'
 export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
 export * from './engine/reactive'
+export { registerAllComponents } from './engine/reactive'
 export * from './engine/signal'
 export * from './engine/trigger'
 export * from './engine/bootstrap'
 export * from './engine/animation'
+export { FocusManager, focusManager, type ScrollOptions } from './engine/FocusManager'
 export { useProps, useDefineProps } from './hooks/useProps'
+export { useFocusIndex, useFocusedElement, useFocusChange } from './hooks/useFocus'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'
+export * from './utils/tabindex'
 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/types/pixi-cull.d.ts

@@ -0,0 +1,7 @@
+declare module "pixi-cull" {
+  export class Simple {
+    constructor(options?: any);
+    lists: Array<any>;
+    cull(bounds: any): void;
+  }
+}