Reformat even more Markdown files

Author: RichDom2185

docs/src/lib/lintplugin/configs.data.ts

@@ -1,6 +1,6 @@
-import { URL } from 'url';
 import lintPlugin from '@sourceacademy/lint-plugin';
 import type { Linter } from 'eslint';
+import { URL } from 'url';
 
 /**
  * Represents the information about a single Rule

docs/src/modules/1-getting-started/5-faq.md

@@ -7,54 +7,65 @@ title: FAQ
 
 ## Infrastructure
 
-### Could you explain more on the infrastructure of the modules system? Especially regarding how the bundle and tabs communicate.
-> Could you perhaps explain more on the program structure? Especially on how they communicate to achieve what I need. 
-> And from what I currently understand, 
-> 1. `bundle/**/*.ts` is where we store all logical functions 
+### Could you explain more on the infrastructure of the modules system? Especially regarding how the bundle and tabs communicate
+
+> Could you perhaps explain more on the program structure? Especially on how they communicate to achieve what I need.
+> And from what I currently understand,
+>
+> 1. `bundle/**/*.ts` is where we store all logical functions
 > 2. `tabs/**/*.tsx` is where we use all the react and jsx which will be shown in the frontend
 
-A brief overview of the current infrastructure is explained [here](../4-advanced/flow/flow). However, I would like to explain in more detail how the `bundle` and `tab` interacts with `js-slang` and `cadet-frontend` respectively. 
+A brief overview of the current infrastructure is explained [here](../4-advanced/flow/flow). However, I would like to explain in more detail how the `bundle` and `tab` interacts with `js-slang` and `cadet-frontend` respectively.
+
+Firstly, a `bundle` is defined as the suite of functions that are provided by the module. More specifically, what we mean by this is that the bundle will provide all the functions and constants that are intended to be available for use by the cadet when programming in the Source language.
 
-Firstly, a `bundle` is defined as the suite of functions that are provided by the module. More specifically, what we mean by this is that the bundle will provide all the functions and constants that are intended to be available for use by the cadet when programming in the Source language. 
 ```ts
 import { init, install_filter, video_height, video_width } from 'pix_n_flix';
 
 install_filter((src, dest) => { /* implementation */ });
 init();
 ```
+
 An example of the code that makes use of a module written in the Source language is given above. The main objective of the `bundle` is to provide the behind the scenes implementation of the `install_filter`, `video_height`, `video_width` and `init` functions so that the cadet programming in Source language can use it as a black box. In the above example, you can find the implementations of the said functions [here](https://github.com/source-academy/modules/blob/master/src/bundles/pix_n_flix/index.ts). The `bundle` however, does not store all logical functions that is required by your module like those needed only by the tab that are not provided to the cadets.
 
-A `tab` on the other hand is more formally defined as an _optional_ user interface used by the module. A module can exist without a tab. The tab exists for developers of modules to make use of Source Academy's side content tabs to display user interfaces that are used with the module's bundle. The tab can optionally choose to make use of the result returned from the evaluation of the Source code. The tab can also even be entirely not dependent on the result from the evaluation of the Source code. So how then does the `tab` make use of information from the `bundle`? The tab does this through the use of an object from `cadet-frontend` called the `debuggerContext`. When constructing the side content tabs, we would occasionally want to make use of front-end data like the code that was evaluated, the result of the code evaluated and Source version used. On `cadet-frontend`, all these information is stored within the `debuggerContext` object which is defined [here](https://github.com/source-academy/cadet-frontend/blob/master/src/commons/workspace/WorkspaceTypes.ts). Hence, all tabs will receieve the object `debuggerContext` as a component prop. 
+A `tab` on the other hand is more formally defined as an _optional_ user interface used by the module. A module can exist without a tab. The tab exists for developers of modules to make use of Source Academy's side content tabs to display user interfaces that are used with the module's bundle. The tab can optionally choose to make use of the result returned from the evaluation of the Source code. The tab can also even be entirely not dependent on the result from the evaluation of the Source code. So how then does the `tab` make use of information from the `bundle`? The tab does this through the use of an object from `cadet-frontend` called the `debuggerContext`. When constructing the side content tabs, we would occasionally want to make use of front-end data like the code that was evaluated, the result of the code evaluated and Source version used. On `cadet-frontend`, all these information is stored within the `debuggerContext` object which is defined [here](https://github.com/source-academy/cadet-frontend/blob/master/src/commons/workspace/WorkspaceTypes.ts). Hence, all tabs will receieve the object `debuggerContext` as a component prop.
+
+An example of an implementation of this is from the `pix_n_flix` module. The implementation can be found [here](https://github.com/source-academy/modules/blob/master/src/bundles/pix_n_flix/index.ts). In the module, a function `init()` is provided to the Source programmer. The specifications of the `pix_n_flix` module requires this `init()` function to be applied as the last statement of the Source program. As a result, the `js-slang` evaluator will return the return value of the `init()` function which is a JavaScript object with the type signature shown below.
 
-An example of an implementation of this is from the `pix_n_flix` module. The implementation can be found [here](https://github.com/source-academy/modules/blob/master/src/bundles/pix_n_flix/index.ts). In the module, a function `init()` is provided to the Source programmer. The specifications of the `pix_n_flix` module requires this `init()` function to be applied as the last statement of the Source program. As a result, the `js-slang` evaluator will return the return value of the `init()` function which is a JavaScript object with the type signature shown below. 
 ```ts
 {
   toReplString: () => string;
   init: (video: HTMLVideoElement, canvas: HTMLCanvasElement, _errorLogger: () => void) => {};
 }
 ```
-As described in the paragraphs above, this return value of the `init()` function will be stored within the `debuggerContext` in `debuggerContext.result.value`. The `tab` associated with the rendering of the video and canvas element will then render the HTMLVideoElement and HTMLCanvasElement, before creating references to the respective elements and applying the `init()` function in `debuggerContext.result.value` in the component's `componentDidMount()` method. 
+
+As described in the paragraphs above, this return value of the `init()` function will be stored within the `debuggerContext` in `debuggerContext.result.value`. The `tab` associated with the rendering of the video and canvas element will then render the HTMLVideoElement and HTMLCanvasElement, before creating references to the respective elements and applying the `init()` function in `debuggerContext.result.value` in the component's `componentDidMount()` method.
 
 ## Set Up and Configuration
 
 ### How do we use our own local version of the js-slang interpreter with the modules?
-> I have made some code changes to js-slang library and I want to test them out with my own local modules. 
 
-To use your local `js-slang` interpreter with your local modules, you will need to follow the steps below. 
-1. Serve your modules on a local server, done by transpiling your modules into JavaScript (`yarn build`) and then serving them as static assets (`yarn serve`). The default url for the local server is `http://localhost:8022`. Note that `yarn serve` serves the contents of the `build` folder. 
+> I have made some code changes to js-slang library and I want to test them out with my own local modules.
+
+To use your local `js-slang` interpreter with your local modules, you will need to follow the steps below.
+
+1. Serve your modules on a local server, done by transpiling your modules into JavaScript (`yarn build`) and then serving them as static assets (`yarn serve`). The default url for the local server is `http://localhost:8022`. Note that `yarn serve` serves the contents of the `build` folder.
 2. Ensure that your local version of `js-slang` is linked to your local `cadet-frontend`. This is achieved by `yarn link` at the local `js-slang` root folder and `yarn link js-slang` at the local `cadet-frontend` root folder.
 3. Ensure that your `cadet-frontend` environment variable `REACT_APP_MODULE_BACKEND_URL` is set to the address of your locally served modules server (from step 1). Again, the default url for the local server is `http://localhost:8022`.
 4. Start your `cadet-frontend` web server locally to test your module.
 
 ### Is it possible to be using modules served from more than one location simultaneously?
+
 > I want to use my own modules served from `http://localhost:8022` and the official modules from `https://source-academy.github.io/modules` at the same time. Is it going to be possible?
 
 It is not possible to be retrieving the modules' JavaScript files from more than one place simultaneously. The endpoint to retrieve the modules' JavaScript files from is the one in `cadet-frontend` evironment variable `REACT_APP_MODULE_BACKEND_URL` in the `.env` file. If you are using the `js-slang` library without `cadet-frontend`, the default source will be `https://source-academy.github.io/modules`.
 
 ## Language Specifications
 
 ### Can a user on Source Academy import more than one module at once?
+
 > Am I able to run the following code in Source?
+
 ```ts
 import { function_a } from 'module_a';
 import { function_b } from 'module_b';
@@ -68,25 +79,29 @@ Yes this is possible.
 ## Tabs
 
 ### Why is my Tab not spawning on Source Academy?
+
 > Why is my tab not spawning on Source Academy? It is importing the functions but not spawning the tab.
 
 * Check that the `toSpawn()` function in the Tab's `index.ts` returns `true` in your context.
 * Check that the environment variable `REACT_APP_MODULE_BACKEND_URL` of the running `cadet-frontend` web server is set to the correct url.
 * Check that `modules.json` in the root folder of the modules repository contains your module and your tab and that it is spelled correctly (eg. `{ module: { tabs: [ "Tab" ] } }`).
-* Refresh your browser with empty cache and hard reload. 
+* Refresh your browser with empty cache and hard reload.
 * Build and restart your modules static server again with `yarn build` and `yarn serve`.
 
 ### How does the modules system handles css for the tabs?
+
 > How to include css styles in the module tabs?
 
-Currently, two options are supported. 
+Currently, two options are supported.
+
 * [Inline styles](https://www.w3schools.com/react/react_css.asp), where styles are added as an object to the react component's `style` prop
 * CSS inside JavaScript (eg. [Styled Components](https://styled-components.com/))
 
 ## Interaction with `js-slang`
 
 ### How can we switch to the Source interpreter rather than the Source transpiler?
-> I am modifying `js-slang`'s Source interpreter and need to change the mode of evaluation from the Source transpiler (default) to the Source interpreter. 
+
+> I am modifying `js-slang`'s Source interpreter and need to change the mode of evaluation from the Source transpiler (default) to the Source interpreter.
 
 Include `"enable verbose";` as the first line of your program. Other functions of this setting can be found [here](https://github.com/source-academy/js-slang/blob/master/README.md#error-messages).
 

docs/src/modules/2-bundle/2-creating/2-creating.md

@@ -1,18 +1,24 @@
 # Creating a Bundle
+
 This page contains instructions for creating a new bundle from scratch. If you are looking to edit an existing bundle refer to [these](../3-editing) instructions instead.
+
 ## Running the Template Command
+
 > [!TIP]
-> If necessary, before running the `template` command, you can run 
+> If necessary, before running the `template` command, you can run
+>
 > ```sh
 > yarn workspaces focus @sourceacademy/modules
 > ```
+>
 > to install **only** the dependencies required for creating your bundle.
 
 To create a new bundle, use the `template` command.
 
 ```sh
 yarn template
 ```
+
 This will start an interactive prompt that will help you through the process of creating a bundle.  Enter `module` to create a new bundle.
 
 ```txt
@@ -21,6 +27,7 @@ module
 ```
 
 Then enter the name of your new bundle. It must be in `snake_case`.
+
 ```txt
 What would you like to create? (module/tab)
 module
@@ -38,7 +45,9 @@ The command should have creates a new folder `src/bundles/new_bundle` with all t
 From there you can edit your bundle as necessary
 
 ## Naming your Bundle
+
 The name of your bundle is what Source users will import from to actually use your bundle:
+
 ```ts
 import { func } from 'new_bundle';
 ```

docs/src/modules/3-tabs/2-creating.md

@@ -1,15 +1,19 @@
 # Creating a Tab
+
 This page contains instructions for creating a new bundle from scratch. If you are looking to edit an existing bundle refer to [these](./3-editing) instructions instead.
 
 All tabs require at least one parent bundle. Before you create your tab, make sure you identify which bundle(s) are
 supposed to be the parent of your tab.
 
 ## Running the Template Command
+
 > [!TIP]
-> If necessary, before running the `template` command, you can run 
+> If necessary, before running the `template` command, you can run
+>
 > ```sh
 > yarn workspaces focus @sourceacademy/modules
 > ```
+>
 > to install **only** the dependencies required for creating your tab.
 
 To create a new tab, use the `template` command:
@@ -24,7 +28,9 @@ This will start an interactive prompt that will help you through the process of
 What would you like to create? (module/tab)
 tab
 ```
+
 Then enter the name of the parent bundle. It must be a bundle that already exists.
+
 ```txt
 What would you like to create? (module/tab)
 tab
@@ -34,6 +40,7 @@ new_module
 ```
 
 Then enter the name of your new tab. It must be in `PascalCase`.
+
 ```txt
 What would you like to create? (module/tab)
 tab

docs/src/modules/3-tabs/3-editing.md

@@ -1,23 +1,29 @@
 # Editing an Existing Tab
+
 This page contains instructions for modifying an existing tab. If you are creating a new tab from scratch, refer to [these](./2-creating) instructions instead.
 
 ## Installing Dependencies
+
 To install **only** the dependencies required by the tab you are modifying, use the command below:
 
 ```sh
 yarn workspaces focus @sourceacademy/Tab-[desired tab]
 ```
 
 ## Adding Dependencies
+
 Your tab may need other Javascript packages. To add a dependency to your tab, run the command below:
+
 ```sh
 yarn add [dependency]
 ```
 
 If the dependency does not need to be present during runtime, then use:
+
 ```sh
 yarn add --dev [dependency]
 ```
+
 This adds the dependency to `devDependencies` instead.
 
 > [!WARNING]
@@ -27,26 +33,30 @@ This adds the dependency to `devDependencies` instead.
 > [!NOTE]
 > There are certain dependencies that are common to all tab (like `react`). When adding such a dependency, remember to add the exact version
 > specified in the root repository `package.json`:
+>
 > ```sh
 > yarn add react@^18.3.1
 > ```
+>
 > You can also use the command `yarn constraints`  to check if you have incorrectly specified the version of a dependency.
 
 > [!NOTE]
 > When adding dependencies that originate from the repository (e.g `@sourceacademy/modules-lib`), use `workspace:^` as the given version:
+>
 > ```sh
 > yarn add @sourceacademy/modules-lib@workspace:^
 > ```
 
 ## React/UI Components
+
 Tabs are written using the React (JSX) syntax. In React, each UI element is referred to as a "component". Documentation on how to create UIs and use React can be found [here](https://react.dev). Where possible,
 you should aim to write components using the funcional syntax.
 
 ::: details Functional vs Class Components
 Traditionally, React's functional components could not be "stateful". If a component needed to store state, it had to be written as a [class component](https://react.dev/reference/react/Component).
 
 With the introduction of [hooks](https://react.dev/reference/react/hooks) in React 16, functional components could now be stateful and became the go-to method for writing React components. Officially, React now considers class components a legacy API and
-all new code should be written using the functional style. 
+all new code should be written using the functional style.
 
 Within this repository, many of the tabs were written before the introduction and widespread use of functional components. Regardless, you should be designing your components using the functional component syntax where possible.
 :::
@@ -67,11 +77,13 @@ in the root `tsconfig.json` used by tabs. `esbuild` reads from `tsconfig.json` a
 :::
 
 ### Components from the Common Library
+
 There are also several React components defined under `@sourceacademy/modules-lib/tabs` that perform functions common across tabs.
 
 You can see the documentation for these components [here](/lib/modules-lib/)
 
 ## Export Interface
+
 As mentioned in the [overview](./1-overview), all tabs should export a single default export from their entry point using the `defineTab` helper from `@sourceacademy/modules-lib/tabs`:
 
 ```tsx
@@ -96,6 +108,7 @@ if you do not use the `defineTab` helper or if your tab is missing the default e
 > [!TIP]
 > For the Devserver to be able to accurately detect the changes you make to your tab while in hot-reload mode, you should define your component
 > outside of the `body` property as in the example **above** and **not** within the property as in the example below:
+>
 > ```tsx
 > // incorrect example
 > export default defineTab({
@@ -110,6 +123,7 @@ if you do not use the `defineTab` helper or if your tab is missing the default e
 
 Only the default export is used by the Frontend for displaying your tab. It is not necessary to also export your components, but it can be done for testing:
 ::: code-group
+
 ```tsx [index.tsx]
 import { defineTab } from '@sourceacademy/modules-lib/tabs';
 
@@ -137,7 +151,9 @@ test('Matches snapshot', () => {
 :::
 
 ## Quick FAQs
+
 ### When to spawn the tab?
+
 As mentioned, the frontend will go through the list of tabs for the bundles currently loaded and determine if it should spawn those tabs. This is done
 by calling the tab's `toSpawn` function (if it exists). If the function is missing, then the tab is always spawned.
 
@@ -148,6 +164,7 @@ However, there are some cases where it makes sense to have the tab always spawn.
 So long as the `pix_n_flix` bundle is imported, the tab will be spawned.
 
 ### Can I update other UI elements in the frontend?
+
 Right now, the UI is only updated once per evaluation (a limitation on the side of the frontend). This means that if code from your tab calls functions
 like `display`, the output of those functions won't be displayed in the main REPL. The only elements that can be changed are elements within the tab.