Better Type Errors

.vscode/settings.json

@@ -66,5 +66,6 @@
     "typescriptreact",
     "yml",
     "yaml"
-  ]
+  ],
+  "vue.server.includeLanguages": ["vue", "markdown"]
 }

devserver/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^6.0.0",
-    "@blueprintjs/icons": "^6.0.0",
     "@commander-js/extra-typings": "^14.0.0",
     "@sourceacademy/modules-lib": "workspace:^",
     "@vitejs/plugin-react": "^6.0.1",
     "ace-builds": "^1.25.1",
     "classnames": "^2.3.1",
     "commander": "^14.0.0",
+    "es-toolkit": "^1.44.0",
     "js-slang": "^1.0.85",
     "re-resizable": "^6.9.11",
     "react": "^19.0.0",
@@ -37,9 +37,6 @@
     "vitest": "4.1.4",
     "vitest-browser-react": "^2.1.0"
   },
-  "peerDependencies": {
-    "es-toolkit": "^1.44.0"
-  },
   "scripts": {
     "dev": "vite",
     "lint": "eslint src",

devserver/src/components/Playground.tsx

@@ -1,12 +1,12 @@
 import { Button, Classes, Intent, OverlayToaster, Popover, Tooltip, type ToastProps } from '@blueprintjs/core';
-import { Settings } from '@blueprintjs/icons';
 import classNames from 'classnames';
+import { throttle } from 'es-toolkit';
 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';
+import { Chapter, Variant } from 'js-slang/dist/langs';
 import { ModuleInternalError } from 'js-slang/dist/modules/errors';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
-import { Chapter, Variant } from 'js-slang/dist/types';
 import { stringify } from 'js-slang/dist/utils/stringify';
 import React from 'react';
 import mockModuleContext from '../mockModuleContext';
@@ -18,6 +18,7 @@ import { ControlBarRefreshButton } from './controlBar/ControlBarRefreshButton';
 import { ControlBarRunButton } from './controlBar/ControlBarRunButton';
 import testTabContent from './sideContent/TestTab';
 import loadDynamicTabs from './sideContent/importers';
+import { getBundleDocsUsingVite, getBundleUsingVite, getModulesManifest } from './sideContent/importers/importers';
 import type { SideContentTab } from './sideContent/types';
 
 const refreshSuccessToast: ToastProps = {
@@ -49,6 +50,10 @@ const createContextHelper = (onConsoleLog: (arg: string) => void) => {
   return tempContext;
 };
 
+const updateEditorLocalStorageValue = throttle((newValue: string) => {
+  localStorage.setItem('editorValue', newValue);
+}, 100);
+
 const Playground: React.FC = () => {
   const consoleLogs = React.useRef<string[]>([]);
   const [moduleBackend, setModuleBackend] = React.useState<string | null>(null);
@@ -61,8 +66,7 @@ const Playground: React.FC = () => {
     }
   }, []);
 
-  const [useCompiledTabs, setUseCompiledTabs] = React.useState(!!localStorage.getItem('compiledTabs'));
-
+  const [useCompiled, setUseCompiled] = React.useState(!!localStorage.getItem('useCompiled'));
   const [dynamicTabs, setDynamicTabs] = React.useState<SideContentTab[]>([]);
   const [selectedTabId, setSelectedTab] = React.useState(testTabContent.id);
   const [codeContext, setCodeContext] = React.useState<Context>(createContextHelper(str => consoleLogs.current.push(str)));
@@ -72,6 +76,9 @@ const Playground: React.FC = () => {
 
   const toaster = React.useRef<OverlayToaster>(null);
 
+  const manifestImporter = useCompiled ? undefined : getModulesManifest;
+  const docsImporter = useCompiled ? undefined : getBundleDocsUsingVite;
+
   const showToast = (props: ToastProps) => {
     if (toaster.current) {
       toaster.current.show({
@@ -81,43 +88,41 @@ const Playground: React.FC = () => {
     }
   };
 
-  const getAutoComplete = React.useCallback((row: number, col: number, callback: any) => {
-    getNames(editorValue, row, col, codeContext)
-      .then(([editorNames, displaySuggestions]) => {
-        if (!displaySuggestions) {
-          callback();
-          return;
-        }
+  const getAutoComplete = async (row: number, col: number, callback: any) => {
+    const [editorNames, displaySuggestions] = await getNames(editorValue, row, col, codeContext, { manifestImporter, docsImporter });
+    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 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 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]);
+    callback(null, [
+      ...builtinSuggestions,
+      ...editorSuggestions
+    ]);
+  };
 
   const loadTabs = async () => {
     try {
-      const tabs = await loadDynamicTabs(codeContext, useCompiledTabs);
+      const tabs = await loadDynamicTabs(codeContext, useCompiled);
       setDynamicTabs(tabs);
 
       const newIds = tabs.map(({ id }) => id);
@@ -127,52 +132,55 @@ const Playground: React.FC = () => {
         setSelectedTab(testTabContent.id);
       }
       setAlerts(newIds);
-
     } catch (error) {
       showToast(errorToast);
       console.log(error);
     }
   };
 
-  const evalCode = () => {
+  const evalCode = async () => {
     codeContext.errors = [];
     codeContext.moduleContexts = mockModuleContext.moduleContexts = {};
     consoleLogs.current = [];
 
-    runInContext(editorValue, codeContext, {
+    const result = await runInContext(editorValue, codeContext, {
       importOptions: {
-        loadTabs: useCompiledTabs
-      }
-    })
-      .then((result) => {
-        if (codeContext.errors.length > 0) {
-          showToast(errorToast);
-        } else {
-          loadTabs()
-            .then(() => showToast(evalSuccessToast));
+        loadTabs: useCompiled,
+        sourceBundleImporter: useCompiled ? undefined : getBundleUsingVite,
+        docsImporter,
+        resolverOptions: {
+          manifestImporter,
         }
+      }
+    });
 
-        if (result.status === 'finished') {
-          setReplOutput({
-            type: 'result',
-            // code: editorValue,
-            consoleLogs: consoleLogs.current,
-            value: stringify(result.value)
-          });
-        } else if (result.status === 'error') {
-          codeContext.errors.forEach(error => {
-            if (error instanceof ModuleInternalError) {
-              console.error(error.error);
-            }
-          });
+    if (codeContext.errors.length > 0) {
+      showToast(errorToast);
+    } else {
+      loadTabs()
+        .then(() => showToast(evalSuccessToast));
+    }
 
-          setReplOutput({
-            type: 'errors',
-            errors: codeContext.errors,
-            consoleLogs: consoleLogs.current
-          });
+    if (result.status === 'finished') {
+      setReplOutput({
+        type: 'result',
+        // code: editorValue,
+        consoleLogs: consoleLogs.current,
+        value: stringify(result.value)
+      });
+    } else if (result.status === 'error') {
+      codeContext.errors.forEach(error => {
+        if (error instanceof ModuleInternalError) {
+          console.error(error.error);
         }
       });
+
+      setReplOutput({
+        type: 'errors',
+        errors: codeContext.errors,
+        consoleLogs: consoleLogs.current
+      });
+    }
   };
 
   const resetEditor = () => {
@@ -206,22 +214,19 @@ const Playground: React.FC = () => {
               setModulesStaticURL(value);
               localStorage.setItem('backend', value);
             }}
-            useCompiledForTabs={useCompiledTabs}
+            useCompiled={useCompiled}
             onUseCompiledChange={value => {
-              setUseCompiledTabs(value);
-              localStorage.setItem('compiledTabs', value ? 'true' : '');
+              setUseCompiled(value);
+              localStorage.setItem('useCompiled', value ? 'true' : '');
             }}
           />}
-          renderTarget={({ isOpen: _isOpen, ...targetProps }) => {
-            return (
-              <Tooltip content="Settings">
-                <Button
-                  {...targetProps}
-                  icon={<Settings />}
-                />
-              </Tooltip>
-            );
-          }}
+          renderTarget={({ isOpen: _isOpen, ...targetProps }) => (
+            <Tooltip content="Settings">
+              <Button
+                {...targetProps}
+                icon='settings' />
+            </Tooltip>
+          )}
         />,
         <ControlBarRunButton handleEditorEval={evalCode} key="eval" />,
         <ControlBarClearButton onClick={resetEditor}
@@ -231,7 +236,6 @@ const Playground: React.FC = () => {
           onClick={onRefresh}
           key="refresh"
         />
-
       ]
     },
     replProps: {
@@ -241,7 +245,7 @@ const Playground: React.FC = () => {
     handleEditorEval: evalCode,
     handleEditorValueChange(newValue) {
       setEditorValue(newValue);
-      localStorage.setItem('editorValue', newValue);
+      updateEditorLocalStorageValue(newValue);
     },
     editorValue,
     sideContentProps: {

devserver/src/components/SettingsPopup.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 type SettingsPopupProps = {
   backend: string;
-  useCompiledForTabs: boolean;
+  useCompiled: boolean;
   onUseCompiledChange?: (newValue: boolean) => void;
   onBackendChange?: (newValue: string) => void;
 };
@@ -34,15 +34,15 @@ export default function SettingsPopup(props: SettingsPopupProps) {
         />
       </div>
       <br/>
-      <Tooltip content="Load compiled tabs instead of the raw Typescript">
+      <Tooltip content="Load compiled assets instead of the raw Typescript">
         <Switch
-          checked={props.useCompiledForTabs}
+          checked={props.useCompiled}
           onChange={() => {
             if (props.onUseCompiledChange) {
-              props.onUseCompiledChange(!props.useCompiledForTabs);
+              props.onUseCompiledChange(!props.useCompiled);
             }
           }}
-          label="Use compiled tabs"
+          label="Use compiled"
         />
       </Tooltip>
     </div>

devserver/src/components/controlBar/ControlBarClearButton.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from '@blueprintjs/core';
-import { Trash } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +8,7 @@ type Props = {
 export const ControlBarClearButton = (props: Props) => <Tooltip content="Clear the editor and context">
   <ControlButton
     label="Clear"
-    icon={<Trash />}
+    icon='trash'
     onClick={props.onClick}
   />
 </Tooltip>;

devserver/src/components/controlBar/ControlBarRefreshButton.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from '@blueprintjs/core';
-import { Refresh } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +8,7 @@ type Props = {
 export const ControlBarRefreshButton = (props: Props) => <Tooltip content="Manually refresh the side content">
   <ControlButton
     onClick={props.onClick}
-    icon={<Refresh />}
+    icon='refresh'
     label="Refresh"
   />
 </Tooltip>;

devserver/src/components/controlBar/ControlBarRunButton.tsx

@@ -1,6 +1,5 @@
 import { Position, Tooltip } from '@blueprintjs/core';
-import { Play } from '@blueprintjs/icons';
-import React from 'react';
+import type { FC } from 'react';
 
 import ControlButton from '../ControlButton';
 
@@ -16,13 +15,13 @@ type StateProps = {
 
 type ControlButtonRunButtonProps = DispatchProps & StateProps;
 
-export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = (props) => {
+export const ControlBarRunButton: FC<ControlButtonRunButtonProps> = (props) => {
   const tooltipContent = 'Evaluate the program';
   return (
     <Tooltip content={tooltipContent} placement={Position.TOP}>
       <ControlButton
         label="Run"
-        icon={<Play />}
+        icon='play'
         onClick={props.handleEditorEval}
         options={{
           iconColor: props.color,