add one way to run wasm module in chrome

Signed-off-by: Su Yihan <[email protected]>
yviansu · Feb 19, 2024 · bbee839 · bbee839
1 parent cda461d
commit bbee839
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 11 deletions.
diff --git a/...idate/run_module_on_node/import_object.js → ...lidate/run_module_on_v8/import_object.cjs b/...idate/run_module_on_node/import_object.js → ...lidate/run_module_on_v8/import_object.cjs
@@ -286,18 +286,20 @@ const importObject = {
         }
     },
     env: {
-        console_log: (obj) => {
+        Console_log: (obj) => {
             /** TODO: cant log reference type variable */
             console.log(obj);
         },
-        console_constructor: (obj) => {},
+        Console_constructor: (obj) => {},
         strcmp(a, b) {
             let lhs = cstringToJsString(a);
             let rhs = cstringToJsString(b);
             return lhs.localeCompare(rhs);
         },
         setTimeout: (obj) => {},
         clearTimeout: (obj) => {},
+        malloc: (size)=>{},
+        free: (size)=>{},
 
         array_push_generic: (ctx, obj, elem) => {},
         array_pop_f64: (ctx, obj) => {},
@@ -367,4 +369,22 @@ const importObject = {
     },
 };
 
-export { importObject, setWasmMemory };
+if (typeof window === 'undefined') {
+    module.exports = {
+        importObject: importObject,
+        setWasmMemory: setWasmMemory
+    };
+}
+
+function run_wasm_module(wasmFilePath, wasmFuncName, ...funcArgs) {
+    fetch(wasmFilePath)
+        .then((response) => response.arrayBuffer())
+        .then((bytes) => WebAssembly.instantiate(bytes, importObject))
+        .then((results) => {
+            const exports = results.instance.exports;
+            const exportedFunc = exports[wasmFuncName];
+            const res = exportedFunc(...funcArgs);
+            const resultElement = document.getElementById('result');
+            resultElement.innerHTML = `The result is: ${res}`;
+        });
+}
diff --git a/tools/validate/run_module_on_v8/run_module_on_chrome.html b/tools/validate/run_module_on_v8/run_module_on_chrome.html
@@ -0,0 +1,45 @@
+<!--
+  Copyright (C) 2023 Intel Corporation.  All rights reserved.
+  SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>run wasm module</title>
+  </head>
+  <body>
+    <form id="processForm">
+      <table>
+        <tr>
+          <td><label for="pathInput">path:</label></td>
+          <td><input type="text" id="pathInput" required></td>
+        </tr>
+        <tr>
+          <td><label for="funcNameInput">function name:</label></td>
+          <td><input type="text" id="funcNameInput" required></td>
+        </tr>
+        <tr>
+          <td><label for="argsInput">arguments:</label></td>
+          <td><input type="text" id="argsInput"></td>
+        </tr>
+      </table>
+      <button type="submit">submit</button>
+    </form>
+
+    <script src="import_object.cjs"></script>
+    <script>
+      document.getElementById("processForm").addEventListener("submit", function(event) {
+        event.preventDefault();
+
+        var path = document.getElementById("pathInput").value;
+        var funcName = document.getElementById("funcNameInput").value;
+        var args = document.getElementById("argsInput").value.split(",");
+
+        run_wasm_module(path, funcName, ...args);
+      });
+    </script>
+    <p id="result"></p>
+  </body>
+</html>
diff --git a/...validate/run_module_on_node/run_module.js → ...e/run_module_on_v8/run_module_on_node.cjs b/...validate/run_module_on_node/run_module.js → ...e/run_module_on_v8/run_module_on_node.cjs
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
  */
 
-import fs from 'fs';
-import minimist from 'minimist';
-import { importObject, setWasmMemory } from './import_object.js';
+const fs = require('fs');
+const minimist = require('minimist');
+const { importObject, setWasmMemory } = require('./import_object.cjs');
 
 function showHelp() {
     console.log(`Options:

diff --git a/.../run_module_on_node/run_module_on_node.md → ...date/run_module_on_v8/run_module_on_v8.md b/.../run_module_on_node/run_module_on_node.md → ...date/run_module_on_v8/run_module_on_v8.md
@@ -1,12 +1,14 @@
-# Run generated WASM module on Node.js
+# Run generated WASM module on v8
 
-This document describes how to execute WASM module on Node.js.
+This document describes how to execute WASM module on v8, including on node.js and on chrome.
 
 > Note: Wasmnizer-ts follows the latest WasmGC spec, which requires `V8 v11.9+`, but the latest nodejs (v21.5.0) is using `V8 11.8.172.17`, so currently the generated WASM module can't execute on any nodejs releases.
 
 > If you do want to try on nodejs, you can reset to commit `94cf9929421d47a9976fa6edf74b25ef2a00ee12` to build the compiler, which is compatible to older V8 versions.
 
-## Prerequisites
+## Run module on node
+
+### Prerequisites
    - node.js version 20.0.0 or higher
 
      to enable support for `stringref` feature, node.js version 20.0 or higher is necessary.
@@ -16,7 +18,7 @@ This document describes how to execute WASM module on Node.js.
      - `--experimental-wasm-gc`: This flag is required to enable support for the WASM GC feature.
      - `--experimental-wasm-stringref`: This flag is needed to enable support for the `stringref` feature.
 
-## How to Run
+### How to Run
 
    To run your WebAssembly file, use the following command:
 
@@ -31,7 +33,7 @@ This document describes how to execute WASM module on Node.js.
    - `-f`: specify the exported WASM function you want to execute in Node.js.
    - `-s`: specify to execute the `_start` WASM function to initialize global variables if necessary.
 
-## Example
+### Example
 
    Here is an example.
 
@@ -52,3 +54,14 @@ This document describes how to execute WASM module on Node.js.
    ```
 
    it will output `1`.
+
+## Run module on chrome
+
+### Prerequisites
+- Set chrome flags by `chrome://flags`, should set these flags as enabled:
+   - Experimental WebAssembly
+   - WebAssembly Garbage Collection
+   - WebAssembly Stringref
+
+### How to Run
+Start a server, open the `run_module_on_chrome.html` on chrome, fill in with the wasm path, the wasm function name, and arguments(must be separated by commas), then click `submit` button, and the result will be print on the page.