@elice/material-exercise 1.220803.0

package/es/hooks/useRunnerRoomWebSocket.js

@@ -0,0 +1,157 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { config, postOrgRunnerRoomExerciseRoomJoin } from '@elice/api-client';
+import { useMaterialConfig, useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+import { EliceWebSocket } from '@elice/websocket';
+import { camelizeKeys } from 'humps';
+
+//
+//
+
+const MAX_WEBSOCKET_RETRY_COUNT = 5;
+/**
+ *
+ */
+
+const useRunnerRoomWebSocket = ({
+  exerciseRoomId
+}) => {
+  const _return = useRef({});
+
+  const {
+    apiWsOriginUrl
+  } = useMaterialConfig();
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const websocket = useRef(null);
+  const [websocketReadyState, setWebSocketReadyState] = useState(EliceWebSocket.CLOSED);
+  const [isRunning, setRunning] = useState(false);
+  const [roomConnectionInfo, setRoomConnectionInfo] = useState(null); //
+  // =============== websocket ===============
+  //
+
+  /**
+   * Reconnect websocket.
+   */
+
+  const reconnect = useCallback(() => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.reconnect();
+  }, []);
+  /**
+   * Websocket on open.
+   */
+
+  const wsOpen = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on close.
+   */
+
+
+  const wsClose = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on error.
+   */
+
+
+  const wsError = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on message.
+   */
+
+
+  const wsMessage = e => {
+    const msg = camelizeKeys(e.data);
+
+    switch (msg.type) {
+      case 'ROOM_PREPARED':
+        wsMessageRoomPrepared(msg);
+        break;
+
+      case 'EXECUTE_CONTAINER':
+        wsMessageExecuteContainer();
+        break;
+
+      case 'EXECUTE_DONE':
+        wsMessageExecuteDone();
+        break;
+    }
+  };
+  /**
+   * Websocket on `ROOM_PREPARED` message.
+   */
+
+
+  const wsMessageRoomPrepared = msg => {
+    setRoomConnectionInfo(Object.assign(Object.assign({}, msg.data.forwarder), {
+      roomToken: msg.data.roomToken
+    }));
+  };
+  /**
+   * Websocket on `EXECUTE_CONTAINER` message.
+   */
+
+
+  const wsMessageExecuteContainer = msg => {
+    setRunning(true);
+  };
+  /**
+   * Websocket on `EXECUTE_DONE` message.
+   */
+
+
+  const wsMessageExecuteDone = msg => {
+    setRunning(false);
+  };
+  /**
+   * Create usercode websocket url.
+   */
+
+
+  const createUsercodeUrl = useCallback(async () => Promise.resolve(`${apiWsOriginUrl}/runner_room`).then(url => postOrgRunnerRoomExerciseRoomJoin({
+    exerciseRoomId
+  }).then(data => `${url}/${data.roomToken}`).catch(() => `${url}/`)), [apiWsOriginUrl, exerciseRoomId]); //
+  // Initialize websocket.
+  //
+
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    websocket.current = new EliceWebSocket(createUsercodeUrl, undefined, {
+      maxRetries: MAX_WEBSOCKET_RETRY_COUNT
+    });
+    websocket.current.onopen = wsOpen;
+    websocket.current.onclose = wsClose;
+    websocket.current.onmessage = wsMessage;
+    websocket.current.onerror = wsError;
+    return () => {
+      if (websocket.current) {
+        websocket.current.close();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isReady, createUsercodeUrl]); //
+  //
+  //
+
+  _return.current.isRunning = isRunning;
+  _return.current.roomConnectionInfo = roomConnectionInfo;
+  _return.current.readyState = websocketReadyState;
+  _return.current.reconnect = reconnect;
+  return _return.current;
+};
+
+export { useRunnerRoomWebSocket };

package/es/hooks/useStdioWebSocket.d.ts

@@ -0,0 +1,35 @@
+import type { WebsocketStdioReceivingMessage, WebsocketStdioSendingMessageSignal, WebsocketStdioSendingMessageText, WebsocketStdioSendingMessageTtyResize } from '@elice/types';
+export declare type MaterialExerciseStdioTextType = Exclude<WebsocketStdioReceivingMessage['type'], 'image' | 'file'>;
+export declare type MaterialExerciseStdioFile = MaterialExerciseStdioImageFile | MaterialExerciseStdioFileFile;
+export interface MaterialExerciseStdioImageFile {
+    type: 'image';
+    mime: string;
+    data: string;
+}
+export interface MaterialExerciseStdioFileFile {
+    type: 'file';
+    mime: string;
+    filename: string;
+    data: string;
+}
+interface UseStdioWebSocketProps {
+    wsUri?: string | null;
+    roomToken?: string | null;
+    isTty?: boolean;
+    onTextReceive?: (type: MaterialExerciseStdioTextType, text: string) => void;
+    onFileReceive?: (stdioFile: MaterialExerciseStdioFile) => void;
+}
+interface UseStdioWebSocketReturns {
+    readyState: WebSocket['readyState'];
+    sendText: (data: WebsocketStdioSendingMessageText['data']) => void;
+    sendSignal: (data: WebsocketStdioSendingMessageSignal['data']) => void;
+    sendTtyResize: (data: WebsocketStdioSendingMessageTtyResize['data']) => void;
+    sendSync: () => void;
+    reconnect: () => void;
+}
+declare type UseStdioWebSocket = (props: UseStdioWebSocketProps) => UseStdioWebSocketReturns;
+/**
+ *
+ */
+export declare const useStdioWebSocket: UseStdioWebSocket;
+export {};

package/es/hooks/useStdioWebSocket.js

@@ -0,0 +1,213 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { EliceWebSocket } from '@elice/websocket';
+
+//
+//
+
+const MAX_WEBSOCKET_RETRY_COUNT = 5;
+/**
+ *
+ */
+
+const useStdioWebSocket = ({
+  wsUri,
+  roomToken,
+  isTty = false,
+  onTextReceive,
+  onFileReceive
+}) => {
+  const _return = useRef({});
+
+  const websocket = useRef(null);
+  const [websocketReadyState, setWebSocketReadyState] = useState(EliceWebSocket.CLOSED);
+  /**
+   * Handle stdio text received.
+   */
+
+  const handleTextReceive = (type, text) => {
+    if (typeof onTextReceive === 'function') {
+      onTextReceive(type, text);
+    }
+  };
+  /**
+   * Handle stdio file received.
+   */
+
+
+  const handleFileReceive = file => {
+    if (typeof onFileReceive === 'function') {
+      onFileReceive(file);
+    }
+  };
+  /**
+   * Provide a utf-8 encoded string to `/dev/stdin` in the container.
+   */
+
+
+  const sendText = useCallback(data => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'text',
+      data: isTty ? data : data.replace(/\r/g, '\n')
+    });
+  }, [isTty]);
+  /**
+   * Send a signal (e.g. SIGINT, SIGQUIT, etc.) to the process with PID 1 in the container.
+   */
+
+  const sendSignal = useCallback(data => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'signal',
+      data
+    });
+  }, []);
+  /**
+   * Resize TTY of the container.
+   */
+
+  const sendTtyResize = useCallback(data => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'tty-resize',
+      data
+    });
+  }, []);
+  /**
+   * Update the content of usercodes (which are edited by `usercode.edit` API)
+   * and user files (which are added or deleted by `user_file.(add|delete)` API) in the container.
+   */
+
+  const sendSync = useCallback(() => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'sync'
+    });
+  }, []); //
+  // =============== websocket ===============
+  //
+
+  /**
+   * Reconnect websocket.
+   */
+
+  const reconnect = useCallback(() => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.reconnect();
+  }, []);
+  /**
+   * Websocket on open.
+   */
+
+  const wsOpen = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on close.
+   */
+
+
+  const wsClose = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on error.
+   */
+
+
+  const wsError = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on message.
+   */
+
+
+  const wsMessage = e => {
+    const msg = e.data;
+
+    switch (msg.type) {
+      case 'text':
+        handleTextReceive(msg.type, msg.data);
+        break;
+
+      case 'echo':
+        if (!isTty) {
+          handleTextReceive(msg.type, msg.data);
+        }
+
+        break;
+
+      case 'grader':
+        handleTextReceive(msg.type, msg.data);
+        break;
+      // case 'score':
+      //   handleTextReceive(msg.type, msg.data);
+      //   break;
+
+      case 'image':
+        handleFileReceive({
+          type: 'image',
+          mime: msg.data.split(';')[0].split(':')[1],
+          data: msg.data
+        });
+        break;
+
+      case 'file':
+        handleFileReceive({
+          type: 'file',
+          filename: msg.data.split(';')[0],
+          mime: msg.data.split(';')[1].split(':')[1],
+          data: msg.data.slice(Number(msg.data.split(';')[0].length) + 1)
+        });
+        break;
+    }
+  }; //
+  // Initialize websocket.
+  //
+
+
+  useEffect(() => {
+    if (!wsUri || !roomToken) {
+      return;
+    }
+
+    websocket.current = new EliceWebSocket(`${wsUri}/client/stdio/${roomToken}`, undefined, {
+      maxRetries: MAX_WEBSOCKET_RETRY_COUNT,
+      heartAttack: true
+    });
+    websocket.current.onopen = wsOpen;
+    websocket.current.onclose = wsClose;
+    websocket.current.onmessage = wsMessage;
+    websocket.current.onerror = wsError;
+    return () => {
+      if (websocket.current) {
+        websocket.current.close();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUri, roomToken]); //
+  //
+  //
+
+  _return.current.readyState = websocketReadyState;
+  _return.current.sendText = sendText;
+  _return.current.sendSignal = sendSignal;
+  _return.current.sendTtyResize = sendTtyResize;
+  _return.current.sendSync = sendSync;
+  _return.current.reconnect = reconnect;
+  return _return.current;
+};
+
+export { useStdioWebSocket };

package/es/hooks/useUsercodeEditWebSocket.d.ts

@@ -0,0 +1,57 @@
+import type { TextOp } from 'ot-text-unicode';
+interface CursorRange {
+    from: number;
+    to: number;
+}
+export interface UsercodeMarker extends CursorRange {
+    id: number;
+    accesskey: string;
+    fullname: string;
+    email: string;
+}
+/**
+ * Event handler for init.
+ */
+export declare type UseUsercodeEditWebSocketPropOnInit = (doc: string) => void;
+/**
+ * Event handler for `WRITE_NOTI` event.
+ */
+export declare type UseUsercodeEditWebSocketPropOnWriteNoti = (ots: TextOp, isFromServer: boolean) => void;
+/**
+ * Props of `useUsercodeEditWebSocket`.
+ */
+interface UseUsercodeEditWebSocketProps {
+    exerciseRoomId: number;
+    filename: string | null;
+    onInit: UseUsercodeEditWebSocketPropOnInit;
+    onWriteNoti: UseUsercodeEditWebSocketPropOnWriteNoti;
+}
+/**
+ *
+ */
+export declare type UseUsercodeEditWebSocketReturnSendCursor = (range: CursorRange) => void;
+/**
+ * Event handler for websocket message.
+ */
+export declare type UseUsercodeEditWebSocketReturnSendOTs = (ots: TextOp) => void;
+/**
+ * Return type of `useUsercodeEditWebSocket`.
+ */
+interface UseUsercodeEditWebSocketReturns {
+    doc: string;
+    docEditable: boolean;
+    readyState: WebSocket['readyState'];
+    markers: UsercodeMarker[];
+    sendCursor: UseUsercodeEditWebSocketReturnSendCursor;
+    sendOTs: UseUsercodeEditWebSocketReturnSendOTs;
+    _isMonkeyRunning: boolean;
+    _numMonkeyJumped: number;
+    _startMonkey: () => void;
+    _stopMonkey: () => void;
+}
+declare type UseUsercodeEditWebSocket = (props: UseUsercodeEditWebSocketProps) => UseUsercodeEditWebSocketReturns;
+/**
+ *
+ */
+export declare const useUsercodeEditWebSocket: UseUsercodeEditWebSocket;
+export {};