Finish web implementation

Phala-Network · Jan 6, 2024 · a4279a0 · a4279a0
1 parent a210581
commit a4279a0
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 6 deletions.
diff --git a/.github/workflows/publish-sidevm-quickjs.yml b/.github/workflows/publish-sidevm-quickjs.yml
@@ -5,6 +5,7 @@ on:
   push:
     tags:
       - "sidevm-quickjs-v*.*.*"
+      - "sidevm-quickjs-v*.*.*-*"
 
 env:
   CARGO_TERM_COLOR: always
@@ -29,6 +30,9 @@ jobs:
       - name: Install rust components
         run: rustup component add rust-src && rustup target add wasm32-wasi
         shell: bash
+      - name: Install wasm-bindgen
+        run: cargo install wasm-bindgen-cli --git https://github.com/kvinwang/wasm-bindgen --branch workaround
+        shell: bash
       - name: Build sidevm-quickjs
         run: make opt -C sidevm-quickjs
         shell: bash
@@ -42,3 +46,4 @@ jobs:
             sidevm-quickjs/*.wasm
             sidevm-quickjs/phatjs-x86_64-unknown-linux-musl
             sidevm-quickjs/hash.txt
+            sidevm-quickjs/web.tar.gz
diff --git a/sidevm-quickjs/.gitignore b/sidevm-quickjs/.gitignore
@@ -13,3 +13,5 @@ Cargo.lock
 /hash.txt
 node_modules
 yarn.lock
+/web/dist
+web.tar.gz
diff --git a/sidevm-quickjs/Cargo.toml b/sidevm-quickjs/Cargo.toml
@@ -42,7 +42,7 @@ hyper-rustls = { version = "0.24.1", optional = true }
 wasm-bindgen = { version = "0.2.89", optional = true, default-features = false }
 js-sys = { version = "0.3.66", optional = true }
 wasm-bindgen-futures = { version = "0.4.39", optional = true }
-reqwest = { version = "0.11.22", optional = true }
+reqwest = { version = "0.11.23", optional = true, git = "https://github.com/kvinwang/reqwest", branch = "phatjs" }
 phala-allocator = { version = "0.1.0", optional = true }
 
 [dependencies.web-sys]

diff --git a/sidevm-quickjs/Makefile b/sidevm-quickjs/Makefile
@@ -11,7 +11,8 @@ WEB_BUILD_OUTPUT_DIR=target/wasm32-unknown-unknown/release
 all: wasi web native
 wasi: $(BUILD_OUTPUT)
 web: phatjs-web.wasm
-	-wasm-bindgen phatjs-web.wasm  --out-dir web --typescript --target web --out-name index
+	-wasm-bindgen phatjs-web.wasm  --out-dir web/dist --typescript --target web --out-name phatjs
+	tar czvf web.tar.gz web/
 
 %.wasm:
 	cargo build --release --target wasm32-wasi --no-default-features --features js-hash,sidevm

diff --git a/sidevm-quickjs/src/lib.rs b/sidevm-quickjs/src/lib.rs
@@ -264,10 +264,18 @@ pub mod runtime {
 
     #[no_mangle]
     extern "C" fn __pink_fd_write(
-        _fd: core::ffi::c_int,
-        _buf: *const core::ffi::c_uchar,
-        _len: usize,
+        fd: core::ffi::c_int,
+        buf: *const core::ffi::c_uchar,
+        len: usize,
     ) -> usize {
-        unimplemented!()
+        // Bridge the fd to the console.
+        let buf = unsafe { std::slice::from_raw_parts(buf, len) };
+        let buf = String::from_utf8_lossy(buf).into_owned();
+        match fd {
+            1 => console::log_2(&"JS:".to_string().into(), &buf.into()),
+            2 => console::error_2(&"JS:".to_string().into(), &buf.into()),
+            _ => unimplemented!("Unsupported fd: {fd}"),
+        }
+        len
     }
 }
diff --git a/sidevm-quickjs/web/index.html b/sidevm-quickjs/web/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Play with QuickJS</title>
+</head>
+
+<body>
+    <div class="result" id="result">
+        <textarea id="input-code" style="width: 500px; height: 200px;">
+        async function main() {
+            const url = "https://httpbin.org/get";
+            console.log("Getting: ", url);
+            const response = await fetch(url);
+            console.log("Response: ", response.status);
+            const body = await response.text();
+            Sidevm.inspect("Body: ", body);
+            return body;
+        }
+        main()
+            .then(result => scriptOutput = result)
+            .catch(err => scriptOutput = err)
+            .finally(() => Sidevm.exit());
+        </textarea>
+        <br>
+        <button id="btn-run" disabled="true">Run</button>
+        <p>Output: <span id="output"></span></p>
+    </div>
+</body>
+
+</html>
+<script type="module" src="main.js"></script>
diff --git a/sidevm-quickjs/web/main.js b/sidevm-quickjs/web/main.js
@@ -0,0 +1,27 @@
+import init, { run } from "./dist/phatjs.js";
+
+// Provide custom fetch implementation for phatjs
+window.phatjsFetch = (resource, options) => {
+    console.log("Fetch: ", resource, options);
+    return fetch(resource, options);
+}
+
+async function runScript() {
+    const script = document.getElementById("input-code").value;
+    document.getElementById("btn-run").disabled = true;
+    const args = ["42"];
+    try {
+        const output = await run(["phatjs", "-c", script, "--", ...args]);
+        document.getElementById("output").innerText = output;
+    } finally {
+        document.getElementById("btn-run").disabled = false;
+    }
+}
+
+async function main() {
+    await init();
+    document.getElementById("btn-run").onclick = runScript;
+    document.getElementById("btn-run").disabled = false;
+}
+
+main().catch(console.error)