Add download functionality and integrate solid-select component

page/package.json

@@ -16,6 +16,7 @@
     "@bjorn3/browser_wasi_shim": "^0.3.0",
     "@oligami/browser_wasi_shim-threads": "^0.1.0",
     "@oligami/shared-object": "0.1.1",
+    "@thisbeyond/solid-select": "^0.15.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-search": "^0.15.0",
     "@xterm/xterm": "^5.5.0",

page/src/App.tsx

@@ -4,7 +4,9 @@ import type { WASIFarmRef } from "@oligami/browser_wasi_shim-threads";
 import type { Ctx } from "./ctx";
 import { MonacoEditor } from "solid-monaco";
 import { default_value, rust_file } from "./config";
-import { Button } from "./btn";
+import { DownloadButton, RunButton } from "./btn";
+import { triples } from "./sysroot";
+import { Select } from "@thisbeyond/solid-select";
 
 const App = (props: {
   ctx: Ctx;
@@ -27,9 +29,19 @@ const App = (props: {
         onMount={handleMount}
         onChange={handleEditorChange}
       />
-      {/* <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p> */}
+      {/* <p class="text-4xl text-green-700 text-center">Hello tailwind!</p> */}
       <SetupMyTerminal ctx={props.ctx} callback={props.callback} />
-      <Button />
+      <div class="flex">
+        <div class="p-4 text-white">
+          <RunButton />
+        </div>
+        <div class="p-4 text-white">
+          <Select options={triples} class="text-4xl text-green-700" />
+        </div>
+        <div class="p-4 text-white">
+          <DownloadButton />
+        </div>
+      </div>
     </>
   );
 };

page/src/btn.tsx

@@ -1,16 +1,31 @@
-import { compile_and_run } from "./compile_and_run";
+import { compile_and_run, download } from "./compile_and_run";
 
-export const Button = () => {
+export const RunButton = () => {
   return (
     <button
       type="button"
       onClick={() => {
-        console.log("button clicked");
+        console.log("run button clicked");
         compile_and_run();
       }}
-      class="text-2xl text-green-700 text-center py-20"
+      class="text-2xl text-green-700"
     >
       Compile and Run
     </button>
   );
 };
+
+export const DownloadButton = () => {
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        console.log("download button clicked");
+        download("/tmp/main.wasm");
+      }}
+      class="text-2xl text-green-700"
+    >
+      Download file
+    </button>
+  );
+};

page/src/cat.ts

@@ -1,7 +1,10 @@
 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 => {
+export const get_data = (
+  path__: string,
+  _animal: WASIFarmAnimal,
+): Uint8Array => {
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const animal = _animal as any;
 
@@ -135,4 +138,4 @@ export const get_data = (path__: string, _animal: WASIFarmAnimal): Uint8Array =>
   animal.wasi_farm_refs[wasi_farm_ref_n].fd_close(opened_fd);
 
   return file_data;
-}
+};

page/src/cmd_parser.ts

@@ -26,11 +26,9 @@ export const parser_setup = async (ctx: Ctx) => {
       is_cmd_run_end: () => {
         return is_cmd_run_end;
       },
-      set_end_of_exec: (
-        _end_of_exec: boolean,
-      ) => {
+      set_end_of_exec: (_end_of_exec: boolean) => {
         end_of_exec = _end_of_exec;
-      }
+      },
     },
     ctx.waiter_id,
   );
@@ -51,7 +49,12 @@ 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>();
+  const exec_file = new SharedObjectRef(ctx.exec_file_id).proxy<
+    (...string) => void
+  >();
+  const download = new SharedObjectRef(ctx.download_id).proxy<
+    (string) => void
+  >();
 
   cmd_parser = new SharedObject((...args) => {
     is_cmd_run_end = false;
@@ -77,6 +80,18 @@ const all_done = async (ctx: Ctx) => {
         console.log("tree");
         await terminal("executing tree...\r\n");
         await tree(...args.slice(1));
+      } else if (cmd === "download") {
+        console.log("download: ", args[1]);
+        if (args[1].includes("/")) {
+          await terminal("executing download...\r\n");
+          end_of_exec = false;
+          await download(args[1]);
+          while (!end_of_exec) {
+            await new Promise<void>((resolve) => setTimeout(resolve, 100));
+          }
+        } else {
+          await terminal("download require absolute path\r\n");
+        }
       } else if (cmd.includes("/")) {
         console.log("cmd includes /");
         await terminal("executing file...\r\n");
@@ -95,4 +110,5 @@ const all_done = async (ctx: Ctx) => {
 
   await terminal("rustc -h\r\n");
   await rustc("-h");
+  await terminal(">");
 };

page/src/compile_and_run.ts

@@ -1,4 +1,4 @@
-import { SharedObjectRef } from "@oligami/shared-object";
+import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
 import type { Ctx } from "./ctx";
 
 let ctx: Ctx;
@@ -8,6 +8,8 @@ let waiter: {
   is_cmd_run_end: () => boolean;
 };
 let terminal: (string) => void;
+let shared_downloader: SharedObject;
+let exec_ref: (...string) => void;
 
 export const compile_and_run_setup = (_ctx: Ctx) => {
   ctx = _ctx;
@@ -16,7 +18,20 @@ export const compile_and_run_setup = (_ctx: Ctx) => {
     is_all_done: () => boolean;
     is_cmd_run_end: () => boolean;
   }>();
-}
+
+  shared_downloader = new SharedObject((url: string, name: string) => {
+    (async () => {
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name; // ダウンロード時のファイル名を指定
+      document.body.appendChild(a); // DOM に追加
+      a.click(); // クリックしてダウンロードを開始
+      document.body.removeChild(a); // すぐに削除
+    })();
+  }, ctx.download_by_url_id);
+
+  exec_ref = new SharedObjectRef(ctx.cmd_parser_id).proxy<(...string) => void>();
+};
 
 let can_setup = false;
 
@@ -37,16 +52,32 @@ export const compile_and_run = async () => {
   }
 
   if (can_setup) {
-    const exec = ["rustc", "/main.rs", "--sysroot", "/sysroot", "--target", "wasm32-wasip1", "--out-dir", "/tmp", "-Ccodegen-units=1"];
+    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()) {
+    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()) {
+    while (!(await waiter.is_cmd_run_end())) {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
   }
+};
+
+export const download = async (file: string) => {
+  console.log("download");
+  await terminal(`download ${file}\r\n`);
+  exec_ref("download", file);
 }

page/src/config.ts

@@ -1,4 +1,4 @@
-import { File } from '@bjorn3/browser_wasi_shim';
+import { File } from "@bjorn3/browser_wasi_shim";
 
 export const default_value = `// /main.rs
 fn main() {

page/src/ctx.ts

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

page/src/index.css

@@ -1,3 +1,28 @@
 @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/index.tsx

@@ -4,11 +4,11 @@ import { render } from "solid-js/web";
 
 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";
 import { compile_and_run_setup } from "./compile_and_run";
+import "@thisbeyond/solid-select/style.css";
 
 const root = document.getElementById("root");
 

page/src/monaco_worker.ts

@@ -1,26 +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';
+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();
- }
+  // 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/sysroot.ts

@@ -0,0 +1,35 @@
+export const triples = [
+  "aarch64-unknown-linux-gnu",
+  "aarch64-unknown-linux-musl",
+  "arm-unknown-linux-gnueabi",
+  "arm-unknown-linux-gnueabihf",
+  "arm-unknown-linux-musleabi",
+  "arm-unknown-linux-musleabihf",
+  "armv7-unknown-linux-gnueabihf",
+  "i586-unknown-linux-gnu",
+  "i686-unknown-linux-gnu",
+  "i686-unknown-linux-musl",
+  "loongarch64-unknown-linux-gnu",
+  "loongarch64-unknown-linux-musl",
+  "powerpc-unknown-linux-gnu",
+  "powerpc64-unknown-linux-gnu",
+  "powerpc64le-unknown-linux-gnu",
+  "riscv64gc-unknown-linux-gnu",
+  "riscv64gc-unknown-linux-musl",
+  "s390x-unknown-linux-gnu",
+  "sparcv9-sun-solaris",
+  "wasm32-wasip1-threads",
+  "wasm32-wasip1",
+  "x86_64-pc-windows-gnu",
+  "x86_64-unknown-freebsd",
+  "x86_64-unknown-illumos",
+  "x86_64-unknown-linux-gnu",
+  "x86_64-unknown-linux-musl",
+  "x86_64-unknown-netbsd",
+  "aarch64-pc-windows-msvc",
+  "i686-pc-windows-gnu",
+  "i686-pc-windows-msvc",
+  "x86_64-pc-windows-msvc",
+  "aarch64-apple-darwin",
+  "x86_64-apple-darwin",
+];