@elice/material-runbox-legacy 1.240718.0-trasncript.2 → 1.240718.2

package/es/components/material-runbox-legacy/MaterialRunboxLegacyContent.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { usePrevious } from 'react-use';
 import { Vspace, LaptopOrLarger, Flex, Text, AntProgress, Hspace, IconButton, Tooltip, Box, Spinner, Notification } from '@elice/blocks';
@@ -8,6 +6,7 @@ import { useRawEliceIntl } from '@elice/intl';
 import { WSMaterialRunboxLegacyStdio } from './websocket.js';
 import { RunboxHeader, RunboxStatusLight, RunboxBody, RunboxBodyOverlay, RunboxBodyIframe } from './MaterialRunboxLegacyContent.styled.js';
 
+/* eslint-disable @typescript-eslint/naming-convention */
 var MaterialRunboxLegacyStatus;
 (function (MaterialRunboxLegacyStatus) {
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Idle"] = 0] = "Idle";
@@ -18,74 +17,47 @@ var MaterialRunboxLegacyStatus;
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Terminated"] = 5] = "Terminated";
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Error"] = 6] = "Error";
 })(MaterialRunboxLegacyStatus || (MaterialRunboxLegacyStatus = {}));
-var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
-  var runboxUrl = _ref.runboxUrl,
-    isRunboxTerminated = _ref.isRunboxTerminated,
-    isRunboxJoinError = _ref.isRunboxJoinError,
-    reconnect = _ref.reconnect;
-  var intl = useRawEliceIntl();
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    runboxStats = _React$useState2[0],
-    setRunboxStats = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isRunboxUrlLoaded = _React$useState4[0],
-    setRunboxUrlLoaded = _React$useState4[1];
-  var isRunboxUrlLoadedPrev = usePrevious(isRunboxUrlLoaded);
-  var _React$useState5 = React.useState(MaterialRunboxLegacyStatus.Idle),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    runboxStatus = _React$useState6[0],
-    setRunboxStatus = _React$useState6[1];
-  var isRunboxPreparing = runboxStatus !== MaterialRunboxLegacyStatus.Done && runboxStatus !== MaterialRunboxLegacyStatus.Terminated;
-  WSMaterialRunboxLegacyStdio.useMessage(function (message) {
+const MaterialRunboxLegacyContent = ({
+  runboxUrl,
+  isRunboxTerminated,
+  isRunboxJoinError,
+  reconnect
+}) => {
+  const intl = useRawEliceIntl();
+  const [runboxStats, setRunboxStats] = React.useState(null);
+  const [isRunboxUrlLoaded, setRunboxUrlLoaded] = React.useState(false);
+  const isRunboxUrlLoadedPrev = usePrevious(isRunboxUrlLoaded);
+  const [runboxStatus, setRunboxStatus] = React.useState(MaterialRunboxLegacyStatus.Idle);
+  const isRunboxPreparing = runboxStatus !== MaterialRunboxLegacyStatus.Done && runboxStatus !== MaterialRunboxLegacyStatus.Terminated;
+  WSMaterialRunboxLegacyStdio.useMessage(message => {
     if (message.type === 'stats') {
       setRunboxStats(message.data);
     }
+  }, {
+    camelize: true
   });
-  var handleReconnect = function handleReconnect() {
+  const handleReconnect = () => {
     setRunboxStats(null);
     setRunboxUrlLoaded(false);
     reconnect();
   };
-  var handleShare = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (runboxUrl) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            _context.prev = 2;
-            _context.next = 5;
-            return navigator.clipboard.writeText(runboxUrl);
-          case 5:
-            Notification.success(intl.formatMessage({
-              id: 'runboxLegacy.share.success'
-            }));
-            _context.next = 11;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](2);
-            alert(runboxUrl);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 8]]);
-    }));
-    return function handleShare() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const handleShare = async () => {
+    if (!runboxUrl) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(runboxUrl);
+      Notification.success(intl.formatMessage({
+        id: 'runboxLegacy.share.success'
+      }));
+    } catch (e) {
+      alert(runboxUrl);
+    }
+  };
   //
   // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!runboxUrl) {
       setRunboxUrlLoaded(false);
     }
@@ -93,8 +65,8 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   //
   // Determine runbox status.
   //
-  React.useEffect(function () {
-    setRunboxStatus(function () {
+  React.useEffect(() => {
+    setRunboxStatus((() => {
       switch (true) {
         case isRunboxJoinError:
           return MaterialRunboxLegacyStatus.Error;
@@ -111,12 +83,12 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
         default:
           return MaterialRunboxLegacyStatus.Idle;
       }
-    }());
+    })());
   }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
   /**
    * Runbox status message shown at header.
    */
-  var renderRunboxStatusMessage = function renderRunboxStatusMessage() {
+  const renderRunboxStatusMessage = () => {
     switch (runboxStatus) {
       case MaterialRunboxLegacyStatus.Idle:
         return intl.formatMessage({
@@ -147,201 +119,154 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   /**
    * Header of runbox.
    */
-  var renderRunboxHeader = function renderRunboxHeader() {
-    var runboxStatsInfo = runboxStats ? jsx(LaptopOrLarger, {
-      children: jsxs(Flex, {
-        children: [jsxs(Flex, {
-          align: "center",
-          children: [jsx(Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray7",
-            bold: true,
-            children: "CPU:\xA0"
-          }), jsx(Flex, {
-            align: "center",
-            width: "30px",
-            children: jsx(AntProgress, {
-              type: "line",
-              percent: runboxStats.cpu.percent,
-              status: 'active',
-              showInfo: false
-            })
-          }), jsxs(Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray5",
-            children: ["\xA0", "".concat(runboxStats.cpu.percent.toFixed(0), "%")]
-          })]
-        }), jsx(Hspace, {
-          width: 1
-        }), jsxs(Flex, {
-          align: "center",
-          children: [jsx(Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray7",
-            bold: true,
-            children: "MEM:\xA0"
-          }), jsx(Flex, {
-            align: "center",
-            width: "30px",
-            children: jsx(AntProgress, {
-              percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
-              status: 'active',
-              showInfo: false
-            })
-          }), jsxs(Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray5",
-            children: ["\xA0", "".concat((runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0), "M / ").concat((runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0), "M")]
-          })]
-        }), jsx(Hspace, {
-          width: 1
-        }), jsx(Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray7",
-          bold: true,
-          children: "DISK:\xA0"
-        }), jsx(Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray5",
-          children: "Read ".concat((runboxStats.block.rxBytes / 1024 / 1024).toFixed(0), "M Write ").concat((runboxStats.block.txBytes / 1024 / 1024).toFixed(0), "M")
-        }), jsx(Hspace, {
-          width: 1
-        }), jsx(Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray7",
-          bold: true,
-          children: "NET:\xA0"
-        }), jsx(Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray5",
-          children: "\u2193".concat((runboxStats.network.rxBytes / 1024 / 1024).toFixed(0), "M \u2191").concat((runboxStats.network.txBytes / 1024 / 1024).toFixed(0), "M")
-        }), jsx(Hspace, {
-          width: 1
-        })]
-      })
-    }) : null;
-    return jsxs(RunboxHeader, {
-      children: [runboxStatsInfo, jsxs(Flex, {
-        align: "center",
-        children: [jsx(RunboxStatusLight, {
-          status: runboxStatus
-        }), jsx(Hspace, {
-          width: 0.5
-        }), jsx(Text, {
-          size: "small",
-          children: renderRunboxStatusMessage()
-        })]
-      }), jsx(Hspace, {
-        width: 1
-      }), jsx(IconButton, {
-        icon: eilShare,
-        role: "greyfb",
-        size: "small",
-        border: true,
-        disabled: isRunboxPreparing,
-        onClick: handleShare
-      }), jsx(Hspace, {
-        width: 0.5
-      }), jsx(Tooltip, {
-        title: isRunboxPreparing ? intl.formatMessage({
-          id: 'runboxLegacy.reloadButton.tooltip'
-        }) : undefined,
-        children: jsx("span", {
-          children: jsx(IconButton, {
-            icon: eilReset,
-            iconSpin: isRunboxPreparing,
-            role: "greyfb",
-            size: "small",
-            border: true,
-            disabled: isRunboxPreparing,
-            onClick: handleReconnect
-          })
-        })
-      })]
-    });
+  const renderRunboxHeader = () => {
+    const runboxStatsInfo = runboxStats ? React.createElement(LaptopOrLarger, null, React.createElement(Flex, null, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "CPU:\u00A0"), React.createElement(Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(AntProgress, {
+      type: "line",
+      percent: runboxStats.cpu.percent,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\u00A0", `${runboxStats.cpu.percent.toFixed(0)}%`)), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "MEM:\u00A0"), React.createElement(Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(AntProgress, {
+      percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\u00A0", `${(runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0)}M / ${(runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0)}M`)), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "DISK:\u00A0"), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, `Read ${(runboxStats.block.rxBytes / 1024 / 1024).toFixed(0)}M Write ${(runboxStats.block.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "NET:\u00A0"), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, `↓${(runboxStats.network.rxBytes / 1024 / 1024).toFixed(0)}M ↑${(runboxStats.network.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(Hspace, {
+      width: 1
+    }))) : null;
+    return React.createElement(RunboxHeader, null, runboxStatsInfo, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(RunboxStatusLight, {
+      status: runboxStatus
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      size: "small"
+    }, renderRunboxStatusMessage())), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(IconButton, {
+      icon: eilShare,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleShare
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Tooltip, {
+      title: isRunboxPreparing ? intl.formatMessage({
+        id: 'runboxLegacy.reloadButton.tooltip'
+      }) : undefined
+    }, React.createElement("span", null, React.createElement(IconButton, {
+      icon: eilReset,
+      iconSpin: isRunboxPreparing,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleReconnect
+    }))));
   };
   /**
    * Body of runbox.
    */
-  var renderRunboxBody = function renderRunboxBody() {
+  const renderRunboxBody = () => {
     if (runboxStatus === MaterialRunboxLegacyStatus.Terminated) {
-      return jsx(RunboxBody, {
-        children: jsx(RunboxBodyOverlay, {
-          children: jsx(Box, {
-            children: jsx(Text, {
-              size: "small",
-              preWrap: true,
-              lineHeight: 1.5,
-              textAlign: "center",
-              children: intl.formatMessage({
-                id: 'runboxLegacy.overlay.message.terminated'
-              })
-            })
-          })
-        })
-      });
+      return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, null, React.createElement(Box, null, React.createElement(Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, intl.formatMessage({
+        id: 'runboxLegacy.overlay.message.terminated'
+      })))));
     }
     if (runboxStatus === MaterialRunboxLegacyStatus.Error) {
-      return jsx(RunboxBody, {
-        children: jsx(RunboxBodyOverlay, {
-          children: jsx(Box, {
-            children: jsx(Text, {
-              size: "small",
-              preWrap: true,
-              lineHeight: 1.5,
-              textAlign: "center",
-              children: intl.formatMessage({
-                id: 'runboxLegacy.overlay.message.error'
-              })
-            })
-          })
-        })
-      });
+      return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, null, React.createElement(Box, null, React.createElement(Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, intl.formatMessage({
+        id: 'runboxLegacy.overlay.message.error'
+      })))));
     }
-    return jsxs(RunboxBody, {
-      children: [jsx(RunboxBodyOverlay, {
-        "aria-hidden": !isRunboxPreparing,
-        children: jsxs(Box, {
-          children: [jsx(Spinner, {}), jsx(Vspace, {
-            height: 1
-          }), jsx(Text, {
-            size: "small",
-            preWrap: true,
-            lineHeight: 1.5,
-            textAlign: "center",
-            children: runboxStatus === MaterialRunboxLegacyStatus.Disconnected ? intl.formatMessage({
-              id: 'runboxLegacy.overlay.message.disconnected'
-            }) : intl.formatMessage({
-              id: 'runboxLegacy.overlay.message.connecting'
-            })
-          })]
-        })
-      }), runboxUrl ? jsx(RunboxBodyIframe, {
-        src: runboxUrl + '/?folder=/mnt/elice/workspace',
-        title: "material-runbox-legacy",
-        onLoad: function onLoad() {
-          return setRunboxUrlLoaded(true);
-        },
-        allow: "clipboard-read; clipboard-write; camera *; microphone *"
-      }) : null]
-    });
+    return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, {
+      "aria-hidden": !isRunboxPreparing
+    }, React.createElement(Box, null, React.createElement(Spinner, null), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(Text, {
+      size: "small",
+      preWrap: true,
+      lineHeight: 1.5,
+      textAlign: "center"
+    }, runboxStatus === MaterialRunboxLegacyStatus.Disconnected ? intl.formatMessage({
+      id: 'runboxLegacy.overlay.message.disconnected'
+    }) : intl.formatMessage({
+      id: 'runboxLegacy.overlay.message.connecting'
+    })))), runboxUrl ? React.createElement(RunboxBodyIframe, {
+      src: runboxUrl + '/?folder=/mnt/elice/workspace',
+      title: "material-runbox-legacy",
+      onLoad: () => setRunboxUrlLoaded(true),
+      allow: "clipboard-read; clipboard-write; camera *; microphone *"
+    }) : null);
   };
   //
   //
   //
-  return jsxs(Fragment, {
-    children: [renderRunboxHeader(), jsx(Vspace, {
-      height: 0.5
-    }), renderRunboxBody()]
-  });
+  return React.createElement(React.Fragment, null, renderRunboxHeader(), React.createElement(Vspace, {
+    height: 0.5
+  }), renderRunboxBody());
 };
 
 export { MaterialRunboxLegacyStatus, MaterialRunboxLegacyContent as default };

package/es/components/material-runbox-legacy/MaterialRunboxLegacyContent.styled.js

@@ -2,21 +2,21 @@ import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { MaterialRunboxLegacyStatus } from './MaterialRunboxLegacyContent.js';
 
-var RunboxHeader = styled.div.withConfig({
+const RunboxHeader = styled.div.withConfig({
   componentId: "sc-18a3wux-0"
 })(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
-var RunboxBody = styled.div.withConfig({
+const RunboxBody = styled.div.withConfig({
   componentId: "sc-18a3wux-1"
 })(["position:relative;flex:1;"]);
-var RunboxBodyOverlay = styled.div.withConfig({
+const RunboxBodyOverlay = styled.div.withConfig({
   componentId: "sc-18a3wux-2"
 })(["position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;flex:1;width:100%;height:100%;background:rgba(255,255,255,0.8);&[aria-hidden='true']{display:none;}"]);
-var RunboxBodyIframe = styled.iframe.withConfig({
+const RunboxBodyIframe = styled.iframe.withConfig({
   componentId: "sc-18a3wux-3"
 })(["width:100%;height:100%;border:none;"]);
-var RunboxStatusLight = styled.span.withConfig({
+const RunboxStatusLight = styled.span.withConfig({
   componentId: "sc-18a3wux-4"
-})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], function (props) {
+})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], props => {
   switch (props.status) {
     case MaterialRunboxLegacyStatus.Loading:
     case MaterialRunboxLegacyStatus.Connecting:

package/es/components/material-runbox-legacy/MaterialRunboxLegacyRunnerRoomWrapper.js

@@ -1,96 +1,63 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { postOrgRunnerRoomMaterialRunboxJoin, postOrgMaterialRunboxRunboxRunningCancel } from '@elice/api-client';
 import { useMaterialConfig } from '@elice/material-shared-utils';
 import MaterialRunboxLegacyStdioWrapper from './MaterialRunboxLegacyStdioWrapper.js';
 import { WSMaterialRunboxLegacyRunnerRoom } from './websocket.js';
 
-var MaterialRunboxLegacyRunnerRoomWrapper = function MaterialRunboxLegacyRunnerRoomWrapper(_ref) {
-  var materialRunboxId = _ref.materialRunboxId;
-  var _useMaterialConfig = useMaterialConfig(),
-    apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
-  var abortCtrlRef = React.useRef(new AbortController());
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    runboxRunningId = _React$useState2[0],
-    setRunboxRunningId = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isRunboxJoinError = _React$useState4[0],
-    setRunboxJoinError = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isRunboxRunningCanceling = _React$useState6[0],
-    setRunboxRunningCanceling = _React$useState6[1];
+const MaterialRunboxLegacyRunnerRoomWrapper = ({
+  materialRunboxId
+}) => {
+  const {
+    apiWsOriginUrl
+  } = useMaterialConfig();
+  const abortCtrlRef = React.useRef(new AbortController());
+  const [runboxRunningId, setRunboxRunningId] = React.useState();
+  const [isRunboxJoinError, setRunboxJoinError] = React.useState(false);
+  const [isRunboxRunningCanceling, setRunboxRunningCanceling] = React.useState(false);
   /**
    * Resolve runner room token.
    */
-  var resolveRunnerRoomToken = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          setRunboxJoinError(false);
-          abortCtrlRef.current.abort();
-          abortCtrlRef.current = new AbortController();
-          return _context.abrupt("return", postOrgRunnerRoomMaterialRunboxJoin({
-            materialRunboxId: materialRunboxId
-          }, {
-            signal: abortCtrlRef.current.signal
-          }).then(function (res) {
-            setRunboxJoinError(false);
-            setRunboxRunningId(res.runboxRunningId);
-            return res.roomToken;
-          }).catch(function (err) {
-            setRunboxJoinError(true);
-            throw err;
-          }));
-        case 4:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [materialRunboxId]);
+  const resolveRunnerRoomToken = React.useCallback(async () => {
+    setRunboxJoinError(false);
+    abortCtrlRef.current.abort();
+    abortCtrlRef.current = new AbortController();
+    return postOrgRunnerRoomMaterialRunboxJoin({
+      materialRunboxId
+    }, {
+      signal: abortCtrlRef.current.signal
+    }).then(res => {
+      setRunboxJoinError(false);
+      setRunboxRunningId(res.runboxRunningId);
+      return res.roomToken;
+    }).catch(err => {
+      setRunboxJoinError(true);
+      throw err;
+    });
+  }, [materialRunboxId]);
   /**
    * Reconnect runbox.
    */
-  var reconnectRunnerRoomWebSocket = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (runboxRunningId) {
-            _context2.next = 2;
-            break;
-          }
-          return _context2.abrupt("return");
-        case 2:
-          setRunboxRunningCanceling(true);
-          return _context2.abrupt("return", postOrgMaterialRunboxRunboxRunningCancel({
-            runboxRunningId: runboxRunningId
-          }).then(function () {
-            return setRunboxRunningCanceling(false);
-          }).catch(function () {
-            return setRunboxRunningCanceling(false);
-          }));
-        case 4:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })), [runboxRunningId]);
+  const reconnectRunnerRoomWebSocket = React.useCallback(async () => {
+    if (!runboxRunningId) {
+      return;
+    }
+    setRunboxRunningCanceling(true);
+    return postOrgMaterialRunboxRunboxRunningCancel({
+      runboxRunningId
+    }).then(() => setRunboxRunningCanceling(false)).catch(() => setRunboxRunningCanceling(false));
+  }, [runboxRunningId]);
   //
   //
   //
-  return jsx(WSMaterialRunboxLegacyRunnerRoom.Provider, {
+  return React.createElement(WSMaterialRunboxLegacyRunnerRoom.Provider, {
     enable: !isRunboxRunningCanceling,
-    endpoint: "".concat(apiWsOriginUrl, "/runner_room"),
+    endpoint: `${apiWsOriginUrl}/runner_room`,
     tokenProvider: resolveRunnerRoomToken,
-    connectionTimeout: 8000,
-    children: jsx(MaterialRunboxLegacyStdioWrapper, {
-      isRunboxJoinError: isRunboxJoinError,
-      reconnectRunnerRoomWebSocket: reconnectRunnerRoomWebSocket
-    })
-  });
+    connectionTimeout: 8000
+  }, React.createElement(MaterialRunboxLegacyStdioWrapper, {
+    isRunboxJoinError: isRunboxJoinError,
+    reconnectRunnerRoomWebSocket: reconnectRunnerRoomWebSocket
+  }));
 };
 
 export { MaterialRunboxLegacyRunnerRoomWrapper as default };