remix feat(remix-dev): add `.wasm` as a supported file type

trafficstars

This is a truly massive change, that tells esbuild to bundle .wasm files with the file loader type in both the browser and server bundles. Big thanks to @jacob-ebey for helping me debug this at the Remix Conf bar!

Discussion

There was a brief discussion here, started by @seanaye.

Testing

If you're using Rust and wasm-bindgen, you'll want to bundle your Rust code with wasm-pack --target web. Then once you've done that, you'll want to import both the wasm file itself, the auto generated init() function, and the name of any functions you've made that you'd like to use within the route or component.

import init, {greet} from "../../browser-rust-functions/pkg/browser-rust-functions"

Once you have it loaded, you need to instantiate your WASM, which loads it into the browser's memory. You can either do it in your entry.client.tsx like this

import wasm from "../../browser-rust-functions/pkg/browser-rust-functions_bg.wasm"
import init from "../../browser-rust-functions/pkg/browser-rust-functions"
init(wasm).then(() => {
    hydrate(<RemixBrowser />, document);
})

You may want to make wasm loading conditional to pages that contain it, as the above method does it on every page; Then you can add a useEffect to your route or component to call the funtions you've created.

import {greet} from "../../browser-rust-functions/pkg/browser-rust-functions"
useEffect(() => {
      greet();
  }, [])

Alternatively you can do it all in one step inside your route

import wasm from "../../browser-rust-functions/pkg/browser-rust-functions_bg.wasm"
import init, {greet} from "../../browser-rust-functions/pkg/browser-rust-functions"
useEffect(() => {
init(wasm).then(() => {
      greet();
})
  }, [])

Feel free to check out a working example of this in my demo repo here.

May 24 '22 17:05 benwis

Hi @benwis,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

May 24 '22 17:05 remix-cla-bot[bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

May 24 '22 17:05 remix-cla-bot[bot]

⚠️ No Changeset found

Latest commit: bcf99c5f8bdd2c964767225e71b2c5a02551a11f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Aug 08 '22 10:08 changeset-bot[bot]

Is work still being done on this? I'd like to leverage what this aims to solve. Not trying to rush this, mostly just curious about any blockers or if we should be seeing if anyone else has spare time to assist.

Oct 04 '22 19:10 JSanchezIO

As far as I know, there's nothing that needs to be done here, other than merging the change. WASM support pretty much just needs .wasm added to the compiler and defined as a module.

We're using this patched into Remix now, but would love to have it in the next release. ------- Original Message ------- On Tuesday, October 4th, 2022 at 12:58 PM, Juan Sanchez @.***> wrote:

Is work still being done on this? I'd like to leverage what this aims to solve. Not trying to rush this, mostly just curious about any blockers or if we should be seeing if anyone else has spare time to assist.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

Oct 05 '22 15:10 benwis

Should we @ anyone in particular to get this merged?

Oct 05 '22 17:10 JSanchezIO

@MichaelDeBoey are you able to guide us on getting this merged?

Oct 12 '22 23:10 JSanchezIO

@benwis I think you inadvertently merged the main branch into here which added a bunch of unrelated commits. Any chance you could back out of that so I can get this merged?

Oct 28 '22 21:10 chaance

Yeah, I should be able to. Give me a bit and I'll see what I can do

Oct 28 '22 21:10 benwis

@chaance I have removed that merge and things should be good to go.

Oct 28 '22 22:10 benwis

YAY! Thanks @chaance!

Nov 10 '22 22:11 benwis

🤖 Hello there,

We just published version v0.0.0-nightly-929d847-20221111 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!