# vite-plugin-wasm-esm

**Repository Path**: LsStudy/vite-plugin-wasm-esm

## Basic Information

- **Project Name**: vite-plugin-wasm-esm
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-13
- **Last Updated**: 2024-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-plugin-wasm-esm

Vite plugin with SSR support to use [wasm-pack][1] generated packages as regular ES
modules.

## Installation

Install using your favorite package manager

```
npm i -D vite-plugin-wasm-esm
```

## Usage

To use this plugin, you must support [`await`][2] at module top level. This has
been [supported in all major browsers for a while][3], but if you need
backwards compatibility, you can use [`vite-plugin-top-level-await`][4].

After installation, add it to your vite config and specify all packages you
want the plugin to handle:

```javascript
// vite.config.js
import wasm from "vite-plugin-wasm-esm";

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [wasm(["@acme/wasm-calculator"])],
};

export default config;
```

You probably also need to specify custom build targets, as the default targets
provided by vite doesn't support await at the module top level:

```javascript
// vite.config.js
import wasm from "vite-plugin-wasm-esm";

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [wasm(["@acme/wasm-calculator"])],
	build: {
		target: ["chrome89", "safari15", "firefox89"],
	},
	esbuild: {
		target: ["chrome89", "safari15", "firefox89"],
	},
};

export default config;
```

All wasm packages handled by the plugin can be used as regular ES modules, both
on the server during SSR and in the browser:

```javascript
import { plus } from "@acme/wasm-calculator";

console.log(plus(1, 1)); // 3
```

[1]: https://github.com/rustwasm/wasm-pack "wasm-pack project's github page"
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await "MDN documentation on the await keyword"
[3]: https://caniuse.com/mdn-javascript_operators_await_top_level "Browser support of module top level await feature"
[4]: https://github.com/Menci/vite-plugin-top-level-await "Vite plugin for polyfilling top level await"