Support Text and Data module types (#8387)

Author: jamesopstad

.changeset/silver-rooms-hear.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Support Text and Data module types.
+Text modules can be imported with a `.txt` or `.html` extension while Data modules can be imported with a `.bin` extension.
+This expands on the existing support for WebAssembly modules, which can now be imported with `.wasm` or `.wasm?module` extensions.
+Custom rules are not supported.
+More info on including non-JavaScript modules can be found [here](https://developers.cloudflare.com/workers/wrangler/bundling/#including-non-javascript-modules).

packages/vite-plugin-cloudflare/playground/additional-modules/README.md

@@ -0,0 +1,18 @@
+# Additional Modules
+
+The modules directory contains the following example files:
+
+- `bin-example.bin` - a TTF file for the Inter font with the extension changed to `.bin`
+- `html-example.html` - a Hello World HTML document
+- `text-example.txt` - a simple text file
+- `wasm-example.wasm` - a compiled WebAssembly file that exports an `add` function
+
+The WebAssembly is 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/additional-modules/__tests__/additional-modules.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "vitest";
+import {
+	getJsonResponse,
+	getTextResponse,
+	page,
+	viteTestUrl,
+} from "../../__test-utils__";
+
+test("supports Data modules with a '.bin' extension", async () => {
+	const result = await getJsonResponse("/bin");
+	expect(result).toEqual({ byteLength: 342936 });
+});
+
+test("supports Text modules with a '.html' extension", async () => {
+	await page.goto(`${viteTestUrl}/html`);
+	const content = await page.textContent("h1");
+	expect(content).toBe("Hello world");
+});
+
+test("supports Text modules with a '.txt' extension", async () => {
+	const result = await getTextResponse("/text");
+	expect(result).toBe("Example text content.\n");
+});
+
+test("supports CompiledWasm modules with a '.wasm' extension", async () => {
+	const result = await getJsonResponse("/wasm");
+	expect(result).toEqual({ result: 7 });
+});
+
+test("supports CompiledWasm modules with a '.wasm?module' extension", async () => {
+	const result = await getJsonResponse("/wasm-with-param");
+	expect(result).toEqual({ result: 11 });
+});

packages/vite-plugin-cloudflare/playground/wasm/package.json renamed to packages/vite-plugin-cloudflare/playground/additional-modules/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@playground/wasm",
+	"name": "@playground/additional-modules",
 	"private": true,
 	"type": "module",
 	"scripts": {

packages/vite-plugin-cloudflare/playground/additional-modules/src/index.ts

@@ -0,0 +1,40 @@
+import bin from "./modules/bin-example.bin";
+import html from "./modules/html-example.html";
+import text from "./modules/text-example.txt";
+import wasm from "./modules/wasm-example.wasm";
+import wasmWithParam from "./modules/wasm-example.wasm?module";
+
+export default {
+	async fetch(request) {
+		const url = new URL(request.url);
+
+		switch (url.pathname) {
+			case "/bin": {
+				return Response.json({ byteLength: bin.byteLength });
+			}
+			case "/html": {
+				return new Response(html, { headers: { "Content-Type": "text/html" } });
+			}
+			case "/text": {
+				return new Response(text, {
+					headers: { "Content-Type": "text/plain" },
+				});
+			}
+			case "/wasm": {
+				const instance = await WebAssembly.instantiate(wasm);
+				const result = instance.exports.add(3, 4);
+
+				return Response.json({ result });
+			}
+			case "/wasm-with-param": {
+				const instance = await WebAssembly.instantiate(wasmWithParam);
+				const result = instance.exports.add(5, 6);
+
+				return Response.json({ result });
+			}
+			default: {
+				return new Response(null, { status: 404 });
+			}
+		}
+	},
+} satisfies ExportedHandler;

packages/vite-plugin-cloudflare/playground/additional-modules/src/modules/bin-example.bin

@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+	<body>
+		<h1>Hello world</h1>
+	</body>
+</html>

packages/vite-plugin-cloudflare/playground/additional-modules/src/modules/html-example.html

@@ -0,0 +1 @@
+Example text content.