fix(vite-plugin-cloudflare): add experimental local mode support for image bindings

Author: edmundhung

.changeset/wild-paws-occur.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+fix: add experimental local mode support for image bindings
+
+You can now enable experimental local image binding support in the Vite plugin by setting the `experimental.imagesLocalMode` option to `true`. This provides the same functionality as running `wrangler dev --experimental-images-local-mode`.

packages/vite-plugin-cloudflare/playground/bindings/__tests__/worker.spec.ts

@@ -6,6 +6,11 @@ test("kv_namspaces support", async () => {
 	expect(response).toBe("KV binding works");
 });
 
+test("experimental images local mode support", async () => {
+	const response = await getTextResponse("/images-local-mode");
+	expect(response).toBe("Local images binding works");
+});
+
 test("unsafe_hello_world support", async () => {
 	const response = await getTextResponse("/hello-world");
 	expect(response).toBe("Hello World binding works");

packages/vite-plugin-cloudflare/playground/bindings/src/image.png

@@ -1,3 +1,5 @@
+import image from "./image.png?inline";
+
 export default {
 	async fetch(request, env) {
 		const url = new URL(request.url);
@@ -18,6 +20,30 @@ export default {
 					status: 200,
 				});
 			}
+			case "/images-local-mode": {
+				const request = await fetch(image);
+
+				if (!request.body) {
+					return new Response("Failed to fetch image", { status: 500 });
+				}
+
+				try {
+					await env.IMAGES.input(request.body).output({ format: "image/gif" });
+				} catch (e) {
+					if (
+						e instanceof Error &&
+						e.message.includes("GIF output is not supported in local mode")
+					) {
+						return new Response("Local images binding works", {
+							status: 200,
+						});
+					}
+				}
+
+				return new Response("Local images binding is not configured properly", {
+					status: 500,
+				});
+			}
 			case "/ae": {
 				await env.WAE.writeDataPoint({ doubles: [2, 3] });
 

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

@@ -2,5 +2,11 @@ import { cloudflare } from "@cloudflare/vite-plugin";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [cloudflare({ inspectorPort: false, persistState: false })],
+	plugins: [
+		cloudflare({
+			inspectorPort: false,
+			persistState: false,
+			experimental: { imagesLocalMode: true },
+		}),
+	],
 });

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

@@ -4,6 +4,7 @@ declare namespace Cloudflare {
 	interface Env {
 		KV: KVNamespace;
 		HELLO_WORLD: HelloWorldBinding;
+		IMAGES: ImagesBinding;
 		WAE: AnalyticsEngineDataset;
 		RATE_LIMITER: RateLimit;
 	}

packages/vite-plugin-cloudflare/playground/bindings/worker-configuration.d.ts

@@ -9,6 +9,9 @@
 			"id": "test-kv-id",
 		},
 	],
+	"images": {
+		"binding": "IMAGES",
+	},
 	"unsafe_hello_world": [
 		{
 			"binding": "HELLO_WORLD",

packages/vite-plugin-cloudflare/playground/bindings/wrangler.jsonc

@@ -421,6 +421,8 @@ export async function getDevMiniflareOptions(config: {
 								},
 								resolvedPluginConfig.cloudflareEnv,
 								{
+									imagesLocalMode:
+										resolvedPluginConfig.experimental.imagesLocalMode,
 									remoteProxyConnectionString:
 										remoteProxySessionData?.session
 											?.remoteProxyConnectionString,

packages/vite-plugin-cloudflare/src/miniflare-options.ts

@@ -37,6 +37,8 @@ interface Experimental {
 	headersAndRedirectsDevModeSupport?: boolean;
 	/** Experimental support for remote bindings (where bindings configured with `remote: true` access remote resources). */
 	remoteBindings?: boolean;
+	/** Experimental support for local images bindings */
+	imagesLocalMode?: boolean;
 }
 
 export interface PluginConfig extends EntryWorkerConfig {