canvasengine 1.3.0 → 2.0.0-beta.2

package/src/engine/reactive.ts

@@ -0,0 +1,379 @@
+import { Signal, WritableArraySignal, isSignal } from "@signe/reactive";
+import {
+  Observable,
+  Subject,
+  Subscription,
+  defer,
+  from,
+  map,
+  of,
+  switchMap,
+} from "rxjs";
+import { ComponentInstance } from "../components/DisplayObject";
+import { Directive, applyDirective } from "./directive";
+import { isObject, isPromise, set } from "./utils";
+
+export interface Props {
+  [key: string]: any;
+}
+
+export type ArrayChange<T> = {
+  type: "add" | "remove" | "update" | "init" | "reset";
+  index?: number;
+  items: T[];
+};
+
+type ElementObservable<T> = Observable<
+  ArrayChange<T> & {
+    value: Element | Element[];
+  }
+>;
+
+type NestedSignalObjects = {
+  [Key in string]: NestedSignalObjects | Signal<any>;
+};
+
+export interface Element<T = ComponentInstance> {
+  tag: string;
+  props: Props;
+  componentInstance: T;
+  propSubscriptions: Subscription[];
+  effectSubscriptions: Subscription[];
+  effectMounts: (() => void)[];
+  effectUnmounts: ((element?: Element) => void)[];
+  propObservables: NestedSignalObjects | undefined;
+  parent: Element | null;
+  context?: {
+    [key: string]: any;
+  };
+  directives: {
+    [key: string]: Directive;
+  };
+  destroy: () => void;
+  allElements: Subject<void>;
+}
+
+type FlowObservable = Observable<{
+  elements: Element[];
+  prev?: Element;
+}>;
+
+const components: { [key: string]: any } = {};
+
+export const isElement = (value: any): value is Element => {
+  return (
+    value &&
+    typeof value === "object" &&
+    "tag" in value &&
+    "props" in value &&
+    "componentInstance" in value
+  );
+};
+
+export const isPrimitive = (value) => {
+  return (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean" ||
+    value === null ||
+    value === undefined
+  );
+};
+
+export function registerComponent(name, component) {
+  components[name] = component;
+}
+
+function destroyElement(element: Element | Element[]) {
+  if (Array.isArray(element)) {
+    element.forEach((e) => destroyElement(e));
+    return;
+  }
+  if (!element) {
+    return;
+  }
+  element.propSubscriptions.forEach((sub) => sub.unsubscribe());
+  element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+  for (let name in element.directives) {
+    element.directives[name].onDestroy?.();
+  }
+  element.componentInstance.onDestroy?.(element.parent as any);
+  element.effectUnmounts.forEach((fn) => fn?.());
+}
+
+/**
+ * Creates a virtual element or a representation thereof, with properties that can be dynamically updated based on BehaviorSubjects.
+ *
+ * @param {string} tag - The tag name of the element to create.
+ * @param {Object} props - An object containing properties for the element. Each property can either be a direct value
+ *                         or an array where the first element is a function that returns a value based on input parameters,
+ *                         and the second element is an array of BehaviorSubjects. The property is updated dynamically
+ *                         using the combineLatest RxJS operator to wait for all BehaviorSubjects to emit.
+ * @returns {Object} An object representing the created element, including tag name and dynamic properties.
+ */
+export function createComponent(tag: string, props?: Props): Element {
+  if (!components[tag]) {
+    throw new Error(`Component ${tag} is not registered`);
+  }
+  const instance = new components[tag]();
+  const element: Element = {
+    tag,
+    props: {},
+    componentInstance: instance,
+    propSubscriptions: [],
+    propObservables: props,
+    parent: null,
+    directives: {},
+    effectUnmounts: [],
+    effectSubscriptions: [],
+    effectMounts: [],
+    destroy() {
+      destroyElement(this);
+    },
+    allElements: new Subject(),
+  };
+
+  // Iterate over each property in the props object
+  if (props) {
+    const recursiveProps = (props, path = "") => {
+      const _set = (path, key, value) => {
+        if (path == "") {
+          element.props[key] = value;
+          return;
+        }
+        set(element.props, path + "." + key, value);
+      };
+
+      Object.entries(props).forEach(([key, value]: [string, unknown]) => {
+        if (isSignal(value)) {
+          const _value = value as Signal<any>;
+          if ("dependencies" in _value && _value.dependencies.size == 0) {
+            _set(path, key, _value());
+            return;
+          }
+          element.propSubscriptions.push(
+            _value.observable.subscribe((value) => {
+              _set(path, key, value);
+              if (element.directives[key]) {
+                element.directives[key].onUpdate?.(value);
+              }
+              if (key == "tick") {
+                return
+              }
+              instance.onUpdate?.(
+                path == ""
+                  ? {
+                      [key]: value,
+                    }
+                  : set({}, path + "." + key, value)
+              );
+            })
+          );
+        } else {
+          if (isObject(value) && key != "context" && !isElement(value)) {
+            recursiveProps(value, (path ? path + "." : "") + key);
+          } else {
+            _set(path, key, value);
+          }
+        }
+      });
+    };
+    recursiveProps(props);
+  }
+
+  instance.onInit?.(element.props);
+  instance.onUpdate?.(element.props);
+
+  const onMount = (parent: Element, element: Element, index?: number) => {
+    element.props.context = parent.props.context;
+    element.parent = parent;
+    element.componentInstance.onMount?.(element, index);
+    for (let name in element.directives) {
+      element.directives[name].onMount?.(element);
+    }
+    element.effectMounts.forEach((fn: any) => {
+      element.effectUnmounts.push(fn(element));
+    });
+  };
+
+  const elementsListen = new Subject<any>()
+
+  if (props?.isRoot) {
+    // propagate recrusively context in all children
+    const propagateContext = async (element) => {
+      if (!element.props.children) {
+        return;
+      }
+      for (let child of element.props.children) {
+        if (!child) continue;
+        if (isPromise(child)) {
+          child = await child;
+        }
+        if (child instanceof Observable) {
+          child.subscribe(
+            ({
+              elements: comp,
+              prev,
+            }: {
+              elements: Element[];
+              prev?: Element;
+            }) => {
+              // if prev, insert element after this
+              const components = comp.filter((c) => c !== null);
+              if (prev) {
+                components.forEach((c) => {
+                  const index = element.props.children.indexOf(prev.props.key);
+                  onMount(element, c, index + 1);
+                  propagateContext(c);
+                });
+                return;
+              }
+              components.forEach((component) => {
+                if (!Array.isArray(component)) {
+                  onMount(element, component);
+                  propagateContext(component);
+                } else {
+                  component.forEach((comp) => {
+                    onMount(element, comp);
+                    propagateContext(comp);
+                  });
+                }
+              });
+              elementsListen.next(undefined)
+            }
+          );
+        } else {
+          onMount(element, child);
+          await propagateContext(child);
+        }
+      }
+    };
+    element.allElements = elementsListen
+    element.props.context.rootElement = element;
+    element.componentInstance.onMount?.(element);
+    propagateContext(element);
+  }
+
+  if (props) {
+    for (let key in props) {
+      const directive = applyDirective(element, key);
+      if (directive) element.directives[key] = directive;
+    }
+  }
+
+  // Return the created element representation
+  return element;
+}
+
+/**
+ * Observes a BehaviorSubject containing an array of items and dynamically creates child elements for each item.
+ *
+ * @param {BehaviorSubject<Array>} itemsSubject - A BehaviorSubject that emits an array of items.
+ * @param {Function} createElementFn - A function that takes an item and returns an element representation.
+ * @returns {Observable} An observable that emits the list of created child elements.
+ */
+export function loop<T = any>(
+  itemsSubject: WritableArraySignal<T>,
+  createElementFn: (item: any, index: number) => Element | Promise<Element>
+): FlowObservable {
+  let elements: Element[] = [];
+
+  const addAt = (items, insertIndex: number) => {
+    return items.map((item, index) => {
+      const element = createElementFn(item, insertIndex + index);
+      elements.splice(insertIndex + index, 0, element as Element);
+      return element;
+    });
+  };
+
+  return defer(() => {
+    let initialItems = [...itemsSubject._subject.items];
+    let init = true;
+    return itemsSubject.observable.pipe(
+      map((event: ArrayChange<T>) => {
+        const { type, items, index } = event;
+        if (init) {
+          if (elements.length > 0) {
+            return {
+              elements: elements,
+              fullElements: elements,
+            };
+          }
+          const newElements = addAt(initialItems, 0);
+          initialItems = [];
+          init = false;
+          return {
+            elements: newElements,
+            fullElements: elements,
+          };
+        } else if (type == "reset") {
+          if (elements.length != 0) {
+            elements.forEach((element) => {
+              destroyElement(element);
+            });
+            elements = [];
+          }
+          const newElements = addAt(items, 0);
+          return {
+            elements: newElements,
+            fullElements: elements,
+          };
+        } else if (type == "add" && index != undefined) {
+          const lastElement = elements[index - 1];
+          const newElements = addAt(items, index);
+          return {
+            prev: lastElement,
+            elements: newElements,
+            fullElements: elements,
+          };
+        } else if (index != undefined && type == "remove") {
+          const currentElement = elements[index];
+          destroyElement(currentElement);
+          elements.splice(index, 1);
+          return {
+            elements: [],
+          };
+        }
+        return {
+          elements: [],
+          fullElements: elements,
+        };
+      })
+    );
+  });
+}
+
+export function cond(
+  condition: Signal,
+  createElementFn: () => Element | Promise<Element>
+): FlowObservable {
+  let element: Element | null = null;
+  return (condition.observable as Observable<boolean>).pipe(
+    switchMap((bool) => {
+      if (bool) {
+        let _el = createElementFn();
+        if (isPromise(_el)) {
+          return from(_el as Promise<Element>).pipe(
+            map((el) => {
+              element = _el as Element;
+              return {
+                type: "init",
+                elements: [el],
+              };
+            })
+          );
+        }
+        element = _el as Element;
+        return of({
+          type: "init",
+          elements: [element],
+        });
+      } else if (element) {
+        destroyElement(element);
+      }
+      return of({
+        elements: [],
+      });
+    })
+  );
+}

package/src/engine/signal.ts

@@ -0,0 +1,138 @@
+import {
+    Subscription
+} from "rxjs";
+import type { Element } from "./reactive";
+import { Tick } from "../directives/Scheduler";
+
+type MountFunction = (fn: (element: Element) => void) => void;
+
+// Define ComponentFunction type
+export type ComponentFunction<P = {}> = (props: P) => Element | Promise<Element>;
+
+export let currentSubscriptionsTracker: ((subscription: Subscription) => void) | null = null;
+export let mountTracker: MountFunction | null = null;
+
+/**
+ * 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.
+ * 
+ * @param {(element: Element) => void} fn - The function to be called on mount.
+ * @example
+ * ```ts
+ * mount((el) => {
+ *   console.log('mounted', el);
+ * });
+ * ```
+ * Unmount the component by returning a function:
+ * ```ts
+ * mount((el) => {
+ *   console.log('mounted', el);
+ *   return () => {
+ *     console.log('unmounted', el);
+ *   }
+ * });
+ * ```
+ */
+export function mount(fn: (element: Element) => void) {
+  mountTracker?.(fn);
+}
+
+/**
+ * Registers a tick function to be called on each tick of the component's context.
+ * @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);
+ * });
+ * ```
+ */
+export function tick(fn: (tickValue: Tick, element: Element) => void) {
+  mount((el: Element) => {
+    const { context } = el.props
+    let subscription: Subscription | undefined
+    if (context.tick) {
+      subscription = context.tick.observable.subscribe(({ value }) => {
+          fn(value, el)
+      })
+    }
+    return () => {
+      subscription?.unsubscribe()
+    }
+  })
+}
+
+/**
+ * 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,
+  props: Parameters<C>[0] = {} as Parameters<C>[0],
+  ...children: any[]
+): ReturnType<C> {
+  const allSubscriptions = new Set<Subscription>();
+  const allMounts = new Set<MountFunction>();
+
+  currentSubscriptionsTracker = (subscription) => {
+    allSubscriptions.add(subscription);
+  };
+
+  mountTracker = (fn: any) => {
+    allMounts.add(fn);
+  };
+
+  if (children[0] instanceof Array) {
+    children = children[0]
+  }
+
+  let component = componentFunction({ ...props, children }) as Element;
+
+  if (!component) {
+    component = {} as any
+  }
+
+  component.effectSubscriptions = Array.from(allSubscriptions);
+  component.effectMounts = [
+    ...Array.from(allMounts),
+    ...((component as any).effectMounts ?? [])
+  ];
+
+  // call mount hook for root component
+  if (component instanceof Promise) {
+    component.then((component) => {
+      if (component.props.isRoot) {
+        allMounts.forEach((fn) => fn(component));
+      }
+    })
+  }
+
+  currentSubscriptionsTracker = null;
+  mountTracker = null;
+
+  return component as ReturnType<C>;
+}

package/src/engine/trigger.ts

@@ -0,0 +1,40 @@
+import { effect, signal } from "@signe/reactive";
+
+interface Listen<T = any> {
+  config: T | undefined;
+  seed: number;
+}
+
+interface Trigger<T = any> {
+  start: () => void;
+  listen: () => Listen<T> | undefined;
+}
+
+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);
+  return {
+    start: () => {
+      _signal.set(Math.random());
+    },
+    listen: (): Listen<T> | undefined => {
+      return {
+        config,
+        seed: _signal(),
+      };
+    },
+  };
+}
+
+export function on(triggerSignal: any, callback: (config: any) => void) {
+  if (!isTrigger(triggerSignal)) {
+    throw new Error("In 'on(arg)' must have a trigger signal type");
+  }
+  effect(() => {
+    const result = triggerSignal.listen();
+    if (result?.seed) callback(result.config);
+  });
+}

package/src/engine/utils.ts

@@ -0,0 +1,135 @@
+import { ObservablePoint } from "pixi.js"
+
+export function isBrowser(): boolean {
+    return typeof window !== 'undefined'
+}
+
+export function preciseNow(): number {
+    return typeof performance !== 'undefined' ? performance.now() : Date.now()
+}
+
+export function fps2ms(fps: number): number {
+    return 1000 / fps
+}
+
+export function isPromise(value: any): boolean {
+    return value && value instanceof Promise
+}
+
+export function arrayEquals(a: any[], b: any[]): boolean {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+        const v = a[i];
+        const bv = b[i];
+        if (typeof v === 'object' && v !== null) {
+            if (typeof bv !== 'object' || bv === null) return false;
+            if (Array.isArray(v)) {
+                if (!Array.isArray(bv) || !arrayEquals(v, bv)) return false;
+            } else if (!objectEquals(v, bv)) {
+                return false;
+            }
+        } else if (v !== bv) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function objectEquals(a: object, b: object): boolean {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (let key of keysA) {
+        if (!b.hasOwnProperty(key)) return false;
+        if (!deepEquals(a[key], b[key])) return false;
+    }
+    return true;
+}
+
+function deepEquals(a: any, b: any): boolean {
+    if (a === b) return true;
+    if (typeof a !== typeof b) return false;
+    if (typeof a === 'object' && a !== null) {
+        if (Array.isArray(a)) {
+            return Array.isArray(b) && arrayEquals(a, b);
+        }
+        return objectEquals(a, b);
+    }
+    return false;
+}
+
+export function isFunction(val: unknown): boolean {
+    return {}.toString.call(val) === '[object Function]'
+}
+
+export function isObject(val: unknown): boolean {
+    return typeof val == 'object' && val != null && !Array.isArray(val)
+}
+
+export function set(obj, path, value, onlyPlainObject = false) {
+    if (Object(obj) !== obj) return obj;
+
+    if (typeof path === 'string') {
+        path = path.split('.');
+    }
+
+    let len = path.length;
+    if (!len) return obj;
+
+    let current = obj;
+    for (let i = 0; i < len - 1; i++) {
+        let segment = path[i];
+        let nextSegment = path[i + 1];
+        let isNextNumeric = !isNaN(nextSegment) && isFinite(nextSegment);
+
+        if (!current[segment] || typeof current[segment] !== 'object') {
+            current[segment] = (isNextNumeric && !onlyPlainObject) ? [] : {};
+        }
+
+        current = current[segment];
+    }
+
+    current[path[len - 1]] = value;
+
+    return obj;
+}
+
+export function get(obj, path) {
+    const keys = path.split('.');
+    let current = obj;
+
+    for (let key of keys) {
+        if (current[key] === undefined) {
+            return undefined;
+        }
+        current = current[key];
+    }
+
+    return current;
+}
+
+export function log(text) {
+    console.log(text)
+}
+
+export function error(text) {
+    console.error(text)
+}
+
+export function setObservablePoint(observablePoint: ObservablePoint, point: { x: number, y: number } | number | [number, number]): void {
+    if (typeof point === 'number') {
+        observablePoint.set(point);
+    }
+    else if (Array.isArray(point)) {
+        observablePoint.set(point[0], point[1]);
+    }
+    else {
+        observablePoint.set(point.x, point.y);
+    }
+}
+
+export function calculateDistance(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.sqrt(dx * dx + dy * dy);
+}

package/src/hooks/addContext.ts

@@ -0,0 +1,6 @@
+export const addContext = (element, key, value) => {
+    element.props.context = {
+        ...(element.props.context ?? {}),
+        [key]: value
+    }
+}