@elice/material-exercise 1.220803.0

package/es/components/shared/xterm/Xterm.js

@@ -0,0 +1,229 @@
+import React, { forwardRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useMeasure, useDebounce } from 'react-use';
+import { base } from '@elice/design-tokens';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import styled from 'styled-components';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import { patchXtermComposedPath } from './utils/index.js';
+import 'xterm/css/xterm.css';
+
+const XTERM_BACKGROUND_COLOR = base.color.navy9;
+const StyledXtermWrapper = styled.div.withConfig({
+  componentId: "sc-8sudaf-0"
+})(["flex:1 1 0%;height:100%;background-color:", ";overflow:hidden;padding:1rem;padding-right:0;.xterm-viewport{overflow-y:auto;overflow-x:hidden;}"], XTERM_BACKGROUND_COLOR);
+const Xterm = forwardRef(({
+  isRunning = false,
+  fontSize,
+  suppressSystemMessage = false,
+  onInputRequest,
+  onTtyResizeRequest
+}, ref) => {
+  const intl = useIntl();
+  const xterm = React.useRef(null);
+  const xtermFitAddon = React.useRef(null);
+  const [xtermWrapperElRef, {
+    width,
+    height
+  }] = useMeasure();
+  const xtermElRef = React.useRef(null);
+  const ttySize = React.useRef({});
+  const [isRunBefore, setIsRunBefore] = React.useState(false);
+  /**
+   * Unfocus the terminal.
+   */
+
+  const blur = React.useCallback((...args) => {
+    var _a;
+
+    return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.blur(...args);
+  }, []);
+  /**
+   * Focus the terminal.
+   */
+
+  const focus = React.useCallback((...args) => {
+    var _a;
+
+    return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.focus(...args);
+  }, []);
+  /**
+   * Resizes the terminal to the dimensions of its containing element.
+   */
+
+  const fit = React.useCallback(() => {
+    var _a; // wrap `fit()` with try-catch.
+    // - ref: https://github.com/bus-stop/x-terminal/issues/57#issuecomment-666012025
+
+
+    try {
+      (_a = xtermFitAddon.current) === null || _a === void 0 ? void 0 : _a.fit();
+    } catch (_) {// do nothing.
+    }
+  }, []);
+  /**
+   * Write data to the terminal.
+   */
+
+  const write = React.useCallback((data, callback) => {
+    var _a;
+
+    return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(typeof data === 'string' ? data.replace(/\n/g, '\r\n') : data, callback);
+  }, []);
+  /**
+   * Write emphasized color (yellow) message to the terminal.
+   * (same with `write` but with specific style)
+   */
+
+  const writeEmphasized = React.useCallback(mesage => write(`\x1b[38;5;221m${mesage}\x1b[0m`), [write]);
+  /**
+   * Write system message to the terminal.
+   * (same with `write` but with specific style)
+   */
+
+  const writeSystem = React.useCallback(mesage => write(`\x1b[1m\x1b[38;5;183m${mesage}\x1b[0m\n`), [write]);
+  /**
+   * Perform a full reset (RIS, aka '\x1bc').
+   */
+
+  const reset = React.useCallback((...args) => {
+    var _a;
+
+    return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.reset(...args);
+  }, []); //
+  // Init xterm.
+  //
+
+  React.useEffect(() => {
+    if (!xtermElRef.current) {
+      return;
+    } // patch
+
+
+    patchXtermComposedPath(); // init xterm terminal
+
+    xterm.current = new Terminal({
+      cursorBlink: true,
+      fontFamily: 'Elice Digital Coding',
+      fontSize,
+      theme: {
+        background: XTERM_BACKGROUND_COLOR
+      }
+    }); // init xterm fit addon
+
+    xtermFitAddon.current = new FitAddon();
+    xterm.current.loadAddon(xtermFitAddon.current); // create xterm window
+
+    const xtermEl = xtermElRef.current;
+
+    if (xtermEl) {
+      xterm.current.open(xtermEl);
+    } // register event handlers
+
+
+    const subscriptionData = xterm.current.onData(onInputRequest);
+    const subscriptionResize = xterm.current.onResize(size => {
+      ttySize.current = size;
+      onTtyResizeRequest(size);
+    });
+    return () => {
+      var _a, _b;
+
+      subscriptionData.dispose();
+      subscriptionResize.dispose();
+      (_a = xtermFitAddon.current) === null || _a === void 0 ? void 0 : _a.dispose();
+      (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.dispose();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  // Update xterm font size.
+  //
+
+  React.useEffect(() => {
+    var _a;
+
+    return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.setOption('fontSize', fontSize);
+  }, [fontSize]); //
+  // Write system message when code is running.
+  //
+
+  React.useEffect(() => {
+    if (suppressSystemMessage) {
+      return;
+    }
+
+    if (isRunning) {
+      //
+      reset();
+      onTtyResizeRequest(ttySize.current);
+      writeSystem(intl.formatMessage({
+        id: 'xterm.systemMessage.running'
+      }));
+      blur();
+    } //
+    else {
+      if (isRunBefore) {
+        writeSystem(intl.formatMessage({
+          id: 'xterm.systemMessage.runAfter'
+        }));
+        blur();
+      } //
+      else {
+        writeSystem(intl.formatMessage({
+          id: 'xterm.systemMessage.runBefore'
+        }));
+        blur();
+      }
+    }
+
+    setIsRunBefore(true);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isRunning]); //
+  // Fit xterm with wrapper resized.
+  //
+
+  useDebounce(() => fit(), 250, [width, height]); //
+  //
+  //
+
+  React.useImperativeHandle(ref, () => ({
+    blur,
+    focus,
+    fit,
+    reset,
+    write,
+    writeEmphasized,
+    writeSystem
+  })); //
+  //
+  //
+
+  return React.createElement(StyledXtermWrapper, {
+    ref: xtermWrapperElRef
+  }, React.createElement("div", {
+    style: {
+      width,
+      height
+    },
+    ref: xtermElRef
+  }));
+}); //
+//
+//
+
+var Xterm$1 = forwardRef((props, ref) => {
+  return React.createElement(MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: phrasesEn,
+      ko: phrasesKo
+    }
+  }, React.createElement(Xterm, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+
+export { Xterm$1 as default };

package/es/components/shared/xterm/XtermLazy.d.ts

@@ -0,0 +1,3 @@
+import type { default as Xterm } from './Xterm';
+declare const XtermLazy: typeof Xterm;
+export default XtermLazy;

package/es/components/shared/xterm/XtermLazy.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+
+const AsyncXterm = React.lazy(() => import('./Xterm.js'));
+const XtermLazy = forwardRef((props, ref) => {
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(AsyncXterm, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+
+export { XtermLazy as default };

package/es/components/shared/xterm/index.d.ts

@@ -0,0 +1 @@
+export { default as XtermLazy } from './XtermLazy';

package/es/components/shared/xterm/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */'","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
+
+export { phrasesEn as default };

package/es/components/shared/xterm/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */'","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
+
+export { phrasesKo as default };

package/es/components/shared/xterm/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Fix for `Object doesn't support property or method 'composedPath'`.
+ * - ref: https://git.elicer.io/elice/frontend/elice-web/-/issues/1801
+ */
+export declare function patchXtermComposedPath(): void;

package/es/components/shared/xterm/utils/index.js

@@ -0,0 +1,10 @@
+/**
+ * Fix for `Object doesn't support property or method 'composedPath'`.
+ * - ref: https://git.elicer.io/elice/frontend/elice-web/-/issues/1801
+ */
+function patchXtermComposedPath() {
+  // eslint-disable-next-line no-eval
+  eval('!function(){"function"!==window.Event.prototype.composedPath&&!function(t,o,h){t.composedPath||(t.composedPath=function(){if(this.path)return this.path;var t=this.target;for(this.path=[];null!==t.parentNode;)this.path.push(t),t=t.parentNode;return this.path.push(o,h),this.path})}(Event.prototype,document,window)}();');
+}
+
+export { patchXtermComposedPath };

package/es/constants/arduino.d.ts

@@ -0,0 +1,35 @@
+export declare const ENDPOINT_URL_REGEX: RegExp;
+export declare const ARDUINO_AGENT_ENDPOINT = "ws://127.0.0.1";
+export declare const ARDUINO_AGENT_PORTS_FROM = 8990;
+export declare const ARDUINO_AGENT_PORTS_TO = 9000;
+export declare const ARDUINO_AGENT_PORTS: number[];
+export declare const AVR_SIGNATURE: {
+    uno: string;
+    mega: string;
+};
+export declare const AVR_COMMANDLINE: {
+    uno: string;
+    mega: string;
+};
+export declare const ARDUINO_CHECK_ALIVE_RATE = 2000;
+export declare const DISABLE_TIME_AFTER_UPLOAD = 5000;
+export declare const ARDUINO_VENDOR_PRODUCT_IDS: {
+    uno: {
+        vendorId: string;
+        productId: string;
+    }[];
+    mega: {
+        vendorId: string;
+        productId: string;
+    }[];
+};
+export declare const ARDUINO_BOARD_NAMES: {
+    uno: string;
+    mega: string;
+};
+export declare const ARDUINO_BOARD_FQBN: {
+    uno: string;
+    mega: string;
+};
+export declare const ARDUINO_BAUD_RATES: number[];
+export declare const ARDUINO_DEFAULT_BAUD_RATE = 9600;

package/es/constants/arduino.js

@@ -0,0 +1,62 @@
+import { range } from 'lodash';
+
+const ARDUINO_AGENT_PORTS_FROM = 8990;
+const ARDUINO_AGENT_PORTS_TO = 9000;
+const ARDUINO_AGENT_PORTS = range(ARDUINO_AGENT_PORTS_FROM, ARDUINO_AGENT_PORTS_TO + 1);
+const AVR_SIGNATURE = {
+  uno: '06d861706dc3a9cad3824cd7c374568eb5d7f55c057bdb72726e0846575b6dc61d0c07e0628f0e51d7828307fefdfce702d8253dde90d67a554f8a795fa2c994469b10971fa2f198956493778fedf9fa4941dc6d9fa07648b477bb6cd27e2a82ea027171036fce1bc87745584a3377a055cedc09486e25de9e005415c4aa38f73b840dac6769ea82fbce2e39ba903b01738ec7cdf4688a255fcf80dfe5cd91cc7c6764133cdd5761be5f7bed3f59a888614aded15c347eceab5d169671bfba10fc0f7a5db07c504271917bdb3075c7b213a3facb915e48dd74077d88c59b94e0ebbff126994831c634f31d3a2d7edc754524b77aabde296a7ca3be13d86ff19a',
+  mega: '0011a459acfa1ce1de0509f30691001a90c397c6d4e5d72a618fa54d343ca242d8c9fb7928e48b2e72613fa2614617838b6769f28ee1881e6f91680e4330541ad16621e1cf04013dc96f063df561253fee22315de35f227ad5757a6af38036985e66a9cacf4b5387ebed37f027080ba33d17265c2e47ea7e5b956c36647891e1eadf9d3eda76cac879a28243201947f2855e9460c41dd839bf24dbe0aeea1e16575a539aff9b4d1b053ea171b4bcdbbb6434718283103cb3ff0e059a7096eb61e5465dbb22ebcdd292e999cac8dd9c08707119a3807c210a85a22646b835b4256f633de71348be47638552539043de8c3aeefd8d04d32a72d1fa3210f594775c'
+};
+const AVR_COMMANDLINE = {
+  uno: '"{runtime.tools.avrdude.path}/bin/avrdude" "-C{runtime.tools.avrdude.path}/etc/avrdude.conf" -v  -patmega328p -carduino "-P{serial.port}" -b115200 -D "-Uflash:w:{build.path}/{build.project_name}.hex:i"',
+  mega: '"{runtime.tools.avrdude.path}/bin/avrdude" "-C{runtime.tools.avrdude.path}/etc/avrdude.conf" -v  -patmega2560 -cwiring "-P{serial.port}" -b115200 -D "-Uflash:w:{build.path}/{build.project_name}.hex:i"'
+};
+const DISABLE_TIME_AFTER_UPLOAD = 5000;
+const ARDUINO_VENDOR_PRODUCT_IDS = {
+  uno: [{
+    vendorId: '0x2341',
+    productId: '0x0043'
+  }, {
+    vendorId: '0x2341',
+    productId: '0x0001'
+  }, {
+    vendorId: '0x2A03',
+    productId: '0x0043'
+  }, {
+    vendorId: '0x2341',
+    productId: '0x0243'
+  }, {
+    vendorId: '0x1A86',
+    productId: '0x7523'
+  }],
+  mega: [{
+    vendorId: '0x2341',
+    productId: '0x0010'
+  }, {
+    vendorId: '0x2341',
+    productId: '0x0042'
+  }, {
+    vendorId: '0x2A03',
+    productId: '0x0010'
+  }, {
+    vendorId: '0x2A03',
+    productId: '0x0042'
+  }, {
+    vendorId: '0x2341',
+    productId: '0x0210'
+  }, {
+    vendorId: '0x2341',
+    productId: '0x0242'
+  }]
+};
+const ARDUINO_BOARD_NAMES = {
+  uno: 'Arduino Uno',
+  mega: 'Arduino Mega'
+};
+const ARDUINO_BOARD_FQBN = {
+  uno: 'arduino:avr:uno',
+  mega: 'arduino:avr:mega'
+};
+const ARDUINO_BAUD_RATES = [300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200];
+
+export { ARDUINO_AGENT_PORTS, ARDUINO_AGENT_PORTS_FROM, ARDUINO_AGENT_PORTS_TO, ARDUINO_BAUD_RATES, ARDUINO_BOARD_FQBN, ARDUINO_BOARD_NAMES, ARDUINO_VENDOR_PRODUCT_IDS, AVR_COMMANDLINE, AVR_SIGNATURE, DISABLE_TIME_AFTER_UPLOAD };

package/es/constants/index.d.ts

@@ -0,0 +1 @@
+export { default as EXERCISE_SHORTCUT_KEY_MAP } from './shortcutKeyMap';

package/es/constants/shortcutKeyMap.d.ts

@@ -0,0 +1,27 @@
+export declare type ShortcutKey = Pick<KeyboardEvent, 'key' | 'metaKey' | 'ctrlKey' | 'shiftKey' | 'altKey'>;
+declare const _default: {
+    /**
+     * Runner > submit run
+     * - `F5`
+     */
+    RUNNER_SUBMIT_RUN: ShortcutKey[];
+    /**
+     * Runner > submit grade
+     * - `F6`
+     */
+    RUNNER_SUBMIT_GRADE: ShortcutKey[];
+    /**
+     * Runner > sync request
+     * - `Cmd` + `Shift` + `F5`
+     * - `Ctrl` + `Shift` + `F5`
+     * - `Cmd` + `S`
+     * - `Ctrl` + `S`
+     */
+    RUNNER_SYNC_REQUEST: ShortcutKey[];
+    /**
+     * Runner > cancel run
+     * - `Shift` + `F5`
+     */
+    RUNNER_CANCEL: ShortcutKey[];
+};
+export default _default;

package/es/constants/shortcutKeyMap.js

@@ -0,0 +1,74 @@
+const key = k => k;
+
+var EXERCISE_SHORTCUT_KEY_MAP = {
+  /**
+   * Runner > submit run
+   * - `F5`
+   */
+  RUNNER_SUBMIT_RUN: [key({
+    key: 'F5',
+    metaKey: false,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false
+  })],
+
+  /**
+   * Runner > submit grade
+   * - `F6`
+   */
+  RUNNER_SUBMIT_GRADE: [key({
+    key: 'F6',
+    metaKey: false,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false
+  })],
+
+  /**
+   * Runner > sync request
+   * - `Cmd` + `Shift` + `F5`
+   * - `Ctrl` + `Shift` + `F5`
+   * - `Cmd` + `S`
+   * - `Ctrl` + `S`
+   */
+  RUNNER_SYNC_REQUEST: [key({
+    key: 'F5',
+    metaKey: true,
+    ctrlKey: false,
+    shiftKey: true,
+    altKey: false
+  }), key({
+    key: 'F5',
+    metaKey: false,
+    ctrlKey: true,
+    shiftKey: true,
+    altKey: false
+  }), key({
+    key: 's',
+    metaKey: true,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false
+  }), key({
+    key: 's',
+    metaKey: false,
+    ctrlKey: true,
+    shiftKey: false,
+    altKey: false
+  })],
+
+  /**
+   * Runner > cancel run
+   * - `Shift` + `F5`
+   */
+  RUNNER_CANCEL: [key({
+    key: 'F5',
+    metaKey: false,
+    ctrlKey: false,
+    shiftKey: true,
+    altKey: false
+  })]
+};
+
+export { EXERCISE_SHORTCUT_KEY_MAP as default };

package/es/constants/stylesheets.d.ts

@@ -0,0 +1,29 @@
+import type { ResizableNextProps } from '@elice/blocks';
+import type { CSSProperties } from 'styled-components';
+interface MaterialScrollBarOptions {
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    borderRadius?: CSSProperties['borderRadius'];
+    hideable?: boolean;
+}
+/**
+ * Common props for resizable blocks.
+ */
+export declare const MATERIAL_RESIZABLE_COMMON_PROPS: Partial<ResizableNextProps>;
+/**
+ * Border CSS value for material divider.
+ */
+export declare const MATERIAL_DIVIDER_BORDER_VALUE: string;
+/**
+ * Color for material scroll bar.
+ */
+export declare const MATERIAL_SCROLL_BAR_COLOR: "#48485c";
+/**
+ * Background color for material scroll bar.
+ */
+export declare const MATERIAL_SCROLL_BAR_BACKGROUND_COLOR: "#2e2e3c";
+/**
+ * CSS for scroll bar.
+ */
+export declare const getMaterialScrollBarCss: (options: MaterialScrollBarOptions) => import("styled-components").FlattenSimpleInterpolation;
+export {};

package/es/constants/stylesheets.js

@@ -0,0 +1,36 @@
+import { base } from '@elice/design-tokens';
+import { css } from 'styled-components';
+
+/**
+ * Common props for resizable blocks.
+ */
+
+const MATERIAL_RESIZABLE_COMMON_PROPS = {
+  handleSize: 4,
+  handleHoverColor: base.color.primary6,
+  collapsedBackgroundColor: base.color.navy8,
+  collapsedHoverBackgroundColor: base.color.navy7,
+  collapsedBorderColor: base.color.navy8
+};
+/**
+ * Border CSS value for material divider.
+ */
+
+const MATERIAL_DIVIDER_BORDER_VALUE = `1px solid ${base.color.navy7}`;
+/**
+ * Color for material scroll bar.
+ */
+
+const MATERIAL_SCROLL_BAR_COLOR = base.color.navy6;
+/**
+ * Background color for material scroll bar.
+ */
+
+const MATERIAL_SCROLL_BAR_BACKGROUND_COLOR = base.color.navy8;
+/**
+ * CSS for scroll bar.
+ */
+
+const getMaterialScrollBarCss = options => css(["::-webkit-scrollbar{display:", ";width:", ";height:", ";}::-webkit-scrollbar-track-piece{background-color:", ";}::-webkit-scrollbar-thumb{border-radius:", ";background-color:", ";}&:hover{scrollbar-width:thin;::-webkit-scrollbar{display:initial;}}"], options.hideable ? 'none' : 'initial', options.width, options.height, MATERIAL_SCROLL_BAR_BACKGROUND_COLOR, options.borderRadius || '2px', MATERIAL_SCROLL_BAR_COLOR);
+
+export { MATERIAL_DIVIDER_BORDER_VALUE, MATERIAL_RESIZABLE_COMMON_PROPS, MATERIAL_SCROLL_BAR_BACKGROUND_COLOR, MATERIAL_SCROLL_BAR_COLOR, getMaterialScrollBarCss };

package/es/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useArduino';
+export * from './useExerciseFile';
+export * from './useExericseShortcut';
+export * from './useRunnerRoomWebSocket';
+export * from './useStdioWebSocket';
+export * from './useUsercodeHistory';
+export * from './useUsercodeEditWebSocket';

package/es/hooks/useArduino.d.ts

@@ -0,0 +1,14 @@
+import type { MaterialExerciseStdioFileFile } from './useStdioWebSocket';
+interface UseArduinoProps {
+    writeTerminal: (event: string) => void;
+}
+interface UseArduinoReturns {
+    init: () => void;
+    destroy: () => void;
+    reload: () => void;
+    sendText: (char: string) => void;
+    uploadHexFile: (hexFile: MaterialExerciseStdioFileFile) => void;
+}
+declare type UseArduino = (props: UseArduinoProps) => UseArduinoReturns;
+export declare const useArduino: UseArduino;
+export {};