Support modules with --no-bundle

.changeset/beige-eagles-wave.md

@@ -0,0 +1,20 @@
+---
+"wrangler": minor
+"no-bundle-import": patch
+---
+
+feature: Support modules with `--no-bundle`
+
+When the `--no-bundle` flag is set, Wrangler now has support for traversing the module graph with `esbuild`, to figure out what additional modules should be uploaded alongside the entrypoint. This will allow modules to be imported at runtime on Cloudflare's Edge. This also respects Wrangler's [module rules](https://developers.cloudflare.com/workers/wrangler/configuration/#bundling) configuration, which means that importing non-JS modules will also trigger an upload. For instance, the following code will now work with `--no-bundle` (assuming the `example.wasm` file exists at the correct path):
+
+```js
+// index.js
+import wasm from './example.wasm'
+
+export default {
+  async fetch() {
+    await WebAssembly.instantiate(wasm, ...)
+    ...
+  }
+}
+```

fixtures/no-bundle-import/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "no-bundle-import",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler publish",
+		"start": "wrangler dev",
+		"test": "vitest"
+	},
+	"devDependencies": {
+		"get-port": "^6.1.2",
+		"wrangler": "^2.10.0"
+	}
+}

fixtures/no-bundle-import/src/data.txt

@@ -0,0 +1 @@
+TEST DATA

fixtures/no-bundle-import/src/dynamic-var.js

@@ -0,0 +1 @@
+export default "dynamic var";

fixtures/no-bundle-import/src/dynamic.js

@@ -0,0 +1 @@
+export default "dynamic";

fixtures/no-bundle-import/src/index.js

@@ -0,0 +1,63 @@
+import { sayHello } from "./say-hello.js";
+
+import { johnSmith } from "./nested/index.js";
+import WASM from "./simple.wasm";
+import nestedWasm from "./nested/simple.wasm";
+
+import text from "./data.txt";
+import binData from "./data.bin";
+export default {
+	async fetch(request, env, ctx) {
+		const url = new URL(request.url);
+		if (url.pathname === "/dynamic") {
+			return new Response(`${(await import("./dynamic.js")).default}`);
+		}
+		if (url.pathname === "/dynamic-var") {
+			const name = "./dynamic-var.js";
+			return new Response(`${(await import(name)).default}`);
+		}
+		if (url.pathname === "/wasm") {
+			return new Response(
+				await new Promise(async (resolve) => {
+					const moduleImport = {
+						imports: {
+							imported_func(arg) {
+								resolve(arg);
+							},
+						},
+					};
+					const module1 = await WebAssembly.instantiate(WASM, moduleImport);
+					module1.exports.exported_func();
+				})
+			);
+		}
+		if (url.pathname === "/wasm-nested") {
+			return new Response(
+				await new Promise(async (resolve) => {
+					const moduleImport = {
+						imports: {
+							imported_func(arg) {
+								resolve("nested" + arg);
+							},
+						},
+					};
+					const m = await WebAssembly.instantiate(nestedWasm, moduleImport);
+					m.exports.exported_func();
+				})
+			);
+		}
+		if (url.pathname === "/wasm-dynamic") {
+			return new Response(
+				`${await (await import("./nested/index.js")).loadWasm()}`
+			);
+		}
+
+		if (url.pathname === "/txt") {
+			return new Response(text);
+		}
+		if (url.pathname === "/bin") {
+			return new Response(binData);
+		}
+		return new Response(`${sayHello("Jane Smith")} and ${johnSmith}`);
+	},
+};

fixtures/no-bundle-import/src/index.test.ts

@@ -0,0 +1,68 @@
+import path from "path";
+import getPort from "get-port";
+import { describe, expect, test, beforeAll, afterAll } from "vitest";
+import { unstable_dev } from "../../../packages/wrangler/wrangler-dist/cli.js";
+import type { UnstableDevWorker } from "../../../packages/wrangler/wrangler-dist/cli.js";
+
+describe("Worker", () => {
+	let worker: UnstableDevWorker;
+
+	beforeAll(async () => {
+		worker = await unstable_dev(path.resolve(__dirname, "index.js"), {
+			bundle: false,
+			port: await getPort(),
+			experimental: { experimentalLocal: true },
+		});
+	}, 30_000);
+
+	afterAll(() => worker.stop());
+
+	test("module traversal results in correct response", async () => {
+		const resp = await worker.fetch();
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot(
+			`"Hello Jane Smith and Hello John Smith"`
+		);
+	});
+
+	test("support for dynamic imports", async () => {
+		const resp = await worker.fetch("/dynamic");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot(`"dynamic"`);
+	});
+
+	test("no support for variable dynamic imports", async () => {
+		const resp = await worker.fetch("/dynamic-var");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot(
+			'"Error: No such module \\"dynamic-var.js\\"."'
+		);
+	});
+	test("basic wasm support", async () => {
+		const resp = await worker.fetch("/wasm");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot('"42"');
+	});
+	test("resolves wasm import paths relative to root", async () => {
+		const resp = await worker.fetch("/wasm-nested");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot('"nested42"');
+	});
+	test("wasm can be imported from a dynamic import", async () => {
+		const resp = await worker.fetch("/wasm-dynamic");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot('"sibling42subdirectory42"');
+	});
+	test("text data can be imported", async () => {
+		const resp = await worker.fetch("/txt");
+		const text = await resp.text();
+		expect(text).toMatchInlineSnapshot('"TEST DATA"');
+	});
+	test("binary data can be imported", async () => {
+		const resp = await worker.fetch("/bin");
+		const bin = await resp.arrayBuffer();
+		const expected = new Uint8Array(new ArrayBuffer(4));
+		expected.set([0, 1, 2, 10]);
+		expect(new Uint8Array(bin)).toEqual(expected);
+	});
+});

fixtures/no-bundle-import/src/nested/index.js

@@ -0,0 +1,31 @@
+import { sayHello } from "../say-hello.js";
+import subWasm from "../simple.wasm";
+import sibWasm from "./simple.wasm";
+export const johnSmith = sayHello("John Smith");
+
+export async function loadWasm() {
+	const sibling = await new Promise(async (resolve) => {
+		const moduleImport = {
+			imports: {
+				imported_func(arg) {
+					resolve("sibling" + arg);
+				},
+			},
+		};
+		const m = await WebAssembly.instantiate(sibWasm, moduleImport);
+		m.exports.exported_func();
+	});
+
+	const subdirectory = await new Promise(async (resolve) => {
+		const moduleImport = {
+			imports: {
+				imported_func(arg) {
+					resolve("subdirectory" + arg);
+				},
+			},
+		};
+		const m = await WebAssembly.instantiate(subWasm, moduleImport);
+		m.exports.exported_func();
+	});
+	return sibling + subdirectory;
+}

fixtures/no-bundle-import/src/say-hello.js

@@ -0,0 +1 @@
+export const sayHello = (name) => `Hello ${name}`;

fixtures/no-bundle-import/wrangler.toml

@@ -0,0 +1,3 @@
+name = "no-bundle-import"
+main = "src/index.js"
+compatibility_date = "2023-02-20"