@arcanejs/toolkit-frontend 0.6.1 → 0.7.0

package/README.md

@@ -13,7 +13,7 @@ and can only be applied to objects that match the type
 of the objects being compared.
 
 This package is part of the
-[`arcanejs` project](https://github.com/arcanejs/arcanejs#arcanejs),
+[`arcanejs` project](https://github.com/ArcaneWizards/arcanejs#arcanejs),
 and is used to maintain a copy of a JSON tree in downstream clients in real-time
 via websockets.
 

package/dist/components/index.d.mts

@@ -12,7 +12,8 @@ interface Props$8 {
 declare const StyledButton: FC<Props$8>;
 
 type StageContextData = {
-    sendMessage: (<M extends proto$1.ClientMessage>(msg: M) => void) | null;
+    sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
+    call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => JSX.Element;
     connectionUuid: string;
 };

package/dist/components/index.d.ts

@@ -12,7 +12,8 @@ interface Props$8 {
 declare const StyledButton: FC<Props$8>;
 
 type StageContextData = {
-    sendMessage: (<M extends proto$1.ClientMessage>(msg: M) => void) | null;
+    sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
+    call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => JSX.Element;
     connectionUuid: string;
 };

package/dist/components/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 
@@ -38,6 +38,7 @@ var StageContext = _react.createContext.call(void 0,
 // src/components/button.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var TOUCH_INDICATOR_CLASS = "touch-indicator";
+var LOADING_CLASS = "loading";
 var TOUCHING_CLASS = "touching";
 var ERROR_CLASS = "error";
 var ButtonContents = _styledcomponents.styled.div`
@@ -54,22 +55,31 @@ var ButtonLabel = _styledcomponents.styled.span`
   padding: 0 4px;
 `;
 var Button = (props) => {
-  const { sendMessage } = _react2.default.useContext(StageContext);
-  const { touching, handlers } = _chunk7VTNOX5Ojs.usePressable.call(void 0, 
-    () => _optionalChain([sendMessage, 'optionalCall', _ => _({
-      type: "component-message",
-      namespace: "core",
-      componentKey: props.info.key,
-      component: "button"
-    })])
-  );
-  const { state } = props.info;
+  const { call } = _react2.default.useContext(StageContext);
+  const [localState, setLocalState] = _react2.default.useState(null);
+  const state = _nullishCoalesce(localState, () => ( props.info.state));
+  const { touching, handlers } = _chunk7VTNOX5Ojs.usePressable.call(void 0, async () => {
+    try {
+      if (!call) return;
+      setLocalState({ state: "loading" });
+      await _optionalChain([call, 'optionalCall', _ => _({
+        type: "component-call",
+        namespace: "core",
+        componentKey: props.info.key,
+        action: "press"
+      })]);
+      setLocalState(null);
+    } catch (e) {
+      setLocalState({ state: "error", error: `${e}` });
+    }
+  });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
         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,
@@ -100,7 +110,7 @@ var StyledButton = _styledcomponents.styled.call(void 0, Button)`
     border-color: ${(p) => p.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
     ${_chunkWVMAJYGIjs.buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {

package/dist/components/index.mjs

@@ -38,6 +38,7 @@ var StageContext = createContext(
 // src/components/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var TOUCH_INDICATOR_CLASS = "touch-indicator";
+var LOADING_CLASS = "loading";
 var TOUCHING_CLASS = "touching";
 var ERROR_CLASS = "error";
 var ButtonContents = styled.div`
@@ -54,22 +55,31 @@ var ButtonLabel = styled.span`
   padding: 0 4px;
 `;
 var Button = (props) => {
-  const { sendMessage } = React.useContext(StageContext);
-  const { touching, handlers } = usePressable(
-    () => sendMessage?.({
-      type: "component-message",
-      namespace: "core",
-      componentKey: props.info.key,
-      component: "button"
-    })
-  );
-  const { state } = props.info;
+  const { call } = React.useContext(StageContext);
+  const [localState, setLocalState] = React.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__ */ 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,
@@ -100,7 +110,7 @@ var StyledButton = styled(Button)`
     border-color: ${(p) => p.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
     ${buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {

package/dist/types.d.mts

@@ -2,7 +2,7 @@ import { BaseComponentProto } from '@arcanejs/protocol';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => JSX.Element;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/types.d.ts

@@ -2,7 +2,7 @@ import { BaseComponentProto } from '@arcanejs/protocol';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => JSX.Element;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/util/index.d.mts

@@ -1,7 +1,7 @@
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
-declare const usePressable: (click: () => void) => {
+declare const usePressable: (click: () => unknown) => {
     touching: boolean;
     handlers: {
         onClick: React.MouseEventHandler<unknown>;

package/dist/util/index.d.ts

@@ -1,7 +1,7 @@
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
-declare const usePressable: (click: () => void) => {
+declare const usePressable: (click: () => unknown) => {
     touching: boolean;
     handlers: {
         onClick: React.MouseEventHandler<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit-frontend",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
   "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
   "keywords": [],
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/arcanejs/arcanejs.git"
+    "url": "https://github.com/ArcaneWizards/arcanejs.git"
   },
   "exports": {
     ".": {
@@ -62,7 +62,7 @@
     "react": "^18",
     "react-dom": "18.3.1",
     "styled-components": "^6.1.13",
-    "@arcanejs/protocol": "^0.6.0"
+    "@arcanejs/protocol": "^0.7.0"
   },
   "files": [
     "dist"