Add Tab Functionality to the Plugins

.changeset/funny-gifts-learn.md

@@ -0,0 +1,5 @@
+---
+"@sourceacademy/web-test": patch
+---
+
+Add the `ITabService` argument and open a tab when it loads

.github/workflows/on_push.yml

@@ -22,6 +22,12 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: yarn run build
         run: yarn run build 
+      - name: Run tests
+        run: yarn run test-coverage
+      - name: Coveralls
+        uses: coverallsapp/github-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
@@ -35,18 +41,6 @@ jobs:
         with:
           path: dist/
 
-  test-coverage:
-    needs: build
-    name: Test coverage
-    runs-on: ubuntu-latest
-    steps:
-      - name: Run tests
-        run: yarn run test-coverage
-      - name: Coveralls
-        uses: coverallsapp/github-action@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-
   deploy:
     needs: test-coverage
     name: Deploy plugins

lib/build.ts

@@ -1,6 +1,6 @@
 import { Command } from "commander";
 import packageJSON from "../package.json" with { type: "json" };
-import fs from "fs/promises";
+import fs, { readFile, writeFile } from "fs/promises";
 import { spawn } from "child_process";
 import pathlib from "path";
 import type { IPluginDefinition } from "@sourceacademy/plugin-directory/dist/types/IPluginDefinition.js";
@@ -49,7 +49,7 @@ async function generateManifest() {
             resolutions: {},
           };
           pluginDirectory[folderName].resolutions[pluginType] =
-            "./" + pluginType + "/" + folderName + "/index.mjs";
+            "./" + pluginType + "/" + folderName + "/index.js";
         }
       }
       globalManifest[pluginType] = manifest;
@@ -58,7 +58,10 @@ async function generateManifest() {
   );
 
   // Write the plugin directory to the dist folder. This is used by the plugin loaders to load non-installable plugins.
-  await fs.writeFile(`dist/directory.json`, JSON.stringify(pluginDirectory, null, 2));
+  await fs.writeFile(
+    `dist/directory.json`,
+    JSON.stringify(Object.values(pluginDirectory), null, 2),
+  );
 
   // Update changeset config to ignore non-installable plugins
   const changesetConfig = await fs.readFile(".changeset/config.json", "utf-8");
@@ -134,6 +137,33 @@ async function build(extraArgs: string[] = []) {
     ),
   ]);
   await copyDistFiles();
+  await transform();
+}
+
+/**
+ * Transforms a particular external plugin to its final form
+ */
+async function transformSingle(path: string) {
+  if (path.endsWith("mjs")) {
+    return;
+  }
+  let file = (await readFile(path)).toString("utf-8");
+
+  // Create a mock "module" object, then return the exports
+  file = `export default require => {let module = {exports: {}}; let exports = module.exports; ${file}; return module.exports;}`;
+  await writeFile(path, file);
+}
+
+/**
+ * Transforms the plugins to its final form
+ * For external plugins, this wraps it in an "export default require => { ... }" or "export default import => { ... }"
+ */
+async function transform() {
+  const promises = [];
+  for await (const file of fs.glob(`./dist/*/*/index.*js`)) {
+    promises.push(transformSingle(file));
+  }
+  await Promise.all(promises);
 }
 
 // TO-DO: Add more options

src/common/tabs/manifest.json

@@ -0,0 +1,3 @@
+{
+  "type": "installable"
+}

src/common/tabs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@sourceacademy/common-tabs",
+  "version": "0.0.1",
+  "packageManager": "yarn@4.6.0",
+  "description": "Common utilities for tab loading in Source Academy",
+  "scripts": {
+    "build": "rollup -c",
+    "prepack": "yarn build"
+  },
+  "license": "ISC",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "rollup": "^4.60.2",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@blueprintjs/icons": ">=6.0.0",
+    "@types/react": "^19.2.17"
+  }
+}

src/common/tabs/rollup.config.mjs

@@ -0,0 +1,21 @@
+import nodeResolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: "dist/index.cjs",
+      format: "cjs",
+    },
+    {
+      file: "dist/index.mjs",
+      format: "esm",
+    },
+  ],
+  plugins: [nodeResolve(), typescript(), terser()],
+};

src/common/tabs/src/index.ts

@@ -0,0 +1,43 @@
+import type { IconName } from "@blueprintjs/icons";
+import type React from "react";
+
+/**
+ * The Tab interface represents a tab that can be registered with the tab service.
+ * It contains an id, title, and a React component that will be rendered when the tab is displayed.
+ * The id is used to identify the tab when it is registered and when it is displayed or hidden.
+ * The title is used to display the name of the tab in the UI.
+ * The tab component is the React component that will be rendered when the tab is displayed.
+ */
+export type Tab = {
+  label: string;
+  iconName: IconName;
+  body: React.ReactElement | null;
+  id: string;
+  disabled?: boolean;
+};
+
+export interface ITabService {
+  /**
+   * Registers a tab with the tab service. This allows for dynamic rendering of tabs based on the arguments passed in.
+   * The tab can be displayed by calling the showTab method with the id of the tab.
+   * @param tab The tab to be loaded
+   */
+  registerTab(tab: Tab): void;
+
+  /**
+   * Should be called when a tab is no longer needed. This allows the tab service to clean up any resources associated with the tab and prevent memory leaks.
+   * @param id The id of the tab to unregister.
+   */
+  unregisterTab(id: string): void;
+
+  /**
+   * The showTab method is used to display a tab that has been registered with the tab service. The tab is identified by its id, which is passed as an argument to the method. When the showTab method is called, the tab service will render the corresponding tab component with the arguments that were passed in when the tab was registered. This allows for dynamic rendering of tabs based on the arguments passed in.
+   * @param id The id of the tab to be displayed. This should correspond to the id of a tab that has been registered with the tab service.
+   */
+  showTab(id: string): void;
+
+  /**
+   * The hideTab method is used to hide a tab that is currently being displayed. The tab is identified by its id, which is passed as an argument to the method. When the hideTab method is called, the tab service will stop rendering the corresponding tab component, effectively hiding it from view. This allows for dynamic hiding of tabs based on user interactions or other events.
+   */
+  hideTab(id: string): void;
+}

src/common/tabs/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src"],
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "types": ["react"]
+  }
+}

src/runner/test/src/index.ts

@@ -1,5 +1,12 @@
 import { CHANNEL_ID, RUNNER_ID, type TestMessage } from "@sourceacademy/common-test";
-import type { IPlugin, IChannel, IConduit } from "@sourceacademy/conductor/conduit";
+import {
+  checkIsPluginClass,
+  type IChannel,
+  type IConduit,
+  type IPlugin,
+} from "@sourceacademy/conductor/conduit";
+
+@checkIsPluginClass
 export abstract class TestPlugin implements IPlugin {
   readonly id: string = RUNNER_ID;
   static readonly channelAttach = [CHANNEL_ID];

src/web/test/package.json

@@ -22,16 +22,24 @@
     }
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
+    "@sourceacademy/common-tabs": "workspace:^",
     "@sourceacademy/common-test": "workspace:*",
     "@sourceacademy/conductor": ">=0.3.0",
     "@types/jest": "^30.0.0",
+    "@types/react-dom": "^19",
     "jest": "^30.4.2",
     "rollup": "^4.60.2",
     "ts-jest": "^29.4.11",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@types/react": "^19.2.17",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   }
 }

src/web/test/rollup.config.mjs

@@ -1,12 +1,12 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
-
+import commonjs from "@rollup/plugin-commonjs";
 /**
  * @type {import('rollup').RollupOptions}
  */
 export default {
-  input: "src/index.ts",
+  input: "src/index.tsx",
   output: [
     {
       file: "dist/index.cjs",
@@ -17,5 +17,6 @@ export default {
       format: "esm",
     },
   ],
-  plugins: [nodeResolve(), typescript(), terser()],
+  plugins: [nodeResolve(), commonjs(), typescript(), terser()],
+  external: ["react", "react-dom", "react/jsx-runtime"],
 };

src/web/test/src/index.tsx

@@ -0,0 +1,41 @@
+import { CHANNEL_ID, WEB_ID, type TestMessage } from "@sourceacademy/common-test";
+import {
+  type IPlugin,
+  type IChannel,
+  type IConduit,
+  checkIsPluginClass,
+} from "@sourceacademy/conductor/conduit";
+import type { ITabService, Tab } from "@sourceacademy/common-tabs";
+
+@checkIsPluginClass
+export abstract class TestPlugin implements IPlugin {
+  readonly id: string = WEB_ID;
+  static readonly channelAttach = [CHANNEL_ID];
+  private readonly __testChannel: IChannel<TestMessage>;
+  constructor(
+    _conduit: IConduit,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [testChannel]: IChannel<any>[],
+    tabService: ITabService,
+  ) {
+    this.__testChannel = testChannel;
+    this.__testChannel.subscribe(message => {
+      console.log(message);
+    });
+    this.__testChannel.send("ping");
+    const tab = {
+      id: "test-tab",
+      iconName: "airplane",
+      body: (
+        <div>
+          This is a test tab
+          <button onClick={() => tabService.hideTab(tab.id)}>Click here to hide the tab!</button>
+        </div>
+      ),
+      label: "Test Tab",
+      disabled: false,
+    } satisfies Tab;
+    tabService.registerTab(tab);
+    tabService.showTab(tab.id);
+  }
+}

src/web/test/tsconfig.json

@@ -6,6 +6,7 @@
     "declaration": true,
     "outDir": "./dist",
     "rootDir": "./src",
-    "types": ["jest"]
+    "types": ["jest"],
+    "jsx": "react-jsx"
   }
 }

src/web/tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    // Tabs should never need to emit any kind of files
-    "declaration": false,
     "jsx": "react-jsx"
   }
 }