Run JavaScript in WebAssembly

Now supporting wasmedge socket for HTTP requests and Tensorflow in JavaScript programs!

Changes Compared to Upstream Repo

In general, this version strips down the WASMEdge QuickJS implementation to allow it to run on non-wasi_snapshot_preview1 compatible edge compute contexts, like Fastly.

• Added wasi_snapshot_preview1 feature. Disabled by default. If enabled, restores the QuickJS implementation back to be feature complete:
  • Enables functions like setTimeout, setImmediate.
  • Enables http support and socket support, among others that require IO access granted by the preview1 WASI snapshot.
• Added inherit_env feature. Disabled by default for security. If enabled, the process env of the Context-instantiating Rust code will be passed down to executed JS.
• Added get_message on JsException to get the error message of the exception if it follows a common JS error structure.

Prerequisites

Make sure that you will have GCC installed on Ubuntu 20.04.

$ sudo apt update
$ sudo apt install build-essential

Install Rust and use the following command to install the wasm32-wasi target.

$ rustup target add wasm32-wasi

Install wasmedge CLI tool. Make sure that you use the -e all option to install the WasmEdge Tensorflow extensions if you want to try the Tensorflow examples.

Hello world

Build

$ cargo build --target wasm32-wasi --release

Run

$ wasmedge --dir .:. target/wasm32-wasi/release/wasmedge_quickjs.wasm example_js/hello.js WasmEdge Runtime

Add Core Module With JavaScript(ES)

Build

cargo build --target wasm32-wasi --release

Run

$ wasmedge --dir .:. target/wasm32-wasi/release/wasmedge_quickjs.wasm example_js/module_demo/demo.js

ReferenceError: could not load module filename 'my_mod_1'

$ ls example_js/module_demo/modules/

my_mod_1.js  my_mod_2.js

# copy `my_mod_1.js` & `my_mod_2.js` into modules/
# and wasmedge_quickjs will load it as a core module
$ cp example_js/module_demo/modules/* modules/
$ wasmedge --dir .:. target/wasm32-wasi/release/wasmedge_quickjs.wasm example_js/module_demo/demo.js

hello from "my_mod_1.js"
hello from "my_mod_2.js"

Async HTTP Request

Build

$ cargo build --target wasm32-wasi --release

Run

HTTP client applications.

$ wasmedge --dir .:. target/wasm32-wasi/release/wasmedge_quickjs.wasm example_js/wasi_http_client.js

Start an HTTP server.

$ nohup wasmedge --dir .:. target/wasm32-wasi/release/wasmedge_quickjs.wasm example_js/wasi_http_echo.js &

Access the server.

$ curl -d "WasmEdge" -X POST http://localhost:8000
echo:WasmEdge

These examples also show how to import another JavaScript file into the current program.

React SSR

Build

$ cargo build --target wasm32-wasi --release

Then use rollup.js to bundle the React application into a combined JS file. It turns the CommonJS modules in the application into ES6 modules, which we support.

$ cd example_js/react_ssr
$ npm install
$ npm run build

Run

$ wasmedge --dir .:. ../../target/wasm32-wasi/release/wasmedge_quickjs.wasm dist/main.js

<div data-reactroot=""><div>This is home</div><div><div>This is page</div></div></div>

React Stream SSR

Build

$ cargo build --target wasm32-wasi --release

Then use rollup.js to bundle the React application into a combined JS file. It turns the CommonJS modules in the application into ES6 modules, which we support.

$ cd example_js/react_ssr_stream
$ npm install
$ npm run build

Run

Start the server.

$ nohup wasmedge --dir .:. ../../target/wasm32-wasi/release/wasmedge_quickjs.wasm dist/main.mjs &

Access the server.

$ curl http://localhost:8001

The results show the response comes in chuncks and the client closes the connection once all chuncks are received.

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100   211    0   211    0     0   1029      0 --:--:-- --:--:-- --:--:--  1024
100   275    0   275    0     0    221      0 --:--:--  0:00:01 --:--:--   220
100   547    0   547    0     0    245      0 --:--:--  0:00:02 --:--:--   245
100  1020    0  1020    0     0    413      0 --:--:--  0:00:02 --:--:--   413

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><title>Title</title></head><body><div><div> This is LazyHome </div><!--$?--><template id="B:0"></template><div> loading... </div><!--/$--></div></body></html><div hidden id="S:0"><template id="P:1"></template></div><div hidden id="S:1"><div><div>This is lazy page</div></div></div><script>function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:1","P:1")</script><script>function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")</script>

TensorFlow

Build

Note: Build the QuickJS interpreter with the WasmEdge Tensorflow extension.

$ cargo build --target wasm32-wasi --release --features=tensorflow

Run

$ cd example_js/tensorflow_lite_demo
$ wasmedge-tensorflow-lite --dir .:. ../../target/wasm32-wasi/release/wasmedge_quickjs.wasm main.js

ES6 module support

Build

$ cargo build --target wasm32-wasi --release

Run

$ cd example_js/es6_module_demo
$ wasmedge --dir .:. ../../target/wasm32-wasi/release/wasmedge_quickjs.wasm demo.js

Optional: Get static-lib & binding.rs

If you want to build a custom libquickjs.a to export some static c function.

See [quickjs-wasi]

run quickjs-wasi/lib/build.sh