Add compile and run functionality with button integration and context updates

Author: oligamiq

lib/src/sysroot.ts

@@ -44,15 +44,15 @@ const toMap = (arr: Array<[string, Inode]>) => {
 };
 
 export const load_default_sysroot = async (): Promise<PreopenDirectory> => {
-  const sysroot_part = await load_sysroot_part('wasm32-wasip1-threads');
+  const sysroot_part = await load_sysroot_part('wasm32-wasip1');
   const sysroot = new PreopenDirectory(
     "/sysroot",
     toMap([
       ["lib", new Directory([
         ["rustlib", new Directory([
-          ["wasm32-wasip1-threads", new Directory([
+          ["wasm32-wasip1", new Directory([
             ["lib", sysroot_part]
-          ])]
+          ])],
         ])]
       ])]
     ])

page/src/App.tsx

@@ -3,7 +3,8 @@ 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";
+import { default_value, rust_file } from "./config";
+import { Button } from "./btn";
 
 const App = (props: {
   ctx: Ctx;
@@ -13,7 +14,8 @@ const App = (props: {
     // Use monaco and editor instances here
   };
   const handleEditorChange = (value) => {
-    // Handle editor change
+    // Handle editor value change
+    rust_file.data = new TextEncoder().encode(value);
   };
 
   return (
@@ -23,9 +25,11 @@ const App = (props: {
         value={default_value}
         height="30vh"
         onMount={handleMount}
+        onChange={handleEditorChange}
       />
       {/* <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p> */}
       <SetupMyTerminal ctx={props.ctx} callback={props.callback} />
+      <Button />
     </>
   );
 };

page/src/btn.tsx

@@ -0,0 +1,16 @@
+import { compile_and_run } from "./compile_and_run";
+
+export const Button = () => {
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        console.log("button clicked");
+        compile_and_run();
+      }}
+      class="text-2xl text-green-700 text-center py-20"
+    >
+      Compile and Run
+    </button>
+  );
+};

page/src/cat.ts

@@ -0,0 +1,138 @@
+import type { WASIFarmAnimal } from "@oligami/browser_wasi_shim-threads";
+import { wasi } from "@bjorn3/browser_wasi_shim";
+
+export const get_data = (path__: string, _animal: WASIFarmAnimal): Uint8Array => {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const animal = _animal as any;
+
+  // path is absolute
+  let path = path__;
+  if (!path.startsWith("/")) {
+    path = `/${path}`;
+  }
+
+  // first: get opened fd dir name
+  let root_fd: number;
+  const dir_names: Map<number, string> = new Map();
+  for (let fd = 0; fd < animal.fd_map.length; fd++) {
+    const [mapped_fd, wasi_farm_ref] = animal.get_fd_and_wasi_ref(fd);
+    if (mapped_fd === undefined || wasi_farm_ref === undefined) {
+      continue;
+    }
+    const [prestat, ret] = wasi_farm_ref.fd_prestat_get(mapped_fd);
+    if (ret !== wasi.ERRNO_SUCCESS) {
+      continue;
+    }
+    if (prestat) {
+      const [tag, name_len] = prestat;
+      if (tag === wasi.PREOPENTYPE_DIR) {
+        const [path, ret] = wasi_farm_ref.fd_prestat_dir_name(
+          mapped_fd,
+          name_len,
+        );
+        if (ret !== wasi.ERRNO_SUCCESS) {
+          continue;
+        }
+        if (path) {
+          const decoded_path = new TextDecoder().decode(path);
+          dir_names.set(fd, decoded_path);
+          if (decoded_path === "/") {
+            root_fd = fd;
+          }
+        }
+      }
+    }
+  }
+
+  // second: most match path
+  let matched_fd = root_fd;
+  let matched_dir_len = 1;
+  const parts_path = path.split("/");
+  for (const [fd, dir_name] of dir_names) {
+    const parts_dir_name = dir_name.split("/");
+    let dir_len = 0;
+    for (let i = 0; i < parts_dir_name.length; i++) {
+      if (parts_dir_name[i] === parts_path[i]) {
+        dir_len++;
+      } else {
+        break;
+      }
+    }
+    if (dir_len > matched_dir_len) {
+      matched_fd = fd;
+      matched_dir_len = dir_len;
+    }
+  }
+
+  if (matched_dir_len === 0) {
+    throw new Error("no matched dir");
+  }
+
+  console.log("matched_dir_name", dir_names.get(matched_fd));
+
+  // third: tale the rest of path
+  const rest_path = parts_path.slice(matched_dir_len).join("/");
+  console.log("rest_path", rest_path);
+
+  // fourth: open file
+  const [mapped_fd, wasi_farm_ref_n] = animal.get_fd_and_wasi_ref_n(matched_fd);
+  const [opened_fd, ret] = animal.wasi_farm_refs[wasi_farm_ref_n].path_open(
+    mapped_fd,
+    0,
+    new TextEncoder().encode(rest_path),
+    0,
+    0n,
+    0n,
+    0,
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const mapped_opened_fd = animal.map_new_fd_and_notify(
+    opened_fd,
+    wasi_farm_ref_n,
+  );
+
+  if (ret !== wasi.ERRNO_SUCCESS) {
+    throw new Error("failed to open file");
+  }
+
+  // fifth: read file
+  let file_data: Uint8Array = new Uint8Array();
+  let offset = 0n;
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    console.log("offset", offset);
+
+    const iovs = new Uint32Array(2);
+    // buf_ptr so any value
+    iovs[0] = 0;
+    // buf_len
+    iovs[1] = 1024;
+    const [nread_and_buf, ret] = animal.wasi_farm_refs[
+      wasi_farm_ref_n
+    ].fd_pread(opened_fd, iovs, offset);
+    if (ret !== wasi.ERRNO_SUCCESS) {
+      throw new Error("failed to read file");
+    }
+    if (!nread_and_buf) {
+      throw new Error("failed to read file");
+    }
+    const [nread, buf] = nread_and_buf;
+    if (nread === 0) {
+      break;
+    }
+    const new_data = new Uint8Array(file_data.length + nread);
+    new_data.set(file_data);
+    new_data.set(buf, file_data.length);
+    file_data = new_data;
+    offset += BigInt(nread);
+    if (nread < 1024) {
+      break;
+    }
+  }
+
+  animal.wasi_farm_refs[wasi_farm_ref_n].fd_close(opened_fd);
+
+  return file_data;
+}

page/src/cmd_parser.ts

@@ -1,8 +1,11 @@
 import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
 import type { Ctx } from "./ctx";
+import { get_data } from "./cat";
 
 let waiter: SharedObject;
 let is_all_done = false;
+let is_cmd_run_end = true;
+let end_of_exec = false;
 
 export const parser_setup = async (ctx: Ctx) => {
   const n = 1;
@@ -20,6 +23,14 @@ export const parser_setup = async (ctx: Ctx) => {
       is_all_done: (): boolean => {
         return is_all_done;
       },
+      is_cmd_run_end: () => {
+        return is_cmd_run_end;
+      },
+      set_end_of_exec: (
+        _end_of_exec: boolean,
+      ) => {
+        end_of_exec = _end_of_exec;
+      }
     },
     ctx.waiter_id,
   );
@@ -40,8 +51,10 @@ const all_done = async (ctx: Ctx) => {
   >();
   const ls = new SharedObjectRef(ctx.ls_id).proxy<(...string) => void>();
   const tree = new SharedObjectRef(ctx.tree_id).proxy<(...string) => void>();
+  const exec_file = new SharedObjectRef(ctx.exec_file_id).proxy<(...string) => void>();
 
   cmd_parser = new SharedObject((...args) => {
+    is_cmd_run_end = false;
     (async (args: string[]) => {
       console.log(args);
 
@@ -64,10 +77,19 @@ const all_done = async (ctx: Ctx) => {
         console.log("tree");
         await terminal("executing tree...\r\n");
         await tree(...args.slice(1));
+      } else if (cmd.includes("/")) {
+        console.log("cmd includes /");
+        await terminal("executing file...\r\n");
+        end_of_exec = false;
+        await exec_file(...args);
+        while (!end_of_exec) {
+          await new Promise<void>((resolve) => setTimeout(resolve, 100));
+        }
       } else {
         await terminal(`command not found: ${cmd}\r\n`);
       }
       await terminal(">");
+      is_cmd_run_end = true;
     })(args);
   }, ctx.cmd_parser_id);
 

page/src/compile_and_run.ts

@@ -0,0 +1,52 @@
+import { SharedObjectRef } from "@oligami/shared-object";
+import type { Ctx } from "./ctx";
+
+let ctx: Ctx;
+let cmd_parser: (...string) => void;
+let waiter: {
+  is_all_done: () => boolean;
+  is_cmd_run_end: () => boolean;
+};
+let terminal: (string) => void;
+
+export const compile_and_run_setup = (_ctx: Ctx) => {
+  ctx = _ctx;
+
+  waiter = new SharedObjectRef(ctx.waiter_id).proxy<{
+    is_all_done: () => boolean;
+    is_cmd_run_end: () => boolean;
+  }>();
+}
+
+let can_setup = false;
+
+export const compile_and_run = async () => {
+  if (!can_setup) {
+    if (await waiter.is_all_done()) {
+      terminal = new SharedObjectRef(ctx.terminal_id).proxy<(string) => void>();
+
+      cmd_parser = new SharedObjectRef(ctx.cmd_parser_id).proxy<
+        (...string) => void
+      >();
+      can_setup = true;
+    } else {
+      terminal = new SharedObjectRef(ctx.terminal_id).proxy<(string) => void>();
+
+      await terminal("this is not done yet\r\n");
+    }
+  }
+
+  if (can_setup) {
+    const exec = ["rustc", "/main.rs", "--sysroot", "/sysroot", "--target", "wasm32-wasip1", "--out-dir", "/tmp", "-Ccodegen-units=1"];
+    await terminal(`${exec.join(" ")}\r\n`);
+    await cmd_parser(...exec);
+    while (!await waiter.is_cmd_run_end()) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+    await terminal("/tmp/main.wasm\r\n");
+    await cmd_parser("/tmp/main.wasm");
+    while (!await waiter.is_cmd_run_end()) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+}

page/src/config.ts

@@ -1,5 +1,11 @@
+import { File } from '@bjorn3/browser_wasi_shim';
+
 export const default_value = `// /main.rs
 fn main() {
   println!("Hello, world!");
 }
 `;
+
+export const rust_file: File = new File(
+  new TextEncoder().encode(default_value),
+);

page/src/ctx.ts

@@ -5,6 +5,7 @@ export type Ctx = {
   cmd_parser_id: string;
   tree_id: string;
   ls_id: string;
+  exec_file_id: string;
 };
 
 const gen_id = () => Math.random().toString(36).substring(7);
@@ -17,5 +18,6 @@ export const gen_ctx = (): Ctx => {
     cmd_parser_id: gen_id(),
     tree_id: gen_id(),
     ls_id: gen_id(),
+    exec_file_id: gen_id(),
   };
 };

page/src/index.tsx

@@ -8,6 +8,7 @@ import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
 import MainWorker from "./worker?worker";
 import { parser_setup } from "./cmd_parser";
 import "./monaco_worker";
+import { compile_and_run_setup } from "./compile_and_run";
 
 const root = document.getElementById("root");
 
@@ -23,6 +24,7 @@ const ctx = gen_ctx();
 const worker = new MainWorker();
 
 parser_setup(ctx);
+compile_and_run_setup(ctx);
 
 // send message to worker
 worker.postMessage({ ctx });