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

package/cjs/components/material-exercise/MaterialExercise.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -31,100 +32,113 @@ var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
 var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
 var MaterialExercise_styled = require('./MaterialExercise.styled.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
 /**
  * Material exercise.
  */
-const MaterialExercise = React.forwardRef((props, ref) => {
-  const {
-    __intl
-  } = props;
-  const {
-    onReferenceDocsToggle
-  } = React.useContext(context.ExerciseContext);
-  const {
-    width,
-    height
-  } = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState);
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(props.materialExerciseId));
-  const exerciseFileTreeOpened = recoil.useRecoilValue(recoil$1.exerciseFileTreeOpenedState);
-  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(props.materialExerciseId));
-  const exercisePreviewDisplayMode = recoil.useRecoilValue(recoil$1.exercisePreviewDisplayModeState);
-  const exerciseMonacoEditorApis = recoil.useRecoilValue(recoil$1.exerciseMonacoEditorApisState);
+var MaterialExercise = React.forwardRef(function (props, ref) {
+  var __intl = props.__intl;
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    onReferenceDocsToggle = _React$useContext.onReferenceDocsToggle;
+  var _useRecoilValue = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState),
+    width = _useRecoilValue.width,
+    height = _useRecoilValue.height;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(props.materialExerciseId));
+  var exerciseFileTreeOpened = recoil.useRecoilValue(recoil$1.exerciseFileTreeOpenedState);
+  var exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(props.materialExerciseId));
+  var exercisePreviewDisplayMode = recoil.useRecoilValue(recoil$1.exercisePreviewDisplayModeState);
+  var exerciseMonacoEditorApis = recoil.useRecoilValue(recoil$1.exerciseMonacoEditorApisState);
   /**
    * File tree
    */
-  const renderExerciseFileTree = () => {
-    return React.createElement(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
-      "aria-hidden": !exerciseFileTreeOpened
-    }, React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-      initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
-      minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
-      resizeHandles: ['e']
-    }), React.createElement(MaterialExercise_styled.StyledExerciseFileTreeWrap, null, React.createElement(ExerciseFileTreeLazy.default, null))));
+  var renderExerciseFileTree = function renderExerciseFileTree() {
+    return jsxRuntime.jsx(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
+      "aria-hidden": !exerciseFileTreeOpened,
+      children: jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+        initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
+        minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
+        resizeHandles: ['e'],
+        children: jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileTreeWrap, {
+          children: jsxRuntime.jsx(ExerciseFileTreeLazy.default, {})
+        })
+      }))
+    });
   };
   /**
    * File tree toggle button
    */
-  const renderExerciseFileTreeButton = () => {
-    return React.createElement(ExerciseFileTabsFileTreeButton.default, null);
+  var renderExerciseFileTreeButton = function renderExerciseFileTreeButton() {
+    return jsxRuntime.jsx(ExerciseFileTabsFileTreeButton.default, {});
   };
   /**
    * File tabs
    */
-  const renderExerciseFileTabs = () => {
-    return React.createElement(MaterialExercise_styled.StyledExerciseTabsWrap, null, React.createElement(ExerciseFileTabsLazy.default, null));
+  var renderExerciseFileTabs = function renderExerciseFileTabs() {
+    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseTabsWrap, {
+      children: jsxRuntime.jsx(ExerciseFileTabsLazy.default, {})
+    });
   };
   /**
    * reference docs toggle button
    */
-  const renderExerciseReferenceDocsToggleButton = () => {
+  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
     if (typeof onReferenceDocsToggle !== 'function') {
       return null;
     }
-    return React.createElement(React.Fragment, null, React.createElement(blocks.Button, {
-      size: "micro",
-      role: "navy3",
-      style: {
-        width: '100%'
-      },
-      onClick: onReferenceDocsToggle
-    }, React.createElement(blocks.Icon, {
-      icon: icons.eilClassroom
-    }), React.createElement(blocks.Hspace, {
-      width: 0.25
-    }), __intl.formatMessage({
-      id: 'materialExercise.button.referenceDocs'
-    })), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(blocks.Button, {
+        size: "micro",
+        role: "navy3",
+        style: {
+          width: '100%'
+        },
+        onClick: onReferenceDocsToggle,
+        children: [jsxRuntime.jsx(blocks.Icon, {
+          icon: icons.eilClassroom
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.25
+        }), __intl.formatMessage({
+          id: 'materialExercise.button.referenceDocs'
+        })]
+      }), jsxRuntime.jsx(blocks.Hspace, {
+        width: 0.5
+      })]
+    });
   };
   /**
    * Menu
    */
-  const renderExerciseMenu = () => {
-    return React.createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React.createElement(ExerciseMultilangDropdownLazy.default, null), React.createElement(ExerciseMenu.default, null));
+  var renderExerciseMenu = function renderExerciseMenu() {
+    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabMenuWrap, {
+      children: [renderExerciseReferenceDocsToggleButton(), jsxRuntime.jsx(ExerciseMultilangDropdownLazy.default, {}), jsxRuntime.jsx(ExerciseMenu.default, {})]
+    });
   };
   /**
    * Code editor and file viewer
    */
-  const renderExerciseFile = () => {
-    return React.createElement(MaterialExercise_styled.StyledExerciseFileWrap, null, React.createElement(ExerciseFile.default, null));
+  var renderExerciseFile = function renderExerciseFile() {
+    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileWrap, {
+      children: jsxRuntime.jsx(ExerciseFile.default, {})
+    });
   };
   /**
    * Exercise preview (side by side)
    */
-  const renderExercisePreviewSideBySide = () => {
+  var renderExercisePreviewSideBySide = function renderExercisePreviewSideBySide() {
     if (exercisePreviewType === recoilTypes.ExercisePreviewType.None) {
       return null;
     }
     if (exercisePreviewDisplayMode !== recoilTypes.ExercisePreviewDisplayMode.SideBySide) {
       return null;
     }
-    return React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-      children: React.createElement(ExercisePreview.default, null),
+    return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      children: jsxRuntime.jsx(ExercisePreview.default, {}),
       initialWidth: Math.max(MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.PREVIEW),
       minConstraints: [MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
       resizeHandles: ['w']
@@ -133,52 +147,74 @@ const MaterialExercise = React.forwardRef((props, ref) => {
   /**
    * Exercise main
    */
-  const renderExerciseMain = () => {
+  var renderExerciseMain = function renderExerciseMain() {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return null;
     }
-    return React.createElement(MaterialExercise_styled.StyledExerciseMain, null, renderExerciseFileTree(), React.createElement(MaterialExercise_styled.StyledExerciseFileAndTabWrap, null, React.createElement(MaterialExercise_styled.StyledExerciseTabBar, null, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React.createElement(ExerciseRightpane.default, null));
+    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseMain, {
+      children: [renderExerciseFileTree(), jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseFileAndTabWrap, {
+        children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabBar, {
+          children: [renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()]
+        }), renderExerciseFile()]
+      }), jsxRuntime.jsx(ExerciseRightpane.default, {})]
+    });
   };
   /**
    * Exercise Runner
    */
-  const renderExerciseRunner = () => {
-    const _runner = React.createElement(MaterialExercise_styled.StyledExerciseRunnerWrap, null, React.createElement(ExerciseRunner.default, {
-      exercisePreview: React.createElement(ExercisePreview.default, null)
-    }));
+  var renderExerciseRunner = function renderExerciseRunner() {
+    var _runner = jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseRunnerWrap, {
+      children: jsxRuntime.jsx(ExerciseRunner.default, {
+        exercisePreview: jsxRuntime.jsx(ExercisePreview.default, {})
+      })
+    });
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return _runner;
     }
-    return React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+    return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
       initialHeight: Math.max(MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
       minConstraints: [Infinity, MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT],
-      resizeHandles: ['n']
-    }), _runner);
+      resizeHandles: ['n'],
+      children: _runner
+    }));
   };
   //
   //
   //
-  React.useImperativeHandle(ref, () => ({
-    sendTextToRunner: text => {
-      subjects.exerciseRunnerTextSend$.next(text);
-    },
-    getMonacoEditorApis: () => exerciseMonacoEditorApis,
-    openRunnerRooms: () => subjects.exerciseRunnerRoomsOpen$.next()
-  }), [exerciseMonacoEditorApis]);
+  React__default.default.useImperativeHandle(ref, function () {
+    return {
+      sendTextToRunner: function sendTextToRunner(text) {
+        subjects.exerciseRunnerTextSend$.next(text);
+      },
+      getMonacoEditorApis: function getMonacoEditorApis() {
+        return exerciseMonacoEditorApis;
+      },
+      openRunnerRooms: function openRunnerRooms() {
+        return subjects.exerciseRunnerRoomsOpen$.next();
+      }
+    };
+  }, [exerciseMonacoEditorApis]);
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(MaterialExercise_styled.StyledExerciseContainer, null, renderExerciseMain(), renderExerciseRunner()), renderExercisePreviewSideBySide());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseContainer, {
+      children: [renderExerciseMain(), renderExerciseRunner()]
+    }), renderExercisePreviewSideBySide()]
+  });
 });
 //
 //
 //
-var MaterialExercise$1 = new intl.IntlComponentBuilder(materialSharedUtils.withForwardRefMaterial(React.forwardRef((props, ref) => {
-  return React.createElement(intl.RawEliceIntlProvider, {
-    value: props.__intl
-  }, React.createElement(ExerciseProvider.default, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
-    ref: ref
-  }))));
+var MaterialExercise$1 = new intl.IntlComponentBuilder(materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (props, ref) {
+  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+    value: props.__intl,
+    children: jsxRuntime.jsx(ExerciseProvider.default, Object.assign({}, props, {
+      children: jsxRuntime.jsx(MaterialExercise, Object.assign({}, props, {
+        ref: ref
+      }))
+    }))
+  });
 }), apiClient.config.init, {
   overrideRecoilScope: true
 })).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('../locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('../locales/ja.json.js'); })).build();

package/cjs/components/material-exercise/MaterialExercise.styled.js

@@ -4,10 +4,14 @@ var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var stylesheets = require('../../constants/stylesheets.js');
 
-const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
-const EXERCISE_PREVIEW_MIN_WIDTH = 128;
-const EXERCISE_RUNNER_MIN_HEIGHT = 128;
-const EXERCISE_HORIZONTAL_RATIO = {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+var EXERCISE_PREVIEW_MIN_WIDTH = 128;
+var EXERCISE_RUNNER_MIN_HEIGHT = 128;
+var EXERCISE_HORIZONTAL_RATIO = {
   FILETREE: 0.15,
   EDITOR: 0.45,
   PREVIEW: 0.4
@@ -19,7 +23,7 @@ const EXERCISE_HORIZONTAL_RATIO = {
  * - File (Editor)
  * - Runner
  */
-const StyledExerciseContainer = styled.div.withConfig({
+var StyledExerciseContainer = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-0"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;"]);
 /**
@@ -28,7 +32,7 @@ const StyledExerciseContainer = styled.div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-const StyledExerciseMain = styled.div.withConfig({
+var StyledExerciseMain = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-1"
 })(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
 /**
@@ -36,31 +40,31 @@ const StyledExerciseMain = styled.div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-const StyledExerciseFileAndTabWrap = styled.div.withConfig({
+var StyledExerciseFileAndTabWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-2"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], designTokens.base.color.navy9);
-const StyledExerciseFileWrap = styled.div.withConfig({
+var StyledExerciseFileWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-3"
 })(["flex:1;min-height:0;"]);
 // ========== Exercise FileTab ==========
-const StyledExerciseTabBar = styled.div.withConfig({
+var StyledExerciseTabBar = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-4"
 })(["display:flex;border-bottom:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-const StyledExerciseTabsWrap = styled.div.withConfig({
+var StyledExerciseTabsWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-5"
 })(["flex:1;min-width:0;"]);
-const StyledExerciseTabMenuWrap = styled.div.withConfig({
+var StyledExerciseTabMenuWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-6"
 })(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], designTokens.base.color.navy8);
 // ========== Exercise FileTree ==========
-const StyledExerciseFileTreeWrap = styled.div.withConfig({
+var StyledExerciseFileTreeWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-7"
 })(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-const StyledxerciseFileTreeContaner = styled.div.withConfig({
+var StyledxerciseFileTreeContaner = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-8"
 })(["display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"]);
 // ========== Exercise Runner ==========
-const StyledExerciseRunnerWrap = styled.div.withConfig({
+var StyledExerciseRunnerWrap = styled__default.default.div.withConfig({
   componentId: "sc-9joi7g-9"
 })(["width:100%;height:100%;border-top:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
 

package/cjs/components/material-exercise/MaterialExerciseMobile.d.ts

@@ -4,5 +4,5 @@ type PickedMaterialExerciseCommonProps = Pick<MaterialExerciseCommonProps, 'mate
 export interface MaterialExerciseMobileProps extends PickedMaterialExerciseCommonProps {
     filename: string;
 }
-declare const _default: React.VFC<MaterialExerciseMobileProps & import("@elice/material-shared-utils").MaterialCommponentCommonProps>;
+declare const _default: React.VFC<MaterialExerciseMobileProps>;
 export default _default;

package/cjs/components/material-exercise/MaterialExerciseMobile.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var materialSharedUtils = require('@elice/material-shared-utils');
@@ -13,28 +14,37 @@ require('./context/subjects.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
 var ExerciseFile = require('./exercise-file/ExerciseFile.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
 /**
  * Material exercise.
  */
-const MaterialExerciseMobile = ({
-  filename
-}) => {
-  const setExerciseActiveFilename = recoil.useSetRecoilState(recoil$1.exerciseActiveFilenameState);
-  React.useEffect(() => setExerciseActiveFilename(filename),
+var MaterialExerciseMobile = function MaterialExerciseMobile(_ref) {
+  var filename = _ref.filename;
+  var setExerciseActiveFilename = recoil.useSetRecoilState(recoil$1.exerciseActiveFilenameState);
+  React__default.default.useEffect(function () {
+    return setExerciseActiveFilename(filename);
+  },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [filename]);
   //
   //
   //
-  return React.createElement(ExerciseFile.default, null);
+  return jsxRuntime.jsx(ExerciseFile.default, {});
 };
 //
 //
 //
-var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(props => React.createElement(ExerciseProvider.default, Object.assign({}, props), React.createElement(MaterialExerciseMobile, Object.assign({}, props))), apiClient.config.init, {
+var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(function (props) {
+  return jsxRuntime.jsx(ExerciseProvider.default, Object.assign({}, props, {
+    children: jsxRuntime.jsx(MaterialExerciseMobile, Object.assign({}, props))
+  }));
+}, apiClient.config.init, {
   overrideRecoilScope: true
 });
 

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

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
@@ -14,8 +16,13 @@ var context = require('./context.js');
 var ExerciseProviderNoImage = require('./ExerciseProviderNoImage.js');
 var recoil$1 = require('./recoil.js');
 
-const RECOIL_RESET_DELAY = 10;
-const StyledMaterialExercise = styled.div.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 RECOIL_RESET_DELAY = 10;
+var StyledMaterialExercise = styled__default.default.div.withConfig({
   componentId: "sc-pj5yv2-0"
 })(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
 /**
@@ -24,55 +31,54 @@ const StyledMaterialExercise = styled.div.withConfig({
  * - fetching exercise room
  * - fetching exercise room id
  */
-const ExerciseProvider = _a => {
-  var {
-      children,
-      materialExerciseId,
-      exerciseRoomId,
-      exerciseRoomUserId,
-      onDefaultExerciseRoomIdSet,
-      exerciseImageEmptyOptions
-    } = _a,
+var ExerciseProvider = function ExerciseProvider(_a) {
+  var children = _a.children,
+    materialExerciseId = _a.materialExerciseId,
+    exerciseRoomId = _a.exerciseRoomId,
+    exerciseRoomUserId = _a.exerciseRoomUserId,
+    onDefaultExerciseRoomIdSet = _a.onDefaultExerciseRoomIdSet,
+    exerciseImageEmptyOptions = _a.exerciseImageEmptyOptions,
     contextProps = tslib.__rest(_a, ["children", "materialExerciseId", "exerciseRoomId", "exerciseRoomUserId", "onDefaultExerciseRoomIdSet", "exerciseImageEmptyOptions"]);
   //
-  const {
-    orgNameShort
-  } = materialSharedUtils.useMaterialConfig();
+  var _useMaterialConfig = materialSharedUtils.useMaterialConfig(),
+    orgNameShort = _useMaterialConfig.orgNameShort;
   // user
-  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  var user = recoil.useRecoilValue(recoil$1.exerciseUserState);
   // exercise
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId));
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId));
   // lecture
-  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  const resetLecture = recoil.useResetRecoilState(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var resetLecture = recoil.useResetRecoilState(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
   // multilang languages
-  const exerciseMultilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
-  const resetExerciseMultilangLanguages = recoil.useResetRecoilState(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  var exerciseMultilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  var resetExerciseMultilangLanguages = recoil.useResetRecoilState(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
   // etc
-  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  const setConatinerSize = recoil.useSetRecoilState(recoil$1.exerciseContainerSizeState);
-  const setAibotInfoEnable = recoil.useSetRecoilState(recoil$1.exerciseAibotInfoEnableState);
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var setConatinerSize = recoil.useSetRecoilState(recoil$1.exerciseContainerSizeState);
+  var setAibotInfoEnable = recoil.useSetRecoilState(recoil$1.exerciseAibotInfoEnableState);
   // wrap container size
-  const [wrapElRef, {
-    width,
-    height
-  }] = reactUse.useMeasure();
+  var _useMeasure = reactUse.useMeasure(),
+    _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
+    wrapElRef = _useMeasure2[0],
+    _useMeasure2$ = _useMeasure2[1],
+    width = _useMeasure2$.width,
+    height = _useMeasure2$.height;
   //
   // if exercise room id is not specified, fetch it from server
   // NOTICE: should not use `exercise.defaultRoom.id`, since will be removed (confrimed by backend-team)
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (exerciseRoomId) {
       return;
     }
     apiClient.getOrgMaterialExerciseDefaultRoomGet({
-      materialExerciseId
-    }).then(res => {
+      materialExerciseId: materialExerciseId
+    }).then(function (res) {
       if (typeof onDefaultExerciseRoomIdSet === 'function') {
         onDefaultExerciseRoomIdSet(res.exerciseRoomId);
       }
-    }).catch(err => {
+    }).catch(function (err) {
       if (typeof contextProps.onError === 'function') {
         contextProps.onError(err);
       }
@@ -83,12 +89,14 @@ const ExerciseProvider = _a => {
   //
   // reset lecture, after `exercise.lectureId` changed
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId)) {
       return;
     }
-    const timeout = window.setTimeout(() => resetLecture(), RECOIL_RESET_DELAY);
-    return () => {
+    var timeout = window.setTimeout(function () {
+      return resetLecture();
+    }, RECOIL_RESET_DELAY);
+    return function () {
       window.clearTimeout(timeout);
     };
   },
@@ -97,12 +105,14 @@ const ExerciseProvider = _a => {
   //
   // reset exercise multilang languages, after `exercise.id` changed
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise.id)) {
       return;
     }
-    const timeout = window.setTimeout(() => resetExerciseMultilangLanguages(), RECOIL_RESET_DELAY);
-    return () => {
+    var timeout = window.setTimeout(function () {
+      return resetExerciseMultilangLanguages();
+    }, RECOIL_RESET_DELAY);
+    return function () {
       window.clearTimeout(timeout);
     };
   },
@@ -111,11 +121,11 @@ const ExerciseProvider = _a => {
   //
   // update Provider size
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (width && height) {
       setConatinerSize({
-        width,
-        height
+        width: width,
+        height: height
       });
     }
   },
@@ -124,7 +134,7 @@ const ExerciseProvider = _a => {
   //
   // update
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!(lecture === null || lecture === void 0 ? void 0 : lecture.courseId)) {
       return;
     }
@@ -132,12 +142,11 @@ const ExerciseProvider = _a => {
       organizationNameShort: orgNameShort
     }), apiClient.getOrgCourseGet({
       courseId: lecture.courseId
-    })]).then(([{
-      organization
-    }, {
-      course
-    }]) => {
-      const isAibotInfoEnabled = organization.aibotInfo.isEnabled && course.aibotInfo.isEnabled;
+    })]).then(function (_ref) {
+      var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref, 2),
+        organization = _ref2[0].organization,
+        course = _ref2[1].course;
+      var isAibotInfoEnabled = organization.aibotInfo.isEnabled && course.aibotInfo.isEnabled;
       setAibotInfoEnable(isAibotInfoEnabled);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -145,9 +154,9 @@ const ExerciseProvider = _a => {
   //
   //
   //
-  return React.createElement(StyledMaterialExercise, {
+  return jsxRuntime.jsx(StyledMaterialExercise, {
     ref: wrapElRef,
-    children: (() => {
+    children: function () {
       var _a;
       // render after measure Provider size
       if (!width || !height) {
@@ -155,30 +164,31 @@ const ExerciseProvider = _a => {
       }
       // show spinner before exercise ready
       if (!user || !lecture || !exercise || !exerciseRoomId || !exerciseRoom || typeof exerciseMultilangLanguages === 'undefined') {
-        return React.createElement(blocks.Flex, {
+        return jsxRuntime.jsx(blocks.Flex, {
           align: "center",
           justify: "center",
           width: "100%",
-          height: "100%"
-        }, React.createElement(blocks.Spinner, null));
+          height: "100%",
+          children: jsxRuntime.jsx(blocks.Spinner, {})
+        });
       }
       // when exerciseImage is not ready yet
       if (exercise.readyExerciseImage === null) {
-        return React.createElement(ExerciseProviderNoImage.default, Object.assign({}, exerciseImageEmptyOptions, {
+        return jsxRuntime.jsx(ExerciseProviderNoImage.default, Object.assign({}, exerciseImageEmptyOptions, {
           locale: contextProps.locale
         }));
       }
       // render
-      return React.createElement(context.ExerciseContext.Provider, {
+      return jsxRuntime.jsx(context.ExerciseContext.Provider, {
         children: children,
         value: Object.assign(Object.assign({}, contextProps), {
-          materialExerciseId,
-          exerciseRoomId,
+          materialExerciseId: materialExerciseId,
+          exerciseRoomId: exerciseRoomId,
           exerciseRoomUserId: exerciseRoomUserId !== null && exerciseRoomUserId !== void 0 ? exerciseRoomUserId : user.id,
           readOnlyActiveFile: !!((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.readOnlyFilelist.includes(activeFilename || ''))
         })
       });
-    })()
+    }()
   });
 };