feat(vercel): Use Sharp in dev instead of Squoosh by default

.changeset/cold-flies-clean.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vercel': major
+---
+
+Use Sharp in dev mode instead of Squoosh by default

packages/integrations/vercel/README.md

@@ -172,6 +172,27 @@ import astroLogo from '../assets/logo.png';
 />
 ```
 
+### useSquooshDev
+
+**Type:** `boolean`<br>
+**Available for:** Serverless, Static
+**Added in:** `@astrojs/[email protected]`
+
+When enabled, in development mode a Squoosh-based image service will be used in development instead of Sharp. This is useful if you cannot install Sharp's dependencies on your development machine.
+
+```js
+import { defineConfig } from 'astro/config';
+import vercel from '@astrojs/vercel/serverless';
+
+export default defineConfig({
+  output: 'server',
+  adapter: vercel({
+    imageService: true,
+    useSquooshDev: true,
+  }),
+});
+```
+
 ### includeFiles
 
 **Type:** `string[]`<br>

packages/integrations/vercel/package.json

@@ -25,6 +25,7 @@
     "./analytics": "./dist/analytics.js",
     "./build-image-service": "./dist/image/build-service.js",
     "./dev-image-service": "./dist/image/dev-service.js",
+    "./squoosh-dev-service": "./dist/image/squoosh-dev-service.js",
     "./package.json": "./package.json"
   },
   "typesVersions": {

packages/integrations/vercel/src/image/build-service.ts

@@ -40,8 +40,9 @@ const service: ExternalImageService = {
 		};
 	},
 	getURL(options) {
-		const fileSrc =
-			typeof options.src === 'string' ? options.src : removeLeadingForwardSlash(options.src.src);
+		const fileSrc = isESMImportedImage(options.src)
+			? removeLeadingForwardSlash(options.src.src)
+			: options.src;
 
 		const searchParams = new URLSearchParams();
 		searchParams.append('url', fileSrc);

packages/integrations/vercel/src/image/dev-service.ts

@@ -1,10 +1,9 @@
 import type { LocalImageService } from 'astro';
-import squooshService from 'astro/assets/services/squoosh';
-import { sharedValidateOptions } from './shared';
+import sharpService from 'astro/assets/services/sharp';
+import { baseDevService } from './shared-dev-service';
 
 const service: LocalImageService = {
-	validateOptions: (options, serviceOptions) =>
-		sharedValidateOptions(options, serviceOptions.service.config, 'development'),
+	...baseDevService,
 	getHTMLAttributes(options, serviceOptions) {
 		const { inputtedWidth, ...props } = options;
 
@@ -13,45 +12,19 @@ const service: LocalImageService = {
 			props.width = inputtedWidth;
 		}
 
-		return squooshService.getHTMLAttributes
-			? squooshService.getHTMLAttributes(props, serviceOptions)
+		return sharpService.getHTMLAttributes
+			? sharpService.getHTMLAttributes(props, serviceOptions)
 			: {};
 	},
-	getURL(options) {
-		const fileSrc = typeof options.src === 'string' ? options.src : options.src.src;
-
-		const searchParams = new URLSearchParams();
-		searchParams.append('href', fileSrc);
-
-		options.width && searchParams.append('w', options.width.toString());
-		options.quality && searchParams.append('q', options.quality.toString());
-
-		return '/_image?' + searchParams;
-	},
-	parseURL(url) {
-		const params = url.searchParams;
-
-		if (!params.has('href')) {
-			return undefined;
-		}
-
-		const transform = {
-			src: params.get('href')!,
-			width: params.has('w') ? parseInt(params.get('w')!) : undefined,
-			quality: params.get('q'),
-		};
-
-		return transform;
-	},
 	transform(inputBuffer, transform, serviceOptions) {
 		// NOTE: Hardcoding webp here isn't accurate to how the Vercel Image Optimization API works, normally what we should
 		// do is setup a custom endpoint that sniff the user's accept-content header and serve the proper format based on the
 		// user's Vercel config. However, that's: a lot of work for: not much. The dev service is inaccurate to the prod service
 		// in many more ways, this is one of the less offending cases and is, imo, okay, erika - 2023-04-27
-		transform.format = 'webp';
+		transform.format = transform.src.endsWith('svg') ? 'svg' : 'webp';
 
-		// The base Squoosh service works the same way as the Vercel Image Optimization API, so it's a safe fallback in local
-		return squooshService.transform(inputBuffer, transform, serviceOptions);
+		// The base sharp service works the same way as the Vercel Image Optimization API, so it's a safe fallback in local
+		return sharpService.transform(inputBuffer, transform, serviceOptions);
 	},
 };
 

packages/integrations/vercel/src/image/shared-dev-service.ts

@@ -0,0 +1,33 @@
+import type { LocalImageService } from 'astro';
+import { sharedValidateOptions } from './shared';
+
+export const baseDevService: Omit<LocalImageService, 'transform'> = {
+	validateOptions: (options, serviceOptions) =>
+		sharedValidateOptions(options, serviceOptions.service.config, 'development'),
+	getURL(options) {
+		const fileSrc = typeof options.src === 'string' ? options.src : options.src.src;
+
+		const searchParams = new URLSearchParams();
+		searchParams.append('href', fileSrc);
+
+		options.width && searchParams.append('w', options.width.toString());
+		options.quality && searchParams.append('q', options.quality.toString());
+
+		return '/_image?' + searchParams;
+	},
+	parseURL(url) {
+		const params = url.searchParams;
+
+		if (!params.has('href')) {
+			return undefined;
+		}
+
+		const transform = {
+			src: params.get('href')!,
+			width: params.has('w') ? parseInt(params.get('w')!) : undefined,
+			quality: params.get('q'),
+		};
+
+		return transform;
+	},
+};

packages/integrations/vercel/src/image/shared.ts

@@ -64,6 +64,7 @@ export function getAstroImageConfig(
 	images: boolean | undefined,
 	imagesConfig: VercelImageConfig | undefined,
 	command: string,
+	useSquoosh: boolean | undefined,
 	astroImageConfig: AstroConfig['image']
 ) {
 	if (images) {
@@ -72,7 +73,9 @@ export function getAstroImageConfig(
 				service: {
 					entrypoint:
 						command === 'dev'
-							? '@astrojs/vercel/dev-image-service'
+							? useSquoosh
+								? '@astrojs/vercel/squoosh-dev-image-service'
+								: '@astrojs/vercel/dev-image-service'
 							: '@astrojs/vercel/build-image-service',
 					config: imagesConfig ? imagesConfig : getDefaultImageConfig(astroImageConfig),
 				},

packages/integrations/vercel/src/image/squoosh-dev-service.ts

@@ -0,0 +1,31 @@
+import type { LocalImageService } from 'astro';
+import squooshService from 'astro/assets/services/squoosh';
+import { baseDevService } from './shared-dev-service';
+
+const service: LocalImageService = {
+	...baseDevService,
+	getHTMLAttributes(options, serviceOptions) {
+		const { inputtedWidth, ...props } = options;
+
+		// If `validateOptions` returned a different width than the one of the image, use it for attributes
+		if (inputtedWidth) {
+			props.width = inputtedWidth;
+		}
+
+		return squooshService.getHTMLAttributes
+			? squooshService.getHTMLAttributes(props, serviceOptions)
+			: {};
+	},
+	transform(inputBuffer, transform, serviceOptions) {
+		// NOTE: Hardcoding webp here isn't accurate to how the Vercel Image Optimization API works, normally what we should
+		// do is setup a custom endpoint that sniff the user's accept-content header and serve the proper format based on the
+		// user's Vercel config. However, that's: a lot of work for: not much. The dev service is inaccurate to the prod service
+		// in many more ways, this is one of the less offending cases and is, imo, okay, erika - 2023-04-27
+		transform.format = transform.src.endsWith('svg') ? 'svg' : 'webp';
+
+		// The base squoosh service works the same way as the Vercel Image Optimization API, so it's a safe fallback in local
+		return squooshService.transform(inputBuffer, transform, serviceOptions);
+	},
+};
+
+export default service;

packages/integrations/vercel/src/serverless/adapter.ts

@@ -68,6 +68,7 @@ export interface VercelServerlessConfig {
 	analytics?: boolean;
 	imageService?: boolean;
 	imagesConfig?: VercelImageConfig;
+	useSquooshDev?: boolean;
 	edgeMiddleware?: boolean;
 	functionPerRoute?: boolean;
 }
@@ -78,6 +79,7 @@ export default function vercelServerless({
 	analytics,
 	imageService,
 	imagesConfig,
+	useSquooshDev,
 	functionPerRoute = true,
 	edgeMiddleware = false,
 }: VercelServerlessConfig = {}): AstroIntegration {
@@ -147,7 +149,7 @@ export default function vercelServerless({
 							external: ['@vercel/nft'],
 						},
 					},
-					...getAstroImageConfig(imageService, imagesConfig, command, config.image),
+					...getAstroImageConfig(imageService, imagesConfig, command, useSquooshDev, config.image),
 				});
 			},
 			'astro:config:done': ({ setAdapter, config, logger }) => {

packages/integrations/vercel/src/static/adapter.ts

@@ -36,12 +36,14 @@ export interface VercelStaticConfig {
 	analytics?: boolean;
 	imageService?: boolean;
 	imagesConfig?: VercelImageConfig;
+	useSquooshDev?: boolean;
 }
 
 export default function vercelStatic({
 	analytics,
 	imageService,
 	imagesConfig,
+	useSquooshDev,
 }: VercelStaticConfig = {}): AstroIntegration {
 	let _config: AstroConfig;
 
@@ -63,7 +65,7 @@ export default function vercelStatic({
 					vite: {
 						define: viteDefine,
 					},
-					...getAstroImageConfig(imageService, imagesConfig, command, config.image),
+					...getAstroImageConfig(imageService, imagesConfig, command, useSquooshDev, config.image),
 				});
 			},
 			'astro:config:done': ({ setAdapter, config }) => {

packages/integrations/vercel/test/fixtures/image/package.json

@@ -2,6 +2,9 @@
   "name": "@test/astro-vercel-image",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "dev": "astro dev"
+  },
   "dependencies": {
     "@astrojs/vercel": "workspace:*",
     "astro": "workspace:*"