@arcanejs/toolkit 0.0.3 → 0.1.1

package/README.md

@@ -0,0 +1,19 @@
+# `@arcanejs/toolkit`
+
+[![NPM Version](https://img.shields.io/npm/v/%40arcanejs%2Ftoolkit)](https://www.npmjs.com/package/@arcanejs/toolkit)
+
+This package provides the core functionality behind the ArcaneJS framework,
+allowing you to quickly build single-process Node.js apps with
+real-time interactive control panels that are exposed as web pages.
+
+This library provides a tree-like API for creating & updating control panels,
+and responding to user input.
+
+We highly-recommend that rather than integrating with this library directly,
+you make use of the
+[`@arcanejs/react-toolkit`](https://www.npmjs.com/package/@arcanejs/react-toolkit)
+library, that allows you to compose your control panels using server-side react.
+
+For more details,
+please see the main documentation on our GitHub repository:
+[github.com/arcanejs/arcanejs](https://github.com/arcanejs/arcanejs#arcanejs)

package/dist/backend/components/base.d.mts

@@ -0,0 +1,2 @@
+export { e as Base, B as BaseParent, a as Component, E as EventEmitter, L as Listenable, P as Parent } from '../../base-BJAPu0O1.mjs';
+import '@arcanejs/diff';

package/dist/backend/components/base.d.ts

@@ -0,0 +1,2 @@
+export { e as Base, B as BaseParent, a as Component, E as EventEmitter, L as Listenable, P as Parent } from '../../base-BJAPu0O1.js';
+import '@arcanejs/diff';

package/dist/backend/components/base.js

@@ -0,0 +1,189 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/backend/components/base.ts
+var base_exports = {};
+__export(base_exports, {
+  Base: () => Base,
+  BaseParent: () => BaseParent,
+  EventEmitter: () => EventEmitter
+});
+module.exports = __toCommonJS(base_exports);
+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);
+          }
+        })
+      )
+    );
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Base,
+  BaseParent,
+  EventEmitter
+});

package/dist/backend/components/base.mjs

@@ -0,0 +1,10 @@
+import {
+  Base,
+  BaseParent,
+  EventEmitter
+} from "../../chunk-HF77PS7J.mjs";
+export {
+  Base,
+  BaseParent,
+  EventEmitter
+};

package/dist/backend/components/button.d.mts

@@ -0,0 +1,30 @@
+import { e as Base, L as Listenable, I as IDMap, f as ButtonComponent, d as ClientComponentMessage } from '../../base-BJAPu0O1.mjs';
+import '@arcanejs/diff';
+
+type Events = {
+    click: () => void | Promise<void>;
+};
+type ButtonMode = 'normal' | 'pressed';
+type InternalProps = {
+    text: string | null;
+    icon: string | null;
+    mode: ButtonMode;
+    error: string | null;
+};
+type Props = Partial<InternalProps>;
+declare class Button extends Base<InternalProps> implements Listenable<Events> {
+    /** @hidden */
+    private readonly events;
+    constructor(props?: Props);
+    addListener: <T extends "click">(type: T, listener: Events[T]) => void;
+    removeListener: <T extends "click">(type: T, listener: Events[T]) => void;
+    setText: (text: string | null) => this;
+    setIcon: (icon: string | undefined | null) => this;
+    setMode: (mode: ButtonMode) => this;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => ButtonComponent;
+    /** @hidden */
+    handleMessage: (message: ClientComponentMessage) => void;
+}
+
+export { Button, type ButtonMode, type Events, type InternalProps, type Props };

package/dist/backend/components/button.d.ts

@@ -0,0 +1,30 @@
+import { e as Base, L as Listenable, I as IDMap, f as ButtonComponent, d as ClientComponentMessage } from '../../base-BJAPu0O1.js';
+import '@arcanejs/diff';
+
+type Events = {
+    click: () => void | Promise<void>;
+};
+type ButtonMode = 'normal' | 'pressed';
+type InternalProps = {
+    text: string | null;
+    icon: string | null;
+    mode: ButtonMode;
+    error: string | null;
+};
+type Props = Partial<InternalProps>;
+declare class Button extends Base<InternalProps> implements Listenable<Events> {
+    /** @hidden */
+    private readonly events;
+    constructor(props?: Props);
+    addListener: <T extends "click">(type: T, listener: Events[T]) => void;
+    removeListener: <T extends "click">(type: T, listener: Events[T]) => void;
+    setText: (text: string | null) => this;
+    setIcon: (icon: string | undefined | null) => this;
+    setMode: (mode: ButtonMode) => this;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => ButtonComponent;
+    /** @hidden */
+    handleMessage: (message: ClientComponentMessage) => void;
+}
+
+export { Button, type ButtonMode, type Events, type InternalProps, type Props };

package/dist/backend/components/button.js

@@ -0,0 +1,168 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/backend/components/button.ts
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+
+// 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 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);
+          }
+        })
+      )
+    );
+  };
+};
+
+// 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}`
+        });
+      });
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/backend/components/button.mjs

@@ -0,0 +1,7 @@
+import {
+  Button
+} from "../../chunk-DP3QFYSS.mjs";
+import "../../chunk-HF77PS7J.mjs";
+export {
+  Button
+};

package/dist/backend/components/group.d.mts

@@ -0,0 +1,51 @@
+import { G as GroupComponentStyle, a as Component, B as BaseParent, I as IDMap, b as GroupHeaderComponent, L as Listenable, c as GroupComponent, d as ClientComponentMessage } from '../../base-BJAPu0O1.mjs';
+import { Button } from './button.mjs';
+import '@arcanejs/diff';
+
+type Label = (GroupComponent['labels'] & Array<unknown>)[number];
+type GroupOptions = {
+    editableTitle?: boolean;
+    defaultCollapsibleState?: GroupComponent['defaultCollapsibleState'];
+};
+type Events = {
+    'title-changed': (title: string) => void;
+};
+type InternalProps = GroupComponentStyle & GroupOptions & {
+    title: string | null;
+    labels: Label[] | null;
+    headerComponents: Component[] | null;
+};
+type Props = Partial<InternalProps>;
+declare class GroupHeader extends BaseParent<Record<never, never>> {
+    validateChildren: () => void;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => GroupHeaderComponent;
+}
+/**
+ * A collection of components, grouped in either a row or column. Can contain
+ * further groups as children to organize components however you wish, and have
+ * a number of styling options (such as removing the border).
+ *
+ * ![](media://images/group_screenshot.png)
+ */
+declare class Group extends BaseParent<InternalProps> implements Listenable<Events> {
+    /** @hidden */
+    private readonly events;
+    constructor(props?: Props);
+    addListener: <T extends "title-changed">(type: T, listener: Events[T]) => void;
+    removeListener: <T extends "title-changed">(type: T, listener: Events[T]) => void;
+    validateChildren: () => void;
+    setOptions: (options: GroupOptions) => void;
+    setTitle: (title: string) => void;
+    addLabel: (label: Label) => void;
+    setLabels: (labels: Label[]) => void;
+    addHeaderChild: <C extends Button>(child: C) => C;
+    removeHeaderChild: (child: Button) => void;
+    removeAllHeaderChildren: () => void;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => GroupComponent;
+    /** @hidden */
+    handleMessage: (message: ClientComponentMessage) => void;
+}
+
+export { type Events, Group, GroupHeader, type InternalProps, type Props };

package/dist/backend/components/group.d.ts

@@ -0,0 +1,51 @@
+import { G as GroupComponentStyle, a as Component, B as BaseParent, I as IDMap, b as GroupHeaderComponent, L as Listenable, c as GroupComponent, d as ClientComponentMessage } from '../../base-BJAPu0O1.js';
+import { Button } from './button.js';
+import '@arcanejs/diff';
+
+type Label = (GroupComponent['labels'] & Array<unknown>)[number];
+type GroupOptions = {
+    editableTitle?: boolean;
+    defaultCollapsibleState?: GroupComponent['defaultCollapsibleState'];
+};
+type Events = {
+    'title-changed': (title: string) => void;
+};
+type InternalProps = GroupComponentStyle & GroupOptions & {
+    title: string | null;
+    labels: Label[] | null;
+    headerComponents: Component[] | null;
+};
+type Props = Partial<InternalProps>;
+declare class GroupHeader extends BaseParent<Record<never, never>> {
+    validateChildren: () => void;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => GroupHeaderComponent;
+}
+/**
+ * A collection of components, grouped in either a row or column. Can contain
+ * further groups as children to organize components however you wish, and have
+ * a number of styling options (such as removing the border).
+ *
+ * ![](media://images/group_screenshot.png)
+ */
+declare class Group extends BaseParent<InternalProps> implements Listenable<Events> {
+    /** @hidden */
+    private readonly events;
+    constructor(props?: Props);
+    addListener: <T extends "title-changed">(type: T, listener: Events[T]) => void;
+    removeListener: <T extends "title-changed">(type: T, listener: Events[T]) => void;
+    validateChildren: () => void;
+    setOptions: (options: GroupOptions) => void;
+    setTitle: (title: string) => void;
+    addLabel: (label: Label) => void;
+    setLabels: (labels: Label[]) => void;
+    addHeaderChild: <C extends Button>(child: C) => C;
+    removeHeaderChild: (child: Button) => void;
+    removeAllHeaderChildren: () => void;
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => GroupComponent;
+    /** @hidden */
+    handleMessage: (message: ClientComponentMessage) => void;
+}
+
+export { type Events, Group, GroupHeader, type InternalProps, type Props };