Add configuration, command parser, and Monaco editor integration

Author: oligamiq

bun.lockb

@@ -22,6 +22,7 @@
     "install": "^0.13.0",
     "nanotar": "^0.1.1",
     "rubrc": "file:",
-    "solid-js": "^1.8.11"
+    "solid-js": "^1.8.11",
+    "solid-monaco": "^0.3.0"
   }
 }

lib/package-lock.json

@@ -2,15 +2,30 @@ import type { Component } from "solid-js";
 import { SetupMyTerminal } from "./xterm";
 import type { WASIFarmRef } from "@oligami/browser_wasi_shim-threads";
 import type { Ctx } from "./ctx";
+import { MonacoEditor } from "solid-monaco";
+import { default_value } from "./config";
 
 const App = (props: {
   ctx: Ctx;
   callback: (wasi_ref: WASIFarmRef) => void;
 }) => {
+  const handleMount = (monaco, editor) => {
+    // Use monaco and editor instances here
+  };
+  const handleEditorChange = (value) => {
+    // Handle editor change
+  };
+
   return (
     <>
-      <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p>
-      <SetupMyTerminal xterm_id={props.ctx.terminal_id} callback={props.callback} />
+      <MonacoEditor
+        language="rust"
+        value={default_value}
+        height="30vh"
+        onMount={handleMount}
+      />
+      {/* <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p> */}
+      <SetupMyTerminal ctx={props.ctx} callback={props.callback} />
     </>
   );
 };

page/package.json

@@ -0,0 +1,76 @@
+import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
+import type { Ctx } from "./ctx";
+
+let waiter: SharedObject;
+let is_all_done = false;
+
+export const parser_setup = async (ctx: Ctx) => {
+  const n = 1;
+
+  const resolvers: PromiseWithResolvers<void>[] = [];
+  for (let i = 0; i < n; i++) {
+    resolvers.push(Promise.withResolvers<void>());
+  }
+
+  waiter = new SharedObject(
+    {
+      rustc: () => {
+        resolvers[0].resolve();
+      },
+      is_all_done: (): boolean => {
+        return is_all_done;
+      },
+    },
+    ctx.waiter_id,
+  );
+
+  await Promise.all(resolvers.map((r) => r.promise));
+
+  is_all_done = true;
+
+  await all_done(ctx);
+};
+
+let cmd_parser: SharedObject;
+
+const all_done = async (ctx: Ctx) => {
+  const rustc = new SharedObjectRef(ctx.rustc_id).proxy<(...string) => void>();
+  const terminal = new SharedObjectRef(ctx.terminal_id).proxy<
+    (string) => void
+  >();
+  const ls = new SharedObjectRef(ctx.ls_id).proxy<(...string) => void>();
+  const tree = new SharedObjectRef(ctx.tree_id).proxy<(...string) => void>();
+
+  cmd_parser = new SharedObject((...args) => {
+    (async (args: string[]) => {
+      console.log(args);
+
+      const cmd = args[0];
+
+      console.log(cmd);
+
+      if (cmd === "rustc") {
+        console.log("rustc");
+        await terminal("executing rustc...\r\n");
+        await rustc(...args.slice(1));
+      } else if (cmd === "echo") {
+        console.log("echo");
+        await terminal(`${args.slice(1).join(" ")}\r\n`);
+      } else if (cmd === "ls") {
+        console.log("ls");
+        await terminal("executing ls...\r\n");
+        await ls(...args.slice(1));
+      } else if (cmd === "tree") {
+        console.log("tree");
+        await terminal("executing tree...\r\n");
+        await tree(...args.slice(1));
+      } else {
+        await terminal(`command not found: ${cmd}\r\n`);
+      }
+      await terminal(">");
+    })(args);
+  }, ctx.cmd_parser_id);
+
+  await terminal("rustc -h\r\n");
+  await rustc("-h");
+};

page/src/App.tsx

@@ -0,0 +1,5 @@
+export const default_value = `// /main.rs
+fn main() {
+  println!("Hello, world!");
+}
+`;

page/src/cmd_parser.ts

@@ -2,7 +2,10 @@ export type Ctx = {
   terminal_id: string;
   rustc_id: string;
   waiter_id: string;
-}
+  cmd_parser_id: string;
+  tree_id: string;
+  ls_id: string;
+};
 
 const gen_id = () => Math.random().toString(36).substring(7);
 
@@ -11,5 +14,8 @@ export const gen_ctx = (): Ctx => {
     terminal_id: gen_id(),
     rustc_id: gen_id(),
     waiter_id: gen_id(),
+    cmd_parser_id: gen_id(),
+    tree_id: gen_id(),
+    ls_id: gen_id(),
   };
-}
+};

page/src/config.ts

@@ -6,6 +6,8 @@ import App from "./App";
 import { gen_ctx } from "./ctx";
 import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
 import MainWorker from "./worker?worker";
+import { parser_setup } from "./cmd_parser";
+import "./monaco_worker";
 
 const root = document.getElementById("root");
 
@@ -20,21 +22,7 @@ const ctx = gen_ctx();
 // create worker
 const worker = new MainWorker();
 
-const waiter = new SharedObject(
-  {
-    rustc: () => {
-      const rustc = new SharedObjectRef(ctx.rustc_id).proxy<
-        (...string) => void
-      >();
-      const terminal = new SharedObjectRef(ctx.terminal_id).proxy<
-        (string) => void
-      >();
-      terminal("rustc -h\r\n");
-      rustc("-h");
-    },
-  },
-  ctx.waiter_id,
-);
+parser_setup(ctx);
 
 // send message to worker
 worker.postMessage({ ctx });

page/src/ctx.ts

@@ -0,0 +1,26 @@
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+ // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+ getWorker(_: any, label: string) {
+  if (label === 'json') {
+   return new jsonWorker();
+  }
+  if (label === 'css' || label === 'scss' || label === 'less') {
+   return new cssWorker();
+  }
+  if (label === 'html' || label === 'handlebars' || label === 'razor') {
+   return new htmlWorker();
+  }
+  if (label === 'typescript' || label === 'javascript') {
+   return new tsWorker();
+  }
+  return new editorWorker();
+ }
+};

page/src/index.tsx

@@ -3,24 +3,25 @@ import { get_rustc_wasm } from "../../lib/src/get_rustc_wasm";
 import { WASIFarmAnimal } from "@oligami/browser_wasi_shim-threads";
 import type { Ctx } from "./ctx";
 
-import thread_spawn_path from './thread_spawn.ts?worker&url'
+import thread_spawn_path from "./thread_spawn.ts?worker&url";
+import util_cmd_worker from "./util_cmd.ts?worker";
 
 let terminal: (string) => void;
 let compiler: WebAssembly.Module;
 const wasi_refs = [];
 let ctx: Ctx;
 let rustc_shared: SharedObject;
 let waiter: {
-  rustc: () => void
+  rustc: () => void;
 };
 
-globalThis.addEventListener('message', async (event) => {
+globalThis.addEventListener("message", async (event) => {
   if (event.data.ctx) {
     ctx = event.data.ctx;
     terminal = new SharedObjectRef(ctx.terminal_id).proxy<(string) => void>();
-    terminal("loading rustc\r\n");
+    await terminal("loading rustc\r\n");
     waiter = new SharedObjectRef(ctx.waiter_id).proxy<{
-      rustc: () => void
+      rustc: () => void;
     }>();
     compiler = await get_rustc_wasm();
   } else if (event.data.wasi_ref) {
@@ -33,13 +34,19 @@ globalThis.addEventListener('message', async (event) => {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
 
-    terminal("loaded rustc\r\n");
+    await terminal("loaded rustc\r\n");
 
     while (wasi_refs.length === 1) {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
 
-    terminal("loaded wasi\r\n");
+    await terminal("loaded wasi\r\n");
+
+    const util_worker = new util_cmd_worker();
+    util_worker.postMessage({
+      wasi_refs,
+      ctx,
+    });
 
     const wasi = new WASIFarmAnimal(
       wasi_refs,