Require WebAssembly modules using script tag

You can install script-wasm using npm:

npm install --save script-wasm

If you aren't using npm in your project, you can include scriptWasm using UMD build in the dist folder with importScripts in the serviceWorker.

Once you have installed script-wasm, supposing a CommonJS environment, in yuor serviceWorker you can import and use it in this way:

import fetchWasmScript from 'script-wasm';
// if you prefer, you can import it using a CDN instead
// self.importScripts('https://unpkg.com/[email protected]/dist/script-wasm.min.js')

self.addEventListener('fetch', (event) => {
  const newResponse = fetchWasmScript(event.request);
  // using CND:
  // const newResponse = scriptWasm.default(event.request)

  // returns null if the given request is not a .wasm from a <script> tag
  if (newResponse !== null) {
    event.respondWith(newResponse);
  }
});

In your html file:

<!--
  data-import represents the importObject passed to instantiate the module
  check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
-->
<script src="/example.wasm" data-import="{ imports: { log: console.log } }"></script>

example.wasm can be a file with an associated .wat like the following, it imports log and automatically runs the function $main after the instantiation, using the start instruction:

(module
  (func $log (import "imports" "log") (param i32))

  (func $main
    (call $log
      (i32.add
        (i32.const 2)
        (i32.const 5)
      )
    )
  )

  (start $main)
)

// serviceWorker
fetchWasmScript(request: Request): Response?

// html
<script src="your_wasm_file.wasm" data-import="your_import_object"></script>

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Matteo Basso

• github/mbasso
• @teo_basso

Copyright (c) 2019, Matteo Basso.

script-wasm source code is licensed under the MIT License.