@elice/material-exercise 1.220803.0

package/es/hooks/useUsercodeHistory.js

@@ -0,0 +1,129 @@
+import { useRef, useState, useEffect } from 'react';
+import { useMount } from 'react-use';
+import { getOrgMaterialExerciseUsercodeOpList, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
+import { type } from 'ot-text-unicode';
+
+const OP_FETCHING_COUNT = 100;
+const useUsercodeHistory = (exerciseRoomId, filename) => {
+  const latestDocRef = useRef('');
+  const [ops, setOps] = useState([]);
+  const [doc, setDoc] = useState('');
+  const [version, setVersion] = useState();
+  const [latestVersion, setLatestVersion] = useState();
+  const [hasMoreVersion, setHasMoreVersion] = useState(false);
+  /**
+   *
+   */
+
+  const inverseApplyOp = (doc, op) => {
+    if (typeof type.invert !== 'function') {
+      return doc;
+    }
+
+    return type.apply(doc, type.invert(op));
+  };
+  /**
+   *
+   */
+
+
+  const applyOps = selectedVersion => {
+    if (!latestVersion) {
+      return;
+    }
+
+    setDoc(ops.slice(0, latestVersion - selectedVersion).reduce((newDoc, op) => inverseApplyOp(newDoc, op.ots), latestDocRef.current));
+  };
+  /**
+   *
+   */
+
+
+  const loadMoreVersions = async () => {
+    if (!filename) {
+      return;
+    }
+
+    const {
+      ops: newOps
+    } = await getOrgMaterialExerciseUsercodeOpList({
+      exerciseRoomId,
+      filename,
+      offset: ops.length,
+      count: OP_FETCHING_COUNT,
+      isOpComposed: false
+    });
+    setOps(prev => [...prev, ...newOps]);
+  };
+  /**
+   *
+   */
+
+
+  const changeVersion = selectedVersion => {
+    if (selectedVersion === version) {
+      return;
+    }
+
+    setVersion(selectedVersion);
+    applyOps(selectedVersion);
+  }; //
+  //
+  //
+
+
+  useMount(() => {
+    if (!filename) {
+      return;
+    }
+
+    void (async () => {
+      try {
+        const [{
+          usercode
+        }, {
+          ops
+        }] = await Promise.all([getOrgMaterialExerciseUsercodeGet({
+          exerciseRoomId,
+          filename
+        }), getOrgMaterialExerciseUsercodeOpList({
+          exerciseRoomId,
+          filename,
+          offset: 0,
+          count: OP_FETCHING_COUNT,
+          isOpComposed: false
+        })]);
+        latestDocRef.current = usercode.content;
+        setDoc(usercode.content);
+        setOps(ops);
+        setVersion(ops[0].version);
+        setLatestVersion(ops[0].version);
+
+        if (ops.length < ops[0].version) {
+          setHasMoreVersion(true);
+        }
+      } catch (_) {//
+      }
+    })();
+  }); //
+  //
+  //
+
+  useEffect(() => {
+    setHasMoreVersion(latestVersion !== undefined && ops.length < latestVersion);
+  }, [latestVersion, ops]); //
+  //
+  //
+
+  return {
+    doc,
+    ops,
+    version,
+    latestVersion,
+    hasMoreVersion,
+    changeVersion,
+    loadMoreVersions
+  };
+};
+
+export { useUsercodeHistory };

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/es/index.js

@@ -0,0 +1,7 @@
+export { default as MaterialExercise } from './components/material-exercise/MaterialExercise.js';
+export { default as MonacoEditorLazy } from './components/shared/monaco-editor/MonacoEditorLazy.js';
+export { default as MonacoEditorPerference } from './components/shared/monaco-editor/MonacoEditorPerferenceForm.js';
+export { getLanguageFromFilename } from './components/shared/monaco-editor/utils/monacoLanguage.js';
+export { normalizeMonacoPreference } from './components/shared/monaco-editor/utils/monacoPreference.js';
+export { TM_LANGUAGES } from './components/shared/monaco-editor/constants/grammars/index.js';
+export { DEFAULT_MONACO_EDITOR_PREFERENCE, MONACO_EDITOR_FONT_FAMILY, MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS } from './components/shared/monaco-editor/constants/monaco/preferences.js';

package/es/typings/arduino.d.ts

@@ -0,0 +1,77 @@
+/**
+ * - `list`
+ * - `open [portName] [baud] [bufferAlgorithm (optional)]`
+ * - `send [portName] [cmd]`
+ * - `sendnobuf [portName] [cmd]`
+ * - `close [portName]`
+ * - `bufferalgorithms`
+ * - `baudrates`
+ * - `restart`
+ * - `exit`
+ * - `program [portName] [board:name] [$path/to/filename/without/extension]`
+ * - `programfromurl [portName] [board:name] [urlToHexFile]`
+ */
+export declare type ArduinoAgentCommand = 'list' | 'open' | 'send' | 'sendnobuf' | 'close' | 'bufferalgorithms' | 'baudrates' | 'restart' | 'exit' | 'program' | 'programfromurl';
+export declare type ArduinoAgentMessage = ArduinoAgentMessageVersion | ArduinoAgentMessageCommands | ArduinoAgentMessageHostname | ArduinoAgentMessageOs | ArduinoAgentMessagePorts | ArduinoAgentMessageDownloadStatus | ArduinoAgentMessageCmd | ArduinoAgentMessageProgrammerStatus | ArduinoAgentMessageD;
+export interface ArduinoAgentMessageVersion {
+    Version: string;
+}
+export interface ArduinoAgentMessageCommands {
+    Commands: string[];
+}
+export interface ArduinoAgentMessageHostname {
+    Hostname: string;
+}
+export interface ArduinoAgentMessageOs {
+    OS: string;
+}
+export interface ArduinoAgentMessagePorts {
+    Ports: {
+        Name: string;
+        SerialNumber: string;
+        DeviceClass: string;
+        IsOpen: boolean;
+        IsPrimary: boolean;
+        Baud: number;
+        BufferAlgorithm: string;
+        Ver: string;
+        NetworkPort: boolean;
+        VendorID: string;
+        ProductID: string;
+    }[];
+    Network: boolean;
+}
+export interface ArduinoAgentMessageDownloadStatus {
+    DownloadStatus: 'Pending' | 'Downloading' | 'Done' | 'Error';
+    Msg: string;
+}
+export interface ArduinoAgentMessageCmd {
+    Cmd: 'Open' | 'OpenFail' | 'Close' | 'Queued' | 'Write' | 'CompleteFake';
+    Desc: string;
+    Port: string;
+    Baud: number;
+    BufferType: string;
+}
+export declare type ArduinoAgentMessageProgrammerStatus = ArduinoAgentMessageProgrammerStatusStarting | ArduinoAgentMessageProgrammerStatusBusy | ArduinoAgentMessageProgrammerStatusDone | ArduinoAgentMessageProgrammerStatusError;
+export interface ArduinoAgentMessageProgrammerStatusStarting {
+    ProgrammerStatus: 'Starting';
+    Cmd: string;
+}
+export interface ArduinoAgentMessageProgrammerStatusBusy {
+    ProgrammerStatus: 'Busy';
+    Msg: string;
+}
+export interface ArduinoAgentMessageProgrammerStatusDone {
+    ProgrammerStatus: 'Done';
+    Flash: 'Ok';
+}
+export interface ArduinoAgentMessageProgrammerStatusError {
+    ProgrammerStatus: 'Error';
+    Msg: string;
+}
+export interface ArduinoAgentMessageD {
+    D: string;
+}
+export declare type ArduinoPort = ArduinoAgentMessagePorts['Ports'][number];
+export declare type ArduinoUploadProgressStatus = 'ready' | 'receivedHex' | 'starting' | 'busy' | 'error' | 'done';
+export declare type ArduinoAgentConnectionStatus = 'disconnected' | 'connecting' | 'reconnecting' | 'connected';

package/es/utils/arduino.d.ts

@@ -0,0 +1,46 @@
+import type { ArduinoPort } from "../typings/arduino";
+interface ArduinoUrlOptions {
+    protocol: 'http' | 'ws';
+    pathname?: string;
+    port?: number;
+}
+/**
+ * Create url to communicate with arduino.
+ */
+export declare function createArduinoUrl(options: ArduinoUrlOptions): string;
+/**
+ *
+ */
+export declare function getArduinoBoardType(port: ArduinoPort): "mega" | "uno" | null;
+/**
+ *
+ */
+export declare function getDisplayName(port: ArduinoPort): string;
+/**
+ *
+ */
+export declare function getPortFromName(ports: ArduinoPort[], name: null | string): {
+    Name: string;
+    SerialNumber: string;
+    DeviceClass: string;
+    IsOpen: boolean;
+    IsPrimary: boolean;
+    Baud: number;
+    /**
+     *
+     */
+    BufferAlgorithm: string;
+    Ver: string;
+    NetworkPort: boolean;
+    VendorID: string;
+    ProductID: string;
+};
+/**
+ *
+ */
+export declare function getFileContent(encoded: string): string;
+/**
+ *
+ */
+export declare function getFQBN(device: ArduinoPort): string;
+export {};

package/es/utils/arduino.js

@@ -0,0 +1,77 @@
+import { ARDUINO_BOARD_NAMES, ARDUINO_BOARD_FQBN, ARDUINO_VENDOR_PRODUCT_IDS } from '../constants/arduino.js';
+
+/**
+ * Create url to communicate with arduino.
+ */
+
+function createArduinoUrl(options) {
+  const url = new URL(`${options.protocol}://127.0.0.1`);
+
+  if (options.pathname) {
+    url.pathname = options.pathname;
+  }
+
+  if (options.port) {
+    url.port = options.port.toString();
+  }
+
+  return url.href;
+}
+/**
+ *
+ */
+
+function getArduinoBoardType(port) {
+  const boards = ARDUINO_VENDOR_PRODUCT_IDS;
+
+  for (const board in boards) {
+    for (const pair of boards[board]) {
+      if (pair.vendorId === port.VendorID && pair.productId === port.ProductID) {
+        return board;
+      }
+    }
+  }
+
+  return null;
+}
+/**
+ *
+ */
+
+function getDisplayName(port) {
+  const type = getArduinoBoardType(port);
+  const displayName = type !== null && Object.keys(ARDUINO_BOARD_NAMES).includes(type) ? `${ARDUINO_BOARD_NAMES[type]}` : `Unsupported Device`;
+  return displayName;
+}
+/**
+ *
+ */
+
+function getPortFromName(ports, name) {
+  var _a;
+
+  return (_a = ports.filter(port => port.Name === name)[0]) !== null && _a !== void 0 ? _a : null;
+}
+/**
+ *
+ */
+
+function getFileContent(encoded) {
+  const file = encoded.split(',');
+  return file[1];
+}
+/**
+ *
+ */
+
+function getFQBN(device) {
+  const type = getArduinoBoardType(device);
+
+  if (type) {
+    return ARDUINO_BOARD_FQBN[type];
+  }
+
+  return 'arduino:avr:uno';
+}
+
+export { createArduinoUrl, getArduinoBoardType, getDisplayName, getFQBN, getFileContent, getPortFromName };

package/es/utils/exerciseFile.d.ts

@@ -0,0 +1,14 @@
+import type { GetOrgMaterialExerciseExerciseRoomGetResponses, GetOrgMaterialExerciseGetResponses } from '@elice/types';
+declare type ExerciseFileCheckFn = (filename: string | null, deps: {
+    exercise: null | GetOrgMaterialExerciseGetResponses['materialExercise'];
+    exerciseRoom: null | GetOrgMaterialExerciseExerciseRoomGetResponses['exerciseRoom'];
+}) => boolean;
+/**
+ * Check whether the exercise file is editable.
+ */
+export declare const checkExerciseFileEditable: ExerciseFileCheckFn;
+/**
+ * Check whether the exercise file is resettable.
+ */
+export declare const checkExerciseFileResettable: ExerciseFileCheckFn;
+export {};

package/es/utils/exerciseFile.js

@@ -0,0 +1,60 @@
+//
+//
+//
+// ============================================================
+// [exercise image]
+// - `filelist` : exercise image 에 업로드한 project_file zipfile 의 파일 목록 (.elice 폴더 제외)
+// - `task_filelist` : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+// - `hidden_filelist` : exercise_image.edit API 에 hidden_filelist 로 설정한 파일 목록. exercise_image.exercise_file.get API 에서 student 이하의 권한을 가진 유저에게 "access_denied" 에러를 보냄.
+// - `read_only_filelist` : exercise_image.edit API 에 read_only_filelist 로 설정한 파일 목록
+// - `initial_open_filelist` : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록.
+// - `main_task_filelist` : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록. backward compatibility 를 위해 남아 있음
+//
+// [exercise room]
+// - filelist : exercise room 에 user_file.add 를 통해 업로드된 파일 목록
+// - task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+//
+// > editable 의 기준 : 파일 크기가 1MB 이하이고, https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js 에 정의된 확장자(2020년 6월 기준 => 5.56.0 tag 정도)를 가지는 파일
+//
+// > ref: https://elice.slack.com/archives/C04BACPKW/p1650949625169019?thread_ts=1650948898.201199&cid=C04BACPKW
+// ============================================================
+//
+//
+//
+
+/**
+ * Check whether the exercise file is editable.
+ */
+const checkExerciseFileEditable = (filename, {
+  exercise,
+  exerciseRoom
+}) => {
+  var _a;
+
+  if (!filename) {
+    return false;
+  }
+
+  return [(_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.taskFilelist.includes(filename), exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.taskFilelist.includes(filename)].some(Boolean);
+};
+/**
+ * Check whether the exercise file is resettable.
+ */
+
+const checkExerciseFileResettable = (filename, {
+  exercise,
+  exerciseRoom
+}) => {
+  var _a, _b, _c;
+
+  if (!filename) {
+    return false;
+  }
+
+  return [checkExerciseFileEditable(filename, {
+    exercise,
+    exerciseRoom
+  }), (_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.taskFilelist.includes(filename), !((_b = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _b === void 0 ? void 0 : _b.readOnlyFilelist.includes(filename)), !((_c = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _c === void 0 ? void 0 : _c.hiddenFilelist.includes(filename))].every(Boolean);
+};
+
+export { checkExerciseFileEditable, checkExerciseFileResettable };

package/es/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './exerciseFile';

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@elice/material-exercise",
+  "version": "1.220803.0",
+  "description": "User view and editing components of Elice material exercise",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/markdown": "^1.220803.0",
+    "@elice/material-shared-types": "22.7.2-1",
+    "@elice/material-shared-utils": "22.7.2-1",
+    "@elice/types": "^1.220802.1",
+    "@elice/websocket": "^1.220803.0",
+    "humps": "^2.0.1",
+    "lodash": "^4.17.21",
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-intl": "^5.0.0",
+    "react-use": "^17.0.0",
+    "recoil": "^0.6.1",
+    "styled-components": "^5.2.0"
+  },
+  "optionalDependencies": {
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/commands": "^0.19.8",
+    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/lang-cpp": "^0.19.1",
+    "@codemirror/lang-css": "^0.19.3",
+    "@codemirror/lang-html": "^0.19.4",
+    "@codemirror/lang-java": "^0.19.1",
+    "@codemirror/lang-javascript": "^0.19.7",
+    "@codemirror/lang-json": "^0.19.2",
+    "@codemirror/lang-markdown": "^0.19.6",
+    "@codemirror/lang-python": "^0.19.4",
+    "@codemirror/lang-rust": "^0.19.2",
+    "@codemirror/lang-sql": "^0.19.4",
+    "@codemirror/lang-xml": "^0.19.2",
+    "@codemirror/state": "^0.19.9",
+    "@codemirror/text": "^0.19.6",
+    "@codemirror/view": "^0.19.47"
+  },
+  "dependencies": {
+    "@novnc/novnc": "^1.3.0",
+    "@nteract/notebook-preview": "^11.0.4-alpha.0",
+    "classnames": "^2.2.0",
+    "color": "^4.2.3",
+    "dayjs": "^1.10.6",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.7",
+    "mime": "^2.5.2",
+    "monaco-editor": "0.33.0",
+    "monaco-textmate": "~3.0.1",
+    "onigasm": "~2.2.5",
+    "ot-text-unicode": "^4.0.0",
+    "prettier": "~2.7.1",
+    "random-words": "^1.1.2",
+    "react-csv-to-table": "^0.0.4",
+    "react-hook-form": "~7.12.0",
+    "react-transition-group": "^4.3.0",
+    "rxjs": "^7.5.6",
+    "socket.io-client": "2.3.1",
+    "tslib": "^2.3.1",
+    "type-fest": "^2.13.0",
+    "unicount": "^1.2.0",
+    "vscode-icons-js": "^10.1.1",
+    "xterm": "^4.13.0",
+    "xterm-addon-fit": "^0.5.0"
+  },
+  "devDependencies": {
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/commands": "^0.19.8",
+    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/lang-cpp": "^0.19.1",
+    "@codemirror/lang-css": "^0.19.3",
+    "@codemirror/lang-html": "^0.19.4",
+    "@codemirror/lang-java": "^0.19.1",
+    "@codemirror/lang-javascript": "^0.19.7",
+    "@codemirror/lang-json": "^0.19.2",
+    "@codemirror/lang-markdown": "^0.19.6",
+    "@codemirror/lang-python": "^0.19.4",
+    "@codemirror/lang-rust": "^0.19.2",
+    "@codemirror/lang-sql": "^0.19.4",
+    "@codemirror/lang-xml": "^0.19.2",
+    "@codemirror/state": "^0.19.9",
+    "@codemirror/text": "^0.19.6",
+    "@codemirror/view": "^0.19.47",
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/markdown": "^1.220803.0",
+    "@elice/material-shared-types": "1.220803.0",
+    "@elice/material-shared-utils": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@elice/websocket": "^1.220803.0",
+    "@types/classnames": "^2.3.1",
+    "@types/color": "^3.0.3",
+    "@types/file-saver": "^2.0.5",
+    "@types/humps": "^2.0.1",
+    "@types/mime": "^2.0.3",
+    "@types/novnc": "^0.0.27",
+    "@types/prettier": "^2.6.3",
+    "@types/random-words": "^1.1.2",
+    "@types/react": "~17.0.9",
+    "@types/socket.io-client": "^1.4.36",
+    "@types/styled-components": "^5.1.21",
+    "humps": "^2.0.1",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-intl": "^5.0.0",
+    "react-use": "^17.0.0",
+    "recoil": "^0.6.1",
+    "styled-components": "^5.2.0"
+  },
+  "gitHead": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}