@arcanejs/toolkit 3.1.1 → 4.1.0

package/dist/{chunk-RYR5I5FT.mjs → chunk-GONHNB6V.mjs}

@@ -72,8 +72,14 @@ var Base = class {
   /** @hidden */
   handleMessage(_message, _connection) {
   }
+  /** @hidden */
+  handleCall(_call, _connection) {
+    return Promise.reject(new Error(`Component does not handle calls`));
+  }
   routeMessage(_idMap, _message, _connection) {
   }
+  routeCall(_idMap, _call, _connection, _callbacks) {
+  }
 };
 var BaseParent = class extends Base {
   /** @hidden */
@@ -134,6 +140,19 @@ var BaseParent = class extends Base {
       }
     }
   }
+  async routeCall(idMap, call, connection, callbacks) {
+    if (idMap.getId(this) === call.componentKey) {
+      this.handleCall(call, connection).then(callbacks.resolve).catch(callbacks.reject);
+    } else {
+      for (const c of this.children) {
+        if (idMap.getId(c) === call.componentKey) {
+          c.handleCall(call, connection).then(callbacks.resolve).catch(callbacks.reject);
+        } else {
+          c.routeCall(idMap, call, connection, callbacks);
+        }
+      }
+    }
+  }
   insertBefore(child, beforeChild) {
     const filteredChildren = this.children.filter((c) => c !== child);
     let match = filteredChildren.findIndex((c) => c === beforeChild);
@@ -177,6 +196,20 @@ var EventEmitter = class {
       )
     );
   };
+  /**
+   * Like {@link emit},
+   * but ensures only a single listener exists and returns its result.
+   */
+  call = async (type, ...args) => {
+    const result = await this.emit(type, ...args);
+    if (result.length > 1) {
+      throw new Error(`Multiple listeners for call: ${String(type)}`);
+    } else if (result[0]) {
+      return result[0];
+    } else {
+      throw new Error(`No listeners for call: ${String(type)}`);
+    }
+  };
   /**
    * Process prop changes to update listeners
    */

package/dist/{chunk-4OZ22IQU.js → chunk-HTCWMJUA.js}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } var _class;
 
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkWN3GXVUEjs = require('./chunk-WN3GXVUE.js');
 
 // src/backend/components/text-input.ts
 var _core = require('@arcanejs/protocol/core'); var proto = _interopRequireWildcard(_core);
 var DEFAULT_PROPS = {
   value: null
 };
-var TextInput = (_class = class extends _chunkSGACFY53js.Base {
+var TextInput = (_class = class extends _chunkWN3GXVUEjs.Base {
   /** @hidden */
-  __init() {this.events = new (0, _chunkSGACFY53js.EventEmitter)()}
+  __init() {this.events = new (0, _chunkWN3GXVUEjs.EventEmitter)()}
   constructor(props) {
     super(DEFAULT_PROPS, props, {
       onPropsUpdated: (oldProps) => this.events.processPropChanges(

package/dist/{chunk-7TTY7CBH.mjs → chunk-KMEDXCBI.mjs}

@@ -1,6 +1,6 @@
 import {
   BaseParent
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/tabs.ts
 var Tab = class extends BaseParent {

package/dist/{chunk-W42AOMM6.mjs → chunk-LK6MGXYC.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/button.ts
 import * as proto from "@arcanejs/protocol/core";
@@ -56,20 +56,11 @@ var Button = class extends Base {
     };
   };
   /** @hidden */
-  handleMessage = (message, connection) => {
-    if (proto.isCoreComponentMessage(message, "button")) {
-      this.events.emit("click", connection).then(() => {
-        if (this.props.error) {
-          this.updateProps({
-            error: null
-          });
-        }
-      }).catch((e) => {
-        this.updateProps({
-          error: `${e}`
-        });
-      });
+  handleCall = (call, connection) => {
+    if (proto.isCoreComponentCall(call, "press")) {
+      return this.events.emit("click", connection).then(() => true);
     }
+    throw new Error(`Unhandled call action: ${call.action}`);
   };
 };
 

package/dist/{chunk-CME7HZZK.js → chunk-NL3W4M7J.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } var _class;
 
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkWN3GXVUEjs = require('./chunk-WN3GXVUE.js');
 
 // src/backend/components/slider-button.ts
 var _core = require('@arcanejs/protocol/core'); var proto = _interopRequireWildcard(_core);
@@ -10,9 +10,9 @@ var DEFAULT_PROPS = {
   max: 255,
   step: 5
 };
-var SliderButton = (_class = class extends _chunkSGACFY53js.Base {
+var SliderButton = (_class = class extends _chunkWN3GXVUEjs.Base {
   /** @hidden */
-  __init() {this.events = new (0, _chunkSGACFY53js.EventEmitter)()}
+  __init() {this.events = new (0, _chunkWN3GXVUEjs.EventEmitter)()}
   /**
    * Manually manage the state of the slider,
    * to support both controlled and uncontrolled inputs.

package/dist/{chunk-NEQRLPXK.mjs → chunk-PG5EAV5X.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/switch.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-7OX2FB6C.js → chunk-QAH2OSHR.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkWN3GXVUEjs = require('./chunk-WN3GXVUE.js');
 
 // src/backend/components/rect.ts
 var DEFAULT_PROPS = {
   color: "rgba(0, 0, 0, 0)"
 };
-var Rect = class extends _chunkSGACFY53js.Base {
+var Rect = class extends _chunkWN3GXVUEjs.Base {
   constructor(props) {
     super(DEFAULT_PROPS, props);
   }

package/dist/{chunk-JFZXSCGK.mjs → chunk-QB2WPBWV.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/slider-button.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-GMDJYFHD.js → chunk-U6FSQBQ3.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); var _class; var _class2;
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkWN3GXVUEjs = require('./chunk-WN3GXVUE.js');
 
 // src/backend/components/tabs.ts
-var Tab = (_class = class extends _chunkSGACFY53js.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
+var Tab = (_class = class extends _chunkWN3GXVUEjs.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
   __init() {this.validateChildren = (children) => {
     if (children.length > 1) {
       throw new Error("Tab can only have one child");
@@ -18,7 +18,7 @@ var Tab = (_class = class extends _chunkSGACFY53js.BaseParent {constructor(...ar
     child: this.getChildren().slice(0, 1).map((c) => c.getProtoInfo(idMap))[0]
   })}
 }, _class);
-var Tabs = (_class2 = class extends _chunkSGACFY53js.BaseParent {
+var Tabs = (_class2 = class extends _chunkWN3GXVUEjs.BaseParent {
   __init3() {this.validateChildren = (children) => {
     for (const child of children) {
       if (!(child instanceof Tab)) {

package/dist/{chunk-CUZSHFDP.mjs → chunk-UQWCTVMC.mjs}

@@ -1,6 +1,6 @@
 import {
   Base
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/label.ts
 var Label = class extends Base {

package/dist/{chunk-YBBUC3QC.mjs → chunk-WDB3IMOP.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-GONHNB6V.mjs";
 
 // src/backend/components/text-input.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-SGACFY53.js → chunk-WN3GXVUE.js}

@@ -72,8 +72,14 @@ var Base = (_class = class {
   /** @hidden */
   handleMessage(_message, _connection) {
   }
+  /** @hidden */
+  handleCall(_call, _connection) {
+    return Promise.reject(new Error(`Component does not handle calls`));
+  }
   routeMessage(_idMap, _message, _connection) {
   }
+  routeCall(_idMap, _call, _connection, _callbacks) {
+  }
 }, _class);
 var BaseParent = (_class2 = class extends Base {constructor(...args2) { super(...args2); _class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this); }
   /** @hidden */
@@ -134,6 +140,19 @@ var BaseParent = (_class2 = class extends Base {constructor(...args2) { super(..
       }
     }
   }
+  async routeCall(idMap, call, connection, callbacks) {
+    if (idMap.getId(this) === call.componentKey) {
+      this.handleCall(call, connection).then(callbacks.resolve).catch(callbacks.reject);
+    } else {
+      for (const c of this.children) {
+        if (idMap.getId(c) === call.componentKey) {
+          c.handleCall(call, connection).then(callbacks.resolve).catch(callbacks.reject);
+        } else {
+          c.routeCall(idMap, call, connection, callbacks);
+        }
+      }
+    }
+  }
   insertBefore(child, beforeChild) {
     const filteredChildren = this.children.filter((c) => c !== child);
     let match = filteredChildren.findIndex((c) => c === beforeChild);
@@ -151,7 +170,7 @@ var BaseParent = (_class2 = class extends Base {constructor(...args2) { super(..
     this.updateTree();
   }
 }, _class2);
-var EventEmitter = (_class3 = class {constructor() { _class3.prototype.__init13.call(this);_class3.prototype.__init14.call(this);_class3.prototype.__init15.call(this);_class3.prototype.__init16.call(this);_class3.prototype.__init17.call(this); }
+var EventEmitter = (_class3 = class {constructor() { _class3.prototype.__init13.call(this);_class3.prototype.__init14.call(this);_class3.prototype.__init15.call(this);_class3.prototype.__init16.call(this);_class3.prototype.__init17.call(this);_class3.prototype.__init18.call(this); }
   __init13() {this.listeners = /* @__PURE__ */ new Map()}
   __init14() {this.addListener = (type, listener) => {
     let set = this.listeners.get(type);
@@ -177,10 +196,24 @@ var EventEmitter = (_class3 = class {constructor() { _class3.prototype.__init13.
       )
     );
   }}
+  /**
+   * Like {@link emit},
+   * but ensures only a single listener exists and returns its result.
+   */
+  __init17() {this.call = async (type, ...args) => {
+    const result = await this.emit(type, ...args);
+    if (result.length > 1) {
+      throw new Error(`Multiple listeners for call: ${String(type)}`);
+    } else if (result[0]) {
+      return result[0];
+    } else {
+      throw new Error(`No listeners for call: ${String(type)}`);
+    }
+  }}
   /**
    * Process prop changes to update listeners
    */
-  __init17() {this.processPropChanges = (mapping, oldProps, newProps) => {
+  __init18() {this.processPropChanges = (mapping, oldProps, newProps) => {
     for (const key of Object.keys(mapping)) {
       const prev = oldProps[key];
       const next = newProps[key];

package/dist/frontend/entrypoint.js

@@ -26202,6 +26202,7 @@ body {
     })
   );
   var TOUCH_INDICATOR_CLASS = "touch-indicator";
+  var LOADING_CLASS = "loading";
   var TOUCHING_CLASS = "touching";
   var ERROR_CLASS = "error";
   var ButtonContents = dt.div`
@@ -26218,22 +26219,31 @@ body {
   padding: 0 4px;
 `;
   var Button = (props) => {
-    const { sendMessage } = import_react4.default.useContext(StageContext);
-    const { touching, handlers } = usePressable(
-      () => sendMessage?.({
-        type: "component-message",
-        namespace: "core",
-        componentKey: props.info.key,
-        component: "button"
-      })
-    );
-    const { state } = props.info;
+    const { call } = import_react4.default.useContext(StageContext);
+    const [localState, setLocalState] = import_react4.default.useState(null);
+    const state = localState ?? props.info.state;
+    const { touching, handlers } = usePressable(async () => {
+      try {
+        if (!call) return;
+        setLocalState({ state: "loading" });
+        await call?.({
+          type: "component-call",
+          namespace: "core",
+          componentKey: props.info.key,
+          action: "press"
+        });
+        setLocalState(null);
+      } catch (e) {
+        setLocalState({ state: "error", error: `${e}` });
+      }
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: calculateClass(
           props.className,
-          touching || state.state === "pressed" ? TOUCHING_CLASS : null,
+          (touching || state.state === "pressed") && TOUCHING_CLASS,
+          state.state === "loading" && LOADING_CLASS,
           state.state === "error" && ERROR_CLASS
         ),
         ...handlers,
@@ -26264,7 +26274,7 @@ body {
     border-color: ${(p2) => p2.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
     ${buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {
@@ -27469,6 +27479,10 @@ body {
     );
     const socket = (0, import_react15.useRef)(null);
     const uuid = (0, import_react15.useRef)(null);
+    const calls = (0, import_react15.useRef)({
+      nextId: 1,
+      calls: /* @__PURE__ */ new Map()
+    });
     const preparedRenderers = (0, import_react15.useMemo)(() => {
       const prepared = {};
       for (const renderer of renderers) {
@@ -27486,10 +27500,36 @@ body {
       },
       [preparedRenderers]
     );
-    (0, import_react15.useEffect)(() => {
-      initializeWebsocket();
+    const handleMessage = (0, import_react15.useCallback)((msg) => {
+      switch (msg.type) {
+        case "metadata":
+          uuid.current = msg.connectionUuid;
+          return;
+        case "tree-full":
+          setRoot(msg.root);
+          return;
+        case "tree-diff":
+          setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
+          return;
+        case "call-response": {
+          const call2 = calls.current.calls.get(msg.requestId);
+          if (call2) {
+            calls.current.calls.delete(msg.requestId);
+            if (msg.success) {
+              call2.resolve(msg.returnValue);
+            } else {
+              call2.reject(msg.errorMessage);
+            }
+          } else {
+            console.warn(
+              `Received response for unknown call request ID ${msg.requestId}`
+            );
+          }
+          return;
+        }
+      }
     }, []);
-    const initializeWebsocket = async () => {
+    const initializeWebsocket = (0, import_react15.useCallback)(async () => {
       console.log("initializing websocket");
       const wsUrl = new URL(window.location.href);
       wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
@@ -27513,29 +27553,42 @@ body {
         };
       });
       return ws;
-    };
-    const sendMessage = async (msg) => {
+    }, []);
+    const sendMessage = (0, import_react15.useCallback)(async (msg) => {
       (await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
-    };
-    const handleMessage = (msg) => {
-      switch (msg.type) {
-        case "metadata":
-          uuid.current = msg.connectionUuid;
-          return;
-        case "tree-full":
-          setRoot(msg.root);
-          return;
-        case "tree-diff":
-          setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
-          return;
-      }
-    };
+    }, []);
+    const call = (0, import_react15.useCallback)(
+      async (msg) => {
+        const requestId = calls.current.nextId++;
+        const sendMsg = {
+          ...msg,
+          requestId
+        };
+        const promise = new Promise(
+          (resolve, reject) => {
+            calls.current.calls.set(requestId, {
+              resolve,
+              reject
+            });
+            (socket.current || initializeWebsocket()).then(
+              (s2) => s2.send(JSON.stringify(sendMsg))
+            );
+          }
+        );
+        return promise;
+      },
+      []
+    );
+    (0, import_react15.useEffect)(() => {
+      initializeWebsocket();
+    }, [initializeWebsocket]);
     return /* @__PURE__ */ import_react15.default.createElement(
       StageContext.Provider,
       {
         value: {
           sendMessage,
           renderComponent,
+          call,
           get connectionUuid() {
             if (!uuid.current) {
               throw new Error("Unexpected missing UUID");