Try to fix devserver tests failing

Author: leeyi45

README.md

@@ -1,99 +1,45 @@
-# Modules
+# Source Academy Modules Repository
 
-![License](https://img.shields.io/badge/License-Apache%202.0-brightgreen) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/source-academy/modules/github%20pages?label=Build)
+![License](https://img.shields.io/badge/License-Apache%202.0-brightgreen) [![pages-build-deployment](https://github.com/source-academy/modules/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/source-academy/modules/actions/workflows/pages/pages-build-deployment)
 
-This repository contains the default modules of the Source Academy and their documentation, deployed to the default module site at <https://source-academy.github.io/modules>.
+This repository contains the default modules of the Source Academy and their documentation, alongside all the libraries and tooling required for development.
 
 The [Source Academy](https://sourceacademy.org) and [Source Academy @ NUS](https://sourceacademy.nus.edu.sg) are configured to access the default module site when evaluating `import` directives.
 
-[Documentation of Source Academy modules](https://source-academy.github.io/modules/documentation).
-
-## Information for Module Developers
-
-See the modules [wiki](https://github.com/source-academy/modules/wiki) for more details.
-
-### Terminology
-
-| **Term**   | **Description**                                                    |
-| ---------- | ------------------------------------------------------------------ |
-| **Module** | A set of **one** bundle _with the same name_ and **some/no** tabs. |
-| **Bundle** | The suite of functions that are provided by the module.            |
-| **Tab**    | A user interface used by the module.                               |
-
-### Getting Started
-
-The following set of instructions explain how to clone and set up a copy of the `modules` code repository on your local development machine. Following the steps below will create a  `modules` directory in your local development machine and install the necessary dependencies of the project.
-
-The recommended version of [Node.js](https://nodejs.org/en/) for local development is Node.js 20. You may use a Node.js version manager such as [nvm](https://github.com/creationix/nvm#installation) _(macOS/Linux)_ or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node.js versions between different projects.
-
-This project also uses [Yarn](https://yarnpkg.com/) as a package manager. You may install and enable Yarn by running the following command.
-```bash
-corepack enable
-```
-
-If the above does not work, you can manually install the Yarn package manager through [NPM](https://www.npmjs.com/) using the following command.
-
-```bash
-npm install -g yarn
-```
-
-You may also require [Python](https://www.python.org/downloads/) to run build scripts and install project dependencies. We recommend either using Python 2.7 or Python 3.8-3.11.
-
-Clone the repository on your local development machine and navigate to it using your favourite command line or shell tool.
-
-```bash
-git clone https://github.com/source-academy/modules.git
-cd modules
-```
-
-Install all the dependencies of the project into `node_modules` in the root folder of your project directory.
-
-```bash
-yarn install
-```
-
-If you encounter errors with esbuild dependencies like the following while building:
-
-```plaintext
-Error: The package "@esbuild/darwin-arm64" could not be found, and is needed by esbuild.
+## Quick Links
+| Site | Link |
+| ---- | ---- |
+| Source Academy | https://sourceacademy.org |
+| Default Modules Deployment | https://source-academy.github.io/modules |
+| Default Modules Documentation | https://source-academy.github.io/modules/documentation |
+| Developer Wiki | https://github.com/source-academy/modules/wiki |
+| `js-slang` | https://github.com/source-academy/js-slang |
+| Frontend | https://github.com/source-academy/frontend |
+
+If you are looking for the documentation for the default modules, they can be found [here](https://source-academy.github.io/modules/documentation).
+
+If you are a developer working with this repository, the developer documentation can be found [here](https://github.com/source-academy/modules/wiki)
+
+## Repository Structure
+The repository is designed as a monorepo, managed using Yarn workspaces.
+
+```txt
+.
+├── .github            // Configuration for issue templates and workflows
+├── .husky             // Configuration for code that runs on Git Hooks
+├── .vscode            // Configuration for VSCode integration
+├── build              // Output directory for compiled assets
+├── devserver          // Modules Development Server
+├── docs               // Developer Documentation and Server
+├── lib                
+│   ├── buildtools     // Scripts for compiling bundles and tabs
+│   ├── lintplugin     // ESLint Plugin for SA Modules
+│   └── modules-lib    // Common utilities and React components for SA Modules
+├── src
+│   ├── bundles        // Source code for Bundles
+│   ├── tabs           // Source code for Tabs
+│   └── java           // Assets for Source Java
+├── eslint.config.js   // ESLint configuration for the entire repository
+├── vitest.config.js   // Vitest configuration for the entire repository
+└── yarn.config.cjs    // Yarn constraints configuration
 ```
-
-You will need to delete the `node_modules` folder and rerun `yarn install` to fix the issue.
-
-### Serve Modules
-
-The following set of instructions explain how to transpile and serve the modules from your local development machine's code repository. Following the steps below will transpile all the modules in your project directory into JavaScript files located in the `build` folder. Thereafter, you will serve all the contents of the build folder in a server on your local development machine.
-
-To transpile the modules' files from `src` into JavaScript files in `build`, run the following command.
-
-```bash
-yarn run build:all
-```
-
-To start the server that serves all the contents of the `build` folder in the root directory of the project, run the following command. By default, running this command serves the contents of the `build` folder on <http://localhost:8022>.
-
-```bash
-yarn run serve
-```
-
-### Development with Source Academy `frontend`
-
-The following set of instructions explains how to use a local copy of the Source Academy [frontend](https://github.com/source-academy/frontend) with a local copy of the modules code repository. Following the steps below will configure the environment of the Source Academy frontend to use your locally served modules instead of the publicly available ones. Doing this will allow you to develop and modify modules without affecting the currently publicly available ones.
-
-You will need to already have a local instance of Source Academy frontend set up. If you do not, you can follow the instructions [here](https://github.com/source-academy/frontend#getting-started) to setup an instance of Source Academy frontend on your local development machine.
-
-Ensure that the environment variable `REACT_APP_MODULE_BACKEND_URL` in the `.env` file of the Source Academy frontend is configured to the URL of the module site that you are trying to retrieve modules from. At the same time, make sure that the server hosting the modules site is running. By default, the local server started by running `yarn run serve` is on <http://localhost:8022>. The default modules are implemented in the repository <https://github.com/source-academy/modules> and deployed to the modules site <https://source-academy.github.io/modules>.
-
-Upon starting the local instance of Source Academy frontend, the Source Academy will connect to the configured modules site.
-
-### Development Guide
-
-Please refer to the Modules Development Guide located in the modules wiki [here](https://github.com/source-academy/modules/wiki/Development-Guide) for more information regarding how to create your own module including its own bundle and tab.
-
-## License
-
-[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-
-All sources in this repository are licensed under the [Apache License Version 2][apache2].
-
-[apache2]: https://www.apache.org/licenses/LICENSE-2.0.txt

devserver/vite.config.ts

@@ -69,6 +69,9 @@ export default defineConfig(({ mode }) => {
           "vite-plugin-node-polyfills/shims/buffer",
           "vite-plugin-node-polyfills/shims/global",
           "vite-plugin-node-polyfills/shims/process",
+        ],
+        exclude: [
+          '../build/tabs/*.js'
         ]
       },
       test: {

docs/package.json

@@ -5,12 +5,14 @@
   "version": "1.0.0",
   "type": "module",
   "devDependencies": {
+    "@sourceacademy/modules-lib": "workspace:^",
     "vitepress": "^1.6.3",
     "vitepress-sidebar": "^1.31.1"
   },
   "scripts": {
     "build": "vitepress build .",
     "dev": "vitepress dev .",
-    "preview": "vitepress preview ."
+    "preview": "vitepress preview .",
+    "prepare": "yarn workspaces foreach -A --include \"@sourceacademy/modules-lib\" run docs"
   }
 }

docs/src/index.md

@@ -3,9 +3,8 @@
 layout: home
 
 hero:
-  name: "Modules Developer Documentation"
-  text: "Developer documentation for the Source Academy modules repository"
-  tagline: My great project tagline
+  name: Modules Developer Documentation
+  tagline: Developer documentation for the Source Academy modules repository
   actions:
     - theme: brand
       text: Get Started
@@ -17,15 +16,18 @@ hero:
       link: /api-examples
 
 features:
-  - title: Creating a bundle or tab
+  - title: Your first bundle or tab
     details: Instructions for creating a bundle or tab
-    link: /modules/getting-started/start
+    link: /modules/1-getting-started/1-overview
 
-  - title: Common Modules Library
-    details: idk
+  - title: Common Modules Libraries
+    details: Libraries intended to be shared between SA Modules
     link: /lib
 
   - title: Build Tools
-    details: Details behind the tooling that compiles Source Academy modules
+    details: Details behind the tooling that compiles SA Modules
     link: /buildtools
+
+  - title: Repository Tools
+    details: Details for the tools used to aid in developing SA Modules
 ---

docs/src/lib/lintplugin.md renamed to docs/src/lib/lintplugin/1-overview.md

@@ -1,3 +1,6 @@
+---
+title: Overview
+---
 # Modules ESLint Plugin
 `@sourceacademy/modules-lintplugin` provides the ability for developers to write their own custom linting rules for SA Modules.
 

docs/src/lib/lintplugin/2-rules.md

@@ -0,0 +1,58 @@
+# Rules Reference
+
+## `tab-type`
+
+Enforces that types have a default export using the `defineTab` helper.
+
+Examples of **incorrect** code for this rule:
+```tsx
+export default 0;
+
+export default {
+  body: () => <Component />,
+  toSpawn: () => false,
+  iconName: 'icon',
+  label: 'tab'
+}
+```
+Examples of **correct** code for this rule:
+```tsx
+import { defineTab } from '@sourceacademy/modules-lib/tabs';
+
+export default defineTab{
+  body: () => <Component />,
+  toSpawn: () => false,
+  iconName: 'icon',
+  label: 'tab'
+});
+```
+
+The rule considers the code below **correct** even if the import is aliased:
+```tsx
+import { defineTab as tabHelper } from '@sourceacademy/modules-lib/tabs';
+
+export default tabHelper({
+  body: () => <Component />,
+  toSpawn: () => false,
+  iconName: 'icon',
+  label: 'tab'
+});
+```
+
+## Options
+This rule accepts a configuration array with two elements:
+- The first option represents the expected import source. This is by default `@sourceacademy/modules-lib/tabs` but can be changed to whatever is in use
+- The second option is the name of the imported helper. This is by default `defineTab`.
+
+Examples of **correct** code using these options:
+```tsx
+/* eslint @sourceacademy/tab-type: ['error', '@sourceacademy/modules-lib/tabs/utils', 'tabHelper'] */
+import { tabHelper } from '@sourceacademy/modules-lib/tabs/utils';
+
+export default tabHelper({
+  body: () => <Component />,
+  toSpawn: () => false,
+  iconName: 'icon',
+  label: 'tab'
+});
+```

docs/src/lib/lintplugin/index.md

@@ -0,0 +1,3 @@
+---
+title: ESLint Plugin
+---

docs/src/modules/1-getting-started/1-overview.md

@@ -1,5 +1,8 @@
 # Modules Overview
-This page contains information regarding the overview of the Source Modules system. 
+This page contains information regarding the overview of the Source Modules system. If you want to skip this overview, navigate to the bottom of the page
+where the **next page** button is located.
+
+## Terminology
 
 The module system imitates ESM Javascript, allowing the use of `import` statements to import external code into Source programs:
 
@@ -9,8 +12,6 @@ import { draw_connected } from 'curve';
 > [!NOTE]
 > If you're familiar with the Javascript ecosystem, you may know that there are other module formats that are in common use. Source Modules are written in the ECMAScript _(ESM)_ format (i.e using `import` and `export`). However, there are limitations. For example, top-level await is not supported.
 
-## Terminology
-
 These are the 3 main terms the project will be using to refer to the individual components of the Source Modules system. Please follow the set of definitions below to avoid any inconsistencies. 
 | **Term**   | **Description**                                                    | **Links**        |
 | ---------- | ------------------------------------------------------------------ | ---------------- |

docs/src/modules/2-bundle/1-overview/1-overview.md

@@ -134,6 +134,10 @@ This file controls the behaviour of Typescript. By default, it should look like
 ```
 In general, there should not be a need for you to modify this file.  A full explanation on how to use `tsconfig.json` can be found [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). Note that the `typedocOptions` field is a custom field used by `typedoc` for its configuration. Refer to [here](https://typedoc.org/documents/Options.Configuration.html#compileroptions) for more information.
 
+> [!WARNING]
+> You should not remove or modify the `typedocOptions` section from your `tsconfig.json` unless you provide the name of your bundle to Typedoc via its other configuration methods. Generating documentation for your bundle
+> requires that the name of your bundle be set correctly.
+
 ::: details Missing types for dependencies and overriding `tsconfig.json`
 Sometimes, your bundle might depend on packages that have published their types differently. For example, the `communication` bundle requires `mqtt`:
 ```ts