@elice/material-exercise 1.240718.2 → 1.240719.0

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

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { config } from '@elice/api-client';
 import { ResizableNext, Button, Icon, Hspace } from '@elice/blocks';
@@ -33,94 +34,103 @@ import { StyledExerciseContainer, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTA
 /**
  * Material exercise.
  */
-const MaterialExercise = forwardRef((props, ref) => {
-  const {
-    __intl
-  } = props;
-  const {
-    onReferenceDocsToggle
-  } = React.useContext(ExerciseContext);
-  const {
-    width,
-    height
-  } = useRecoilValue(exerciseContainerSizeState);
-  const exercise = useRecoilValue(exerciseState(props.materialExerciseId));
-  const exerciseFileTreeOpened = useRecoilValue(exerciseFileTreeOpenedState);
-  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(props.materialExerciseId));
-  const exercisePreviewDisplayMode = useRecoilValue(exercisePreviewDisplayModeState);
-  const exerciseMonacoEditorApis = useRecoilValue(exerciseMonacoEditorApisState);
+var MaterialExercise = forwardRef(function (props, ref) {
+  var __intl = props.__intl;
+  var _React$useContext = React.useContext(ExerciseContext),
+    onReferenceDocsToggle = _React$useContext.onReferenceDocsToggle;
+  var _useRecoilValue = useRecoilValue(exerciseContainerSizeState),
+    width = _useRecoilValue.width,
+    height = _useRecoilValue.height;
+  var exercise = useRecoilValue(exerciseState(props.materialExerciseId));
+  var exerciseFileTreeOpened = useRecoilValue(exerciseFileTreeOpenedState);
+  var exercisePreviewType = useRecoilValue(exercisePreviewTypeState(props.materialExerciseId));
+  var exercisePreviewDisplayMode = useRecoilValue(exercisePreviewDisplayModeState);
+  var exerciseMonacoEditorApis = useRecoilValue(exerciseMonacoEditorApisState);
   /**
    * File tree
    */
-  const renderExerciseFileTree = () => {
-    return React.createElement(StyledxerciseFileTreeContaner, {
-      "aria-hidden": !exerciseFileTreeOpened
-    }, React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
-      initialWidth: Math.max(EXERCISE_FILE_TREE_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.FILETREE),
-      minConstraints: [EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
-      resizeHandles: ['e']
-    }), React.createElement(StyledExerciseFileTreeWrap, null, React.createElement(ExerciseFileTreeLazy, null))));
+  var renderExerciseFileTree = function renderExerciseFileTree() {
+    return jsx(StyledxerciseFileTreeContaner, {
+      "aria-hidden": !exerciseFileTreeOpened,
+      children: jsx(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+        initialWidth: Math.max(EXERCISE_FILE_TREE_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.FILETREE),
+        minConstraints: [EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
+        resizeHandles: ['e'],
+        children: jsx(StyledExerciseFileTreeWrap, {
+          children: jsx(ExerciseFileTreeLazy, {})
+        })
+      }))
+    });
   };
   /**
    * File tree toggle button
    */
-  const renderExerciseFileTreeButton = () => {
-    return React.createElement(ExerciseFileTabsFileTreeButton, null);
+  var renderExerciseFileTreeButton = function renderExerciseFileTreeButton() {
+    return jsx(ExerciseFileTabsFileTreeButton, {});
   };
   /**
    * File tabs
    */
-  const renderExerciseFileTabs = () => {
-    return React.createElement(StyledExerciseTabsWrap, null, React.createElement(ExerciseFileTabsLazy, null));
+  var renderExerciseFileTabs = function renderExerciseFileTabs() {
+    return jsx(StyledExerciseTabsWrap, {
+      children: jsx(ExerciseFileTabsLazy, {})
+    });
   };
   /**
    * reference docs toggle button
    */
-  const renderExerciseReferenceDocsToggleButton = () => {
+  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
     if (typeof onReferenceDocsToggle !== 'function') {
       return null;
     }
-    return React.createElement(React.Fragment, null, React.createElement(Button, {
-      size: "micro",
-      role: "navy3",
-      style: {
-        width: '100%'
-      },
-      onClick: onReferenceDocsToggle
-    }, React.createElement(Icon, {
-      icon: eilClassroom
-    }), React.createElement(Hspace, {
-      width: 0.25
-    }), __intl.formatMessage({
-      id: 'materialExercise.button.referenceDocs'
-    })), React.createElement(Hspace, {
-      width: 0.5
-    }));
+    return jsxs(Fragment, {
+      children: [jsxs(Button, {
+        size: "micro",
+        role: "navy3",
+        style: {
+          width: '100%'
+        },
+        onClick: onReferenceDocsToggle,
+        children: [jsx(Icon, {
+          icon: eilClassroom
+        }), jsx(Hspace, {
+          width: 0.25
+        }), __intl.formatMessage({
+          id: 'materialExercise.button.referenceDocs'
+        })]
+      }), jsx(Hspace, {
+        width: 0.5
+      })]
+    });
   };
   /**
    * Menu
    */
-  const renderExerciseMenu = () => {
-    return React.createElement(StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React.createElement(ExerciseMultilangDropdownLazy, null), React.createElement(ExerciseMenu, null));
+  var renderExerciseMenu = function renderExerciseMenu() {
+    return jsxs(StyledExerciseTabMenuWrap, {
+      children: [renderExerciseReferenceDocsToggleButton(), jsx(ExerciseMultilangDropdownLazy, {}), jsx(ExerciseMenu, {})]
+    });
   };
   /**
    * Code editor and file viewer
    */
-  const renderExerciseFile = () => {
-    return React.createElement(StyledExerciseFileWrap, null, React.createElement(ExerciseFile, null));
+  var renderExerciseFile = function renderExerciseFile() {
+    return jsx(StyledExerciseFileWrap, {
+      children: jsx(ExerciseFile, {})
+    });
   };
   /**
    * Exercise preview (side by side)
    */
-  const renderExercisePreviewSideBySide = () => {
+  var renderExercisePreviewSideBySide = function renderExercisePreviewSideBySide() {
     if (exercisePreviewType === ExercisePreviewType.None) {
       return null;
     }
     if (exercisePreviewDisplayMode !== ExercisePreviewDisplayMode.SideBySide) {
       return null;
     }
-    return React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
-      children: React.createElement(ExercisePreview, null),
+    return jsx(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+      children: jsx(ExercisePreview, {}),
       initialWidth: Math.max(EXERCISE_PREVIEW_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.PREVIEW),
       minConstraints: [EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
       resizeHandles: ['w']
@@ -129,52 +139,74 @@ const MaterialExercise = 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(StyledExerciseMain, null, renderExerciseFileTree(), React.createElement(StyledExerciseFileAndTabWrap, null, React.createElement(StyledExerciseTabBar, null, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React.createElement(ExerciseRightpane, null));
+    return jsxs(StyledExerciseMain, {
+      children: [renderExerciseFileTree(), jsxs(StyledExerciseFileAndTabWrap, {
+        children: [jsxs(StyledExerciseTabBar, {
+          children: [renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()]
+        }), renderExerciseFile()]
+      }), jsx(ExerciseRightpane, {})]
+    });
   };
   /**
    * Exercise Runner
    */
-  const renderExerciseRunner = () => {
-    const _runner = React.createElement(StyledExerciseRunnerWrap, null, React.createElement(ExerciseRunner, {
-      exercisePreview: React.createElement(ExercisePreview, null)
-    }));
+  var renderExerciseRunner = function renderExerciseRunner() {
+    var _runner = jsx(StyledExerciseRunnerWrap, {
+      children: jsx(ExerciseRunner, {
+        exercisePreview: jsx(ExercisePreview, {})
+      })
+    });
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return _runner;
     }
-    return React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+    return jsx(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
       initialHeight: Math.max(EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
       minConstraints: [Infinity, EXERCISE_RUNNER_MIN_HEIGHT],
-      resizeHandles: ['n']
-    }), _runner);
+      resizeHandles: ['n'],
+      children: _runner
+    }));
   };
   //
   //
   //
-  React.useImperativeHandle(ref, () => ({
-    sendTextToRunner: text => {
-      exerciseRunnerTextSend$.next(text);
-    },
-    getMonacoEditorApis: () => exerciseMonacoEditorApis,
-    openRunnerRooms: () => exerciseRunnerRoomsOpen$.next()
-  }), [exerciseMonacoEditorApis]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      sendTextToRunner: function sendTextToRunner(text) {
+        exerciseRunnerTextSend$.next(text);
+      },
+      getMonacoEditorApis: function getMonacoEditorApis() {
+        return exerciseMonacoEditorApis;
+      },
+      openRunnerRooms: function openRunnerRooms() {
+        return exerciseRunnerRoomsOpen$.next();
+      }
+    };
+  }, [exerciseMonacoEditorApis]);
   //
   //
   //
-  return React.createElement(React.Fragment, null, React.createElement(StyledExerciseContainer, null, renderExerciseMain(), renderExerciseRunner()), renderExercisePreviewSideBySide());
+  return jsxs(Fragment, {
+    children: [jsxs(StyledExerciseContainer, {
+      children: [renderExerciseMain(), renderExerciseRunner()]
+    }), renderExercisePreviewSideBySide()]
+  });
 });
 //
 //
 //
-var MaterialExercise$1 = new IntlComponentBuilder(withForwardRefMaterial(forwardRef((props, ref) => {
-  return React.createElement(RawEliceIntlProvider, {
-    value: props.__intl
-  }, React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
-    ref: ref
-  }))));
+var MaterialExercise$1 = new IntlComponentBuilder(withForwardRefMaterial(forwardRef(function (props, ref) {
+  return jsx(RawEliceIntlProvider, {
+    value: props.__intl,
+    children: jsx(ExerciseProvider, Object.assign({}, props, {
+      children: jsx(MaterialExercise, Object.assign({}, props, {
+        ref: ref
+      }))
+    }))
+  });
 }), config.init, {
   overrideRecoilScope: true
 })).add('en', messageEn).add('ko', messageKo).addAsync('th', import('../locales/th.json.js')).addAsync('ja', import('../locales/ja.json.js')).build();

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

@@ -2,10 +2,10 @@ import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../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 = {
+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
@@ -17,7 +17,7 @@ const EXERCISE_HORIZONTAL_RATIO = {
  * - File (Editor)
  * - Runner
  */
-const StyledExerciseContainer = styled.div.withConfig({
+var StyledExerciseContainer = styled.div.withConfig({
   componentId: "sc-9joi7g-0"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;"]);
 /**
@@ -26,7 +26,7 @@ const StyledExerciseContainer = styled.div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-const StyledExerciseMain = styled.div.withConfig({
+var StyledExerciseMain = styled.div.withConfig({
   componentId: "sc-9joi7g-1"
 })(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
 /**
@@ -34,31 +34,31 @@ const StyledExerciseMain = styled.div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-const StyledExerciseFileAndTabWrap = styled.div.withConfig({
+var StyledExerciseFileAndTabWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-2"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], base.color.navy9);
-const StyledExerciseFileWrap = styled.div.withConfig({
+var StyledExerciseFileWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-3"
 })(["flex:1;min-height:0;"]);
 // ========== Exercise FileTab ==========
-const StyledExerciseTabBar = styled.div.withConfig({
+var StyledExerciseTabBar = styled.div.withConfig({
   componentId: "sc-9joi7g-4"
 })(["display:flex;border-bottom:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
-const StyledExerciseTabsWrap = styled.div.withConfig({
+var StyledExerciseTabsWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-5"
 })(["flex:1;min-width:0;"]);
-const StyledExerciseTabMenuWrap = styled.div.withConfig({
+var StyledExerciseTabMenuWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-6"
 })(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], base.color.navy8);
 // ========== Exercise FileTree ==========
-const StyledExerciseFileTreeWrap = styled.div.withConfig({
+var StyledExerciseFileTreeWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-7"
 })(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
-const StyledxerciseFileTreeContaner = styled.div.withConfig({
+var StyledxerciseFileTreeContaner = styled.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.div.withConfig({
   componentId: "sc-9joi7g-9"
 })(["width:100%;height:100%;border-top:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
 

package/es/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/es/components/material-exercise/MaterialExerciseMobile.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { config } from '@elice/api-client';
 import { withMaterial } from '@elice/material-shared-utils';
@@ -15,22 +16,27 @@ import ExerciseFile from './exercise-file/ExerciseFile.js';
 /**
  * Material exercise.
  */
-const MaterialExerciseMobile = ({
-  filename
-}) => {
-  const setExerciseActiveFilename = useSetRecoilState(exerciseActiveFilenameState);
-  React.useEffect(() => setExerciseActiveFilename(filename),
+var MaterialExerciseMobile = function MaterialExerciseMobile(_ref) {
+  var filename = _ref.filename;
+  var setExerciseActiveFilename = useSetRecoilState(exerciseActiveFilenameState);
+  React.useEffect(function () {
+    return setExerciseActiveFilename(filename);
+  },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [filename]);
   //
   //
   //
-  return React.createElement(ExerciseFile, null);
+  return jsx(ExerciseFile, {});
 };
 //
 //
 //
-var MaterialExerciseMobile$1 = withMaterial(props => React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExerciseMobile, Object.assign({}, props))), config.init, {
+var MaterialExerciseMobile$1 = withMaterial(function (props) {
+  return jsx(ExerciseProvider, Object.assign({}, props, {
+    children: jsx(MaterialExerciseMobile, Object.assign({}, props))
+  }));
+}, config.init, {
   overrideRecoilScope: true
 });
 

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

@@ -1,4 +1,6 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { getOrgMaterialExerciseDefaultRoomGet, getGlobalOrganizationGet, getOrgCourseGet } from '@elice/api-client';
@@ -10,8 +12,8 @@ import { ExerciseContext } from './context.js';
 import MaterialExerciseNoImage from './ExerciseProviderNoImage.js';
 import { exerciseUserState, exerciseState, exerciseRoomState, exerciseLectureState, exerciseMultilangLanguagesState, exerciseActiveFilenameState, exerciseContainerSizeState, exerciseAibotInfoEnableState } from './recoil.js';
 
-const RECOIL_RESET_DELAY = 10;
-const StyledMaterialExercise = styled.div.withConfig({
+var RECOIL_RESET_DELAY = 10;
+var StyledMaterialExercise = styled.div.withConfig({
   componentId: "sc-pj5yv2-0"
 })(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
 /**
@@ -20,55 +22,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 = __rest(_a, ["children", "materialExerciseId", "exerciseRoomId", "exerciseRoomUserId", "onDefaultExerciseRoomIdSet", "exerciseImageEmptyOptions"]);
   //
-  const {
-    orgNameShort
-  } = useMaterialConfig();
+  var _useMaterialConfig = useMaterialConfig(),
+    orgNameShort = _useMaterialConfig.orgNameShort;
   // user
-  const user = useRecoilValue(exerciseUserState);
+  var user = useRecoilValue(exerciseUserState);
   // exercise
-  const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
   // lecture
-  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  const resetLecture = useResetRecoilState(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var resetLecture = useResetRecoilState(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
   // multilang languages
-  const exerciseMultilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
-  const resetExerciseMultilangLanguages = useResetRecoilState(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  var exerciseMultilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  var resetExerciseMultilangLanguages = useResetRecoilState(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
   // etc
-  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  const setConatinerSize = useSetRecoilState(exerciseContainerSizeState);
-  const setAibotInfoEnable = useSetRecoilState(exerciseAibotInfoEnableState);
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var setConatinerSize = useSetRecoilState(exerciseContainerSizeState);
+  var setAibotInfoEnable = useSetRecoilState(exerciseAibotInfoEnableState);
   // wrap container size
-  const [wrapElRef, {
-    width,
-    height
-  }] = useMeasure();
+  var _useMeasure = useMeasure(),
+    _useMeasure2 = _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.useEffect(function () {
     if (exerciseRoomId) {
       return;
     }
     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);
       }
@@ -79,12 +80,14 @@ const ExerciseProvider = _a => {
   //
   // reset lecture, after `exercise.lectureId` changed
   //
-  React.useEffect(() => {
+  React.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);
     };
   },
@@ -93,12 +96,14 @@ const ExerciseProvider = _a => {
   //
   // reset exercise multilang languages, after `exercise.id` changed
   //
-  React.useEffect(() => {
+  React.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);
     };
   },
@@ -107,11 +112,11 @@ const ExerciseProvider = _a => {
   //
   // update Provider size
   //
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (width && height) {
       setConatinerSize({
-        width,
-        height
+        width: width,
+        height: height
       });
     }
   },
@@ -120,7 +125,7 @@ const ExerciseProvider = _a => {
   //
   // update
   //
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!(lecture === null || lecture === void 0 ? void 0 : lecture.courseId)) {
       return;
     }
@@ -128,12 +133,11 @@ const ExerciseProvider = _a => {
       organizationNameShort: orgNameShort
     }), getOrgCourseGet({
       courseId: lecture.courseId
-    })]).then(([{
-      organization
-    }, {
-      course
-    }]) => {
-      const isAibotInfoEnabled = organization.aibotInfo.isEnabled && course.aibotInfo.isEnabled;
+    })]).then(function (_ref) {
+      var _ref2 = _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
@@ -141,9 +145,9 @@ const ExerciseProvider = _a => {
   //
   //
   //
-  return React.createElement(StyledMaterialExercise, {
+  return jsx(StyledMaterialExercise, {
     ref: wrapElRef,
-    children: (() => {
+    children: function () {
       var _a;
       // render after measure Provider size
       if (!width || !height) {
@@ -151,30 +155,31 @@ const ExerciseProvider = _a => {
       }
       // show spinner before exercise ready
       if (!user || !lecture || !exercise || !exerciseRoomId || !exerciseRoom || typeof exerciseMultilangLanguages === 'undefined') {
-        return React.createElement(Flex, {
+        return jsx(Flex, {
           align: "center",
           justify: "center",
           width: "100%",
-          height: "100%"
-        }, React.createElement(Spinner, null));
+          height: "100%",
+          children: jsx(Spinner, {})
+        });
       }
       // when exerciseImage is not ready yet
       if (exercise.readyExerciseImage === null) {
-        return React.createElement(MaterialExerciseNoImage, Object.assign({}, exerciseImageEmptyOptions, {
+        return jsx(MaterialExerciseNoImage, Object.assign({}, exerciseImageEmptyOptions, {
           locale: contextProps.locale
         }));
       }
       // render
-      return React.createElement(ExerciseContext.Provider, {
+      return jsx(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 || ''))
         })
       });
-    })()
+    }()
   });
 };