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

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoAgentModal.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { Modal, Vspace, Text, Flex, Button, Icon, Hspace } from '@elice/blocks';
 import { eisWindows, eisMac, eilArrowRightwardsBasic } from '@elice/icons';
@@ -12,123 +10,101 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY = 'elice-material-exercise-arduino-agent-modal-closed';
-var ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE = 'true';
-var ARDUINO_AGENT_MAC_DOWNLOAD_URL = 'https://eli.so/arduino-agent-mac';
-var ARDUINO_AGENT_WIN_DOWNLOAD_URL = 'https://eli.so/arduino-agent-win';
-var ARDUINO_AGENT_MANUAL_URL = 'https://eli.so/arduino-faq';
-var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControllerArduinoAgentModal() {
-  var intl = useRawEliceIntl();
-  var _useRecoilState = useRecoilState(exerciseArduinoAgentModalState),
-    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
-    open = _useRecoilState2[0],
-    setOpen = _useRecoilState2[1];
-  React.useEffect(function () {
-    var isConfirmed = localStorage.getItem(ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY) === ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE;
+const ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY = 'elice-material-exercise-arduino-agent-modal-closed';
+const ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE = 'true';
+const ARDUINO_AGENT_MAC_DOWNLOAD_URL = 'https://eli.so/arduino-agent-mac';
+const ARDUINO_AGENT_WIN_DOWNLOAD_URL = 'https://eli.so/arduino-agent-win';
+const ARDUINO_AGENT_MANUAL_URL = 'https://eli.so/arduino-faq';
+const ExerciseRunnerControllerArduinoAgentModal = () => {
+  const intl = useRawEliceIntl();
+  const [open, setOpen] = useRecoilState(exerciseArduinoAgentModalState);
+  React.useEffect(() => {
+    const isConfirmed = localStorage.getItem(ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY) === ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE;
     if (!isConfirmed) {
       setOpen(true);
     }
   }, [setOpen]);
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     setOpen(false);
     localStorage.setItem(ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY, ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE);
   };
-  var handleDownload = function handleDownload(fileUrl) {
+  const handleDownload = fileUrl => {
     FileSaver.saveAs(fileUrl);
   };
-  var renderAgentInstallInstruction = function renderAgentInstallInstruction() {
-    return jsxs(Fragment, {
-      children: [jsx(Text, {
-        bold: true,
-        role: "gray0",
-        children: intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.install'
-        })
-      }), jsx(Vspace, {
-        height: 0.25
-      }), jsx(Text, {
-        role: "navy",
-        size: "small",
-        children: intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.install.detail'
-        })
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsxs(Flex, {
-        children: [jsx(Button, {
-          size: "tiny",
-          role: "gray1",
-          icon: jsx(Icon, {
-            icon: eisWindows,
-            size: "huge"
-          }),
-          iconAlign: "left",
-          onClick: function onClick() {
-            return handleDownload(ARDUINO_AGENT_WIN_DOWNLOAD_URL);
-          },
-          children: intl.formatMessage({
-            id: 'exerciseRunner.controller.arduino.agent.instruction.install.window'
-          })
-        }), jsx(Hspace, {
-          width: 0.75
-        }), jsx(Button, {
-          size: "tiny",
-          role: "gray1",
-          icon: jsx(Icon, {
-            icon: eisMac
-          }),
-          iconAlign: "left",
-          onClick: function onClick() {
-            return handleDownload(ARDUINO_AGENT_MAC_DOWNLOAD_URL);
-          },
-          children: intl.formatMessage({
-            id: 'exerciseRunner.controller.arduino.agent.instruction.install.mac'
-          })
-        })]
-      })]
-    });
+  const renderAgentInstallInstruction = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Text, {
+      bold: true,
+      role: "gray0"
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install'
+    })), React.createElement(Vspace, {
+      height: 0.25
+    }), React.createElement(Text, {
+      role: "navy",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.detail'
+    })), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(Flex, null, React.createElement(Button, {
+      size: "tiny",
+      role: "gray1",
+      icon: React.createElement(Icon, {
+        icon: eisWindows,
+        size: "huge"
+      }),
+      iconAlign: "left",
+      onClick: () => handleDownload(ARDUINO_AGENT_WIN_DOWNLOAD_URL)
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.window'
+    })), React.createElement(Hspace, {
+      width: 0.75
+    }), React.createElement(Button, {
+      size: "tiny",
+      role: "gray1",
+      icon: React.createElement(Icon, {
+        icon: eisMac
+      }),
+      iconAlign: "left",
+      onClick: () => handleDownload(ARDUINO_AGENT_MAC_DOWNLOAD_URL)
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.mac'
+    }))));
   };
-  var renderAgentConnectionInstruction = function renderAgentConnectionInstruction() {
-    return jsxs(Fragment, {
-      children: [jsxs(Text, {
-        role: "gray0",
-        bold: true,
-        children: [intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
-        }), intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
-        })]
-      }), jsx(Vspace, {
-        height: 0.25
-      }), jsx(Text, {
-        role: "navy",
-        size: "small",
-        lineHeight: 1.6,
-        children: intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.connect.detail'
-        })
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsx(Button, {
-        icon: jsx(Icon, {
-          icon: eilArrowRightwardsBasic
-        }),
-        iconAlign: "right",
-        size: "tiny",
-        role: "secondary",
-        onClick: function onClick() {
-          return window.open(ARDUINO_AGENT_MANUAL_URL);
-        },
-        children: intl.formatMessage({
-          id: 'exerciseRunner.controller.arduino.agent.instruction.connect.button'
-        })
-      })]
-    });
+  const renderAgentConnectionInstruction = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Text, {
+      role: "gray0",
+      bold: true
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
+    }), intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
+    })), React.createElement(Vspace, {
+      height: 0.25
+    }), React.createElement(Text, {
+      role: "navy",
+      size: "small",
+      lineHeight: 1.6
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect.detail'
+    })), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(Button, {
+      icon: React.createElement(Icon, {
+        icon: eilArrowRightwardsBasic
+      }),
+      iconAlign: "right",
+      size: "tiny",
+      role: "secondary",
+      onClick: () => window.open(ARDUINO_AGENT_MANUAL_URL)
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect.button'
+    })));
   };
   if (!open) {
     return null;
   }
-  return jsx(Modal, {
+  return React.createElement(Modal, {
     theme: "dark",
     title: intl.formatMessage({
       id: 'exerciseRunner.controller.arduino.agent.title'
@@ -139,13 +115,10 @@ var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControlle
       }),
       onClick: handleClose
     }],
-    onHide: handleClose,
-    children: jsxs(Fragment, {
-      children: [renderAgentInstallInstruction(), jsx(Vspace, {
-        height: 1.5
-      }), renderAgentConnectionInstruction()]
-    })
-  });
+    onHide: handleClose
+  }, React.createElement(React.Fragment, null, renderAgentInstallInstruction(), React.createElement(Vspace, {
+    height: 1.5
+  }), renderAgentConnectionInstruction()));
 };
 
 export { ExerciseRunnerControllerArduinoAgentModal as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.js

@@ -1,6 +1,4 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Flex, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
@@ -13,24 +11,18 @@ import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 import ExerciseRunnerControllerStatusIndicator from './ExerciseRunnerControllerStatusIndicator.js';
 
-var StyledMessageWrapper = styled(Flex).withConfig({
+const StyledMessageWrapper = styled(Flex).withConfig({
   componentId: "sc-19z7lun-0"
 })(["height:1rem;"]);
-var ExerciseRunnerControllerArduinoStatusMessage = function ExerciseRunnerControllerArduinoStatusMessage() {
-  var intl = useRawEliceIntl();
-  var ports = useRecoilValue(exerciseArduinoPortsState);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    message = _useState2[0],
-    setMessage = _useState2[1];
-  var _useState3 = useState('error'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
-  var arduinoOpenedPort = useRecoilValue(exerciseArduinoOpenedPortNameState);
-  var arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
-  var arduinoAgentConnectionStatus = useRecoilValue(exerciseArduinoAgentConnectionState);
-  useEffect(function () {
+const ExerciseRunnerControllerArduinoStatusMessage = () => {
+  const intl = useRawEliceIntl();
+  const ports = useRecoilValue(exerciseArduinoPortsState);
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState('error');
+  const arduinoOpenedPort = useRecoilValue(exerciseArduinoOpenedPortNameState);
+  const arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
+  const arduinoAgentConnectionStatus = useRecoilValue(exerciseArduinoAgentConnectionState);
+  useEffect(() => {
     if (arduinoAgentConnectionStatus === 'disconnected') {
       setStatus('error');
       setMessage(intl.formatMessage({
@@ -73,7 +65,7 @@ var ExerciseRunnerControllerArduinoStatusMessage = function ExerciseRunnerContro
       case 'error':
       case 'done':
       default:
-        var device = getPortFromName(ports, arduinoOpenedPort);
+        const device = getPortFromName(ports, arduinoOpenedPort);
         if (device) {
           setMessage(intl.formatMessage({
             id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
@@ -91,16 +83,14 @@ var ExerciseRunnerControllerArduinoStatusMessage = function ExerciseRunnerContro
   //
   //
   //
-  return jsxs(StyledMessageWrapper, {
-    align: "center",
-    children: [jsx(ExerciseRunnerControllerStatusIndicator, {
-      status: status
-    }), jsx(Text, {
-      role: "gray3",
-      size: "tiny",
-      children: message
-    })]
-  });
+  return React.createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React.createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: status
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny"
+  }, message));
 };
 
 export { ExerciseRunnerControllerArduinoStatusMessage as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -1,4 +1,3 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Button, Tooltip } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
@@ -26,67 +25,69 @@ import 'unicount';
 import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
 import ExerciseRunnerControllerCodeHelpRequestButton from './ExerciseRunnerControllerCodeHelpRequestButton.js';
 
-var StyledControllerButton = styled(Button).withConfig({
+const StyledControllerButton = styled(Button).withConfig({
   componentId: "sc-d9xhed-0"
 })(["position:relative;transition:none;&.eb-button--role-danger{border-color:", ";background-color:", ";}"], colors.red[700], colors.red[700]);
-var StyledControllerButtonWrap = styled.div.withConfig({
+const StyledControllerButtonWrap = styled.div.withConfig({
   componentId: "sc-d9xhed-1"
 })(["display:flex;"]);
-var StyledControllerButtonGroup = styled.div.withConfig({
+const StyledControllerButtonGroup = styled.div.withConfig({
   componentId: "sc-d9xhed-2"
 })(["display:flex;flex-direction:row;align-items:center;> ", ",> ", "{margin-right:0.5rem;&:last-child{margin-right:0;}}"], StyledControllerButtonWrap, StyledControllerButton);
-var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
+const ExerciseRunnerControllerButtonGroup = () => {
   var _a;
-  var intl = useRawEliceIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId,
-    onCodeHelpRequest = _React$useContext.onCodeHelpRequest;
-  var _React$useContext2 = React.useContext(ExerciseRunnerContext),
-    onSubmit = _React$useContext2.onSubmit,
-    onSyncRequest = _React$useContext2.onSyncRequest,
-    onCancel = _React$useContext2.onCancel;
-  var runnerWebsocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
-  var editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
-  var exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
-  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
-  var isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed;
+  const intl = useRawEliceIntl();
+  const {
+    materialExerciseId,
+    onCodeHelpRequest
+  } = React.useContext(ExerciseContext);
+  const {
+    onSubmit,
+    onSyncRequest,
+    onCancel
+  } = React.useContext(ExerciseRunnerContext);
+  const runnerWebsocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
+  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
+  const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
+  const isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed;
   // runner states
-  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
-  var isRunning = useRecoilValue(exerciseRunnerRunningState);
-  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
-  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
+  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  const isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
   // arduino
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  var arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
-  var arduinoOpenedPortName = useRecoilValue(exerciseArduinoOpenedPortNameState);
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
+  const arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
+  const arduinoOpenedPortName = useRecoilValue(exerciseArduinoOpenedPortNameState);
   // monaco editor apis
-  var exerciseMonacoEditorApis = useRecoilValue(exerciseMonacoEditorApisState);
+  const exerciseMonacoEditorApis = useRecoilValue(exerciseMonacoEditorApisState);
   //
   // ========= ui states =========
   //
   // submit run
-  var isSubmitRunHidden = isRunning;
-  var isSubmitRunArduinoDisabled = isArduinoExercise ? arduinoUploadProgress !== 'ready' && arduinoUploadProgress !== 'error' || !arduinoOpenedPortName : false;
-  var isSubmitRunDisabled = isSubmitRunHidden || isSubmitRunArduinoDisabled || isNotReady || isConnecting || isSubmitting;
+  const isSubmitRunHidden = isRunning;
+  const isSubmitRunArduinoDisabled = isArduinoExercise ? arduinoUploadProgress !== 'ready' && arduinoUploadProgress !== 'error' || !arduinoOpenedPortName : false;
+  const isSubmitRunDisabled = isSubmitRunHidden || isSubmitRunArduinoDisabled || isNotReady || isConnecting || isSubmitting;
   // submit grade
-  var isSubmitGradeHidden = isRunning;
-  var isSubmitGradeDisabled = isSubmitGradeHidden || exerciseWithNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting;
+  const isSubmitGradeHidden = isRunning;
+  const isSubmitGradeDisabled = isSubmitGradeHidden || exerciseWithNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting;
   // cancel
-  var isCancelHidden = !isRunning;
-  var isCancelDisabled = isCancelHidden || isNotReady || isConnecting;
+  const isCancelHidden = !isRunning;
+  const isCancelDisabled = isCancelHidden || isNotReady || isConnecting;
   // sync request
-  var isSyncRequestHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
-  var isSyncRequestDisabled = isSyncRequestHidden || isNotReady || isConnecting;
+  const isSyncRequestHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
+  const isSyncRequestDisabled = isSyncRequestHidden || isNotReady || isConnecting;
   //
   //
   //
   /**
    * Submit to run
    */
-  var handleSubmitRun = function handleSubmitRun() {
+  const handleSubmitRun = () => {
     if (!isSubmitRunDisabled) {
       void onSubmit(enums.ExerciseRunType.Run);
     }
@@ -94,7 +95,7 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   /**
    * Submit to grade
    */
-  var handleSubmitGrade = function handleSubmitGrade() {
+  const handleSubmitGrade = () => {
     if (!isSubmitGradeDisabled) {
       void onSubmit(enums.ExerciseRunType.Grade);
     }
@@ -102,7 +103,7 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   /**
    * Cancel
    */
-  var handleCancel = function handleCancel() {
+  const handleCancel = () => {
     if (!isCancelDisabled) {
       onCancel();
     }
@@ -110,7 +111,7 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   /**
    * Sync request
    */
-  var handleSyncRequest = function handleSyncRequest() {
+  const handleSyncRequest = () => {
     if (!isSyncRequestDisabled) {
       onSyncRequest();
     }
@@ -125,9 +126,9 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   //
   // handle save action emitted by file editor
   //
-  React.useEffect(function () {
-    var saveActionSub = exerciseFileEditorSaveAction$.subscribe(handleSyncRequest);
-    return function () {
+  React.useEffect(() => {
+    const saveActionSub = exerciseFileEditorSaveAction$.subscribe(handleSyncRequest);
+    return () => {
       saveActionSub.unsubscribe();
     };
   },
@@ -136,94 +137,87 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   /**
    * Submit to run button
    */
-  var renderSubmitRunButton = function renderSubmitRunButton() {
+  const renderSubmitRunButton = () => {
     if (isSubmitRunHidden) {
       return null;
     }
-    return jsx(StyledControllerButton, {
+    return React.createElement(StyledControllerButton, {
       size: "tiny",
       loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Run,
       disabled: isSubmitRunDisabled,
-      onClick: handleSubmitRun,
-      children: isArduinoExercise ? intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.compile'
-      }) : intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.run'
-      })
-    });
+      onClick: handleSubmitRun
+    }, isArduinoExercise ? intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.compile'
+    }) : intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.run'
+    }));
   };
   /**
    * Submit to grade button
    */
-  var renderSubmitGradeButton = function renderSubmitGradeButton() {
+  const renderSubmitGradeButton = () => {
     if (isSubmitGradeHidden) {
       return null;
     }
-    return jsx(Tooltip, {
+    return React.createElement(Tooltip, {
       title: exerciseWithNoGrade ? intl.formatMessage({
         id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
       }) : undefined,
       placement: "top",
-      dark: true,
-      children: jsx(StyledControllerButtonWrap, {
-        children: jsx(StyledControllerButton, {
-          size: "tiny",
-          role: "secondary",
-          loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Grade,
-          disabled: isSubmitGradeDisabled,
-          onClick: handleSubmitGrade,
-          children: intl.formatMessage({
-            id: 'exerciseRunner.controller.buttonGroup.button.submit'
-          })
-        })
-      })
-    });
+      dark: true
+    }, React.createElement(StyledControllerButtonWrap, null, React.createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "secondary",
+      loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Grade,
+      disabled: isSubmitGradeDisabled,
+      onClick: handleSubmitGrade
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.submit'
+    }))));
   };
   /**
    * Cancel button
    */
-  var renderCancelButton = function renderCancelButton() {
+  const renderCancelButton = () => {
     if (isCancelHidden) {
       return null;
     }
-    return jsx(StyledControllerButton, {
+    return React.createElement(StyledControllerButton, {
       size: "tiny",
       role: "danger",
       loading: isConnecting,
       disabled: isCancelDisabled,
-      onClick: handleCancel,
-      children: intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.stop'
-      })
-    });
+      onClick: handleCancel
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.stop'
+    }));
   };
   /**
    * Sync request button
    */
-  var renderSyncRequestButton = function renderSyncRequestButton() {
+  const renderSyncRequestButton = () => {
     if (isSyncRequestHidden) {
       return null;
     }
-    return jsx(StyledControllerButton, {
+    return React.createElement(StyledControllerButton, {
       size: "tiny",
       role: "secondary",
       loading: isConnecting,
       disabled: isSyncRequestDisabled,
-      onClick: handleSyncRequest,
-      children: intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
-      })
-    });
+      onClick: handleSyncRequest
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
+    }));
   };
   /**
    * Code help button
    */
-  var renderCodeHelpRequestButton = function renderCodeHelpRequestButton() {
+  const renderCodeHelpRequestButton = () => {
     if (isRunning || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
       return null;
     }
-    return jsx(ExerciseRunnerControllerCodeHelpRequestButton, {
-      onClick: function onClick() {
+    return React.createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
+      onClick: () => {
         var _a, _b, _c;
         onCodeHelpRequest({
           code: editorCursorSelectionValue,
@@ -237,9 +231,7 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
   //
   //
   //
-  return jsxs(StyledControllerButtonGroup, {
-    children: [renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton(), renderCodeHelpRequestButton()]
-  });
+  return React.createElement(StyledControllerButtonGroup, null, renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton(), renderCodeHelpRequestButton());
 };
 
 export { ExerciseRunnerControllerButtonGroup as default };