Fix some flaws with the devserver

Author: leeyi45

devserver/src/components/Playground.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 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 { 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';
@@ -50,7 +51,16 @@ const createContextHelper = (onConsoleLog: (arg: string) => void) => {
 const Playground: React.FC = () => {
   const consoleLogs = React.useRef<string[]>([]);
   const [moduleBackend, setModuleBackend] = React.useState<string | null>(null);
-  const [useCompiledTabs, setUseCompiledTabs] = React.useState(false);
+
+  React.useEffect(() => {
+    const savedBackend = localStorage.getItem('backend');
+    if (savedBackend != undefined) {
+      setModuleBackend(savedBackend);
+      setModulesStaticURL(savedBackend);
+    }
+  }, []);
+
+  const [useCompiledTabs, setUseCompiledTabs] = React.useState(!!localStorage.getItem('compiledTabs'));
 
   const [dynamicTabs, setDynamicTabs] = React.useState<SideContentTab[]>([]);
   const [selectedTabId, setSelectedTab] = React.useState(testTabContent.id);
@@ -184,9 +194,16 @@ const Playground: React.FC = () => {
           placement="right"
           content={<SettingsPopup
             backend={moduleBackend ?? ''}
-            onBackendChange={setModuleBackend}
+            onBackendChange={value => {
+              setModuleBackend(value);
+              setModulesStaticURL(value);
+              localStorage.setItem('backend', value);
+            }}
             useCompiledForTabs={useCompiledTabs}
-            onUseCompiledChange={setUseCompiledTabs}
+            onUseCompiledChange={value => {
+              setUseCompiledTabs(value);
+              localStorage.setItem('compiledTabs', value ? 'true' : '');
+            }}
           />}
           renderTarget={({ isOpen: _isOpen, ...targetProps }) => {
             return (

devserver/src/components/SettingsPopup.tsx

@@ -1,4 +1,5 @@
 import { Card, EditableText, Switch, Tooltip } from '@blueprintjs/core';
+import { useState } from 'react';
 
 type SettingsPopupProps = {
   backend: string
@@ -8,6 +9,8 @@ type SettingsPopupProps = {
 };
 
 export default function SettingsPopup(props: SettingsPopupProps) {
+  const [backendText, setBackendText] = useState(props.backend);
+
   return <Card>
     <div style={{
       display: 'flex',
@@ -20,11 +23,14 @@ export default function SettingsPopup(props: SettingsPopupProps) {
         flexDirection: 'row',
         justifyContent: 'space-between'
       }}>
-        <p>Modules Backend:</p>
-        <EditableText value={props.backend}
+        <p>Modules Backend:  </p>
+        <EditableText value={backendText}
+          alwaysRenderInput
+          onChange={setBackendText}
           onConfirm={v => {
             if (props.onBackendChange) props.onBackendChange(v);
           }}
+          onCancel={() => setBackendText(props.backend)}
         />
       </div>
       <br/>

devserver/vite.config.ts

@@ -25,6 +25,30 @@ export default defineConfig(({ mode }) => {
         include: ['path']
       }),
       react(),
+      // TODO: Investigate how to include bundles into hot reload
+      // {
+      //   name: 'Bundle Provider',
+      //   resolveId(source) {
+      //     const RE =  /^@sourceacademy\/bundle-.+(?:$|\/(.+)$)/
+      //     const match = RE.exec(source);
+          
+      //     if (source.startsWith('@sourceacademy')) {
+      //       console.log('trying to resolve', source)
+      //     }
+
+      //     if (!match) return undefined;
+
+      //     const [, bundleName, path] = match!;
+      //     if (!path) {
+      //       const newPath = pathlib.resolve(import.meta.dirname, '../src/bundles', bundleName, 'src/index.ts')
+      //       console.log('oldPath', source, 'newPath', newPath)
+      //     } else {
+      //       const newPath = pathlib.resolve(import.meta.dirname, '../src/bundles', bundleName, 'src', `${path}.ts`)
+      //       console.log('oldPath', source, 'newPath', newPath)
+      //     }
+      //     return undefined;
+      //   }
+      // }
     ],
     resolve: {
       preserveSymlinks: true,