source-academy · RichDom2185 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -47,3 +47,7 @@ scripts/bin.js
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+# IDE #
+#######
+.idea/
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/Playground.tsx b/devserver/src/components/Playground.tsx
@@ -58,42 +58,41 @@ 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) => {
+    .then(tabs => {
       setDynamicTabs(tabs);
 
       const newIds = tabs.map(({ id }) => id);
@@ -104,7 +103,7 @@ const Playground: React.FC<{}> = () => {
       }
       setAlerts(newIds);
     })
-    .catch((error) => {
+    .catch(error => {
       showToast(errorToast);
       console.log(error);
     });
@@ -115,7 +114,7 @@ const Playground: React.FC<{}> = () => {
     codeContext.moduleContexts = mockModuleContext.moduleContexts = {};
 
     runInContext(editorValue, codeContext)
-      .then((result) => {
+      .then(result => {
         if (codeContext.errors.length > 0) {
           showToast(errorToast);
         } else {
@@ -160,13 +159,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: {
@@ -184,16 +178,14 @@ const Playground: React.FC<{}> = () => {
       selectedTabId,
       onChange: useCallback((newId: string) => {
         setSelectedTab(newId);
-        setAlerts(alerts.filter((id) => id !== 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
@@ -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,17 +21,17 @@ type StateProps = {
   replProps: ReplProps;
   sideContentHeight?: number;
   sideContentIsResizeable?: boolean;
-  editorValue: string
+  editorValue: string;
 
-  sideContentProps: SideContentProps
+  sideContentProps: SideContentProps;
 };
 
 const rightResizeOnly: Enable = { right: true };
 const bottomResizeOnly: Enable = { bottom: true };
 
 export type WorkspaceProps = DispatchProps & StateProps;
 
-const Workspace: React.FC<WorkspaceProps> = (props) => {
+const Workspace: React.FC<WorkspaceProps> = props => {
   const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
   const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
   const leftParentResizable = React.useRef<Resizable | null>(null);

diff --git a/devserver/src/components/controlBar/ControlBar.tsx b/devserver/src/components/controlBar/ControlBar.tsx
@@ -8,15 +8,17 @@ export type ControlBarProps = {
   editingWorkspaceButtons?: Array<JSX.Element | null>;
 };
 
-const ControlBar: React.FC<ControlBarProps> = (props) => {
+const ControlBar: React.FC<ControlBarProps> = props => {
   const editorControl = (
     <div className={classNames('ControlBar_editor', Classes.BUTTON_GROUP)}>
       {props.editorButtons}
     </div>
   );
 
   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 = (

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>
+);
diff --git a/devserver/src/components/controlBar/ControlBarRefreshButton.tsx b/devserver/src/components/controlBar/ControlBarRefreshButton.tsx
@@ -3,13 +3,15 @@ import { IconNames } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
-  onClick: () => void
+  onClick: () => void;
 };
 
-export const ControlBarRefreshButton = (props: Props) => <Tooltip content="Manually refresh the side content">
-  <ControlButton
-    onClick={props.onClick}
-    icon={IconNames.Refresh}
-    label="Refresh"
-  />
-</Tooltip>;
+export const ControlBarRefreshButton = (props: Props) => (
+  <Tooltip content="Manually refresh the side content">
+    <ControlButton
+      onClick={props.onClick}
+      icon={IconNames.Refresh}
+      label="Refresh"
+    />
+  </Tooltip>
+);
diff --git a/devserver/src/components/controlBar/ControlBarRunButton.tsx b/devserver/src/components/controlBar/ControlBarRunButton.tsx
@@ -16,7 +16,7 @@ type StateProps = {
 
 type ControlButtonRunButtonProps = DispatchProps & StateProps;
 
-export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = (props) => {
+export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = props => {
   const tooltipContent = 'Evaluate the program';
   return (
     <Tooltip content={tooltipContent} placement={Position.TOP}>

diff --git a/devserver/src/components/editor/Editor.tsx b/devserver/src/components/editor/Editor.tsx
@@ -28,8 +28,8 @@ type DispatchProps = {
 
 export type EditorStateProps = {
   newCursorPosition?: Position;
-  editorValue: string
-  handleEditorValueChange: (newCode: string) => void
+  editorValue: string;
+  handleEditorValueChange: (newCode: string) => void;
 };
 
 export type EditorProps = DispatchProps & EditorStateProps;
@@ -91,10 +91,9 @@ const Editor: React.FC<EditorProps> = (props: EditorProps) => {
     // The () => ref.current() are designed to use the latest instance only.
 
     // Start autocompletion
-    acequire('ace/ext/language_tools')
-      .setCompleters([
-        makeCompleter((...args) => handlePromptAutocompleteRef.current(...args))
-      ]);
+    acequire('ace/ext/language_tools').setCompleters([
+      makeCompleter((...args) => handlePromptAutocompleteRef.current(...args))
+    ]);
   }, [editor]);
 
   React.useLayoutEffect(() => {

diff --git a/devserver/src/components/repl/Repl.tsx b/devserver/src/components/repl/Repl.tsx
@@ -19,7 +19,9 @@ const Output: React.FC<OutputProps> = (props: OutputProps) => {
     case 'running':
       return (
         <Card>
-          <Pre className="log-output">{props.output.consoleLogs.join('\n')}</Pre>
+          <Pre className="log-output">
+            {props.output.consoleLogs.join('\n')}
+          </Pre>
         </Card>
       );
     case 'result':
@@ -32,7 +34,9 @@ const Output: React.FC<OutputProps> = (props: OutputProps) => {
       }
       return (
         <Card>
-          <Pre className="log-output">{props.output.consoleLogs.join('\n')}</Pre>
+          <Pre className="log-output">
+            {props.output.consoleLogs.join('\n')}
+          </Pre>
           <Pre className="result-output">{props.output.value}</Pre>
         </Card>
       );

diff --git a/devserver/src/components/sideContent/SideContent.tsx b/devserver/src/components/sideContent/SideContent.tsx
@@ -21,11 +21,11 @@ export type SideContentProps = {
   renderActiveTabPanelOnly?: boolean;
   editorWidth?: string;
   sideContentHeight?: number;
-  dynamicTabs: SideContentTab[]
+  dynamicTabs: SideContentTab[];
 
-  selectedTabId: string
-  alerts: string[]
-  onChange?: (newId: string, oldId: string) => void
+  selectedTabId: string;
+  alerts: string[];
+  onChange?: (newId: string, oldId: string) => void;
 };
 
 const renderTab = (
@@ -89,7 +89,7 @@ const SideContent: React.FC<SideContentProps> = ({
             if (onChange) onChange(newId, oldId);
           }}
         >
-          {dynamicTabs.map((tab) => renderTab(tab, alerts.includes(tab.id), editorWidth, sideContentHeight))}
+          {dynamicTabs.map(tab => renderTab(tab, alerts.includes(tab.id), editorWidth, sideContentHeight))}
         </Tabs>
       </div>
     </Card>

diff --git a/devserver/src/components/sideContent/TestTab.tsx b/devserver/src/components/sideContent/TestTab.tsx
@@ -1,26 +1,33 @@
 import { IconNames } from '@blueprintjs/icons';
 import type { SideContentTab } from './types';
 
-const TestTab = () => <div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  marginBottom: '5px'
-}}>
-  <h2>Source Academy Tab Development Server</h2>
-  <p style={{
-  }}>
-    Run some code that imports modules in the editor on the left. You should see the corresponding module tab spawn.<br />
-    Whenever you make changes to the tab, the server should automatically reload and show the changes that you've made <br />
-    If that does not happen, you can click the refresh button to manually reload tabs
-  </p>
-</div>;
+const TestTab = () => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      marginBottom: '5px'
+    }}
+  >
+    <h2>Source Academy Tab Development Server</h2>
+    <p>
+      Run some code that imports modules in the editor on the left. You should
+      see the corresponding module tab spawn.
+      <br />
+      Whenever you make changes to the tab, the server should automatically
+      reload and show the changes that you've made <br />
+      If that does not happen, you can click the refresh button to manually
+      reload tabs
+    </p>
+  </div>
+);
 
 const testTabContent: SideContentTab = {
   id: 'test',
   label: 'Welcome to the tab development server!',
   iconName: IconNames.LabTest,
-  body: <TestTab/ >
+  body: <TestTab />
 };
 
 export default testTabContent;