		@@ -95,6 +95,31 @@ [npm]: https://img.shields.io/npm/v/@rollup/plugin-wasm

		## WebAssembly Example
		## Usage

		Given the following simple C file:
		This plugin looks for `import` statements where the file specifier ends with `.wasm`, such as:

		```js
		import wasm from './example.wasm';
		```

		The WebAssembly is inlined as a base64 encoded string. At runtime the string is decoded and a module is returned.

		_Note: The base64 string that represents the WebAssembly within the bundle will be ~33% larger than the original file._

		When bundled, `wasm` is a function you can use to instantiate the functionality inside of the WebAssembly module. This function returns a promise, so you can instantiate the module like this:

		```js
		import wasm from './example.wasm';

		wasm().then(({ instance }) => {
		// use instance
		});

		// or use top-level await
		const { instance } = await wasm();
		```

		The promise returns an object with an `instance` property that is a [`WebAssembly.Module`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Module) object that you can use to interact with the WebAssembly module.

		For example, given the following simple C file:

		```c
		@@ -106,3 +131,3 @@ int main() {

		Compile the file using `emscripten`, or the online [WasmFiddle](https://wasdk.github.io/WasmFiddle//) tool. Then import and instantiate the resulting file:
		Compile the file using `emscripten`, or the online [WasmFiddle](https://wasdk.github.io/WasmFiddle/) tool. Then import and instantiate the resulting file:

		@@ -112,3 +137,3 @@ ```js

		sample({ ...imports }).then(({ instance }) => {
		sample().then(({ instance }) => {
		console.log(instance.exports.main());
		@@ -118,17 +143,75 @@ });

		The WebAssembly is inlined as a base64 encoded string. At runtime the string is decoded and a module is returned.
		### Passing Imports and Memory

		_Note: The base64 string that represents the WebAssembly within the bundle will be ~33% larger than the original file._
		If you'd like to pass any imports or memory into your WebAssembly module, you can do so by passing those as arguments to the WebAssembly loader function, like this:

		```js
		import sample from './sample.wasm';

		const memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });

		const options = {
		js: {
		mem: memory
		},
		imports: {
		log: (arg) => console.log(arg)
		}
		};

		sample(options).then(({ instance }) => {
		console.log(instance.exports.main());
		});
		```

		Because this example passes in `imports`, the `instance` becomes an instance of [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance) and gives the WebAssembly code access to the imports and memory from JavaScript.

		\_\_Note: Just passing in memory will result in a `WebAssembly.Module` as `instance`; it's only `imports` that triggers the creation of `WebAssembly.Instance`.

		### Using with wasm-bindgen and wasm-pack

		If you are writing Rust code and using [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) or [`wasm-pack`](https://github.com/rustwasm/wasm-pack), you'll need to use a different process for instantiating your WebAssembly modules. Because WebAssembly files generated by these tools require specific imports, you cannot provide these yourself.

		The best setting to use with `wasm-bingen` or `wasm-pack` is `--target web`. This will generate your WebAssembly files (such as `sample_bg.wasm`) with a JavaScript wrapper (such as `sample.js`). The JavaScript wrapper contains all of the instantiation code you'll need.

		You'll need to import both the JavaScript file and the WebAssembly file into your project. Then, run the WebAssembly loading function and pass that into the `init()` function from the JavaScript file. Here's an example:

		```js
		import init, { main } from '../build/sample.js';
		import sample from '../build/sample_bg.wasm';

		sample()
		.then({ instance } => init(instance))
		.then(() => main());

		// or using top-level await

		await init(await sample());
		main();
		```

		Unlike with the `emscripten` example, you'll need to import the methods you want to use directly from the JavaScript file rather than accessing them on the `WebAssembly.Instance`.

		### Synchronous Modules

		Small modules (< 4KB) can be compiled synchronously by specifying them in the configuration.
		JavaScript runtimes allow small modules (< 4KB) to be compiled synchronously. If you'd like to specify some files to be compiled synchronously, you can do so in your `rollup.config.js` filecan be compiled synchronously by specifying them in the configuration.

		```js
		wasm({
		sync: ['web/sample.wasm', 'web/foobar.wasm']
		});
		import { wasm } from '@rollup/plugin-wasm';

		export default {
		input: 'src/index.js',
		output: {
		dir: 'output',
		format: 'cjs'
		},
		plugins: [
		wasm({
		sync: ['web/sample.wasm', 'web/foobar.wasm']
		});
		]
		};
		```

		This means that the exports can be accessed immediately.
		Synchronous modules return a synchronous loader function that returns either a `WebAssembly.Module` or `WebAssembly.Instance` directly (not a promise). So you can use the module directly, like this:

		@@ -135,0 +218,0 @@ ```js

@rollup/plugin-wasm - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics