Support WebAssembly modules (#8031)

.changeset/wild-schools-kiss.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": minor
+---
+
+Add support for Wasm (WebAssembly) modules.

packages/vite-plugin-cloudflare/playground/prisma/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+.env

packages/vite-plugin-cloudflare/playground/prisma/__tests__/prisma.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "vitest";
+import { getJsonResponse } from "../../__test-utils__";
+
+// Need to remove the `.wrangler` directory and run the following commands before the tests.
+// I'm not sure how to do this with our testing setup so have skipped the test for now.
+// const commands = [
+// 	`pnpm wrangler d1 migrations apply prisma-demo-db --local`,
+// 	`pnpm wrangler d1 execute prisma-demo-db --command "INSERT INTO  \"User\" (\"email\", \"name\") VALUES ('[email protected]', 'Jane Doe (Local)');" --local`,
+// ];
+
+test.skip("runs D1 query using Prisma", async () => {
+	const result = await getJsonResponse();
+	expect(result).toEqual([
+		{ id: 1, email: "[email protected]", name: "Jane Doe (Local)" },
+	]);
+});

packages/vite-plugin-cloudflare/playground/prisma/migrations/0001_create_user_table.sql

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "email" TEXT NOT NULL,
+    "name" TEXT
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

packages/vite-plugin-cloudflare/playground/prisma/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "@playground/prisma",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"prebuild": "pnpm generate",
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"predev": "pnpm generate",
+		"dev": "vite dev",
+		"generate": "pnpm prisma generate",
+		"migrate-db": "pnpm wrangler d1 migrations apply prisma-demo-db --local",
+		"preview": "vite preview",
+		"seed-db": "pnpm wrangler d1 execute prisma-demo-db --command \"INSERT INTO  \"User\" (\"email\", \"name\") VALUES ('[email protected]', 'Jane Doe (Local)');\" --local"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250121.0",
+		"@prisma/adapter-d1": "^6.3.0",
+		"@prisma/client": "^6.3.0",
+		"prisma": "^6.3.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "catalog:vite-plugin"
+	}
+}

packages/vite-plugin-cloudflare/playground/prisma/prisma/schema.prisma

@@ -0,0 +1,20 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider        = "prisma-client-js"
+	previewFeatures = ["driverAdapters"]
+	// Default output directory does not work with Vite. See https://github.com/vitejs/vite/issues/19036#issuecomment-2558791944
+	output          = "../node_modules/@prisma/client-generated"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}

packages/vite-plugin-cloudflare/playground/prisma/src/index.ts

@@ -0,0 +1,16 @@
+import { PrismaD1 } from "@prisma/adapter-d1";
+import { PrismaClient } from "@prisma/client-generated";
+
+interface Env {
+	DB: D1Database;
+}
+
+export default {
+	async fetch(request, env) {
+		const adapter = new PrismaD1(env.DB);
+		const prisma = new PrismaClient({ adapter });
+		const users = await prisma.user.findMany();
+
+		return Response.json(users);
+	},
+} satisfies ExportedHandler<Env>;

packages/vite-plugin-cloudflare/playground/prisma/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}

packages/vite-plugin-cloudflare/playground/prisma/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}

packages/vite-plugin-cloudflare/playground/prisma/tsconfig.worker.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src"]
+}

packages/vite-plugin-cloudflare/playground/prisma/turbo.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}

packages/vite-plugin-cloudflare/playground/prisma/vite.config.ts

@@ -0,0 +1,6 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [cloudflare()],
+});

packages/vite-plugin-cloudflare/playground/prisma/wrangler.toml

@@ -0,0 +1,9 @@
+name = "worker"
+main = "./src/index.ts"
+compatibility_date = "2024-12-30"
+compatibility_flags = ["nodejs_compat"]
+
+[[d1_databases]]
+binding = "DB"
+database_name = "prisma-demo-db"
+database_id = "local"

packages/vite-plugin-cloudflare/playground/wasm/README.md

@@ -0,0 +1,11 @@
+# WebAssembly Playground
+
+The `minimal.wasm` file in the `src` directory was generated from the following C code:
+
+```c
+#include <stdint.h>
+
+int32_t add(int32_t a, int32_t b) {
+    return a + b;
+}
+```

packages/vite-plugin-cloudflare/playground/wasm/__tests__/wasm.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "vitest";
+import { getJsonResponse } from "../../__test-utils__";
+
+test("imports and instantiates WebAssembly", async () => {
+	const result = await getJsonResponse();
+	expect(result).toEqual({ result: 7 });
+});

packages/vite-plugin-cloudflare/playground/wasm/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "@playground/wasm",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250121.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "catalog:vite-plugin"
+	}
+}

packages/vite-plugin-cloudflare/playground/wasm/src/index.ts

@@ -0,0 +1,10 @@
+import wasm from "./minimal.wasm";
+
+export default {
+	async fetch() {
+		const instance = await WebAssembly.instantiate(wasm);
+		const result = instance.exports.add(3, 4);
+
+		return Response.json({ result });
+	},
+} satisfies ExportedHandler;

packages/vite-plugin-cloudflare/playground/wasm/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}

packages/vite-plugin-cloudflare/playground/wasm/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}

packages/vite-plugin-cloudflare/playground/wasm/tsconfig.worker.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src"]
+}

packages/vite-plugin-cloudflare/playground/wasm/turbo.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}

packages/vite-plugin-cloudflare/playground/wasm/vite.config.ts

@@ -0,0 +1,6 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [cloudflare({ persistState: false })],
+});

packages/vite-plugin-cloudflare/playground/wasm/wrangler.toml

@@ -0,0 +1,3 @@
+name = "worker"
+main = "./src/index.ts"
+compatibility_date = "2024-12-30"

packages/vite-plugin-cloudflare/src/cloudflare-environment.ts

@@ -120,6 +120,8 @@ const cloudflareBuiltInModules = [
 	"cloudflare:workflows",
 ];
 
+const defaultConditions = ["workerd", "module", "browser"];
+
 export function createCloudflareEnvironmentOptions(
 	workerConfig: WorkerConfig,
 	userConfig: vite.UserConfig,
@@ -131,7 +133,7 @@ export function createCloudflareEnvironmentOptions(
 			//       dependencies as not external
 			noExternal: true,
 			// We want to use `workerd` package exports if available (e.g. for postgres).
-			conditions: ["workerd", "module", "browser", "development|production"],
+			conditions: [...defaultConditions, "development|production"],
 		},
 		dev: {
 			createEnvironment(name, config) {
@@ -142,6 +144,9 @@ export function createCloudflareEnvironmentOptions(
 			createEnvironment(name, config) {
 				return new vite.BuildEnvironment(name, config);
 			},
+			target: "es2022",
+			// We need to enable `emitAssets` in order to support additional modules defined by `rules`
+			emitAssets: true,
 			outDir: getOutputDirectory(userConfig, environmentName),
 			ssr: true,
 			rollupOptions: {
@@ -163,6 +168,7 @@ export function createCloudflareEnvironmentOptions(
 			],
 			esbuildOptions: {
 				platform: "neutral",
+				conditions: [...defaultConditions, "development"],
 				resolveExtensions: [
 					".mjs",
 					".js",

packages/vite-plugin-cloudflare/src/constants.ts

@@ -1,3 +1,6 @@
 export const ROUTER_WORKER_NAME = "__router-worker__";
 export const ASSET_WORKER_NAME = "__asset-worker__";
 export const ASSET_WORKERS_COMPATIBILITY_DATE = "2024-10-04";
+// TODO: add `Text` and `Data` types (resolves https://github.com/cloudflare/workers-sdk/issues/8022)
+export const MODULE_TYPES = ["CompiledWasm"] as const;
+export type ModuleType = (typeof MODULE_TYPES)[number];