Support status for vite-plugin-wasm and testing env

[Jerboas86]

I was trying to uderstand where vite-plugin-wasm is supported.
The testing environment is here: https://github.com/Jerboas86/vpw-test-env

I tried different frameworks:

• svelte (CSR)
• sveltekit (SSR)

In different scopes:

• Window scope
• Worker scope
• Worklet scope (audioworklet)
• Nodejs scope (vitest)

And with different web browers:

• Chrome 108
• Firefox 108
• Gnome web (aka Epiphany) 43

Results

Chrome

	Svelte	Sveltekit
Window	✅	❗
Worker	✅	❗
Worklet	❗	❗
Vitest	❗	❗

Firefox

	Svelte	Sveltekit
Window	✅	❗
Worker	❗	❗
Worklet	❗	❗
Vitest	❗	❗

Gnome web

	Svelte	Sveltekit
Window	✅	❗
Worker	✅	❗
Worklet	❗	❗
Vitest	❗	❗

opened issues:

• Firefox support for web workers
• [SSR support] (SSR support #4)

and opened PR:

• vitest support

I would suggest to:

• update the readme to reflect current support
• and open issue for audioworklet support

The testing can also be extended if it is valuable, let me known.

[Menci]

Can't start your project

[Menci]

I managed to build your project and added Vitest and SSR support. Please test~

[Menci]

A question: what's the difference between Worker and Worklet. What extra steps will I need to make it work in Worklet?

[Jerboas86]

With vite-plugin-wasm: v3.2.1

Results

Vitest

	Svelte	Sveltekit
Vitest	✅	✅

Chrome

	Svelte	Sveltekit
Window	✅	✅
Worker	✅	✅
Worklet	❗	❗

Firefox

	Svelte	Sveltekit
Window	✅	✅
Worker	❗	❗
Worklet	❗	❗

Gnome web

	Svelte	Sveltekit
Window	✅	✅
Worker	✅	✅
Worklet	❗	❗

[Jerboas86]

A question: what's the difference between Worker and Worklet. What extra steps will I need to make it work in Worklet?

AFAIK, In AudioWorkletScope:

• URL is not available.
• fetch is not available.
• import is not available (yet) in Firefox's worklet (see)

Other apis are not available (see)

I dont known if this is also true for others worklet: PainWorklet, LayoutWorklet, and AnimationWorklet.

[Menci]

Does it mean I could only base64 encode the WASM file to load it in Worklet context? Are there any other APIs used by wasm-bindgen that is missing in Worklet context?

[Jerboas86]

Does it mean I could only base64 encode the WASM file to load it in Worklet context?

I dont known

Are there any other APIs used by wasm-bindgen that is missing in Worklet context?

wasm-bindgen uses TextEncoder and TextDecoder (see).

[Menci]

Firefox worker is supported now. Please test.

[Jerboas86]

worker is still not working on FF, for both svelte and sveltekit (tested with with vite-plugin-wasm last commit)

this error message appears in the console.

SyntaxError: import declarations may only appear at top level of a module

[Menci]

How did you build?

You need to set worker to iife, not es.

[Jerboas86]

How did you build?

I retrieved the commit and built from source, maybe there is a better way?

package.json

{
  [...]
  "devDependencies": {
   [...]
    "vite-plugin-wasm": "git@github.com:Menci/vite-plugin-wasm.git#7ab4a5e"
  }
}

You need to set worker to iife, not es.

i used the default as specify in the README

vite.config.js

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), wasm(), topLevelAwait()],
  test: {
    environment: "jsdom",
  },
  worker: {
    plugins: [wasm(), topLevelAwait()],
  },
});

I push it on the repo, you can check it out, see if there is any mistake. (link)

[Menci]

No, you need to use my plugin vite-plugin-top-level-await to transform this.

…

On Tue, Feb 28, 2023 at 19:28 Jerboas86 ***@***.***> wrote: How did you build? I retrieved the commit and built from source, maybe there is a better way? package.json { [...] "devDependencies": { [...] "vite-plugin-wasm": ***@***.***:Menci/vite-plugin-wasm.git#7ab4a5e" } } You need to set worker to iife, not es. i used the default as specify in the README vite.config.js import { defineConfig } from "vite"; import { svelte } from ***@***.***/vite-plugin-svelte"; import wasm from "vite-plugin-wasm"; import topLevelAwait from "vite-plugin-top-level-await"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [svelte(), wasm(), topLevelAwait()], test: { environment: "jsdom", }, worker: { plugins: [wasm(), topLevelAwait()], }, }); I push it on the repo, you can check it out, see if there is any mistake. (link) <https://github.com/Jerboas86/vpw-test-env> — Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACWRBA2D3PICUVVBBLZHCILWZXOOHANCNFSM6AAAAAATQTFISY> . You are receiving this because you commented.Message ID: ***@***.***>