Redo modules-lib animations

Author: leeyi45

devserver/package.json

@@ -30,11 +30,11 @@
     "@types/react-dom": "^18.3.1",
     "@vitest/browser": "^3.2.3",
     "eslint": "^9.31.0",
-    "playwright": "^1.52.0",
+    "playwright": "^1.54.1",
     "sass": "^1.85.0",
     "typescript": "^5.8.2",
     "vitest": "^3.2.3",
-    "vitest-browser-react": "^0.2.0"
+    "vitest-browser-react": "^1.0.0"
   },
   "scripts": {
     "dev": "vite",

devserver/src/components/__tests__/__screenshots__/Playground.tsx/Playground-tests-Loading-tabs-via-Vite-1.png

@@ -1,4 +1,4 @@
-import { Card, Icon, Tab, Tabs, Tooltip, type TabProps } from '@blueprintjs/core';
+import { Card, Icon, Tab, Tabs, Tooltip, type IconName, type TabProps } from '@blueprintjs/core';
 import React from 'react';
 import type { SideContentTab } from './types';
 
@@ -28,23 +28,29 @@ export type SideContentProps = {
   onChange?: (newId: string, oldId: string) => void
 };
 
+interface TabIconProps {
+  iconName: IconName
+  tooltip: string
+  shouldAlert?: boolean
+}
+
+function TabIcon({ iconName, tooltip, shouldAlert }: TabIconProps) {
+  return <Tooltip content={tooltip}>
+    <div className={!shouldAlert ? 'side-content-tooltip' : 'side-content-tooltip side-content-tab-alert'}>
+      <Icon icon={iconName} iconSize={20} />
+    </div>
+  </Tooltip>;
+}
+
 const renderTab = (
   tab: SideContentTab,
   shouldAlert: boolean,
   _editorWidth?: string,
   _sideContentHeight?: number
 ) => {
-  const iconSize = 20;
-  const tabTitle = (
-    <Tooltip content={tab.label}>
-      <div className={!shouldAlert ? 'side-content-tooltip' : 'side-content-tooltip side-content-tab-alert'}>
-        <Icon icon={tab.iconName} iconSize={iconSize} />
-      </div>
-    </Tooltip>
-  );
   const tabProps: TabProps = {
     id: tab.id,
-    title: tabTitle,
+    title: <TabIcon iconName={tab.iconName} tooltip={tab.label} shouldAlert={shouldAlert} />,
     // disabled: tab.disabled,
     className: 'side-content-tab'
   };
@@ -53,17 +59,6 @@ const renderTab = (
     return <Tab key={tab.id} {...tabProps} />;
   }
 
-  // const tabBody: JSX.Element = workspaceLocation
-  //   ? {
-  //       ...tab.body,
-  //       props: {
-  //         ...tab.body.props,
-  //         workspaceLocation,
-  //         editorWidth,
-  //         sideContentHeight
-  //       }
-  //     }
-  //   : tab.body;
   const tabPanel: React.JSX.Element = <div className="side-content-text">{tab.body}</div>;
 
   return <Tab key={tab.id} {...tabProps} panel={tabPanel} />;

devserver/src/components/__tests__/__screenshots__/Playground.tsx/Playground-tests-Loading-tabs-via-Vite-2.png

@@ -1,10 +1,11 @@
 // Devserver Vite Config
 /// <reference types="@vitest/browser/providers/playwright" />
 
+import fs from 'fs/promises';
 import pathlib from 'path';
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { loadEnv, defineConfig } from 'vite'
+import { loadEnv, defineConfig, type UserConfig, type ResolverFunction } from 'vite'
 import { mergeConfig } from 'vitest/config';
 import type { BrowserCommand } from 'vitest/node';
 import rootConfig from '../vitest.config';
@@ -17,62 +18,63 @@ const setLocalStorage: BrowserCommand<[key: string, value: any]> = async (ctx, k
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
-  // const modulesDir = pathlib.resolve(import.meta.dirname, '..', 'build') 
 
-  return mergeConfig(
-    rootConfig, {
-      root: import.meta.dirname,
-      plugins: [
-        nodePolyfills({
-          include: ['path']
-        }),
-        react(),
-      ],
-      resolve: {
-        preserveSymlinks: true,
-        alias:[{
-          find: /^js-slang\/context/,
-          replacement: pathlib.resolve(import.meta.dirname, 'src', 'mockModuleContext.ts')
-        }]
-      },
-      /* Experimental for serving modules using the dev server
-      server: {
-        port: 8022,
-        strictPort: true,
-        proxy: {
-          '/modules': {
-            target: 'http://localhost:8022',
-            rewrite(path) {
-              const finalPath = path.replace('/modules', modulesDir)
-              return `/@fs/${finalPath}`
-            }
+  const viteConfig: UserConfig = {
+    root: import.meta.dirname,
+    plugins: [
+      nodePolyfills({
+        include: ['path']
+      }),
+      react(),
+    ],
+    resolve: {
+      preserveSymlinks: true,
+      alias: [{
+        find: /^js-slang\/context/,
+        replacement: pathlib.resolve(import.meta.dirname, 'src', 'mockModuleContext.ts')
+      }, {
+        // This alias configuration allows us to edit the modules library and the changes
+        // be reflected in real time when in hot-reload mode
+        find: /^@sourceacademy\/modules-lib\/tabs/,
+        replacement: '.',
+        async customResolver(source) {
+          const newSource = pathlib.resolve(import.meta.dirname, '../lib/modules-lib/src/tabs', source)
+          const extensions = ['.tsx', '.ts', '/index.ts']
+
+          for (const each of extensions) {
+            try {
+              await fs.access(`${newSource}${each}`, fs.constants.R_OK)
+              return `${newSource}${each}`
+            } catch {}
           }
+
+          return undefined;
         },
-        fs: {
-          allow: [
-            searchForWorkspaceRoot(import.meta.dirname),
-            modulesDir
-          ]
+      }],
+    },
+    define: {
+      'process.env': env
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        // Node.js global to browser globalThis
+        define: {
+          global: 'globalThis'
         }
       },
-      */
-      define: {
-        'process.env': env
-      },
-      optimizeDeps: {
-        esbuildOptions: {
-          // Node.js global to browser globalThis
-          define: {
-            global: 'globalThis'
-          }
-        },
-        include: [
-          "vite-plugin-node-polyfills/shims/buffer",
-          "vite-plugin-node-polyfills/shims/global",
-          "vite-plugin-node-polyfills/shims/process",
-          '../build/tabs/*.js'
-        ],
-      },
+      include: [
+        "vite-plugin-node-polyfills/shims/buffer",
+        "vite-plugin-node-polyfills/shims/global",
+        "vite-plugin-node-polyfills/shims/process",
+        '../build/tabs/*.js',
+        // '@sourceacademy/modules-lib/tabs'
+      ],
+    },
+  }
+
+  return mergeConfig(
+    rootConfig, {
+      ...viteConfig,
       test: {
         name: 'Dev Server',
         include: [

devserver/src/components/__tests__/__screenshots__/Playground.tsx/Playground-tests-Multiple-evaluations-1.png

@@ -1,14 +1,14 @@
 import { describe, expect, test } from 'vitest';
-import { Severity } from '../types.js';
+import type { Severity } from '../types.js';
 import { compareSeverity, filterAsync, findSeverity } from '../utils.js';
 
 describe('test findSeverity', () => {
   const cases: Severity[][] = [
-    [Severity.SUCCESS, Severity.SUCCESS, Severity.SUCCESS],
-    [Severity.WARN, Severity.SUCCESS, Severity.WARN],
-    [Severity.WARN, Severity.WARN, Severity.WARN],
-    [Severity.ERROR, Severity.ERROR, Severity.WARN],
-    [Severity.ERROR, Severity.ERROR, Severity.SUCCESS]
+    ['success', 'success', 'success'],
+    ['warn', 'success', 'warn'],
+    ['warn', 'warn', 'warn'],
+    ['error', 'error', 'warn'],
+    ['error', 'error', 'success']
   ];
 
   test.each(cases)('Expecting %s', (expected, ...args) => {
@@ -18,15 +18,15 @@ describe('test findSeverity', () => {
 
 describe('test compareSeverity', () => {
   const cases: [Severity, Severity, Severity][] = [
-    [Severity.SUCCESS, Severity.SUCCESS, Severity.SUCCESS],
-    [Severity.WARN, Severity.SUCCESS, Severity.WARN],
-    [Severity.WARN, Severity.WARN, Severity.SUCCESS],
-    [Severity.WARN, Severity.WARN, Severity.WARN],
-    [Severity.ERROR, Severity.SUCCESS, Severity.ERROR],
-    [Severity.ERROR, Severity.WARN, Severity.ERROR],
-    [Severity.ERROR, Severity.ERROR, Severity.ERROR],
-    [Severity.ERROR, Severity.ERROR, Severity.WARN],
-    [Severity.ERROR, Severity.ERROR, Severity.SUCCESS],
+    ['success', 'success', 'success'],
+    ['warn', 'success', 'warn'],
+    ['warn', 'warn', 'success'],
+    ['warn', 'warn', 'warn'],
+    ['error', 'success', 'error'],
+    ['error', 'warn', 'error'],
+    ['error', 'error', 'error'],
+    ['error', 'error', 'warn'],
+    ['error', 'error', 'success'],
   ];
 
   test.each(cases)('Expecting %s', (expected, lhs, rhs) => {