Add support for loading additional sysroots and integrate with UI

Author: oligamiq

lib/src/sysroot.ts

@@ -43,23 +43,43 @@ const toMap = (arr: Array<[string, Inode]>) => {
   return map;
 };
 
+let rustlib_dir: Directory | undefined;
+
 export const load_default_sysroot = async (): Promise<PreopenDirectory> => {
   const sysroot_part = await load_sysroot_part('wasm32-wasip1');
+  rustlib_dir = new Directory([
+    ["wasm32-wasip1", new Directory([
+      ["lib", sysroot_part]
+    ])],
+  ]);
   const sysroot = new PreopenDirectory(
     "/sysroot",
     toMap([
       ["lib", new Directory([
-        ["rustlib", new Directory([
-          ["wasm32-wasip1", new Directory([
-            ["lib", sysroot_part]
-          ])],
-        ])]
+        ["rustlib", rustlib_dir],
       ])]
     ])
   );
+  loaded_triples.add('wasm32-wasip1');
   return sysroot;
 };
 
+const loaded_triples: Set<string> = new Set();
+
+export const load_additional_sysroot = async (triple: string) => {
+  if (loaded_triples.has(triple)) {
+    return;
+  }
+  const sysroot_part = await load_sysroot_part(triple);
+  if (!rustlib_dir) {
+    throw new Error("Default sysroot not loaded");
+  }
+  rustlib_dir.contents.set(triple, new Directory([
+    ["lib", sysroot_part]
+  ]));
+  loaded_triples.add(triple);
+}
+
 export const get_default_sysroot_wasi_farm = async (): Promise<WASIFarm> => {
   const fds = [await load_default_sysroot()];
   const farm = new WASIFarm(

page/src/App.tsx

@@ -7,6 +7,7 @@ import { default_value, rust_file } from "./config";
 import { DownloadButton, RunButton } from "./btn";
 import { triples } from "./sysroot";
 import { Select } from "@thisbeyond/solid-select";
+import { SharedObjectRef } from "@oligami/shared-object";
 
 const App = (props: {
   ctx: Ctx;
@@ -19,6 +20,7 @@ const App = (props: {
     // Handle editor value change
     rust_file.data = new TextEncoder().encode(value);
   };
+  let load_additional_sysroot: (string) => void;
 
   return (
     <>
@@ -35,8 +37,20 @@ const App = (props: {
         <div class="p-4 text-white">
           <RunButton />
         </div>
-        <div class="p-4 text-white">
-          <Select options={triples} class="text-4xl text-green-700" />
+        <div class="p-4 text-white" style={{ width: "60vw" }}>
+          <Select
+            options={triples}
+            class="text-4xl text-green-700"
+            onChange={(value) => {
+              console.log(value);
+              if (load_additional_sysroot === undefined) {
+                load_additional_sysroot = new SharedObjectRef(
+                  props.ctx.load_additional_sysroot_id,
+                ).proxy<(string) => void>();
+              }
+              load_additional_sysroot(value);
+            }}
+          />
         </div>
         <div class="p-4 text-white">
           <DownloadButton />

page/src/ctx.ts

@@ -8,6 +8,7 @@ export type Ctx = {
   exec_file_id: string;
   download_id: string;
   download_by_url_id: string;
+  load_additional_sysroot_id: string;
 };
 
 const gen_id = () => Math.random().toString(36).substring(7);
@@ -23,5 +24,6 @@ export const gen_ctx = (): Ctx => {
     exec_file_id: gen_id(),
     download_id: gen_id(),
     download_by_url_id: gen_id(),
+    load_additional_sysroot_id: gen_id(),
   };
 };

page/src/index.css

@@ -1,28 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.custom {
-  &.solid-select-container {
-    color: #fa7f25;
-  }
-  .solid-select-control {
-    border-color: #fca560;
-    &:focus-within {
-      outline-color: #fca560;
-    }
-  }
-  .solid-select-placeholder {
-    color: #fca560;
-  }
-  .solid-select-option {
-    &:hover {
-      background-color: #fa7f25;
-      color: #fff;
-    }
-    &[data-focused="true"] {
-      background-color: #fca560;
-      color: #fff;
-    }
-  }
-}

page/src/worker.ts

@@ -1,11 +1,12 @@
-import { SharedObjectRef } from "@oligami/shared-object";
-import { get_default_sysroot_wasi_farm } from "../../lib/src/sysroot";
+import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
+import { get_default_sysroot_wasi_farm, load_additional_sysroot } from "../../lib/src/sysroot";
 import type { Ctx } from "./ctx";
 
 let terminal: (string) => void;
 let rustc_worker: Worker;
 let ctx: Ctx;
 import RustcWorker from "./rustc?worker";
+let shared: SharedObject;
 
 globalThis.addEventListener("message", async (event) => {
   if (event.data.ctx) {
@@ -24,6 +25,14 @@ globalThis.addEventListener("message", async (event) => {
     const wasi_ref = farm.get_ref();
 
     rustc_worker.postMessage({ wasi_ref });
+
+    shared = new SharedObject((triple) => {
+      (async () => {
+        terminal(`loading sysroot ${triple}\r\n`);
+        await load_additional_sysroot(triple);
+        terminal(`loaded sysroot ${triple}\r\n`);
+      })();
+    }, ctx.load_additional_sysroot_id);
   } else if (event.data.wasi_ref) {
     const { wasi_ref } = event.data;