canvasengine 2.0.1-beta.1 → 2.0.1

package/src/engine/signal.ts

@@ -1,17 +1,65 @@
 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>;
+};
+
+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 readSignalValue = (value: any) => {
+  const callableValueSignal = value?.__canvasEngineCallableSignalValue;
+  if (callableValueSignal) return callableValueSignal();
+  return 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 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 +67,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 +90,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 +100,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,68 +123,304 @@ 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>();
+  let allDefinePropSignals: Record<string, any> | null = null;
 
   currentSubscriptionsTracker = (subscription) => {
     allSubscriptions.add(subscription);
   };
 
+  currentDefinePropsTracker = (signals) => {
+    allDefinePropSignals = {
+      ...(allDefinePropSignals ?? {}),
+      ...signals,
+    };
+  };
+
   mountTracker = (fn: 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;
+    currentDefinePropsTracker = 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 (allDefinePropSignals) {
+      (element as any)[DEFINE_PROPS_SIGNALS] = allDefinePropSignals;
+    }
+  };
 
-  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 ?? [])
+    ];
+    if (allDefinePropSignals) {
+      (component as any)[DEFINE_PROPS_SIGNALS] = allDefinePropSignals;
+    }
+  } 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) => {
+      let currentProps = props;
 
-  return component as ReturnType<C>;
+      const observable = new Observable<HotFlowResult>((subscriber) => {
+        let disposed = false;
+        let currentElement: Element | null = null;
+
+        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;
+          }
+
+          patchDefinePropsSignals(target, source);
+
+          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);
+              }
+              currentElement = element ?? null;
+            }
+          };
+
+          if (rendered instanceof Promise) {
+            rendered.then(next).catch((error) => subscriber.error(error));
+          } else {
+            next(rendered as Element);
+          }
+        };
+
+        emit();
+        (observable as any)[HOT_COMPONENT_UPDATE_PROPS] = (nextProps: P) => {
+          currentProps = nextProps;
+          emit(true);
+        };
+
+        const subscription = record!.updates.subscribe(() => emit());
+
+        return () => {
+          disposed = true;
+          if (currentElement) {
+            destroyElement(currentElement);
+            currentElement = null;
+          }
+          subscription.unsubscribe();
+        };
+      }) as any;
+
+      (observable as any)[HOT_COMPONENT_PROPS] = props;
+
+      return observable;
+    }) 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,40 +1,123 @@
 import { effect, signal } from "@signe/reactive";
 
-interface Listen<T = any> {
+export interface Listen<T = any> {
   config: T | undefined;
-  seed: number;
+  seed: {
+    config: T | undefined;
+    value: number;
+    resolve: (value: any) => void;
+  };
 }
 
-interface Trigger<T = any> {
-  start: () => void;
+export interface Trigger<T = any> {
+  start: () => Promise<void>;
   listen: () => Listen<T> | undefined;
 }
 
+/**
+ * Checks if the given argument is a Trigger object
+ * @param arg - The value to check
+ * @returns True if the argument is a Trigger object
+ */
 export function isTrigger(arg: any): arg is Trigger<any> {
   return arg?.start && arg?.listen;
 }
 
-export function trigger<T = any>(config?: T): Trigger<T> {
-  const _signal = signal(0);
+/**
+ * Creates a new trigger that can be used to pass data between components
+ * @param globalConfig - Optional configuration data to be passed when the trigger is activated
+ * @returns A Trigger object with start and listen methods
+ * @example
+ * ```ts
+ * const myTrigger = trigger()
+ * 
+ * on(myTrigger, (data) => {
+ *   console.log('Triggered with data:', data)
+ * })
+ * 
+ * myTrigger.start({ message: 'Hello' })
+ * ```
+ */
+export function trigger<T = any>(globalConfig?: T): Trigger<T> {
+  const _signal = signal({
+    config: globalConfig,
+    value: 0,
+    resolve: (value: any) => void 0,
+  });
   return {
-    start: () => {
-      _signal.set(Math.random());
+    start: (config?: T) => {
+      return new Promise((resolve: (value: any) => void) => {
+        const newValue = Math.random();
+        _signal.set({
+          config: {
+            ...globalConfig,
+            ...config,
+          },
+          resolve,
+          value: newValue,
+        });
+      });
     },
     listen: (): Listen<T> | undefined => {
       return {
-        config,
+        config: globalConfig,
         seed: _signal(),
       };
     },
   };
 }
 
-export function on(triggerSignal: any, callback: (config: any) => void) {
+/**
+ * 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()
+ * 
+ * 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) callback(result.config);
+    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((value: any) => seed.resolve(value)).catch(() => seed.resolve(undefined));
+      } else {
+        seed.resolve(ret);
+      }
+    } catch (err) {
+      seed.resolve(undefined);
+    }
   });
+
+  return effectResult.subscription;
 }