Update libs and docs about focused installations

Author: leeyi45

docs/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "yarn build-lib-docs && vitepress build .",
     "build-lib-docs": "yarn workspaces foreach -A --include \"@sourceacademy/modules-lib\" run docs",
-    "dev": "node ./runner.js",
+    "dev": "vitepress dev .",
     "postinstall": "yarn build-lib-docs",
     "preview": "vitepress preview ."
   },

docs/src/buildtools/1-devenv.md

@@ -17,8 +17,8 @@ yarn workspaces focus @sourceacademy/modules-buildtools
 Compiling the build tools is as simple as running `yarn build`. This by default produces a minified Javascript file, which is not very conducive to debugging. If necessary
 you can run `yarn build --dev` instead to produce a non-minified build.
 
-For the projects that are supposed to be bundled into a single file using `esbuild`, the package `@sourceacademy/lib-compiler` wraps `esbuild` and `commander` to create a
-easy to use compiler.
+For the projects that are supposed to be bundled into a single file using `esbuild`, the package `@sourceacademy/modules-repotools` exports a function that 
+wraps `esbuild` and `commander` to create a easy to use compiler.
 
 ## Testing
 

docs/src/modules/1-getting-started/2-start.md

@@ -25,8 +25,17 @@ This may prompt you to download the version of Yarn that this repository uses.
 >
 > `corepack enable` should automatically install the version of Yarn used by the repository, but if you face issues using `corepack`, you can still use `npm` to install Yarn. You will however, need to run
 > `yarn set version` to change to the correct version of Yarn before working with the repository.
+>
+> If that is the case, you must take care **not** to commit the `yarnPath` changes that will be made to the `.yarnrc.yml` file.
+
+## 4. Install the root package's dependencies
+
+Run the following command to ensure that dependencies like `eslint` get installed correctly:
+```sh
+yarn workspaces focus @sourceacademy/modules
+```
 
-At this point it is not necessary to run `yarn install` yet to install dependencies. Depending on what you are doing, there are different methods for installing dependencies.
+At this point it is not necessary to run `yarn install` yet to install any other dependencies. Depending on what you are doing, there are different methods for installing dependencies.
 
 ## Next Steps
 

docs/src/modules/1-getting-started/3-git.md

@@ -9,6 +9,15 @@ When making changes to the code in this repository, you should abide by some goo
 - Commit often with informative commit messages
 - Run the `pre-push` Git Hook before pushing so that your code is verified locally
 
+> [!TIP] Lockfiles
+> Package managers such as `yarn` and `npm` use a single file called the lockfile to keep track of the dependencies and their dependencies and so on.
+> Since this repository uses Yarn, the lockfile we use is `yarn.lock`.
+>
+> There is always only one lockfile. Even if you use focused installs or add a dependency to a single package, `yarn.lock` will be modified.
+>
+> When you add a dependency to your bundle/tab, remember to run your installation command to ensure that the lockfile gets updated, and then
+> commit the changes to the lockfile.
+
 ## Creating your own branch
 
 The `master` branch of the repository is protected. This means that you cannot push commits directly to it, nor can pull requests be merged

docs/src/modules/1-getting-started/4-cheat.md

@@ -40,7 +40,14 @@ All commands have a `-h` or `--help` option that can be used to get more informa
   </tbody>
 </table>
 
-\* Will add packages to the root repository. Only do this if you are adding or updating a constraint for the entire repository.
+> [!WARNING] Adding Dependencies
+> `yarn add` will add the dependencies to the package whose directory this command is being run under. For example,
+> if you run `yarn add` from `src/bundles/curve`, then the dependencies get added to the curve bundle.
+>
+> However, if you run `yarn add` from the root of the repository, then the dependencies get added to the
+> `@sourceacademy/modules` package instead.
+>
+> Be careful of where you run this command so as to avoid extraneous dependencies being added to the wrong packages.
 
 ## Bundle or Tab Specific Commands
 
@@ -62,7 +69,10 @@ These commands are only applicable to bundles or tabs and should only be run fro
     </tr>
     <tr>
       <td><nobr><code>yarn build --tsc</code></nobr></td>
-      <td>Same as <code>yarn build</code> but also runs <code>tsc</code> for type checking</td>
+      <td>
+        Same as <code>yarn build</code> but also runs <code>tsc</code> for type checking. <br/>
+        For bundles, this will also output the library form of the bundle
+      </td>
     </tr>
     <tr>
       <td><nobr><code>yarn build --lint</code></nobr></td>
@@ -76,13 +86,36 @@ Both the `--tsc` and `--lint` options can be used togther to run `tsc` and ESLin
 ### Prebuild and Testing
 
 <ins>Prebuild</ins> refers to commands that are to be run **before** the build/compilation commands are executed.
-
-| Command                   | Purpose                                                       |
-|---------------------------|---------------------------------------------------------------|
-| `yarn lint`               | Run ESLint                                                    |
-| `yarn tsc`                | Run `tsc`                                                     |
-| `yarn prebuild`           | Run both ESLint and `tsc` without running any builds          |
-| `yarn test`               | Run any unit tests defined for the current bundle/tab         |
+<table>
+  <thead>
+    <tr>
+      <th>Command</th>
+      <th>Purpose</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>yarn lint</code></td>
+      <td>Run ESLint on the bundle's/tab's code</td>
+    </tr>
+    <tr>
+      <td><code>yarn tsc</code></td>
+      <td>Run the typescript compiler. For bundles, this will <br/> also output the library form of the bundle.</td>
+    </tr>
+    <tr>
+      <td><code>yarn prebuild</code></td>
+      <td>Run both ESLint and <code>tsc</code> <strong>without</strong> running any builds</td>
+    </tr>
+    <tr>
+      <td><code>yarn test</code></td>
+      <td>Run any unit tests defined for the bundle/tab</td>
+    </tr>
+    <tr>
+      <td><code>yarn serve</code></td>
+      <td>Start the modules server</td>
+    </tr>
+  </tbody>
+</table>
 
 #### NOTES
 
@@ -122,6 +155,13 @@ In general, global scripts for this repository follow the same format.
 - `:libs` will be run for all code under the `lib` folder (common modules libraries)
 - `:modules` will be run for all bundle and tab code
 
+> [!WARNING] On Focused Installs
+> If you used a focus install, the dependencies for the other bundles and tabs will not be available. In fact, the root
+> repository's package may not have been installed either.
+>
+> This means that many of the `:all` and `:modules` commands will not work. You should use the bundle or tab specific
+> commands instead.
+
 <table>
   <thead>
     <tr>

docs/src/modules/1-getting-started/6-troubleshooting.md

@@ -17,8 +17,11 @@ You will need to delete the `node_modules` folder and rerun your installation co
 Especially if you've worked with other Javascript/Typescript projects before, you might find that `corepack enable` is a command that
 does not seem to work (or work permanently) for you.
 
+For example, you might find that `corepack enable` has no effect and the version of Yarn being used is an incorrect version when you run commands.
+
 Things to check for:
 
 - Remove any errant `package.json` or `.yarnrc.yml` files in places like your home directory or elsewhere.
-- Run `npm uninstall -g yarn` if you previously installed Yarn using installed `npm`.
-- For people running Windows, `corepack enable` is a command that needs to be run using administrator privileges. If this is not possible for you, there are [workarounds](https://github.com/nodejs/corepack?tab=readme-ov-file#corepack-enable--name).
+- Run `npm uninstall -g yarn` if you previously installed Yarn globally using installed `npm`.
+- For people running Windows, `corepack enable` is a command that needs to be run using administrator privileges.
+If this is not possible for you, there are [workarounds](https://github.com/nodejs/corepack?tab=readme-ov-file#corepack-enable--name).

docs/src/modules/2-bundle/3-editing.md

@@ -47,6 +47,17 @@ This adds the dependency to `devDependencies` instead.
 > yarn add @sourceacademy/modules-lib@workspace:^
 > ```
 
+You can also add the dependency directly by modifying your `package.json`:
+```jsonc {4}
+{
+  "name": "@sourceacademy/bundle-bundle0",
+  "dependencies": {
+    "lodash": "^4.0.0"
+  }
+}
+```
+If you do so, remember to run your installation command (same as the one above) to update the lockfile.
+
 ### React Within bundles
 
 Currently, the way bundles are loaded by `js-slang` means that React cannot be externalized for bundles. `js-slang` simply has no way to provide React

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

@@ -47,6 +47,17 @@ This adds the dependency to `devDependencies` instead.
 > yarn add @sourceacademy/modules-lib@workspace:^
 > ```
 
+You can also add the dependency directly by modifying your `package.json`:
+```jsonc {4}
+{
+  "name": "@sourceacademy/bundle-bundle0",
+  "dependencies": {
+    "lodash": "^4.0.0"
+  }
+}
+```
+If you do so, remember to run your installation command (same as the one above) to update the lockfile.
+
 ## 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,

docs/src/modules/3-tabs/6-devserver/6-devserver.md

@@ -0,0 +1,30 @@
+# Running from the Desktop
+
+It is possible to run `js-slang` directly from the desktop using the `js-slang` command line. However, this is only really useful for bundles, as `js-slang` from
+the command line cannot display tabs.
+
+You will need to change which module backend is in use using the `--modulesBackend` parameter.
+
+If your package already depends on `js-slang`, then you can already run `js-slang` from the command line using `yarn js-slang`.
+
+If not, you can either add `js-slang` to your dev dependencies, or you can install the root repository package.
+
+## The Modules Server
+
+All modules related files are served from a single HTTP server. For `js-slang` to be able to access your local modules copies, you will have to run a local version
+of this server and then point `js-slang` to it.
+
+The `yarn buildtools serve` command will start a HTTP server and serve the `build` directory, which is where your bundle/tab should've been output to after compilation.
+
+If need be, you can use the `--port` option or the `PORT` environment variable to change what port the server listens on, the default being 8022.
+
+Similarly, `--bind` can be used to change which interface the server listens on.
+
+> [!WARNING] On Focused Installs
+> The HTTP server is provided by the buildtools and thus is only available within packages that have installed the buildtools. If you used
+> a focused Yarn install, then the `serve` command is only available within your bundle's/tab's package.
+>
+> Using a focused install also means that other bundles and tabs are not available for use during your testing, as they will not be compiled.
+>
+> If the `serve` command is unavailable for whatever reason, you can install it with the root repository using
+> `yarn workspaces focus @sourceacademy/modules` and then run `yarn serve` from the root repository.