feat(wrangler): uses local images binding from miniflare if experimentalImagesLocalMode is enabled (#9325)

Author: edmundhung

.changeset/tall-beers-burn.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+refactor: fallbacks to local image binding from miniflare when local mode is enabled

packages/wrangler/package.json

@@ -168,8 +168,7 @@
 		}
 	},
 	"optionalDependencies": {
-		"fsevents": "~2.3.2",
-		"sharp": "^0.33.5"
+		"fsevents": "~2.3.2"
 	},
 	"engines": {
 		"node": ">=18.0.0"

packages/wrangler/scripts/deps.ts

@@ -35,9 +35,6 @@ export const EXTERNAL_DEPENDENCIES = [
 
 	// workerd contains a native binary, so must be external. Wrangler depends on a pinned version.
 	"workerd",
-
-	// sharp contains native libraries
-	"sharp",
 ];
 
 const pathToPackageJson = path.resolve(__dirname, "..", "package.json");

packages/wrangler/src/dev/miniflare.ts

@@ -9,12 +9,11 @@ import {
 } from "../ai/fetcher";
 import { ModuleTypeToRuleType } from "../deployment-bundle/module-collection";
 import { withSourceURLs } from "../deployment-bundle/source-url";
-import { createFatalError, UserError } from "../errors";
+import { UserError } from "../errors";
 import { getFlag } from "../experimental-flags";
 import {
 	EXTERNAL_IMAGES_WORKER_NAME,
 	EXTERNAL_IMAGES_WORKER_SCRIPT,
-	imagesLocalFetcher,
 	imagesRemoteFetcher,
 } from "../images/fetcher";
 import { logger } from "../logger";
@@ -461,6 +460,7 @@ type WorkerOptionsBindings = Pick<
 	| "workflows"
 	| "wrappedBindings"
 	| "secretsStoreSecrets"
+	| "images"
 	| "email"
 	| "analyticsEngineDatasets"
 	| "tails"
@@ -764,7 +764,8 @@ export function buildMiniflareBindingOptions(
 		}
 	}
 
-	if (bindings.images?.binding) {
+	// Uses the implementation in miniflare instead if the users enable local mode
+	if (bindings.images?.binding && !config.imagesLocalMode) {
 		externalWorkers.push({
 			name: `${EXTERNAL_IMAGES_WORKER_NAME}:${config.name}`,
 			modules: [
@@ -775,9 +776,7 @@ export function buildMiniflareBindingOptions(
 				},
 			],
 			serviceBindings: {
-				FETCHER: config.imagesLocalMode
-					? imagesLocalFetcher
-					: imagesRemoteFetcher,
+				FETCHER: imagesRemoteFetcher,
 			},
 		});
 
@@ -883,6 +882,15 @@ export function buildMiniflareBindingOptions(
 		email: {
 			send_email: bindings.send_email,
 		},
+		images:
+			bindings.images && config.imagesLocalMode
+				? {
+						binding: bindings.images.binding,
+						mixedModeConnectionString: getFlag("MIXED_MODE")
+							? mixedModeConnectionString
+							: undefined,
+					}
+				: undefined,
 
 		durableObjects: Object.fromEntries([
 			...internalObjects.map(({ name, class_name }) => {
@@ -1124,7 +1132,6 @@ export function handleRuntimeStdio(stdout: Readable, stderr: Readable) {
 let didWarnMiniflareCronSupport = false;
 let didWarnMiniflareVectorizeSupport = false;
 let didWarnAiAccountUsage = false;
-let didWarnImagesLocalModeUsage = false;
 
 export type Options = Extract<MiniflareOptions, { workers: WorkerOptions[] }>;
 
@@ -1172,23 +1179,6 @@ export async function buildMiniflareOptions(
 		}
 	}
 
-	if (config.bindings.images && config.imagesLocalMode) {
-		if (!didWarnImagesLocalModeUsage) {
-			try {
-				await import("sharp");
-			} catch {
-				const msg =
-					"Sharp must be installed to use the Images binding local mode; check your version of Node is compatible";
-				throw createFatalError(msg, false);
-			}
-
-			didWarnImagesLocalModeUsage = true;
-			logger.info(
-				"You are using Images local mode. This only supports resizing, rotating and transcoding."
-			);
-		}
-	}
-
 	const upstream =
 		typeof config.localUpstream === "string"
 			? `${config.upstreamProtocol}://${config.localUpstream}`

packages/wrangler/src/images/fetcher.ts

@@ -31,5 +31,3 @@ export async function imagesRemoteFetcher(request: Request): Promise<Response> {
 
 	return new Response(res.body, { headers: res.headers });
 }
-
-export { imagesLocalFetcher } from "./local";