automerge/automerge-js/examples/vite
2022-10-10 14:14:38 +01:00
..
public Add examples of using automerge with bundlers 2022-10-04 17:23:37 +01:00
src Rename automerge and automerge-wasm packages 2022-10-04 22:05:56 +01:00
.gitignore Add examples of using automerge with bundlers 2022-10-04 17:23:37 +01:00
index.html Add examples of using automerge with bundlers 2022-10-04 17:23:37 +01:00
main.ts Add examples of using automerge with bundlers 2022-10-04 17:23:37 +01:00
package.json bump @automerge/automerge-wasm and @automerge/automerge versions 2022-10-06 22:53:21 +01:00
README.md Update vite.config.js in Vite Example README 2022-10-10 14:14:38 +01:00
tsconfig.json Add examples of using automerge with bundlers 2022-10-04 17:23:37 +01:00
vite.config.js Rename automerge and automerge-wasm packages 2022-10-04 22:05:56 +01:00

Vite + Automerge

There are three things you need to do to get WASM packaging working with vite:

  1. Install the top level await plugin
  2. Install the vite-plugin-wasm plugin
  3. Exclude automerge-wasm from the optimizer

First, install the packages we need:

yarn add vite-plugin-top-level-await
yarn add vite-plugin-wasm

In vite.config.js

import { defineConfig } from "vite"
import wasm from "vite-plugin-wasm"
import topLevelAwait from "vite-plugin-top-level-await"

export default defineConfig({
    plugins: [topLevelAwait(), wasm()],

    optimizeDeps: {
        // This is necessary because otherwise `vite dev` includes two separate
        // versions of the JS wrapper. This causes problems because the JS
        // wrapper has a module level variable to track JS side heap
        // allocations, initializing this twice causes horrible breakage
        exclude: ["@automerge/automerge-wasm"]
    }
})

Now start the dev server:

yarn vite

Running the example

yarn install
yarn dev