Extends Playground to support node-based projects

README.md

@@ -47,7 +47,14 @@ You can try programming interactively with the Playground. You can run with:
 $ crochet playground <path/to/your/crochet.json>
 ```
 
-You do need to specify a package currently because that's how Crochet tracks
+For node projects you need to specify `node` as your Playground execution
+target, since the default is running the package in the browser:
+
+```shell
+$ crochet playground <path/to/your/crochet.json> --target node
+```
+
+You do need to specify a package because that's how Crochet tracks
 dependencies and capabilities. All code you type in the Playground will
 be executed in the context of the given package. And all dependencies of
 that package will be loaded first.

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@types/codemirror": "^5.60.5",
+    "@types/ws": "^8.2.3",
     "express": "^4.17.1",
     "immutable": "^4.0.0-rc.14",
     "ohm-js": "^15.3.0",

source/node-cli/index.ts

@@ -13,10 +13,12 @@ import {
   ResolvedPackage,
   Target,
   target_web,
+  parse as parse_pkg,
+  target_spec,
 } from "../pkg";
 import * as ChildProcess from "child_process";
 import { serve_docs } from "./docs";
-import { Ok, try_parse } from "../utils/spec";
+import { Ok, parse, try_parse } from "../utils/spec";
 import { StorageConfig } from "../storage";
 import { random_uuid } from "../utils/uuid";
 
@@ -49,13 +51,13 @@ interface Options {
   disclose_debug: boolean;
   capabilities: Set<string>;
   interactive: boolean;
+  target?: Target;
   web: {
     port: number;
     www_root: string;
   };
   docs: {
     port: number;
-    target: Target;
   };
   packaging: {
     out_dir: string;
@@ -78,6 +80,7 @@ function parse_options(args0: string[]) {
   options.interactive = true;
   options.capabilities = new Set([]);
   options.verbose = false;
+  options.target = undefined;
   options.test = {
     show_success: false,
   };
@@ -90,7 +93,6 @@ function parse_options(args0: string[]) {
   };
   options.docs = {
     port: 8080,
-    target: Crochet.pkg.target_any(),
   };
   options.app_args = [];
 
@@ -151,10 +153,11 @@ function parse_options(args0: string[]) {
       case "--target": {
         const target = try_parse(args0[current + 1], Crochet.pkg.target_spec);
         if (target instanceof Ok) {
-          options.docs.target = target.value;
+          options.target = target.value;
         } else {
           throw new Error(`Invalid target ${args0[current + 1]}`);
         }
+        current += 2;
         continue;
       }
 
@@ -325,7 +328,7 @@ async function setup_web_capabilities(file: string, options: Options) {
     false
   );
   const pkg = crochet.read_package_from_file(file);
-  const rpkg = new ResolvedPackage(pkg, target_web());
+  const rpkg = new ResolvedPackage(pkg, options.target ?? target_web());
   const required = [...pkg.meta.capabilities.requires.values()];
   const cap_map = new Map(required.map((x) => [x, [rpkg]]));
   const config = StorageConfig.load();
@@ -346,16 +349,25 @@ async function setup_web_capabilities(file: string, options: Options) {
       );
     }
   }
+
+  return new Set(required);
 }
 
 async function run_web([file]: string[], options: Options) {
-  setup_web_capabilities(file, options);
+  const cap = await setup_web_capabilities(file, options);
   await build([file], options);
-  await Server(file, options.web.port, options.web.www_root, "/");
+  await Server(
+    file,
+    options.web.port,
+    options.web.www_root,
+    "/",
+    target_web(),
+    cap
+  );
 }
 
 async function playground([file]: string[], options: Options) {
-  setup_web_capabilities(file, options);
+  const cap = await setup_web_capabilities(file, options);
   await build([file], options);
   await build(
     [Path.join(__dirname, "../../stdlib/crochet.debug.ui/crochet.json")],
@@ -365,7 +377,9 @@ async function playground([file]: string[], options: Options) {
     file,
     options.web.port,
     Path.join(__dirname, "../../www"),
-    "/playground"
+    "/playground",
+    options.target ?? target_web(),
+    cap
   );
 }
 
@@ -507,7 +521,6 @@ function help(command?: string) {
           "  crochet playground <crochet.json> [--port PORT]\n",
           "  crochet docs <crochet.json> [--port PORT --target ('node' | 'browser' | '*')]\n",
           "  crochet package <crochet.json> [--package-to OUT_DIR]\n",
-          "  crochet repl <crochet.json>\n",
           "  crochet test <crochet.json> [--test-title PATTERN --test-module PATTERN --test-package PATTERN --test-show-ok]\n",
           "  crochet build <crochet.json>\n",
           "  crochet show-ir <file.crochet>\n",

source/node-cli/server.ts

@@ -1,18 +1,36 @@
 import * as Path from "path";
 import * as FS from "fs";
 import * as Package from "../pkg";
+import * as REPL from "../node-repl";
 import type * as Express from "express";
 import { CrochetForNode, build_file } from "../targets/node";
 import { random_uuid } from "../utils/uuid";
+import { randomUUID } from "crypto";
 
 const repo_root = Path.resolve(__dirname, "../../");
 
+function get_kind(x: Package.Target) {
+  switch (x.tag) {
+    case Package.TargetTag.NODE:
+      return "node";
+    case Package.TargetTag.ANY:
+      return "browser";
+    case Package.TargetTag.WEB:
+      return "browser";
+    default:
+      throw new Error(`Unknown target`);
+  }
+}
+
 export default async (
   root: string,
   port: number,
   www: string,
-  start_page: string
+  start_page: string,
+  target: Package.Target,
+  capabilities: Set<string>
 ) => {
+  // -- Templating
   const template = (filename: string) => (config: unknown) => {
     const config_str = JSON.stringify(config).replace(/</g, "\\u003c");
     const source = FS.readFileSync(Path.join(www, filename), "utf-8");
@@ -21,6 +39,10 @@ export default async (
   const index_template = template("index.html");
   const playground_template = template("playground.html");
 
+  // -- Initialisation
+  const session_id = randomUUID();
+  let repl: REPL.NodeRepl | null = null;
+
   console.log("Building all dependencies...");
   const crochet = new CrochetForNode(
     { universe: random_uuid(), packages: new Map() },
@@ -38,14 +60,14 @@ export default async (
   }
   const graph = await Package.build_package_graph(
     pkg,
-    Package.target_web(),
+    target,
     new Set(),
     (crochet.crochet as any).resolver
   );
 
-  const rpkg = new Package.ResolvedPackage(pkg, Package.target_web());
+  const rpkg = new Package.ResolvedPackage(pkg, target);
 
-  // Set up server
+  // -- Set up server
   const express = require("express") as typeof Express;
   const app = express();
 
@@ -76,6 +98,7 @@ export default async (
 
   app.get("/", (req, res) => {
     const config = {
+      session_id: session_id,
       token: random_uuid(),
       library_root: "/library",
       app_root: "/app/crochet.json",
@@ -88,6 +111,8 @@ export default async (
 
   app.get("/playground", (req, res) => {
     const config = {
+      session_id: session_id,
+      kind: get_kind(target),
       token: random_uuid(),
       library_root: "/library",
       app_root: "/app/crochet.json",
@@ -102,6 +127,36 @@ export default async (
   app.use("/", express.static(www));
   app.use("/library", express.static(Path.join(repo_root, "stdlib")));
 
+  app.use("/playground/api", express.json());
+
+  app.post("/playground/api/:id/make-page", async (req, res) => {
+    if (req.params.id !== session_id) {
+      return res.send(403);
+    }
+
+    try {
+      const page = await repl!.make_page();
+      res.send({ ok: true, page_id: page.id });
+    } catch (e) {
+      res.send({ ok: false, reason: String(e) });
+    }
+  });
+
+  app.post("/playground/api/:id/pages/:page_id/run-code", async (req, res) => {
+    if (req.params.id !== session_id) {
+      return res.send(403);
+    }
+
+    try {
+      const page = repl!.get_page(req.params.page_id);
+      const result = await page.run_code(req.body.language, req.body.code);
+      res.send({ ok: true, representations: result?.representations });
+    } catch (e) {
+      res.send({ ok: false, error: String(e) });
+    }
+  });
+
+  // -- File system capabilities
   const pkg_tokens = new Map();
   for (const x of graph.serialise(rpkg)) {
     const assets = x.assets_root;
@@ -113,6 +168,18 @@ export default async (
     }
   }
 
+  if (target.tag === Package.TargetTag.NODE) {
+    repl = await REPL.NodeRepl.bootstrap(
+      root,
+      target,
+      capabilities,
+      randomUUID(),
+      session_id,
+      pkg_tokens
+    );
+  }
+
+  // -- Starting servers
   app.listen(port, () => {
     const url = new URL("http://localhost");
     url.port = String(port);