Support status for vite-plugin-wasm and testing env

Jerboas86 commented 1 year ago

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] (https://github.com/Menci/vite-plugin-wasm/issues/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 commented 1 year ago

Can't start your project

Menci commented 1 year ago

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

Menci commented 1 year ago

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

Jerboas86 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Firefox worker is supported now. Please test.

Jerboas86 commented 1 year ago

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 commented 1 year ago

How did you build?

You need to set worker to iife, not es.

Jerboas86 commented 1 year ago

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 commented 1 year ago

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 https://github.com/Menci/vite-plugin-wasm/issues/24#issuecomment-1448017533, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBA2D3PICUVVBBLZHCILWZXOOHANCNFSM6AAAAAATQTFISY . You are receiving this because you commented.Message ID: @.***>

Menci / vite-plugin-wasm