Part I

backend/src/langs.ts

@@ -1,3 +1,4 @@
+// Keep in sync with app.ts
 export interface LangConfig {
   aliases?: string[];
   name: string;

frontend/pages/app.ejs

@@ -17,7 +17,46 @@
       <div id="terminal" class="column"></div>
       <button type="button" class="btn btn-success" id="runButton">Run</button>
       <button type="button" class="btn btn-info" id="formatButton">Prettify</button>
+      <button
+        type="button"
+        class="btn btn-dark"
+        id="packagesButton"
+        data-toggle="modal"
+        data-target="#packagesModal"
+      >
+        Packages
+      </button>
       <a href="/" class="btn btn-secondary" id="backButton">Switch to a different language</a>
+      <div class="modal" tabindex="-1" id="packagesModal">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Package management</h5>
+              <button type="button" class="close" data-dismiss="modal">
+                <span>&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <form autocomplete="off">
+                <input type="button" class="btn btn-primary" value="Add package" id="packagesAdd"/>
+                <div id="packagesSearchContainer">
+                  <input
+                    type="text"
+                    class="form-control shadow-none"
+                    placeholder="Search for packages..."
+                    id="packagesSearch"
+                  />
+                </div>
+              </form>
+              <hr/>
+              <div id="packagesTerminal"></div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <script>
      window.rijuConfig = <%- JSON.stringify(config) %>;

frontend/src/app.ts

@@ -1,3 +1,4 @@
+import * as $ from "jquery";
 import * as monaco from "monaco-editor";
 import {
   createConnection,
@@ -16,16 +17,25 @@ import { Message } from "vscode-jsonrpc/lib/messages";
 import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 
+import "bootstrap";
+
 import "xterm/css/xterm.css";
 
 const DEBUG = window.location.hash === "#debug";
 const config: RijuConfig = (window as any).rijuConfig;
 
+// Keep in sync with langs.ts (this exposes a subset of the keys)
 interface RijuConfig {
   id: string;
   monacoLang?: string;
   main: string;
   format?: any;
+  pkg?: {
+    install: string;
+    uninstall?: string;
+    all?: string;
+    search?: string;
+  };
   lsp?: {
     disableDynamicRegistration?: boolean;
     init?: any;
@@ -127,6 +137,8 @@ async function main() {
   fitAddon.fit();
   window.addEventListener("resize", () => fitAddon.fit());
 
+  let packagesTermOpened = false;
+
   await new Promise((resolve) =>
     term.write("Connecting to server...", resolve)
   );
@@ -328,6 +340,23 @@ async function main() {
       sendMessage({ event: "formatCode", code: editor.getValue() });
     });
   }
+  if (config.pkg) {
+    document.getElementById("packagesButton")!.classList.add("visible");
+  }
+  $("#packagesModal").on("shown.bs.modal", () => {
+    if (!packagesTermOpened) {
+      packagesTermOpened = true;
+
+      const packagesTerm = new Terminal();
+      const packagesFitAddon = new FitAddon();
+      packagesTerm.loadAddon(packagesFitAddon);
+
+      packagesTerm.open(document.getElementById("packagesTerminal")!);
+
+      packagesFitAddon.fit();
+      window.addEventListener("resize", () => packagesFitAddon.fit());
+    }
+  });
 }
 
 main().catch(console.error);

frontend/styles/app.css

@@ -29,7 +29,7 @@ body {
 
 #formatButton {
   position: absolute;
-  bottom: 25px;
+  bottom: 80px;
   right: calc(50% + 25px);
   visibility: hidden;
 }
@@ -38,8 +38,36 @@ body {
   visibility: visible;
 }
 
+#packagesButton {
+  position: absolute;
+  bottom: 25px;
+  right: calc(50% + 25px);
+  visibility: hidden;
+}
+
+#packagesButton.visible {
+  visibility: visible;
+}
+
 #backButton {
   position: absolute;
   left: 25px;
   bottom: 25px;
 }
+
+#packagesTerminal {
+  height: 250px;
+}
+
+#packagesAdd {
+  float: right;
+}
+
+#packagesSearchContainer {
+  overflow: hidden;
+  padding-right: 15px;
+}
+
+#packagesSearch {
+  width: 100%;
+}

package.json

@@ -10,6 +10,7 @@
     "@types/async-lock": "^1.1.2",
     "@types/express": "^4.17.6",
     "@types/express-ws": "^3.0.0",
+    "@types/jquery": "^3.5.1",
     "@types/lodash": "^4.14.155",
     "@types/mkdirp": "^1.0.1",
     "@types/node-cleanup": "^2.1.1",
@@ -21,12 +22,14 @@
     "app-root-path": "^3.0.0",
     "async-lock": "^1.2.4",
     "babel-loader": "^8.1.0",
+    "bootstrap": "^4.5.2",
     "css-loader": "^3.5.3",
     "ejs": "^3.1.3",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
     "file-loader": "^6.0.0",
     "historic-readline": "^1.0.8",
+    "jquery": "^3.5.1",
     "lodash": "^4.17.15",
     "moment": "^2.27.0",
     "monaco-editor": "^0.20.0",
@@ -36,6 +39,7 @@
     "npm-run-all": "^4.1.5",
     "p-queue": "^6.6.0",
     "parse-passwd": "^1.0.0",
+    "popper.js": "^1.16.1",
     "rimraf": "^3.0.2",
     "shell-quote": "^1.7.2",
     "style-loader": "^1.2.1",

yarn.lock

@@ -855,6 +855,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/jquery@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.1.tgz#cebb057acf5071c40e439f30e840c57a30d406c3"
+  integrity sha512-Tyctjh56U7eX2b9udu3wG853ASYP0uagChJcQJXLUXEU6C/JiW5qt5dl8ao01VRj1i5pgXPAf8f1mq4+FDLRQg==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/json-schema@^7.0.4":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -928,6 +935,11 @@
   resolved "https://registry.yarnpkg.com/@types/shell-quote/-/shell-quote-1.7.0.tgz#0b6b930de00ad35128239b182c1fec8b8c40e876"
   integrity sha512-0CJaSSayMigMKu/Egx1eVcFjgGYkP6T4dyPRs462BFrMB/OK2FAJFV/24+6R4cGIXw6ZQpZK8XEd2UCVKfkZRw==
 
+"@types/sizzle@*":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
+  integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
+
 "@types/tmp@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.2.0.tgz#e3f52b4d7397eaa9193592ef3fdd44dc0af4298c"
@@ -1351,6 +1363,11 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+bootstrap@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.2.tgz#a85c4eda59155f0d71186b6e6ad9b875813779ab"
+  integrity sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2988,6 +3005,11 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+jquery@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3830,6 +3852,11 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+popper.js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"