Git Product home page Git Product logo

wasmer-js's Introduction

The Wasmer JavaScript SDK

npm (scoped) NPM Downloads License Wasmer Discord Channel API Docs

Javascript library for running Wasmer packages at ease, including WASI and WASIX modules.

Getting Started

Install from NPM

For instaling @wasmer/sdk, run this command in your shell:

npm install --save @wasmer/sdk

You can now run WASI packages from the Wasmer registry:

import { init, Wasmer } from "@wasmer/sdk";

await init();

const pkg = await Wasmer.fromRegistry("python/python");
const instance = await pkg.entrypoint.run({
    args: ["-c", "print('Hello, World!')"],
});

const { code, stdout } = await instance.wait();
console.log(`Python exited with ${code}: ${stdout}`);

Use with a <script> tag (without bundler)

It is possible to avoid needing to use a bundler by importing @wasmer/sdk as a UMD module.

By adding the following <script> tag to your index.html file, the library will be available as the WasmerSDK global variable.

<script src="https://unpkg.com/@wasmer/sdk@latest"></script>
<script>
    const { init, Wasmer } = WasmerSDK;

      async function runPython() {
          await init();

          const packageName = "python/python";
          const pkg = await Wasmer.fromRegistry(packageName);
          const instance = await pkg.entrypoint.run({
              args: ["-c", "print('Hello, World!')"],
          });

          const { code, stdout } = await instance.wait();

          console.log(`Python exited with ${code}: ${stdout}`);
      }

      runPython();
</script>

Alternatively, the package can be imported directly from the CDN by turning the script into a module.

<script defer type="module">
    import { init, Wasmer } from "https://unpkg.com/@wasmer/sdk@latest?module";

    async function runPython() {
        await init();

        ...
    }

    runPython();
</script>

Using a custom Wasm file

By default, WasmerSDK.init will load the Wasmer SDK WebAssembly file from unpkg.com. If you want to customize this behavior you can pass a custom url to the init, so the the wasm file of the Wasmer SDK can ve served by your HTTP server instead:

import { init, Wasmer } from "@wasmer/sdk";
import wasmUrl from "@wasmer/sdk/dist/wasmer_js_bg.wasm?url";

await init(wasmUrl); // This inits the SDK with a custom URL

Using a JS with the Wasm bundled

You can also load Wasmer-JS with a js file with the Wasmer SDK WebAssembly file bundled into it (using bas64 encoding), so no extra requests are required. If that's your use case, you can simply import @wasmer/sdk/dist/WasmerSDKBundled.js instead:

import { init, Wasmer } from "@wasmer/sdk/dist/WasmerSDKBundled.js";

await init(); // This inits the SDK in the bundled version

Cross-Origin Isolation

Browsers have implemented security measures to mitigate the Spectre and Meltdown vulnerabilities.

These measures restrict the sharing of `SharedArrayBuffer`` objects with Web Workers unless the execution context is deemed secure.

The @wasmer/sdk package uses a threadpool built on Web Workers and requires sharing the same SharedArrayBuffer across multiple workers to enable WASIX threads to access the same address space. This requirement is crucial even for running single-threaded WASIX programs because the SDK internals rely on SharedArrayBuffer for communication with Web Workers.

To avoid Cross-Origin Isolation issues, make sure any web pages using @wasmer/sdk are served over HTTPS and have the following headers set:

"Cross-Origin-Opener-Policy": "same-origin"
"Cross-Origin-Embedder-Policy": "require-corp"

See the SharedArrayBuffer and Cross-Origin Isolation section under the Troubleshooting Common Problems docs for more.

Features

The Wasmer SDK Javascript Package supports:

  • WASI support
    • Environment variables
    • FileSystem access
    • Command-line arguments
    • Stdio
  • WASIX support
    • Multi-threading
    • Spawning sub-processes
    • Networking (on the works)
  • Mounting directories inside the WASIX instance
  • Running packages from the Wasmer Registry
  • Platforms
    • Browser
    • NodeJS
    • Deno

License

The entire project is under the MIT License. Please read the LICENSE file.

wasmer-js's People

Contributors

arshia001 avatar corwin-of-amber avatar dependabot[bot] avatar dynamite-bud avatar fawadkhan avatar michael-f-bryan avatar sfranzyshen avatar sigmasd avatar syrusakbary avatar thetarnav avatar williamstein avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wasmer-js's Issues

rsign conversion error

The shell can't run rsign because some issue when transforming:

$ rsign
[INFO] Doing Transformations for "rsign"
wapm shell: parse error (CompileError: WebAssembly.compile(): section was shorter than expected size (648008 bytes expected, 647826 decoded) @+650103)

Create a plugin system for the wasm-terminal

relates to #41
relates to #36

This would be useful for implementing additional features on top of the base wasm-terminal package.

This could allow for things like saving modules to indexeddb, implementing custom callback commands (like updating cached modules, and searching for new modules), etc...

Consider APIs / Devex of individual packages

One of our high priority items is each individual API of each package should be clean, and needs to be considered and thought out. And tested through the tests / examples we produce ๐Ÿ˜„

Write Unit Tests for the Wasm Terminal Package

UI: Should be simple it binds to dom, and can accept input and do certain actions ๐Ÿ˜„

Services: May want to test the Services mostly, like they can fetch commands and things ๐Ÿ‘

Offer Development Builds, where Assets are Base64 encoded

It was suggested by @syrusakbary that we base64 encode some of our wasm assets for a better developer experience.

Where we agreed it is the less complicated devex, I countered it is not something we should do by default:

  1. Base64'ing large assets (like our wasm files), will add The wasm file size, plus an additional 33% of the wasm file size, to our bundle size.

  2. Including the assets in the bundle will slow down our time to first paint, as it will still be downloading our bundle

  3. It will not allow our app to progressively enhance over time and introduce features as we need them.

Thus we decided this should not be the default build, but instead be some sort of development build, meant for hitting the ground running, but not for production.

Launch Checklist

  • Confirm packages look correct in Unpkg
  • Confirm everything in npm's Readme looks good
  • Test installing from npm and building a simple example works (90% done)
  • Decide if we should expose WasmFs on Wasi object
  • Allow Wapm Query to work anywhere
  • Fix Travis / CI (originally #55 )
  • Open Source this repo
  • Publish Article
  • Tweet the tweets
  • Write denoland/deno#3005

Write docs for the wasm-terminal package

Should clean up the README so it stands out on its own. Has some simple Reference docs, with one or two, concise examples.

This should all be within the README. smile

Missing CORS headers in Chrome

Hey, this tool is awesome!

The examples work great on Firefox, but on Chrome I get a wapm shell error: TypeError: Failed to fetch error because of missing CORS headers:

2019-06-26-wapm-shell

Write docs for the wasm_transformer package

Should clean up the README so it stands out on its own. Has some simple Reference docs, with one or two, concise examples.

This should all be within the README. ๐Ÿ˜„

Should have both Rust, and Node / Browser examples and usage.

Write Docs for the Wasi Package

Should clean up the README so it stands out on its own. Has some simple Reference docs, with one or two, concise examples.

This should all be within the README. ๐Ÿ˜„

Write docs for the Wasmfs Package

Should clean up the README so it stands out on its own. Has some simple Reference docs, with one or two, concise examples.

This should all be within the README. smile

LINES, COLUMNS exposed automatically

In a normal shell, the env vars $LINES and $COLUMNS are set with the lines and columns for the given shell.

echo "$LINES - $COLUMNS"

Ideally, we will have this environment variables working as well in the Wasm Terminal / WASI shell

Support for multiple pipes

Probably a known issue but it would be nice to support multiple pipes. ๐Ÿ˜„

Currently it seems it only considers the first pipe, e.g.:

$ md5 "test" | cowsay
 __________________________________
< 098f6bcd4621d373cade4e832627b4f6 >
 ----------------------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
               ||----w |
                ||     ||
$ 
$ echo -n "test" | md5 | cowsay
098f6bcd4621d373cade4e832627b4f6
$ 

Error 404 when trying to run the example 'wasm-shell'

When I follow the quickstart, I have a 404 error.

The steps I have followed :

  • clone the repo
  • npm install
  • npm run dev
  • --> Error 404

The problem is that 'npm run dev' launches the 'npx serve dist/' command and the 'dist' directory is empty.
I succeeded to run the example only after a 'npm run build' which generates js... in dist directory.

I don't know where is the problem (if we need to update scripts or update documentation) but I can help if you want :)

Create a simple file-system example

Could be as simple as a page that loads the file system, and runs some commands on the file system within wasi (Possibly an ls wasm module?)๐Ÿ˜„

i64 lowering only when needed

Right now, we are doing i64 to i32 lowering always because Browsers don't currently support calling a function with a i64 signature.

However, in a few months browser WebAssembly implementations will support it (and Node as well), therefore we should check if i64 function calls are supported and in case is not, lower it.

How we can check it?

  1. Create dummy WebAssembly file with a i64 signature that returns an i64
  2. Try to call it. If it succeeds, then it works otherwise we use our "polyfill lowering the i64s"

Improve the Contributing docs for packages

Currently, all the contributing docs just outline the guidelines, but it would be great to say things like, how to install node, and the individual build commands and what they do ๐Ÿ˜„

Wasm-terminal: Share WasmFs file system

Would be super awesome if commands that are piped, or all commands run in a single session, operated on the same file system.

However, this requires:

  • Ripping out the specific stdin/stdout code.
  • Creating one WasmFs that is passed into the terminal on contruction, and passed all the way down to the command runner.
  • Having the Command runner create copies of the wasmFs object (Comlink should be able to do this because it is awesome ๐Ÿ˜‚ ) that is passed to each web worker, and then synced back to the main wasm fs once the command finishes ๐Ÿ˜„

Split up our libraries with lerna

Since this will become a monorepo with all wasmer js stuff. We should split up our packages and their respective demos. And change the build system to reflect that. ๐Ÿ˜„

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.