Merge branch 'main' into overwrite-fix

Author: heyzec

README.md

@@ -1,31 +1,62 @@
-# VS Code
+# Source Academy & VS Code
 
-Experimental project for running Source Academy within Visual Studio Code.
+<p align="center">
+   <img src="./assets/icon.png" width="150">
+</p>
 
-## How to use
+A Visual Studio Code extension for integration with [Source Academy](https://about.sourceacademy.org), an online experiential environment for computational thinking.
 
-TODO: Add instructions
+It is available in the VS Code [Extension Marketplace](https://marketplace.visualstudio.com/items?itemName=source-academy.source-academy).
 
-## Notes to developers
+## Features
 
-### Running the extension in dev mode
+- View, edit, and submit assessments
+- Syntax highlighting for Source
+- Integration with our [language server for Source](https://github.com/source-academy/source-lsp), which provides smart features such as:
+  - Error checking
+  - Code completion
+  - Hover documentation
 
-1. Setup the project
-   ```
-   yarn
-   ```
-1. Compile
-   ```
-   yarn compile
-   ```
-1. Run the extension in debug mode by opening the root folder a VSCode window, then "Start Debugging" (or press F5).
+## Installing
 
-### Publishing the extension
+If you don't have VS Code installed yet, download it from [here](https://code.visualstudio.com/docs/setup/setup-overview) first.
 
-For a new release, update the version in `package.json` and tag the commit. Push the commit and the tag to the repo,
-which will trigger GitHub Actions to build and publish the extension to Releases tab and the Marketplace.
+From within VS Code,
+
+1. Click on the Extensions icon on the left sidebar or the `View: Show Extensions` command (`Ctrl+Shift+X`).
+2. Search for "Source Academy" and install it.
+
+We'd recommend also installing the [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) extension
+to show diagnostic messages more prominently.
+
+## Getting started
+
+_If you don't have an existing Source Academy account, you can try out our public frontend. See section [Changing the frontend](#changing-the-frontend)._
+
+After installing the extension,
+
+1. Click on the newly-added Source Academy icon on the left sidebar.
+2. Launch the Source Academy panel.
+
+<img src="./docs/images/launch-panel-from-sidebar.png" width="600">
+
+Alternatively, use the `Source Academy: Show the Source Academy Panel` command.
+
+Once the panel loads, you'll be prompted to log in. Afterwards, begin coding by opening any assessment.
+
+### Changing the frontend
+
+To use a different Source Academy frontend, modify the Frontend Base URL setting:
+
+1. Press `Ctrl + ,` to open VS Code's settings page, then search for `frontendBaseUrl`.
+2. Enter a valid URL.
+
+Example value (public frontend):
 
 ```
-npm version (major|minor|patch)
-git push origin main --tags
+https://sourceacademy.org
 ```
+
+## For developers
+
+Check out our [developer guide](./docs/developer-guide.md) for instructions to setup and run the extension from source.

assets/icon.png

@@ -0,0 +1,23 @@
+# Developer Guide
+
+## Running the extension in dev mode
+
+1. Setup the project
+   ```
+   yarn
+   ```
+1. Compile
+   ```
+   yarn build
+   ```
+1. Run the extension in debug mode by opening the root folder a VS Code window, then "Start Debugging" (or press F5).
+
+## Publishing the extension
+
+For a new release, update the version in `package.json` and tag the commit. Push the commit and the tag to the repo,
+which will trigger GitHub Actions to build and publish the extension to Releases tab and the Marketplace.
+
+```
+npm version (major|minor|patch)
+git push origin main --tags
+```

assets/icon.svg

@@ -1,11 +1,14 @@
 {
   "name": "source-academy",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "publisher": "source-academy",
   "license": "Apache-2.0",
   "displayName": "Source Academy",
   "description": "VS Code extension for Source Academy",
-  "repository": "https://github.com/source-academy/vscode",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/source-academy/vscode"
+  },
   "categories": [
     "Programming Languages",
     "Education"
@@ -37,6 +40,11 @@
           "type": "string",
           "default": "https://frontend.cloud.heyzec.dedyn.io",
           "description": "URL to the Source Academy frontend"
+        },
+        "source-academy.workspaceFolder": {
+          "type": "string",
+          "default": ".sourceacademy",
+          "description": "Location to store code locally. If not absolute, it will be relative to the home directory."
         }
       }
     },
@@ -47,8 +55,8 @@
           ".sjs"
         ],
         "icon": {
-          "light": "assets/icon.png",
-          "dark": "assets/icon.png"
+          "light": "assets/icon.svg",
+          "dark": "assets/icon.svg"
         },
         "configuration": "./language-configuration.json"
       }
@@ -65,6 +73,31 @@
         "command": "source-academy.eval-editor",
         "key": "shift+enter"
       }
+    ],
+    "views": {
+      "source-academy": [
+        {
+          "id": "assessments",
+          "name": "Assessments",
+          "icon": "assets/icon.svg",
+          "contextualTitle": "Source Academy"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "source-academy",
+          "title": "Source Academy",
+          "icon": "assets/icon.svg"
+        }
+      ]
+    },
+    "viewsWelcome": [
+      {
+        "view": "assessments",
+        "contents": "Launch the Source Academy panel to begin coding.\n[Launch!](command:source-academy.show-panel)\nNavigate to Missions page to populate this panel."
+      }
     ]
   },
   "scripts-info": {

docs/developer-guide.md

@@ -2,6 +2,7 @@ import * as vscode from "vscode";
 import { runLanguagePicker } from "./language";
 import { evalEditor } from "./evalEditor";
 import { showPanel } from "./showPanel";
+import { navigate } from "./navigate";
 
 const EXTENSION_ID = "source-academy";
 
@@ -11,8 +12,9 @@ const EXTENSION_ID = "source-academy";
  */
 const commands = (context: vscode.ExtensionContext) => ({
   pick: () => runLanguagePicker(context),
-  "show-panel": () => showPanel(context),
+  "show-panel": (route?: string) => showPanel(context, route),
   "eval-editor": () => evalEditor(context),
+  navigate: (route: string) => navigate(context, route),
 });
 
 /**

docs/images/launch-panel-from-sidebar.png

@@ -0,0 +1,13 @@
+import * as vscode from "vscode";
+import { sendToFrontendWrapped } from "./showPanel";
+import Messages from "../utils/messages";
+
+export async function navigate(
+  context: vscode.ExtensionContext,
+  route: string,
+) {
+  const didNavigate = await sendToFrontendWrapped(Messages.Navigate(route));
+  if (!didNavigate) {
+    vscode.commands.executeCommand("source-academy.show-panel", route);
+  }
+}

package.json

@@ -12,8 +12,9 @@ import { setWebviewContent } from "../utils/webview";
 import config from "../utils/config";
 import { Editor } from "../utils/editor";
 import { FRONTEND_ELEMENT_ID } from "../constants";
-import { client } from "../extension";
+import { client, SOURCE_ACADEMY_ICON_URI } from "../extension";
 import _ from "lodash";
+import { treeDataProvider } from "../treeview";
 
 let panel: vscode.WebviewPanel | null = null;
 // This needs to be a reference to active
@@ -93,14 +94,23 @@ async function handleMessage(
       //   }
       //   activeEditor.replace(message.code, "Text");
       //   break;
+      case MessageTypeNames.NotifyAssessmentsOverview:
+        const { assessmentOverviews, courseId } = message;
+        context.globalState.update("assessmentOverviews", assessmentOverviews);
+        context.globalState.update("courseId", courseId);
+        treeDataProvider.refresh();
+        break;
     }
     console.log(`${Date.now()} Finish handleMessage: ${message.type}`);
   }
 
   handling = false;
 }
 
-export async function showPanel(context: vscode.ExtensionContext) {
+export async function showPanel(
+  context: vscode.ExtensionContext,
+  route?: string,
+) {
   let language: string | undefined = context.workspaceState.get("language");
   if (!language) {
     language = LANGUAGES.SOURCE_1;
@@ -125,7 +135,8 @@ export async function showPanel(context: vscode.ExtensionContext) {
     context.subscriptions,
   );
 
-  const frontendUrl = new URL("/playground", config.frontendBaseUrl).href;
+  const iframeUrl = new URL(route ?? "/playground", config.frontendBaseUrl)
+    .href;
 
   // equivalent to panel.webview.html = ...
   setWebviewContent(
@@ -139,7 +150,7 @@ export async function showPanel(context: vscode.ExtensionContext) {
     >
       <iframe
         id={FRONTEND_ELEMENT_ID}
-        src={frontendUrl}
+        src={iframeUrl}
         width="100%"
         height="100%"
         // @ts-ignore
@@ -149,18 +160,16 @@ export async function showPanel(context: vscode.ExtensionContext) {
     </div>,
   );
 
-  panel.iconPath = vscode.Uri.joinPath(
-    context.extensionUri,
-    "assets",
-    "icon.png",
-  );
+  panel.iconPath = SOURCE_ACADEMY_ICON_URI;
 }
 
 // TODO: Move this to a util file
 export async function sendToFrontendWrapped(message: MessageType) {
+  // TODO: This returning of status code shouldn't be necessary after refactor
   if (!panel) {
     console.error("ERROR: panel is not set");
-    return;
+    return false;
   }
   sendToFrontend(panel, message);
+  return true;
 }

src/commands/index.tsx

@@ -1,18 +1,23 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from "vscode";
+import { setupTreeView } from "./treeview";
 import { setupStatusBar } from "./statusbar/status";
-import { evalEditor } from "./commands/evalEditor";
 import { registerAllCommands } from "./commands";
 import { activateLspClient, deactivateLspClient } from "./lsp/client";
 import { LanguageClient } from "vscode-languageclient/node";
+import { canonicaliseLocation } from "./utils/misc";
+import config from "./utils/config";
 
 // TODO: Don't expose this object directly, create an interface via a wrapper class
 export let client: LanguageClient;
 
+export let SOURCE_ACADEMY_ICON_URI: vscode.Uri;
+
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
+  setupTreeView(context);
   registerAllCommands(context);
 
   context.subscriptions.push(setupStatusBar(context));
@@ -25,6 +30,27 @@ export function activate(context: vscode.ExtensionContext) {
   const info = context.globalState.get("info") ?? {};
 
   client.sendRequest("source/publishInfo", info);
+
+  SOURCE_ACADEMY_ICON_URI = vscode.Uri.joinPath(
+    context.extensionUri,
+    "assets",
+    "icon.svg",
+  );
+
+  // TODO: Prompt the user to make this folder the default, and then set back to the config store.
+
+  // Update user's workspace settings to associate .js to Source
+  const workspaceFolder = canonicaliseLocation(config.workspaceFolder);
+  if (
+    vscode.workspace.workspaceFolders
+      ?.map((wf) => wf.uri.fsPath)
+      .includes(workspaceFolder)
+  ) {
+    const workspaceConfig = vscode.workspace.getConfiguration();
+    workspaceConfig.update("files.associations", {
+      "*.js": "source",
+    });
+  }
 }
 
 // This method is called when your extension is deactivated