Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support WebAssembly modules #8031

Open
wants to merge 27 commits into
base: main
Choose a base branch
from
Open

Support WebAssembly modules #8031

wants to merge 27 commits into from

Conversation

jamesopstad
Copy link
Contributor

@jamesopstad jamesopstad commented Feb 5, 2025

Fixes #7851. Partially addresses #8022.

This adds support for Wasm in the Vite plugin. Imported Wasm modules are loaded via the module fallback service in dev and included as part of the bundle in build.

I've prioritised Wasm first as users are asking for it. Once this PR is merged, however, I will create a follow up PR that generalises the approach to include CompiledWasm, Text and Data modules defined by the user's rules.


  • Tests
    • TODO (before merge)
    • Tests included
    • Tests not necessary because:
  • E2E Tests CI Job required? (Use "e2e" label or ask maintainer to run separately)
    • I don't know
    • Required
    • Not required because: Vite plugin has its own tests
  • Public documentation
    • TODO (before merge)
    • Cloudflare docs PR(s):
    • Documentation not necessary because: rules documentation to be added after follow up PR

@jamesopstad jamesopstad added the vite-plugin Relating to the `@cloudflare/vite-plugin` package label Feb 5, 2025
@jamesopstad jamesopstad requested review from a team as code owners February 5, 2025 09:53
Copy link

changeset-bot bot commented Feb 5, 2025

🦋 Changeset detected

Latest commit: f1b31f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudflare/vite-plugin Minor

Not sure what this means? Click here to learn what changesets are.

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

Copy link
Contributor

github-actions bot commented Feb 5, 2025

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-wrangler-8031

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/8031/npm-package-wrangler-8031

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-wrangler-8031 dev path/to/script.js
Additional artifacts:

cloudflare-workers-bindings-extension:

wget https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-workers-bindings-extension-8031 -O ./cloudflare-workers-bindings-extension.0.0.0-v1753c3abd.vsix && code --install-extension ./cloudflare-workers-bindings-extension.0.0.0-v1753c3abd.vsix

create-cloudflare:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-create-cloudflare-8031 --no-auto-update

@cloudflare/kv-asset-handler:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-kv-asset-handler-8031

miniflare:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-miniflare-8031

@cloudflare/pages-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-pages-shared-8031

@cloudflare/unenv-preset:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-unenv-preset-8031

@cloudflare/vite-plugin:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-vite-plugin-8031

@cloudflare/vitest-pool-workers:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-vitest-pool-workers-8031

@cloudflare/workers-editor-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-workers-editor-shared-8031

@cloudflare/workers-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-workers-shared-8031

@cloudflare/workflows-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13197610637/npm-package-cloudflare-workflows-shared-8031

Note that these links will no longer work once the GitHub Actions artifact expires.


[email protected] includes the following runtime dependencies:

Package Constraint Resolved
miniflare workspace:* 3.20250129.0
workerd 1.20250204.0 1.20250204.0
workerd --version 1.20250204.0 2025-02-04

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

"check:types": "tsc --build",
"dev": "vite dev",
"generate": "pnpm prisma generate",
"postinstall": "pnpm generate",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to add this so that the build wouldn't fail when all packages are built by TurboRepo. It might be better for us to omit the playground packages from being built automatically as the builds aren't used elsewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think it's a problem that this will run prisma generate whenever someone runs pnpm i in the repo?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mh... yeah it's not ideal 😕

what about using predev and prebuild scripts instead?

Something like:

"predev": "node ./prisma-setup.mjs",
"prebuild": "node ./prisma-setup.mjs",

with prista-setup.mjs checking if the prisma is already set up (hopefully there's a simple way to do that?) and running (via child_process) prisma generate only when it isn't? (so that on subsequent dev/build runs this script does nothing)

this should avoid the pnpm i issue with close to zero overhead when running dev/build

what do you think?

Copy link
Member

@dario-piotrowicz dario-piotrowicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice! 🤩 🚀

I've just left a few minor comments

packages/vite-plugin-cloudflare/playground/wasm/minimal.c Outdated Show resolved Hide resolved
packages/vite-plugin-cloudflare/src/miniflare-options.ts Outdated Show resolved Hide resolved
packages/vite-plugin-cloudflare/src/modules-plugin.ts Outdated Show resolved Hide resolved
packages/vite-plugin-cloudflare/src/modules-plugin.ts Outdated Show resolved Hide resolved
packages/vite-plugin-cloudflare/src/modules-plugin.ts Outdated Show resolved Hide resolved
packages/vite-plugin-cloudflare/src/modules-plugin.ts Outdated Show resolved Hide resolved
@dario-piotrowicz
Copy link
Member

PS: @jamesopstad there's a merge conflict with your lock file

@jamesopstad
Copy link
Contributor Author

Very nice! 🤩 🚀

I've just left a few minor comments

Thanks @dario-piotrowicz! I've addressed all the feedback.

See also my comment here - #8031 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vite-plugin Relating to the `@cloudflare/vite-plugin` package
Projects
Status: Untriaged
Development

Successfully merging this pull request may close these issues.

Add WebAssembly playground to Vite plugin
2 participants