[Feature]: Support Wasm loader in ESBuild

[seanaye]

What is the new or updated feature that you are suggesting?

There is currently no way to load Wasm files in a idiomatic way in Remix. You can use workarounds like copying the .wasm to the public folder and calling fetch on it within a useEffect. But this is not great DX, nor does it work serverside.

Current Workaround method:

  const [mod, setMod] = useState<InitOutput | null>(null);
  useEffect(() => {
    (async () => {
      const res = await fetch("wasm_bg.wasm");
      const wasm = await load(res);
      setMod(wasm);
    })();
}, [])
...

With the ESBuild wasm loader plugin added I believe the api could look like this

import wasm from "./wasm"

This obviously requires a top level await since Wasm loads asynchronously but thats what's so great about Remix! The component can Suspend while the wasm is loading.

Why should this feature be included?

Wasm is a well supported web standard thats being used more and more. Devs will need to use wasm in Remix applications. They are either going to add it in a hacky way like I did 🥸 or Remix could add support for it and provide amazing DX

[XYCaptain]

Need it!

[benwis]

This is a bit tricky, I have an esbuild plugin that will include imported wasm files in your build for both server and client, so that part is done. I'm just not sure how I want to handle the wrappers that pass data in and out. For Rust, wasm-bindgen will generate the wrapper functions necessary to make using it painless, but then I have to pass it through esbuild or mark it external

[benwis]

@seanaye How are you generating your WASM?

[seanaye]

Rust with wasm-bindgen