@elice/material-exercise 1.260429.0-improvetimerpopoverui.0 → 1.260430.1

package/cjs/components/material-exercise/context/index.js

@@ -10,13 +10,6 @@ var ExerciseProvider = require('./ExerciseProvider.js');
 
 exports.exerciseActiveFilenameState = recoil.exerciseActiveFilenameState;
 exports.exerciseAibotInfoEnableState = recoil.exerciseAibotInfoEnableState;
-exports.exerciseArduinoAgentConnectionState = recoil.exerciseArduinoAgentConnectionState;
-exports.exerciseArduinoAgentModalState = recoil.exerciseArduinoAgentModalState;
-exports.exerciseArduinoOnSelectPortState = recoil.exerciseArduinoOnSelectPortState;
-exports.exerciseArduinoOpenedPortNameState = recoil.exerciseArduinoOpenedPortNameState;
-exports.exerciseArduinoPortsState = recoil.exerciseArduinoPortsState;
-exports.exerciseArduinoPreferenceState = recoil.exerciseArduinoPreferenceState;
-exports.exerciseArduinoUploadProgressState = recoil.exerciseArduinoUploadProgressState;
 exports.exerciseContainerSizeState = recoil.exerciseContainerSizeState;
 exports.exerciseEditorPreferenceState = recoil.exerciseEditorPreferenceState;
 exports.exerciseFileEditorCursorSelectionValueState = recoil.exerciseFileEditorCursorSelectionValueState;

package/cjs/components/material-exercise/context/recoil.d.ts

@@ -1,6 +1,5 @@
 import { ExercisePreviewDisplayMode, ExercisePreviewType } from './recoilTypes';
 import type { MonacoEditorApis } from "../../shared/monaco-editor";
-import type { ArduinoAgentConnectionStatus, ArduinoUploadProgressStatus } from "../../../typings/arduino";
 import type { AtomContainerSizeState, AtomExerciseRoomState, AtomExerciseState, AtomFileEditorCursorState, AtomLectureState, AtomMultilangEnvironmentJson, AtomMultilangEnvironmentState, AtomRunnerRoomConnectionInfoState, AtomRunnerRunTypeState, AtomRunnerStdioFilesState, AtomUserState, AtomVisibilityState, AtomWebSocketStateKey, AtomWebSocketStates } from './recoilTypes';
 /**
  * Lecture.
@@ -84,49 +83,6 @@ export declare const exerciseMultilangEnvironmentState: (param: {
     materialExerciseId: number;
     exerciseRoomId: number;
 }) => import("recoil").RecoilState<AtomMultilangEnvironmentJson>;
-/**
- * Arduino preference.
- */
-export declare const exerciseArduinoPreferenceState: import("recoil").RecoilState<Required<{
-    baudRate: number;
-    port: string;
-}>>;
-/**
- * Arduino ports.
- */
-export declare const exerciseArduinoPortsState: import("recoil").RecoilState<{
-    Name: string;
-    SerialNumber: string;
-    DeviceClass: string;
-    IsOpen: boolean;
-    IsPrimary: boolean;
-    Baud: number;
-    BufferAlgorithm: string;
-    Ver: string;
-    NetworkPort: boolean;
-    VendorID: string;
-    ProductID: string;
-}[]>;
-/**
- * Opened arduino port.
- */
-export declare const exerciseArduinoOpenedPortNameState: import("recoil").RecoilState<string | null>;
-/**
- * Arduino port open handler.
- */
-export declare const exerciseArduinoOnSelectPortState: import("recoil").RecoilState<(name: string) => void>;
-/**
- * Arduino agent connection status.
- */
-export declare const exerciseArduinoAgentConnectionState: import("recoil").RecoilState<ArduinoAgentConnectionStatus>;
-/**
- * Arduino upload progress.
- */
-export declare const exerciseArduinoUploadProgressState: import("recoil").RecoilState<ArduinoUploadProgressStatus>;
-/**
- * Arduino agent modal open status.
- */
-export declare const exerciseArduinoAgentModalState: import("recoil").RecoilState<boolean>;
 /**
  *
  */

package/cjs/components/material-exercise/context/recoil.js

@@ -654,107 +654,6 @@ var exerciseMultilangEnvironmentState = recoil.atomFamily({
   }
 });
 //
-// =============== arduino ===============
-//
-var ARDUINO_ACCOUNT_PREFERENCE_KEY = 'material.exercise.arduino.preference';
-var DEFAULT_ARDUINO_PREFERENCE = {
-  baudRate: 9600,
-  port: ''
-};
-/**
- * Arduino preference.
- */
-var exerciseArduinoPreferenceState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Preference"),
-  "default": DEFAULT_ARDUINO_PREFERENCE,
-  effects: [function (_ref26) {
-    var trigger = _ref26.trigger,
-      setSelf = _ref26.setSelf,
-      onSet = _ref26.onSet;
-    var get = /*#__PURE__*/function () {
-      var _ref27 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee1() {
-        var _t8;
-        return _rollupPluginBabelHelpers.regenerator().w(function (_context1) {
-          while (1) switch (_context1.n) {
-            case 0:
-              _t8 = setSelf;
-              _context1.n = 1;
-              return apiClient.getGlobalAccountPreferenceGet({
-                pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY
-              }).then(function (res) {
-                return Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), res.pvalue);
-              })["catch"](function () {
-                return DEFAULT_ARDUINO_PREFERENCE;
-              });
-            case 1:
-              _t8(_context1.v);
-            case 2:
-              return _context1.a(2);
-          }
-        }, _callee1);
-      }));
-      return function get() {
-        return _ref27.apply(this, arguments);
-      };
-    }();
-    if (trigger === 'get') {
-      void get();
-    }
-    onSet(function (newPreference, prevPreference, isReset) {
-      if (!isEqual__default.default(newPreference, prevPreference) && !isReset) {
-        void apiClient.postGlobalAccountPreferenceEdit({
-          pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY,
-          pvalue: Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), newPreference)
-        });
-      }
-    });
-  }]
-});
-/**
- * Arduino ports.
- */
-var exerciseArduinoPortsState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Ports"),
-  "default": []
-});
-/**
- * Opened arduino port.
- */
-var exerciseArduinoOpenedPortNameState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OpenedPortName"),
-  "default": null
-});
-/**
- * Arduino port open handler.
- */
-var exerciseArduinoOnSelectPortState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OnSelectPort"),
-  "default": function _default(_) {
-    // do nothing.
-  }
-});
-/**
- * Arduino agent connection status.
- */
-var exerciseArduinoAgentConnectionState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentConnection"),
-  "default": 'disconnected'
-});
-/**
- * Arduino upload progress.
- */
-var exerciseArduinoUploadProgressState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/UploadProgressState"),
-  "default": 'ready'
-});
-/**
- * Arduino agent modal open status.
- */
-var exerciseArduinoAgentModalState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentModalState"),
-  "default": false
-});
-//
 // =============== others ===============
 //
 /**
@@ -816,13 +715,6 @@ var exerciseMonacoEditorApisState = recoil.atom({
 
 exports.exerciseActiveFilenameState = exerciseActiveFilenameState;
 exports.exerciseAibotInfoEnableState = exerciseAibotInfoEnableState;
-exports.exerciseArduinoAgentConnectionState = exerciseArduinoAgentConnectionState;
-exports.exerciseArduinoAgentModalState = exerciseArduinoAgentModalState;
-exports.exerciseArduinoOnSelectPortState = exerciseArduinoOnSelectPortState;
-exports.exerciseArduinoOpenedPortNameState = exerciseArduinoOpenedPortNameState;
-exports.exerciseArduinoPortsState = exerciseArduinoPortsState;
-exports.exerciseArduinoPreferenceState = exerciseArduinoPreferenceState;
-exports.exerciseArduinoUploadProgressState = exerciseArduinoUploadProgressState;
 exports.exerciseContainerSizeState = exerciseContainerSizeState;
 exports.exerciseEditorPreferenceState = exerciseEditorPreferenceState;
 exports.exerciseFileEditorCursorSelectionValueState = exerciseFileEditorCursorSelectionValueState;

package/cjs/components/material-exercise/context/recoilTypes.d.ts

@@ -76,13 +76,6 @@ export type AtomMultilangEnvironmentJson = MultilangEnvironmentJson | null;
  * - `MultilangLanguagesJson`: Ready.
  */
 export type AtomMultilangEnvironmentState = MultilangLanguagesJson | undefined | null;
-/**
- * Arduino preference.
- */
-export type AtomArduinoPreferenceState = Required<{
-    baudRate: number;
-    port: string;
-}>;
 /**
  *
  */

package/cjs/components/material-exercise/exercise-menu/ExerciseMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenu.js

@@ -4,44 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
-var types = require('@elice/types');
-var recoil = require('recoil');
-var ExerciseMenuArduinoAgentModalButton = require('./ExerciseMenuArduinoAgentModalButton.js');
-var ExerciseMenuArduinoSettings = require('./ExerciseMenuArduinoSettings.js');
 var ExerciseMenuDropdown = require('./ExerciseMenuDropdown.js');
 var ExerciseMenuReset = require('./ExerciseMenuReset.js');
 var ExerciseMenuStdioFileBrowser = require('./ExerciseMenuStdioFileBrowser.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
-var context = require('../context/context.js');
-var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var StyledExerciseMenuWrapper = /*#__PURE__*/_styled__default.default("div", {
   target: "e16oipg60"
 })("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", designTokens.base.color.navy8, ";");
 var ExerciseMenu = function ExerciseMenu(_ref) {
   var __intl = _ref.__intl;
-  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
-  //
-  //
-  //
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
     children: jsxRuntime.jsxs(StyledExerciseMenuWrapper, {
-      children: [isArduinoExercise ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(ExerciseMenuArduinoAgentModalButton.default, {}), jsxRuntime.jsx(ExerciseMenuArduinoSettings.default, {})]
-      }) : jsxRuntime.jsx(ExerciseMenuStdioFileBrowser.default, {}), jsxRuntime.jsx(ExerciseMenuReset.default, {}), jsxRuntime.jsx(ExerciseMenuDropdown.default, {})]
+      children: [jsxRuntime.jsx(ExerciseMenuStdioFileBrowser.default, {}), jsxRuntime.jsx(ExerciseMenuReset.default, {}), jsxRuntime.jsx(ExerciseMenuDropdown.default, {})]
     })
   });
 };

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -74,7 +74,7 @@ var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled__default.de
   styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledPreferenceBodyItem = /*#__PURE__*/_styled__default.default("div", {
+/*#__PURE__*/_styled__default.default("div", {
   target: "e8nx2or1"
 })("production" === "production" ? {
   name: "10vug81",
@@ -84,7 +84,7 @@ var StyledPreferenceBodyItem = /*#__PURE__*/_styled__default.default("div", {
   styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledSelect = /*#__PURE__*/_styled__default.default(blocks.Select, {
+/*#__PURE__*/_styled__default.default(blocks.Select, {
   target: "e8nx2or0"
 })(">div{background:", designTokens.base.color.navy8, "!important;border-color:", designTokens.base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", designTokens.base.color.navy8, "!important;}}");
 
@@ -98,5 +98,3 @@ exports.StyledFilePopoverBodyListItemDownloadButton = StyledFilePopoverBodyListI
 exports.StyledFilePopoverContent = StyledFilePopoverContent;
 exports.StyledFilePopoverHeader = StyledFilePopoverHeader;
 exports.StyledMenuButtonFileCount = StyledMenuButtonFileCount;
-exports.StyledPreferenceBodyItem = StyledPreferenceBodyItem;
-exports.StyledSelect = StyledSelect;

package/cjs/components/material-exercise/exercise-menu/locales/en.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.agent.button":"Having problem with connecting to Arduino?","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
+var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
 
 exports.default = messageEn;

package/cjs/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.agent.button":"아두이노 연결 중 문제가 발생했나요?","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
+var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
 
 exports.default = messageKo;

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

@@ -6,7 +6,6 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -20,10 +19,10 @@ var ExerciseRunnerController = require('./ExerciseRunnerController.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var recoil$1 = require('../context/recoil.js');
-var useArduino = require('../../../hooks/useArduino.js');
 var useRunnerRoomWebSocket = require('../../../hooks/useRunnerRoomWebSocket.js');
 var useStdioWebSocket = require('../../../hooks/useStdioWebSocket.js');
 var subjects = require('../context/subjects.js');
+var ArduinoProvider = require('./arduino/ArduinoProvider.js');
 var XtermLazy = require('../../shared/xterm/XtermLazy.js');
 var async = require('../../../utils/async.js');
 var runner = require('../../../utils/runner.js');
@@ -111,26 +110,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   var arduinoTextBuffer = React__default.default.useRef('');
   var runnerRunTypeRef = React__default.default.useRef(runnerRunTypeState);
   var xterm = React__default.default.useRef(null);
-  /**
-   * Handle text received from arduino serial output.
-   */
-  var handleArduinoDigitalOutput = function handleArduinoDigitalOutput(text) {
-    var _a;
-    (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(text);
-  };
-  // Arduino
-  var arduino = useArduino.useArduino({
-    writeTerminal: handleArduinoDigitalOutput
-  });
+  var arduinoBridgeApi = React__default.default.useRef(null);
   var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
-  /**
-   * Handle destroy arduino client.
-   */
-  var handleArduinoDistroy = React__default.default.useCallback(function () {
-    if (isArduinoExercise) {
-      arduino.destroy();
-    }
-  }, [isArduinoExercise, arduino]);
   /**
    * Handle text received from stdio websocket.
    */
@@ -153,10 +134,11 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle file received from stdio websocket.
    */
   var handleWsStdioFileReceive = function handleWsStdioFileReceive(stdioFile) {
+    var _a;
     // arduino exercise
     if (isArduinoExercise) {
       if ('filename' in stdioFile && stdioFile.filename.startsWith('firmware') && stdioFile.filename.endsWith('hex')) {
-        arduino.uploadHexFile(stdioFile);
+        (_a = arduinoBridgeApi.current) === null || _a === void 0 ? void 0 : _a.handleIncomingHex(stdioFile.data);
       }
       return;
     }
@@ -416,7 +398,7 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle input requests for arduino.
    */
   var handleXtermArduinoInputRequest = function handleXtermArduinoInputRequest(_char) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     switch (_char) {
       // backspace
       case "\x7F":
@@ -427,13 +409,13 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
       case '\r':
         if (arduinoTextBuffer.current.length) {
           (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.write('\r\n');
-          arduino.sendText(arduinoTextBuffer.current);
+          (_c = arduinoBridgeApi.current) === null || _c === void 0 ? void 0 : _c.sendText(arduinoTextBuffer.current);
           arduinoTextBuffer.current = '';
         }
         break;
       // any char
       default:
-        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(_char);
+        (_d = xterm.current) === null || _d === void 0 ? void 0 : _d.write(_char);
         arduinoTextBuffer.current = "".concat(arduinoTextBuffer.current).concat(_char);
         break;
     }
@@ -449,24 +431,6 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
     }
   };
   //
-  // Initialize Arduino devices.
-  //
-  React__default.default.useEffect(function () {
-    if (!isArduinoExercise) {
-      return;
-    }
-    void arduino.init();
-    return function () {
-      void arduino.destroy();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [exercise]);
-  //
-  // Destroy arduino client when unload window.
-  //
-  reactUse.useEvent('beforeunload', handleArduinoDistroy, window);
-  //
   // Update runner room websocket state.
   //
   React__default.default.useEffect(function () {
@@ -603,23 +567,29 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   //
   //
   //
+  var runnerBody = jsxRuntime.jsxs(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
+    value: {
+      onSubmit: handleRunnerSubmit,
+      onCancel: handleRunnerCancel,
+      onSyncRequest: handleRunnerSyncRequest
+    },
+    children: [jsxRuntime.jsx(ExerciseRunnerController.default, {}), jsxRuntime.jsxs(blocks.Flex, {
+      auto: true,
+      style: {
+        minHeight: 0
+      },
+      overflow: "hidden",
+      children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
+    })]
+  });
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
     children: jsxRuntime.jsx(StyledExerciseRunner, {
-      children: jsxRuntime.jsxs(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
-        value: {
-          onSubmit: handleRunnerSubmit,
-          onCancel: handleRunnerCancel,
-          onSyncRequest: handleRunnerSyncRequest
-        },
-        children: [jsxRuntime.jsx(ExerciseRunnerController.default, {}), jsxRuntime.jsxs(blocks.Flex, {
-          auto: true,
-          style: {
-            minHeight: 0
-          },
-          overflow: "hidden",
-          children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
-        })]
+      children: jsxRuntime.jsx(ArduinoProvider.default, {
+        enabled: isArduinoExercise,
+        xtermRef: xterm,
+        apiRef: arduinoBridgeApi,
+        children: runnerBody
       })
     })
   });

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

@@ -9,12 +9,12 @@ var blocks = require('@elice/blocks');
 var types = require('@elice/types');
 var recoil = require('recoil');
 var stylesheets = require('../../../constants/stylesheets.js');
-var ExerciseRunnerControllerArduinoAgentModal = require('./ExerciseRunnerControllerArduinoAgentModal.js');
-var ExerciseRunnerControllerArduinoStatusMessage = require('./ExerciseRunnerControllerArduinoStatusMessage.js');
 var ExerciseRunnerControllerButtonGroup = require('./ExerciseRunnerControllerButtonGroup.js');
 var ExerciseRunnerControllerRunningInfo = require('./ExerciseRunnerControllerRunningInfo.js');
 var ExerciseRunnerControllerStatusMessage = require('./ExerciseRunnerControllerStatusMessage.js');
 var ExerciseRunnerControllerTimer = require('./ExerciseRunnerControllerTimer.js');
+var ArduinoControllerButtonGroup = require('./arduino/ArduinoControllerButtonGroup.js');
+var ArduinoControllerStatusMessage = require('./arduino/ArduinoControllerStatusMessage.js');
 var context = require('../context/context.js');
 var recoil$1 = require('../context/recoil.js');
 var useExerciseFile = require('../../../hooks/useExerciseFile.js');
@@ -32,20 +32,47 @@ var ExerciseRunnerController = function ExerciseRunnerController() {
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId;
   var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
   var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
   var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  /**
+   *
+   */
+  var renderControllerButtonGroup = function renderControllerButtonGroup() {
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case types.enums.ExerciseEnvType.Arduino:
+        return jsxRuntime.jsx(ArduinoControllerButtonGroup.default, {});
+      default:
+        return jsxRuntime.jsx(ExerciseRunnerControllerButtonGroup.default, {});
+    }
+  };
+  /**
+   *
+   */
+  var renderControllerStatusMessage = function renderControllerStatusMessage() {
+    if (!isFileEditable) {
+      return null;
+    }
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case types.enums.ExerciseEnvType.Arduino:
+        return jsxRuntime.jsx(ArduinoControllerStatusMessage.default, {});
+      default:
+        return jsxRuntime.jsx(ExerciseRunnerControllerStatusMessage.default, {});
+    }
+  };
+  //
+  //
+  //
   return jsxRuntime.jsxs(StyledController, {
     children: [jsxRuntime.jsxs(blocks.Flex, {
       align: "center",
-      children: [jsxRuntime.jsx(ExerciseRunnerControllerButtonGroup.default, {}), jsxRuntime.jsx(blocks.Hspace, {
+      children: [renderControllerButtonGroup(), jsxRuntime.jsx(blocks.Hspace, {
         width: 1
       }), jsxRuntime.jsx(ExerciseRunnerControllerRunningInfo.default, {}), jsxRuntime.jsx(ExerciseRunnerControllerTimer.default, {})]
-    }), isFileEditable ? jsxRuntime.jsxs(blocks.Flex, {
+    }), jsxRuntime.jsx(blocks.Flex, {
       column: true,
       align: "flex-end",
-      children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusMessage.default, {}), isArduinoExercise ? jsxRuntime.jsx(ExerciseRunnerControllerArduinoStatusMessage.default, {}) : null]
-    }) : null, isArduinoExercise ? jsxRuntime.jsx(ExerciseRunnerControllerArduinoAgentModal.default, {}) : null]
+      children: renderControllerStatusMessage()
+    })]
   });
 };
 

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseRunnerControllerButtonGroup: React.VFC;
 export default ExerciseRunnerControllerButtonGroup;