@elice/material-exercise 1.240718.0-trasncript.0 → 1.240718.0-trasncript.2

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
@@ -14,20 +16,28 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
-const StyledControllerButton = styled(blocks.Button).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+var ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
+var StyledControllerButton = styled__default.default(blocks.Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const [isTooltipHidden, setIsTooltipHidden] = React.useState(false);
-  const isAibotInfoEnabled = recoil.useRecoilValue(recoil$1.exerciseAibotInfoEnableState);
+var ExerciseRunnerControllerCodeHelpRequestButton = React__default.default.forwardRef(function (props, ref) {
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isTooltipHidden = _React$useState2[0],
+    setIsTooltipHidden = _React$useState2[1];
+  var isAibotInfoEnabled = recoil.useRecoilValue(recoil$1.exerciseAibotInfoEnableState);
   //
   //
   //
-  React.useEffect(() => {
-    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
+  React__default.default.useEffect(function () {
+    var isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
     if (isTooltipHidden) {
       setIsTooltipHidden(true);
       return;
@@ -39,53 +49,59 @@ const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, r
   /**
    *
    */
-  const renderAiBotTooltipTitle = () => {
-    return React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.BadgeNext, {
-      role: "red"
-    }, React.createElement(blocks.Text, {
-      role: "white",
-      size: "tiny",
-      bold: true
-    }, "NEW")), React.createElement(blocks.Hspace, {
-      width: 0.625
-    }), React.createElement(blocks.Text, {
-      role: "gray9",
-      size: "small",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp'
-    })), React.createElement(blocks.Hspace, {
-      width: 0.625
-    }), React.createElement(blocks.IconButton, {
-      size: "tiny",
-      role: "primary",
-      hasPadding: false,
-      border: false,
-      icon: icons.eilMathsignMultiplyBasic,
-      onClick: () => {
-        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
-        setIsTooltipHidden(true);
-      }
-    }));
+  var renderAiBotTooltipTitle = function renderAiBotTooltipTitle() {
+    return jsxRuntime.jsxs(blocks.Flex, {
+      align: "center",
+      children: [jsxRuntime.jsx(blocks.BadgeNext, {
+        role: "red",
+        children: jsxRuntime.jsx(blocks.Text, {
+          role: "white",
+          size: "tiny",
+          bold: true,
+          children: "NEW"
+        })
+      }), jsxRuntime.jsx(blocks.Hspace, {
+        width: 0.625
+      }), jsxRuntime.jsx(blocks.Text, {
+        role: "gray9",
+        size: "small",
+        bold: true,
+        children: intl$1.formatMessage({
+          id: 'exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp'
+        })
+      }), jsxRuntime.jsx(blocks.Hspace, {
+        width: 0.625
+      }), jsxRuntime.jsx(blocks.IconButton, {
+        size: "tiny",
+        role: "primary",
+        hasPadding: false,
+        border: false,
+        icon: icons.eilMathsignMultiplyBasic,
+        onClick: function onClick() {
+          sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
+          setIsTooltipHidden(true);
+        }
+      })]
+    });
   };
-  return isAibotInfoEnabled ? React.createElement(blocks.Tooltip, {
+  return isAibotInfoEnabled ? jsxRuntime.jsx(blocks.Tooltip, {
     placement: "top",
     dark: false,
     visible: !isTooltipHidden,
-    title: renderAiBotTooltipTitle()
-  }, React.createElement(StyledControllerButton, Object.assign({}, props, {
-    ref: ref,
-    size: "tiny",
-    role: "darkblue",
-    icon: React.createElement(blocks.Icon, {
-      icon: icons.eilArrowRightwardsBasic
-    }),
-    iconAlign: "right"
-  }), intl$1.formatMessage({
-    id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
-  }))) : null;
+    title: renderAiBotTooltipTitle(),
+    children: jsxRuntime.jsx(StyledControllerButton, Object.assign({}, props, {
+      ref: ref,
+      size: "tiny",
+      role: "darkblue",
+      icon: jsxRuntime.jsx(blocks.Icon, {
+        icon: icons.eilArrowRightwardsBasic
+      }),
+      iconAlign: "right",
+      children: intl$1.formatMessage({
+        id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
+      })
+    }))
+  }) : null;
 });
 
 exports.default = ExerciseRunnerControllerCodeHelpRequestButton;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
@@ -17,43 +19,56 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 //
 //
 //
-const StyledHr = styled(blocks.Hr).withConfig({
+var StyledHr = styled__default.default(blocks.Hr).withConfig({
   componentId: "sc-30ywzi-0"
 })(["height:2rem;"]);
-const StyledRunnerInfoTitle = styled.span.withConfig({
+var StyledRunnerInfoTitle = styled__default.default.span.withConfig({
   componentId: "sc-30ywzi-1"
 })(["display:block;color:", ";font-size:11px;line-height:1.25;"], designTokens.base.color.navy3);
-const StyledRunnerInfoContent = styled.span.withConfig({
+var StyledRunnerInfoContent = styled__default.default.span.withConfig({
   componentId: "sc-30ywzi-2"
 })(["display:block;color:", ";font-size:12px;line-height:1.25;"], designTokens.base.color.navy1);
 //
 //
 //
-const ExerciseRunnerControllerRunningInfo = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    materialExerciseId,
-    exerciseRoomId,
-    onExerciseRunningDone,
-    onError
-  } = React.useContext(context.ExerciseContext);
-  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  const isPrevRunning = reactUse.usePrevious(isRunning);
-  const isNoRunning = isPrevRunning === undefined;
-  const isRunningDone = isPrevRunning === true && !isRunning;
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
-  const [course, setCourse] = React.useState();
-  const [exerciseLastRunning, setExerciseLastRunning] = React.useState(null);
-  const [exerciseLastSubmit, setExerciseLastSubmit] = React.useState(null);
+var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunningInfo() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    onExerciseRunningDone = _React$useContext.onExerciseRunningDone,
+    onError = _React$useContext.onError;
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var isPrevRunning = reactUse.usePrevious(isRunning);
+  var isNoRunning = isPrevRunning === undefined;
+  var isRunningDone = isPrevRunning === true && !isRunning;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  var _React$useState = React__default.default.useState(),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    course = _React$useState2[0],
+    setCourse = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(null),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    exerciseLastRunning = _React$useState4[0],
+    setExerciseLastRunning = _React$useState4[1];
+  var _React$useState5 = React__default.default.useState(null),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    exerciseLastSubmit = _React$useState6[0],
+    setExerciseLastSubmit = _React$useState6[1];
   //
   // Get exercise running list.
   //
-  React.useEffect(() => {
-    const userId = user === null || user === void 0 ? void 0 : user.id;
+  React__default.default.useEffect(function () {
+    var userId = user === null || user === void 0 ? void 0 : user.id;
     if (!userId || !exercise || !exerciseRoomId) {
       return;
     }
@@ -63,21 +78,36 @@ const ExerciseRunnerControllerRunningInfo = () => {
     if (!isNoRunning && !isRunningDone) {
       return;
     }
-    const abortCtrl = new AbortController();
-    const _fetch = async runType => {
-      return apiClient.getOrgMaterialExerciseExerciseRunningList({
-        exerciseRoomId,
-        filterRunType: runType,
-        offset: 0,
-        count: 1,
-        userId
-      }, {
-        signal: abortCtrl.signal
-      }).then(res => res.exerciseRunnings).then(exerciseRunnings => {
-        var _a;
-        return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
-      });
-    };
+    var abortCtrl = new AbortController();
+    var _fetch = /*#__PURE__*/function () {
+      var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(runType) {
+        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", apiClient.getOrgMaterialExerciseExerciseRunningList({
+                exerciseRoomId: exerciseRoomId,
+                filterRunType: runType,
+                offset: 0,
+                count: 1,
+                userId: userId
+              }, {
+                signal: abortCtrl.signal
+              }).then(function (res) {
+                return res.exerciseRunnings;
+              }).then(function (exerciseRunnings) {
+                var _a;
+                return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
+              }));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function _fetch(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
     Promise.all([
     // running
     // - if exercise is no submit grade, fetch only running
@@ -86,14 +116,17 @@ const ExerciseRunnerControllerRunningInfo = () => {
     // submit
     // - if exercise is no submit grade, fetch nothing
     // - else, fetch submit
-    exercise.isNoSubmitGrade ? Promise.resolve(null) : _fetch(types.enums.ExerciseRunType.Grade)]).then(([exerciseLastRunning, exerciseLastSubmit]) => {
+    exercise.isNoSubmitGrade ? Promise.resolve(null) : _fetch(types.enums.ExerciseRunType.Grade)]).then(function (_ref2) {
+      var _ref3 = _rollupPluginBabelHelpers.slicedToArray(_ref2, 2),
+        exerciseLastRunning = _ref3[0],
+        exerciseLastSubmit = _ref3[1];
       setExerciseLastRunning(exerciseLastRunning);
       setExerciseLastSubmit(exerciseLastSubmit);
       // callback on running done (last running which includes submit)
       if (isRunningDone && typeof onExerciseRunningDone === 'function') {
         onExerciseRunningDone(exerciseLastRunning);
       }
-    }).catch(err => {
+    }).catch(function (err) {
       if (err.name === 'AbortError') {
         return;
       }
@@ -104,7 +137,7 @@ const ExerciseRunnerControllerRunningInfo = () => {
         id: 'exerciseRunner.controller.runningInfo.error.fetch'
       }));
     });
-    return () => {
+    return function () {
       abortCtrl.abort();
     };
   },
@@ -113,79 +146,93 @@ const ExerciseRunnerControllerRunningInfo = () => {
   //
   // Get course
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!exercise) {
       return;
     }
-    const abortCtrl = new AbortController();
+    var abortCtrl = new AbortController();
     apiClient.getOrgCourseGet({
       courseId: exercise._courseId
     }, {
       signal: abortCtrl.signal
-    }).then(res => res.course).then(setCourse).catch(console.error);
-    return () => {
+    }).then(function (res) {
+      return res.course;
+    }).then(setCourse).catch(console.error);
+    return function () {
       abortCtrl.abort();
     };
   }, [exercise]);
   /**
    * Last running score.
    */
-  const renderRunningInfoLastSubmitScore = () => {
+  var renderRunningInfoLastSubmitScore = function renderRunningInfoLastSubmitScore() {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) {
       return null;
     }
     if (!course || course.courseType === types.enums.CourseType.Challenge) {
       return;
     }
-    return React.createElement(React.Fragment, null, React.createElement(blocks.Flex, {
-      column: true,
-      justify: "center"
-    }, React.createElement(StyledRunnerInfoTitle, null, intl$1.formatMessage({
-      id: 'exerciseRunner.controller.runningInfo.lastSubmitScore'
-    })), React.createElement(StyledRunnerInfoContent, null, typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? intl$1.formatMessage({
-      id: 'exerciseRunner.controller.runningInfo.score'
-    }, {
-      score: exerciseLastSubmit.score
-    }) : '--')), React.createElement(StyledHr, {
-      color: designTokens.base.color.navy6,
-      vertical: true,
-      marginStart: "0.5rem",
-      marginEnd: "0.5rem"
-    }));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(blocks.Flex, {
+        column: true,
+        justify: "center",
+        children: [jsxRuntime.jsx(StyledRunnerInfoTitle, {
+          children: intl$1.formatMessage({
+            id: 'exerciseRunner.controller.runningInfo.lastSubmitScore'
+          })
+        }), jsxRuntime.jsx(StyledRunnerInfoContent, {
+          children: typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? intl$1.formatMessage({
+            id: 'exerciseRunner.controller.runningInfo.score'
+          }, {
+            score: exerciseLastSubmit.score
+          }) : '--'
+        })]
+      }), jsxRuntime.jsx(StyledHr, {
+        color: designTokens.base.color.navy6,
+        vertical: true,
+        marginStart: "0.5rem",
+        marginEnd: "0.5rem"
+      })]
+    });
   };
   /**
    * Last submit time.
    */
-  const renderRunningInfoLastRunningTime = () => {
+  var renderRunningInfoLastRunningTime = function renderRunningInfoLastRunningTime() {
     if (!course || (course === null || course === void 0 ? void 0 : course.courseType) === types.enums.CourseType.Challenge) {
       return;
     }
-    return React.createElement(blocks.Flex, {
+    return jsxRuntime.jsxs(blocks.Flex, {
       column: true,
-      justify: "center"
-    }, React.createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? intl$1.formatMessage({
-      id: 'exerciseRunner.controller.runningInfo.lastRunningDatetime'
-    }) : intl$1.formatMessage({
-      id: 'exerciseRunner.controller.runningInfo.lastSubmitDatetime'
-    })), React.createElement(StyledRunnerInfoContent, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ?
-    // last running
-    (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? intl$1.formatDate(exerciseLastRunning.createdDatetime, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
-    }) : '--' :
-    // last submit
-    (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? intl$1.formatDate(exerciseLastSubmit.createdDatetime, {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
-    }) : '--'));
+      justify: "center",
+      children: [jsxRuntime.jsx(StyledRunnerInfoTitle, {
+        children: (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? intl$1.formatMessage({
+          id: 'exerciseRunner.controller.runningInfo.lastRunningDatetime'
+        }) : intl$1.formatMessage({
+          id: 'exerciseRunner.controller.runningInfo.lastSubmitDatetime'
+        })
+      }), jsxRuntime.jsx(StyledRunnerInfoContent, {
+        children: (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ?
+        // last running
+        (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? intl$1.formatDate(exerciseLastRunning.createdDatetime, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        }) : '--' :
+        // last submit
+        (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? intl$1.formatDate(exerciseLastSubmit.createdDatetime, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        }) : '--'
+      })]
+    });
   };
   //
   //
@@ -194,7 +241,9 @@ const ExerciseRunnerControllerRunningInfo = () => {
   if (isRunning) {
     return null;
   }
-  return React.createElement(blocks.Flex, null, renderRunningInfoLastSubmitScore(), renderRunningInfoLastRunningTime());
+  return jsxRuntime.jsxs(blocks.Flex, {
+    children: [renderRunningInfoLastSubmitScore(), renderRunningInfoLastRunningTime()]
+  });
 };
 
 exports.default = ExerciseRunnerControllerRunningInfo;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var ExerciseRunnerControllerStatusIndicator = styled__default.default.div.withConfig({
   componentId: "sc-15703mt-0"
-})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], props => {
+})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], function (props) {
   switch (props.status) {
     case 'success':
       return designTokens.base.color.green8;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var websocket = require('@elice/websocket');
@@ -15,16 +15,20 @@ require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 var ExerciseRunnerControllerStatusIndicator = require('./ExerciseRunnerControllerStatusIndicator.js');
 
-const StyledMessageWrapper = styled(blocks.Flex).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledMessageWrapper = styled__default.default(blocks.Flex).withConfig({
   componentId: "sc-1yqi8o2-0"
 })(["height:1rem;"]);
-const ExerciseRunnerControllerStatusMessage = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const websocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
+var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerStatusMessage() {
+  var intl$1 = intl.useRawEliceIntl();
+  var websocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
   /**
    * Websocket state message.
    */
-  const getWebsocketStateMessage = () => {
+  var getWebsocketStateMessage = function getWebsocketStateMessage() {
     switch (websocketStatus) {
       case websocket.EliceWebSocket.OPEN:
         return intl$1.formatMessage({
@@ -44,15 +48,17 @@ const ExerciseRunnerControllerStatusMessage = () => {
   //
   //
   //
-  return React.createElement(StyledMessageWrapper, {
-    align: "center"
-  }, React.createElement(ExerciseRunnerControllerStatusIndicator.default, {
-    status: websocketStatus === websocket.EliceWebSocket.OPEN ? 'success' : websocketStatus === websocket.EliceWebSocket.CLOSED ? 'error' : 'warning'
-  }), React.createElement(blocks.Text, {
-    role: "gray3",
-    size: "tiny",
-    bold: true
-  }, getWebsocketStateMessage()));
+  return jsxRuntime.jsxs(StyledMessageWrapper, {
+    align: "center",
+    children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusIndicator.default, {
+      status: websocketStatus === websocket.EliceWebSocket.OPEN ? 'success' : websocketStatus === websocket.EliceWebSocket.CLOSED ? 'error' : 'warning'
+    }), jsxRuntime.jsx(blocks.Text, {
+      role: "gray3",
+      size: "tiny",
+      bold: true,
+      children: getWebsocketStateMessage()
+    })]
+  });
 };
 
 exports.default = ExerciseRunnerControllerStatusMessage;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -14,22 +16,32 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-const StyledControllerTimerText = styled(blocks.Text).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledControllerTimerText = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-1ez8ns0-0"
 })(["margin-top:-3px;color:", ";"], designTokens.base.color.secondary4);
-const ExerciseRunnerControllerTimer = () => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    materialExerciseId
-  } = React.useContext(context.ExerciseContext);
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  const [exerciseTimeLimit, setExerciseTimeLimit] = React.useState(0);
-  const [remainingTime, setRemainingTime] = React.useState(0);
+var ExerciseRunnerControllerTimer = function ExerciseRunnerControllerTimer() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var _React$useState = React__default.default.useState(0),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    exerciseTimeLimit = _React$useState2[0],
+    setExerciseTimeLimit = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(0),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    remainingTime = _React$useState4[0],
+    setRemainingTime = _React$useState4[1];
   //
   // Get time limit from exercise.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     var _a, _b;
     if (isRunning) {
       setExerciseTimeLimit((_b = (_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.timeLimit) !== null && _b !== void 0 ? _b : 0);
@@ -40,17 +52,17 @@ const ExerciseRunnerControllerTimer = () => {
   //
   // Calculate remaining time.
   //
-  React.useEffect(() => {
-    const startTime = Date.now();
+  React__default.default.useEffect(function () {
+    var startTime = Date.now();
     setRemainingTime(exerciseTimeLimit);
-    const interval = window.setInterval(() => {
-      const newRemainingTime = exerciseTimeLimit - (Date.now() - startTime);
+    var interval = window.setInterval(function () {
+      var newRemainingTime = exerciseTimeLimit - (Date.now() - startTime);
       if (newRemainingTime < 0) {
         window.clearInterval(interval);
       }
       setRemainingTime(Math.max(newRemainingTime, 0));
     }, 100);
-    return () => {
+    return function () {
       setRemainingTime(0);
       window.clearInterval(interval);
     };
@@ -61,13 +73,14 @@ const ExerciseRunnerControllerTimer = () => {
   if (!remainingTime) {
     return null;
   }
-  return React.createElement(StyledControllerTimerText, {
-    size: "small"
-  }, intl$1.formatMessage({
-    id: 'exerciseRunner.controller.timer.runningRemainingTime'
-  }, {
-    remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
-  }));
+  return jsxRuntime.jsx(StyledControllerTimerText, {
+    size: "small",
+    children: intl$1.formatMessage({
+      id: 'exerciseRunner.controller.timer.runningRemainingTime'
+    }, {
+      remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
+    })
+  });
 };
 
 exports.default = ExerciseRunnerControllerTimer;