https://github.com/mbasso/script-wasm
Require WebAssembly modules using script tag
https://github.com/mbasso/script-wasm
service-worker wasm webassembly
Last synced: 11 months ago
JSON representation
Require WebAssembly modules using script tag
- Host: GitHub
- URL: https://github.com/mbasso/script-wasm
- Owner: mbasso
- License: mit
- Created: 2019-04-29T20:40:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-01T16:40:15.000Z (about 7 years ago)
- Last Synced: 2025-06-28T03:49:59.461Z (12 months ago)
- Topics: service-worker, wasm, webassembly
- Language: JavaScript
- Size: 9.77 KB
- Stars: 14
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# script-wasm
[](https://travis-ci.org/mbasso/script-wasm)
[](https://www.npmjs.com/package/script-wasm)
[](https://www.npmjs.com/package/script-wasm)
[](https://github.com/mbasso/script-wasm/blob/master/LICENSE.md)
[](https://paypal.me/BassoMatteo)
> Require WebAssembly modules using script tag
## Installation
You can install script-wasm using [npm](https://www.npmjs.com/package/script-wasm):
```bash
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.
## Usage
Once you have installed script-wasm, supposing a CommonJS environment, in yuor serviceWorker you can import and use it in this way:
```js
import fetchWasmScript from 'script-wasm';
// if you prefer, you can import it using a CDN instead
// self.importScripts('https://unpkg.com/script-wasm@0.1.1/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 tag
if (newResponse !== null) {
event.respondWith(newResponse);
}
});
```
In your html file:
```html
<!--
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 } }">
```
`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:
```wat
(module
(func $log (import "imports" "log") (param i32))
(func $main
(call $log
(i32.add
(i32.const 2)
(i32.const 5)
)
)
)
(start $main)
)
```
## API
```js
// serviceWorker
fetchWasmScript(request: Request): Response?
// html
```
## Change Log
This project adheres to [Semantic Versioning](http://semver.org/).
Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/script-wasm/releases) page.
## Authors
**Matteo Basso**
- [github/mbasso](https://github.com/mbasso)
- [@teo_basso](https://twitter.com/teo_basso)
## Copyright and License
Copyright (c) 2019, Matteo Basso.
script-wasm source code is licensed under the [MIT License](https://github.com/mbasso/script-wasm/blob/master/LICENSE.md).