npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@swordjs/wasmedge-quickjs

v0.5.0-alpha.1

Published

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

Downloads

5

Readme

Run JavaScript in WebAssembly

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

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