source-academy · RichDom2185 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/devserver/README.md b/devserver/README.md
@@ -2,4 +2,4 @@
 
 This server relies on [`Vite`](https://vitejs.dev) to create a server that automatically reloads when it detects file system changes. This allows Source Academy developers to make changes to their tabs without having to use the frontend, and have it render code changes live.
 
-The server is designed to be run using `yarn devserver` from the repository's root directory, hence `vite.config.ts` is not located within this folder.
+The server is designed to be run using `yarn devserver` from the repository's root directory, hence `vite.config.ts` is not located within this folder.
diff --git a/devserver/index.html b/devserver/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/devserver/src/components/ControlButton.tsx b/devserver/src/components/ControlButton.tsx
@@ -1,4 +1,10 @@
-import { AnchorButton, Button, Icon, type IconName, Intent } from '@blueprintjs/core';
+import {
+  AnchorButton,
+  Button,
+  Icon,
+  Intent,
+  type IconName
+} from '@blueprintjs/core';
 import React from 'react';
 
 type ButtonOptions = {
@@ -38,7 +44,9 @@ const ControlButton: React.FC<ControlButtonProps> = ({
     ...defaultOptions,
     ...options
   };
-  const iconElement = icon && <Icon icon={icon} color={buttonOptions.iconColor} />;
+  const iconElement = icon && (
+    <Icon icon={icon} color={buttonOptions.iconColor} />
+  );
   // Refer to #2417 and #2422 for why we conditionally
   // set the button component. See also:
   // https://blueprintjs.com/docs/#core/components/button

diff --git a/devserver/src/components/Playground.tsx b/devserver/src/components/Playground.tsx
@@ -1,6 +1,16 @@
-import { Classes, Intent, OverlayToaster, type ToastProps } from '@blueprintjs/core';
+import {
+  Classes,
+  Intent,
+  OverlayToaster,
+  type ToastProps
+} from '@blueprintjs/core';
 import classNames from 'classnames';
-import { SourceDocumentation, getNames, runInContext, type Context } from 'js-slang';
+import {
+  SourceDocumentation,
+  getNames,
+  runInContext,
+  type Context
+} from 'js-slang';
 
 // Importing this straight from js-slang doesn't work for whatever reason
 import createContext from 'js-slang/dist/createContext';
@@ -42,9 +52,15 @@ const createContextHelper = () => {
 const Playground: React.FC<{}> = () => {
   const [dynamicTabs, setDynamicTabs] = React.useState<SideContentTab[]>([]);
   const [selectedTabId, setSelectedTab] = React.useState(testTabContent.id);
-  const [codeContext, setCodeContext] = React.useState<Context>(createContextHelper());
-  const [editorValue, setEditorValue] = React.useState(localStorage.getItem('editorValue') ?? '');
-  const [replOutput, setReplOutput] = React.useState<InterpreterOutput | null>(null);
+  const [codeContext, setCodeContext] = React.useState<Context>(
+    createContextHelper()
+  );
+  const [editorValue, setEditorValue] = React.useState(
+    localStorage.getItem('editorValue') ?? ''
+  );
+  const [replOutput, setReplOutput] = React.useState<InterpreterOutput | null>(
+    null
+  );
   const [alerts, setAlerts] = React.useState<string[]>([]);
 
   const toaster = React.useRef<OverlayToaster>(null);
@@ -58,87 +74,89 @@ const Playground: React.FC<{}> = () => {
     }
   };
 
-  const getAutoComplete = useCallback((row: number, col: number, callback: any) => {
-    getNames(editorValue, row, col, codeContext)
-      .then(([editorNames, displaySuggestions]) => {
-        if (!displaySuggestions) {
-          callback();
-          return;
-        }
-
-        const editorSuggestions = editorNames.map((editorName: any) => ({
-          ...editorName,
-          caption: editorName.name,
-          value: editorName.name,
-          score: editorName.score ? editorName.score + 1000 : 1000,
-          name: undefined
-        }));
-
-        const builtins: Record<string, any> = SourceDocumentation.builtins[Chapter.SOURCE_4];
-        const builtinSuggestions = Object.entries(builtins)
-          .map(([builtin, thing]) => ({
-            ...thing,
-            caption: builtin,
-            value: builtin,
-            score: 100,
-            name: builtin,
-            docHTML: thing.description
+  const getAutoComplete = useCallback(
+    (row: number, col: number, callback: any) => {
+      getNames(editorValue, row, col, codeContext).then(
+        ([editorNames, displaySuggestions]) => {
+          if (!displaySuggestions) {
+            callback();
+            return;
+          }
+
+          const editorSuggestions = editorNames.map((editorName: any) => ({
+            ...editorName,
+            caption: editorName.name,
+            value: editorName.name,
+            score: editorName.score ? editorName.score + 1000 : 1000,
+            name: undefined
           }));
 
-        callback(null, [
-          ...builtinSuggestions,
-          ...editorSuggestions
-        ]);
-      });
-  }, [editorValue, codeContext]);
+          const builtins: Record<string, any> =
+            SourceDocumentation.builtins[Chapter.SOURCE_4];
+          const builtinSuggestions = Object.entries(builtins).map(
+            ([builtin, thing]) => ({
+              ...thing,
+              caption: builtin,
+              value: builtin,
+              score: 100,
+              name: builtin,
+              docHTML: thing.description
+            })
+          );
+
+          callback(null, [...builtinSuggestions, ...editorSuggestions]);
+        }
+      );
+    },
+    [editorValue, codeContext]
+  );
 
-  const loadTabs = () => getDynamicTabs(codeContext)
-    .then((tabs) => {
-      setDynamicTabs(tabs);
+  const loadTabs = () =>
+    getDynamicTabs(codeContext)
+      .then((tabs) => {
+        setDynamicTabs(tabs);
 
-      const newIds = tabs.map(({ id }) => id);
-      // If the currently selected tab no longer exists,
-      // switch to the default test tab
-      if (!newIds.includes(selectedTabId)) {
-        setSelectedTab(testTabContent.id);
-      }
-      setAlerts(newIds);
-    })
-    .catch((error) => {
-      showToast(errorToast);
-      console.log(error);
-    });
+        const newIds = tabs.map(({ id }) => id);
+        // If the currently selected tab no longer exists,
+        // switch to the default test tab
+        if (!newIds.includes(selectedTabId)) {
+          setSelectedTab(testTabContent.id);
+        }
+        setAlerts(newIds);
+      })
+      .catch((error) => {
+        showToast(errorToast);
+        console.log(error);
+      });
 
   const evalCode = () => {
     codeContext.errors = [];
     // eslint-disable-next-line no-multi-assign
     codeContext.moduleContexts = mockModuleContext.moduleContexts = {};
 
-    runInContext(editorValue, codeContext)
-      .then((result) => {
-        if (codeContext.errors.length > 0) {
-          showToast(errorToast);
-        } else {
-          loadTabs()
-            .then(() => showToast(evalSuccessToast));
-        }
+    runInContext(editorValue, codeContext).then((result) => {
+      if (codeContext.errors.length > 0) {
+        showToast(errorToast);
+      } else {
+        loadTabs().then(() => showToast(evalSuccessToast));
+      }
 
-        // TODO: Add support for console.log?
-        if (result.status === 'finished') {
-          setReplOutput({
-            type: 'result',
-            // code: editorValue,
-            consoleLogs: [],
-            value: stringify(result.value)
-          });
-        } else if (result.status === 'error') {
-          setReplOutput({
-            type: 'errors',
-            errors: codeContext.errors,
-            consoleLogs: []
-          });
-        }
-      });
+      // TODO: Add support for console.log?
+      if (result.status === 'finished') {
+        setReplOutput({
+          type: 'result',
+          // code: editorValue,
+          consoleLogs: [],
+          value: stringify(result.value)
+        });
+      } else if (result.status === 'error') {
+        setReplOutput({
+          type: 'errors',
+          errors: codeContext.errors,
+          consoleLogs: []
+        });
+      }
+    });
   };
 
   const resetEditor = () => {
@@ -160,13 +178,8 @@ const Playground: React.FC<{}> = () => {
     controlBarProps: {
       editorButtons: [
         <ControlBarRunButton handleEditorEval={evalCode} key="eval" />,
-        <ControlBarClearButton onClick={resetEditor}
-          key="clear"
-        />,
-        <ControlBarRefreshButton
-          onClick={onRefresh}
-          key="refresh"
-        />
+        <ControlBarClearButton onClick={resetEditor} key="clear" />,
+        <ControlBarRefreshButton onClick={onRefresh} key="refresh" />
       ]
     },
     replProps: {
@@ -182,18 +195,19 @@ const Playground: React.FC<{}> = () => {
     sideContentProps: {
       dynamicTabs: [testTabContent, ...dynamicTabs],
       selectedTabId,
-      onChange: useCallback((newId: string) => {
-        setSelectedTab(newId);
-        setAlerts(alerts.filter((id) => id !== newId));
-      }, [alerts]),
+      onChange: useCallback(
+        (newId: string) => {
+          setSelectedTab(newId);
+          setAlerts(alerts.filter((id) => id !== newId));
+        },
+        [alerts]
+      ),
       alerts
     }
   };
 
   return (
-    <HotKeys
-      className={classNames('Playground', Classes.DARK)}
-    >
+    <HotKeys className={classNames('Playground', Classes.DARK)}>
       <OverlayToaster ref={toaster} />
       <Workspace {...workspaceProps} />
     </HotKeys>

diff --git a/devserver/src/components/Workspace.tsx b/devserver/src/components/Workspace.tsx
@@ -1,5 +1,5 @@
 import { FocusStyleManager } from '@blueprintjs/core';
-import { type Enable, Resizable, type ResizeCallback } from 're-resizable';
+import { Resizable, type Enable, type ResizeCallback } from 're-resizable';
 import React from 'react';
 
 import ControlBar, { type ControlBarProps } from './controlBar/ControlBar';
@@ -10,8 +10,8 @@ import { useDimensions } from './utils/Hooks';
 
 type DispatchProps = {
   handleEditorEval: () => void;
-  handleEditorValueChange: (newValue: string) => void
-  handlePromptAutocomplete: (row: number, col: number, callback: any) => void
+  handleEditorValueChange: (newValue: string) => void;
+  handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 };
 
 type StateProps = {
@@ -21,9 +21,9 @@ type StateProps = {
   replProps: ReplProps;
   sideContentHeight?: number;
   sideContentIsResizeable?: boolean;
-  editorValue: string
+  editorValue: string;
 
-  sideContentProps: SideContentProps
+  sideContentProps: SideContentProps;
 };
 
 const rightResizeOnly: Enable = { right: true };
@@ -40,7 +40,9 @@ const Workspace: React.FC<WorkspaceProps> = (props) => {
 
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
 
-  const [sideContentHeight, setSideContentHeight] = React.useState<number | undefined>(undefined);
+  const [sideContentHeight, setSideContentHeight] = React.useState<
+    number | undefined
+  >(undefined);
 
   FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -58,8 +60,8 @@ const Workspace: React.FC<WorkspaceProps> = (props) => {
   const toggleEditorDividerDisplay: ResizeCallback = (_a, _b, ref) => {
     const leftThreshold = 5;
     const rightThreshold = 95;
-    const editorWidthPercentage
-      = ((ref as HTMLDivElement).clientWidth / contentContainerWidth) * 100;
+    const editorWidthPercentage =
+      ((ref as HTMLDivElement).clientWidth / contentContainerWidth) * 100;
     // update resizable size
     if (editorWidthPercentage > rightThreshold) {
       leftParentResizable.current!.updateSize({
@@ -79,8 +81,8 @@ const Workspace: React.FC<WorkspaceProps> = (props) => {
    * so that it's bottom border snaps flush with editor's bottom border
    */
   const toggleDividerDisplay: ResizeCallback = (_a, _b, ref) => {
-    maxDividerHeight.current
-      = sideDividerDiv.current!.clientHeight > maxDividerHeight.current!
+    maxDividerHeight.current =
+      sideDividerDiv.current!.clientHeight > maxDividerHeight.current!
         ? sideDividerDiv.current!.clientHeight
         : maxDividerHeight.current;
     const resizableHeight = (ref as HTMLDivElement).clientHeight;
@@ -125,7 +127,9 @@ const Workspace: React.FC<WorkspaceProps> = (props) => {
               className="resize-side-content"
               enable={bottomResizeOnly}
               onResize={toggleDividerDisplay}
-              onResizeStop={(_a, _b, ref) => setSideContentHeight(ref.clientHeight)}
+              onResizeStop={(_a, _b, ref) =>
+                setSideContentHeight(ref.clientHeight)
+              }
             >
               <SideContent
                 sideContentHeight={sideContentHeight}

diff --git a/devserver/src/components/controlBar/ControlBar.tsx b/devserver/src/components/controlBar/ControlBar.tsx
@@ -16,11 +16,18 @@ const ControlBar: React.FC<ControlBarProps> = (props) => {
   );
 
   const flowControl = props.flowButtons && (
-    <div className={classNames('ControlBar_flow', Classes.BUTTON_GROUP)}>{props.flowButtons}</div>
+    <div className={classNames('ControlBar_flow', Classes.BUTTON_GROUP)}>
+      {props.flowButtons}
+    </div>
   );
 
   const editingWorkspaceControl = (
-    <div className={classNames('ControlBar_editingWorkspace', Classes.BUTTON_GROUP)}>
+    <div
+      className={classNames(
+        'ControlBar_editingWorkspace',
+        Classes.BUTTON_GROUP
+      )}
+    >
       {props.editingWorkspaceButtons}
     </div>
   );

diff --git a/devserver/src/components/controlBar/ControlBarClearButton.tsx b/devserver/src/components/controlBar/ControlBarClearButton.tsx
@@ -3,13 +3,15 @@ import { IconNames } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
-  onClick: () => void
+  onClick: () => void;
 };
 
-export const ControlBarClearButton = (props: Props) => <Tooltip content="Clear the editor and context">
-  <ControlButton
-    label="Clear"
-    icon={IconNames.Trash}
-    onClick={props.onClick}
-  />
-</Tooltip>;
+export const ControlBarClearButton = (props: Props) => (
+  <Tooltip content="Clear the editor and context">
+    <ControlButton
+      label="Clear"
+      icon={IconNames.Trash}
+      onClick={props.onClick}
+    />
+  </Tooltip>
+);