@arcanejs/toolkit 0.0.3 → 0.1.0

package/dist/base-BJAPu0O1.d.ts

@@ -0,0 +1,234 @@
+import { Diff } from '@arcanejs/diff';
+
+/**
+ * Styling options for the [[Group]] component
+ *
+ * Default Styling: [[GROUP_DEFAULT_STYLE]]
+ */
+type GroupComponentStyle = {
+    /**
+     * In which way should child components of this group be organized?
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * If true, when the group runs out of vertical or horizontal space, child
+     * components will be wrapped, and start to be arranged on additional columns
+     * or rows.
+     */
+    wrap?: boolean;
+    /**
+     * If true, this group will have a border and a different color background
+     * to its parent.
+     *
+     * This allows you to add a distinctive border between components,
+     * without needing to set a header, add header components,
+     * or make it collapsible.
+     */
+    border?: true;
+};
+/**
+ * Styling options for the [[Label]] component
+ *
+ * Default Styling: [[LABEL_DEFAULT_STYLE]]
+ */
+type LabelComponentStyle = {
+    /**
+     * If true, make the text of this label bold
+     */
+    bold?: boolean;
+};
+
+type BaseComponent = {
+    key: number;
+};
+type ButtonComponent = BaseComponent & {
+    component: 'button';
+    text: string;
+    icon?: string;
+    state: {
+        state: 'normal' | 'pressed';
+    } | {
+        state: 'error';
+        error: string;
+    };
+};
+type GroupCollapsedState = 'open' | 'closed';
+type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
+type GroupHeaderComponent = BaseComponent & {
+    component: 'group-header';
+    children: Component$1[];
+};
+type GroupComponent = BaseComponent & GroupComponentStyle & {
+    component: 'group';
+    title?: string;
+    children: Component$1[];
+    headers?: GroupHeaderComponent[];
+    labels?: Array<{
+        text: string;
+    }>;
+    editableTitle: boolean;
+    /**
+     * If set, allows the group to be collapsed,
+     * by default set to the given state
+     */
+    defaultCollapsibleState?: DefaultGroupCollapsedState;
+};
+type LabelComponent = BaseComponent & {
+    component: 'label';
+    bold?: boolean;
+    text: string;
+};
+type RectComponent = BaseComponent & {
+    component: 'rect';
+    color: string;
+};
+type SliderButtonComponent = BaseComponent & {
+    component: 'slider_button';
+    min: number;
+    max: number;
+    step: number;
+    value: number | null;
+};
+type SwitchComponent = BaseComponent & {
+    component: 'switch';
+    state: 'on' | 'off';
+};
+type TabComponent = BaseComponent & {
+    component: 'tab';
+    name: string;
+    child?: Component$1;
+};
+type TabsComponent = BaseComponent & {
+    component: 'tabs';
+    tabs: TabComponent[];
+};
+type TextInputComponent = BaseComponent & {
+    component: 'text-input';
+    value: string;
+};
+type TimelineState = {
+    state: 'playing';
+    totalTimeMillis: number;
+    effectiveStartTime: number;
+    speed: number;
+} | {
+    state: 'stopped';
+    totalTimeMillis: number;
+    currentTimeMillis: number;
+};
+type TimelineComponent = BaseComponent & {
+    component: 'timeline';
+    state: TimelineState;
+    title?: string;
+    subtitles?: string[];
+    source?: {
+        name: string;
+    };
+};
+type Component$1 = ButtonComponent | GroupHeaderComponent | GroupComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
+type SendTreeMsg = {
+    type: 'tree-full';
+    root: GroupComponent;
+};
+type UpdateTreeMsg = {
+    type: 'tree-diff';
+    diff: Diff<GroupComponent>;
+};
+type ServerMessage = SendTreeMsg | UpdateTreeMsg;
+type BaseClientComponentMessage = {
+    type: 'component-message';
+    componentKey: number;
+};
+type ButtonPressMessage = BaseClientComponentMessage & {
+    component: 'button';
+};
+type GroupTitleChangeMessage = BaseClientComponentMessage & {
+    component: 'group';
+    title: string;
+};
+type SliderButtonUpdateMessage = BaseClientComponentMessage & {
+    component: 'slider_button';
+    value: number;
+};
+type SwitchToggleMessage = BaseClientComponentMessage & {
+    component: 'switch';
+};
+type TextInputUpdateMessage = BaseClientComponentMessage & {
+    component: 'text-input';
+    value: string;
+};
+type ClientComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
+type ClientMessage = ClientComponentMessage;
+
+declare class IDMap {
+    private readonly idMap;
+    private nextId;
+    getId(object: object): number;
+}
+
+interface Component {
+    getProtoInfo(idMap: IDMap): Component$1;
+    handleMessage(message: ClientComponentMessage): void;
+    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
+    setParent(parent: Parent | null): void;
+}
+declare abstract class Base<Props> implements Component {
+    /** @hidden */
+    private parent;
+    /** @hidden */
+    private readonly defaultProps;
+    /** @hidden */
+    private _props;
+    constructor(defaultProps: Props, props?: Partial<Props>);
+    get props(): Props;
+    set props(props: Partial<Props>);
+    setProps: (props: Partial<Props>) => void;
+    updateProps: (updates: Partial<Props>) => void;
+    /** @hidden */
+    setParent(parent: Parent | null): void;
+    /** @hidden */
+    updateTree(): void;
+    /** @hidden */
+    abstract getProtoInfo(idMap: IDMap): Component$1;
+    /** @hidden */
+    handleMessage(message: ClientComponentMessage): void;
+    routeMessage(_idMap: IDMap, _message: ClientComponentMessage): void;
+}
+/** @hidden */
+interface Parent {
+    updateTree(): void;
+    removeChild(component: Component): void;
+}
+declare abstract class BaseParent<T> extends Base<T> implements Parent {
+    /** @hidden */
+    private children;
+    abstract validateChildren(children: Component[]): void;
+    appendChildren: <CS extends Component[]>(...children: CS) => CS;
+    appendChild: <C extends Component>(child: C) => C;
+    removeChild: (component: Component) => void;
+    removeAllChildren: () => void;
+    /**
+     * Return all children components that messages need to be routed to
+     */
+    getChildren: () => readonly Component[];
+    /**
+     * TODO: we can do this better, right now it broadcasts the message to all
+     * components of the tree
+     *
+     * @hidden
+     */
+    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
+    insertBefore(child: Component, beforeChild: Component): void;
+}
+interface Listenable<Map extends Record<string, (...args: any[]) => void>> {
+    addListener<T extends keyof Map>(type: T, listener: Map[T]): void;
+    removeListener<T extends keyof Map>(type: T, listener: Map[T]): void;
+}
+declare class EventEmitter<Map extends Record<string, (...args: any[]) => void>> implements Listenable<Map> {
+    private readonly listeners;
+    addListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
+    removeListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
+    emit: <T extends keyof Map>(type: T, ...args: Parameters<Map[T]>) => Promise<unknown>;
+}
+
+export { BaseParent as B, type ClientMessage as C, EventEmitter as E, type GroupComponentStyle as G, IDMap as I, type Listenable as L, type Parent as P, type ServerMessage as S, type TabComponent as T, type Component as a, type GroupHeaderComponent as b, type GroupComponent as c, type ClientComponentMessage as d, Base as e, type ButtonComponent as f, type Component$1 as g, type LabelComponentStyle as h, type TabsComponent as i, type TimelineState as j, type TimelineComponent as k };

package/dist/chunk-37VNFO5S.mjs

@@ -0,0 +1,42 @@
+import {
+  Base,
+  EventEmitter
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/switch.ts
+var DEFAULT_PROPS = {
+  state: "off"
+};
+var Switch = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "switch",
+      key: idMap.getId(this),
+      state: this.props.state
+    };
+  }
+  /** @hidden */
+  handleMessage(message) {
+    if (message.component === "switch") {
+      const state = this.props.state === "on" ? "off" : "on";
+      this.updateProps({ state });
+      this.events.emit("change", state);
+    }
+  }
+  setValue(state) {
+    if (state === this.props.state) return;
+    this.updateProps({ state });
+  }
+};
+
+export {
+  Switch
+};

package/dist/chunk-3ZBM7Q4A.mjs

@@ -0,0 +1,55 @@
+import {
+  BaseParent
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/tabs.ts
+var Tab = class extends BaseParent {
+  validateChildren = (children) => {
+    if (children.length > 1) {
+      throw new Error("Tab can only have one child");
+    }
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => ({
+    component: "tab",
+    key: idMap.getId(this),
+    name: this.props.name,
+    child: this.getChildren().slice(0, 1).map((c) => c.getProtoInfo(idMap))[0]
+  });
+};
+var Tabs = class extends BaseParent {
+  validateChildren = (children) => {
+    for (const child of children) {
+      if (!(child instanceof Tab)) {
+        throw new Error("Tabs can only have Tab children");
+      }
+    }
+  };
+  constructor(props) {
+    super({}, { ...props });
+  }
+  addTabs(...tabs) {
+    for (const t of tabs) {
+      const tab = new Tab({ name: t.name });
+      tab.appendChildren(t.component);
+      this.appendChild(tab);
+    }
+  }
+  addTab(name, component) {
+    this.addTabs({ name, component });
+    return component;
+  }
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "tabs",
+      key: idMap.getId(this),
+      tabs: this.getChildren().map((c) => c.getProtoInfo(idMap))
+    };
+  }
+};
+
+export {
+  Tab,
+  Tabs
+};

package/dist/chunk-6LL3X7ZZ.mjs

@@ -0,0 +1,44 @@
+import {
+  Base,
+  EventEmitter
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/text-input.ts
+var DEFAULT_PROPS = {
+  value: null
+};
+var TextInput = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  /** @hidden */
+  getProtoInfo = (idMap) => {
+    return {
+      component: "text-input",
+      key: idMap.getId(this),
+      value: this.props.value ?? ""
+    };
+  };
+  /** @hidden */
+  handleMessage = (message) => {
+    if (message.component === "text-input") {
+      if (this.props.value !== message.value) {
+        this.updateProps({ value: message.value });
+        this.events.emit("change", message.value);
+      }
+    }
+  };
+  getValue = () => this.props.value;
+  getValidatedValue = (validator) => this.props.value === "" ? null : validator(this.props.value || "");
+  setValue = (value) => {
+    this.updateProps({ value });
+  };
+};
+
+export {
+  TextInput
+};

package/dist/chunk-DBW4OPGN.mjs

@@ -0,0 +1,33 @@
+import {
+  Base
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/timeline.ts
+var DEFAULT_PROPS = {
+  state: {
+    state: "stopped",
+    totalTimeMillis: 0,
+    currentTimeMillis: 0
+  },
+  title: null,
+  subtitles: null,
+  source: null
+};
+var Timeline = class extends Base {
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  /** @hidden */
+  getProtoInfo = (idMap) => ({
+    component: "timeline",
+    key: idMap.getId(this),
+    state: this.props.state,
+    title: this.props.title ?? void 0,
+    subtitles: this.props.subtitles ?? void 0,
+    source: this.props.source ?? void 0
+  });
+};
+
+export {
+  Timeline
+};

package/dist/chunk-DP3QFYSS.mjs

@@ -0,0 +1,66 @@
+import {
+  Base,
+  EventEmitter
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/button.ts
+var DEFAULT_PROPS = {
+  text: null,
+  icon: null,
+  mode: "normal",
+  error: null
+};
+var Button = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  setText = (text) => {
+    this.updateProps({ text });
+    return this;
+  };
+  setIcon = (icon) => {
+    this.updateProps({ icon: icon ?? null });
+    return this;
+  };
+  setMode = (mode) => {
+    this.updateProps({
+      mode,
+      error: null
+    });
+    return this;
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => {
+    return {
+      component: "button",
+      key: idMap.getId(this),
+      text: this.props.text || "",
+      state: this.props.error ? { state: "error", error: this.props.error } : { state: this.props.mode },
+      icon: this.props.icon ?? void 0
+    };
+  };
+  /** @hidden */
+  handleMessage = (message) => {
+    if (message.component === "button") {
+      this.events.emit("click").then(() => {
+        if (this.props.error) {
+          this.updateProps({
+            error: null
+          });
+        }
+      }).catch((e) => {
+        this.updateProps({
+          error: `${e}`
+        });
+      });
+    }
+  };
+};
+
+export {
+  Button
+};

package/dist/chunk-GQZA5K4M.mjs

@@ -0,0 +1,29 @@
+import {
+  Base
+} from "./chunk-HF77PS7J.mjs";
+
+// src/backend/components/rect.ts
+var DEFAULT_PROPS = {
+  color: "rgba(0, 0, 0, 0)"
+};
+var Rect = class extends Base {
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "rect",
+      key: idMap.getId(this),
+      color: this.props.color
+    };
+  }
+  setColor(color) {
+    this.updateProps({ color });
+    return this;
+  }
+};
+
+export {
+  Rect
+};

package/dist/chunk-HF77PS7J.mjs

@@ -0,0 +1,171 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/backend/components/base.ts
+var Base = class {
+  /** @hidden */
+  parent = null;
+  /** @hidden */
+  defaultProps;
+  /** @hidden */
+  _props;
+  constructor(defaultProps, props) {
+    this.defaultProps = defaultProps;
+    this._props = Object.freeze({
+      ...defaultProps,
+      ...props
+    });
+  }
+  get props() {
+    return this._props;
+  }
+  set props(props) {
+    this.setProps(props);
+  }
+  setProps = (props) => {
+    this._props = Object.freeze({
+      ...this.defaultProps,
+      ...props
+    });
+    this.updateTree();
+  };
+  updateProps = (updates) => {
+    this._props = Object.freeze({
+      ...this._props,
+      ...updates
+    });
+    this.updateTree();
+  };
+  /** @hidden */
+  setParent(parent) {
+    if (this.parent && this.parent !== parent) {
+      this.parent.removeChild(this);
+    }
+    this.parent = parent;
+  }
+  /** @hidden */
+  updateTree() {
+    if (this.parent) this.parent.updateTree();
+  }
+  /** @hidden */
+  handleMessage(message) {
+    console.log("Component Received Message:", message);
+  }
+  routeMessage(_idMap, _message) {
+  }
+};
+var BaseParent = class extends Base {
+  /** @hidden */
+  children = [];
+  appendChildren = (...children) => {
+    for (const c of children) {
+      const newChildren = [...this.children.filter((ch) => ch !== c), c];
+      this.validateChildren(newChildren);
+      this.children = Object.freeze(newChildren);
+      c.setParent(this);
+    }
+    this.updateTree();
+    return children;
+  };
+  appendChild = (child) => {
+    this.appendChildren(child);
+    return child;
+  };
+  removeChild = (component) => {
+    const match = this.children.findIndex((c) => c === component);
+    if (match >= 0) {
+      const removingChild = this.children[match];
+      const newChildren = [
+        ...this.children.slice(0, match),
+        ...this.children.slice(match + 1)
+      ];
+      this.validateChildren(newChildren);
+      this.children = Object.freeze(newChildren);
+      removingChild?.setParent(null);
+      this.updateTree();
+    }
+  };
+  removeAllChildren = () => {
+    this.children.map((c) => c.setParent(null));
+    this.children = Object.freeze([]);
+    this.updateTree();
+  };
+  /**
+   * Return all children components that messages need to be routed to
+   */
+  getChildren = () => this.children;
+  /**
+   * TODO: we can do this better, right now it broadcasts the message to all
+   * components of the tree
+   *
+   * @hidden
+   */
+  routeMessage(idMap, message) {
+    if (idMap.getId(this) === message.componentKey) {
+      this.handleMessage(message);
+    } else {
+      for (const c of this.children) {
+        if (idMap.getId(c) === message.componentKey) {
+          c.handleMessage(message);
+        } else {
+          c.routeMessage(idMap, message);
+        }
+      }
+    }
+  }
+  insertBefore(child, beforeChild) {
+    const filteredChildren = this.children.filter((c) => c !== child);
+    let match = filteredChildren.findIndex((c) => c === beforeChild);
+    console.log("match", match);
+    if (match === -1) {
+      match = filteredChildren.length;
+    }
+    const newChildren = [
+      ...filteredChildren.slice(0, match),
+      child,
+      ...filteredChildren.slice(match)
+    ];
+    this.validateChildren(newChildren);
+    this.children = Object.freeze(newChildren);
+    child.setParent(this);
+    this.updateTree();
+  }
+};
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  addListener = (type, listener) => {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(listener);
+  };
+  removeListener = (type, listener) => {
+    this.listeners.get(type)?.delete(listener);
+  };
+  emit = (type, ...args) => {
+    return Promise.all(
+      [...this.listeners.get(type) || []].map(
+        (l) => new Promise((resolve, reject) => {
+          try {
+            resolve(l(...args));
+          } catch (e) {
+            reject(e);
+          }
+        })
+      )
+    );
+  };
+};
+
+export {
+  __require,
+  Base,
+  BaseParent,
+  EventEmitter
+};