Adding an optional image service based on Squoosh (#4738)

* WIP: adding a service built on @squoosh/lib

* WIP: investigating memory leaks in Squoosh

* WIP: vendoring Squoosh to work with our build

* chore: a bit of cleanup and a small perf gain

* removing a few unused deps

* fix: removing temp .only() in sharp test

* hooking up the last build steps to copy over .wasm files

* removing the duplicated lib/*.wasm files

* defaulting to Sharp for the initial @next release

* make sure pnpm always runs the postbuild script

* removing a few node dependencies

* refactor: move the copy .wasm build step out of the SSR bundle

* linter fixes

* fixing lock file

* chore: add TEMP changeset

* fix built wasm location for SSG builds

* Revert "defaulting to Sharp for the initial @next release"

This reverts commit 1a8d4f7.

* removing sharp dependency

* Revert "fix built wasm location for SSG builds"

This reverts commit 446b80b.

* chore: update lockfile

* fixing up image tests for the wasm loader

* updating the README for squoosh

* parallel wasm builds

* refactor: a bit of house keeping

* perf: allow a thread for each output encoding format

* fix: dev broke with the shift to wasm workers

* adds a new `astro:build:generated` hook for SSG builds

* fix: typo + calling cleanup methods in wasm codecs

* adding @astrojs/webapi for the TransformStream polyfill

* Revert "adding @astrojs/webapi for the TransformStream polyfill"

This reverts commit 39e5b84.

* perf: using sharp for most of the CI tests

* chore: update lockfile

* removing hard-coded squoosh imports

* fix: adding sharp to rollup externals

* test: using dev for the squoosh tests

* fix: updating the build output dir for wasm filles in SSG builds

* updating the changeset with migration details

* Revert "adds a new `astro:build:generated` hook for SSG builds"

This reverts commit 59b5fec.

* nit: adding comments for the wasm file copy

* chore: fix eslint warning

.changeset/old-ladybugs-roll.md

@@ -0,0 +1,24 @@
+---
+'@astrojs/image': minor
+---
+
+Adds a new built-in image service based on web assembly libraries :drum: web container support!
+
+**Migration:** Happy with the previous image service based on [`sharp`](https://sharp.pixelplumbing.com/)? No problem! Install `sharp` in your project and update your Astro config to match.
+
+```sh
+npm install sharp
+```
+
+```astro title="astro.config.mjs"
+---
+import image from '@astrojs/image';
+
+export default {
+ // ...
+ integrations: [image({
+ serviceEntryPoint: '@astrojs/image/sharp'
+ })],
+}
+---
+```

packages/integrations/image/README.md

@@ -18,7 +18,7 @@ This **[Astro integration][astro-integration]** makes it easy to optimize images
 
 Images play a big role in overall site performance and usability. Serving properly sized images makes all the difference but is often tricky to automate.
 
-This integration provides `<Image />` and `<Picture>` components as well as a basic image transformer powered by [sharp](https://sharp.pixelplumbing.com/), with full support for static sites and server-side rendering. The built-in `sharp` transformer is also replaceable, opening the door for future integrations that work with your favorite hosted image service.
+This integration provides `<Image />` and `<Picture>` components as well as a basic image transformer, with full support for static sites and server-side rendering. The built-in image transformer is also replaceable, opening the door for future integrations that work with your favorite hosted image service.
 
 ## Installation
 
@@ -57,6 +57,31 @@ export default {
 }
 ```
 
+### Installing `sharp` (optional)
+
+The default image transformer is based on [Squoosh](https://github.com/GoogleChromeLabs/squoosh) and uses web assembly libraries to support most deployment environments.
+
+If you are building a static site or using an SSR deployment host that supports NodeJS, we recommend installing [sharp](https://sharp.pixelplumbing.com/) for faster builds and more fine-grained control of image transformations.
+
+
+First, install the `sharp` package using your package manger. If you're using npm or aren't sure, run this in the terminal:
+```sh
+npm install sharp
+```
+Then, update the integration in you `astro.config.*` file to use the built-in `sharp` image transformer.
+```astro title="astro.config.mjs"
+---
+import image from '@astrojs/image';
+
+export default {
+ // ...
+ integrations: [image({
+ serviceEntryPoint: '@astrojs/image/sharp'
+ })],
+}
+---
+```
+
 ### Update `env.d.ts`
 
 For the best development experience, add the integrations type definitions to your project's `env.d.ts` file.
@@ -85,7 +110,7 @@ import { Image, Picture } from '@astrojs/image/components';
 ---
 ```
 
-The included `sharp` transformer supports resizing images and encoding them to different image formats. Third-party image services will be able to add support for custom transformations as well (ex: `blur`, `filter`, `rotate`, etc).
+The included image transformers support resizing images and encoding them to different image formats. Third-party image services will be able to add support for custom transformations as well (ex: `blur`, `filter`, `rotate`, etc).
 
 Astro’s `<Image />` and `<Picture />` components require the `alt` attribute, which provides descriptive text for images. A warning will be logged if alt text is missing, and a future release of the integration will throw an error if no alt text is provided.
 
@@ -195,6 +220,8 @@ A `number` can also be provided, useful when the aspect ratio is calculated at b
 **Default:** `undefined`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 The background color is used to fill the remaining background when using `contain` for the `fit` property.
 
 The background color is also used for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
@@ -215,6 +242,8 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
 **Default:** `'cover'`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 How the image should be resized to fit both `height` and `width`.
 
 #### position
@@ -225,6 +254,8 @@ How the image should be resized to fit both `height` and `width`.
 **Default:** `'centre'`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 Position of the crop when fit is `cover` or `contain`.
 
 ### `<Picture />`
@@ -316,6 +347,8 @@ The output formats to be used in the optimized image. If not provided, `webp` an
 **Default:** `undefined`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 The background color to use for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
 doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
 as default replacement for transparent pixels.
@@ -334,6 +367,8 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
 **Default:** `'cover'`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 How the image should be resized to fit both `height` and `width`.
 
 #### position
@@ -346,6 +381,8 @@ How the image should be resized to fit both `height` and `width`.
 **Default:** `'centre'`
 </p>
 
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+
 Position of the crop when fit is `cover` or `contain`.
 
 ### `getImage`
@@ -380,12 +417,12 @@ This helper takes in an object with the same properties as the `<Picture />` com
 
 The integration can be configured to run with a different image service, either a hosted image service or a full image transformer that runs locally in your build or SSR deployment.
 
-> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in `sharp` service when using `astro dev`.
+> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in image service when using `astro dev`.
 
 
  ### config.serviceEntryPoint
 
-The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.
+The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
 
 ```js
 // astro.config.mjs

packages/integrations/image/package.json

@@ -23,6 +23,7 @@
  ".": "./dist/index.js",
  "./endpoint": "./dist/endpoint.js",
  "./sharp": "./dist/loaders/sharp.js",
+ "./squoosh": "./dist/loaders/squoosh.js",
  "./components": "./components/index.js",
  "./package.json": "./package.json",
  "./client": "./client.d.ts",
@@ -34,22 +35,24 @@
  "client.d.ts"
  ],
  "scripts": {
- "build": "astro-scripts build \"src/**/*.ts\" && tsc",
- "build:ci": "astro-scripts build \"src/**/*.ts\"",
+ "build": "astro-scripts build \"src/**/*.ts\" && tsc && pnpm run postbuild",
+ "build:ci": "astro-scripts build \"src/**/*.ts\" && pnpm run postbuild",
+ "postbuild": "astro-scripts copy \"src/**/*.wasm\"",
  "dev": "astro-scripts dev \"src/**/*.ts\"",
  "test": "mocha --exit --timeout 20000 test"
  },
  "dependencies": {
  "@altano/tiny-async-pool": "^1.0.2",
  "image-size": "^1.0.2",
  "magic-string": "^0.25.9",
- "mime": "^3.0.0",
- "sharp": "^0.30.6"
+ "mime": "^3.0.0"
  },
  "devDependencies": {
  "@types/sharp": "^0.30.5",
  "astro": "workspace:*",
  "astro-scripts": "workspace:*",
- "kleur": "^4.1.4"
+ "kleur": "^4.1.4",
+ "rollup-plugin-copy": "^3.4.0",
+ "web-streams-polyfill": "^3.2.1"
  }
 }

packages/integrations/image/src/build/ssg.ts

@@ -6,10 +6,31 @@ import OS from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { SSRImageService, TransformOptions } from '../loaders/index.js';
-import { loadLocalImage, loadRemoteImage } from '../utils/images.js';
 import { debug, info, LoggerLevel, warn } from '../utils/logger.js';
 import { isRemoteImage } from '../utils/paths.js';
 
+async function loadLocalImage(src: string | URL) {
+ try {
+ return await fs.readFile(src);
+ } catch {
+ return undefined;
+ }
+}
+
+async function loadRemoteImage(src: string) {
+ try {
+ const res = await fetch(src);
+
+ if (!res.ok) {
+ return undefined;
+ }
+
+ return Buffer.from(await res.arrayBuffer());
+ } catch {
+ return undefined;
+ }
+}
+
 function getTimeStat(timeStart: number, timeEnd: number) {
  const buildTime = timeEnd - timeStart;
  return buildTime < 750 ? `${Math.round(buildTime)}ms` : `${(buildTime / 1000).toFixed(2)}s`;
@@ -39,8 +60,6 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
  )}`,
  });
 
- const inputFiles = new Set<string>();
-
  async function processStaticImage([src, transformsMap]: [
  string,
  Map<string, TransformOptions>
@@ -61,9 +80,6 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
  const inputFileURL = new URL(`.${src}`, outDir);
  inputFile = fileURLToPath(inputFileURL);
  inputBuffer = await loadLocalImage(inputFile);
-
- // track the local file used so the original can be copied over
- inputFiles.add(inputFile);
  }
 
  if (!inputBuffer) {

packages/integrations/image/src/endpoint.ts

@@ -48,6 +48,7 @@ export const get: APIRoute = async ({ request }) => {
  },
  });
  } catch (err: unknown) {
+ console.error(err);
  return new Response(`Server Error: ${err}`, { status: 500 });
  }
 };

packages/integrations/image/src/index.ts

@@ -1,9 +1,10 @@
-import type { AstroConfig, AstroIntegration } from 'astro';
+import type { AstroConfig, AstroIntegration, BuildConfig } from 'astro';
 import { ssgBuild } from './build/ssg.js';
-import type { ImageService, TransformOptions } from './loaders/index.js';
+import type { ImageService, SSRImageService, TransformOptions } from './loaders/index.js';
 import type { LoggerLevel } from './utils/logger.js';
 import { joinPaths, prependForwardSlash, propsToFilename } from './utils/paths.js';
 import { createPlugin } from './vite-plugin-astro-image.js';
+import { copyWasmFiles } from './vendor/squoosh/copy-wasm.js';
 
 export { getImage } from './lib/get-image.js';
 export { getPicture } from './lib/get-picture.js';
@@ -13,12 +14,13 @@ const ROUTE_PATTERN = '/_image';
 
 interface ImageIntegration {
  loader?: ImageService;
+ defaultLoader: SSRImageService;
  addStaticImage?: (transform: TransformOptions) => string;
 }
 
 declare global {
  // eslint-disable-next-line no-var
- var astroImage: ImageIntegration | undefined;
+ var astroImage: ImageIntegration;
 }
 
 export interface IntegrationOptions {
@@ -31,12 +33,13 @@ export interface IntegrationOptions {
 
 export default function integration(options: IntegrationOptions = {}): AstroIntegration {
  const resolvedOptions = {
- serviceEntryPoint: '@astrojs/image/sharp',
+ serviceEntryPoint: '@astrojs/image/squoosh',
  logLevel: 'info' as LoggerLevel,
  ...options,
  };
 
  let _config: AstroConfig;
+ let _buildConfig: BuildConfig;
 
  // During SSG builds, this is used to track all transformed images required.
  const staticImages = new Map<string, Map<string, TransformOptions>>();
@@ -45,18 +48,26 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
  return {
  plugins: [createPlugin(_config, resolvedOptions)],
  optimizeDeps: {
- include: ['image-size', 'sharp'],
+ include: [
+ 'image-size',
+ ].filter(Boolean),
  },
+ build: {
+ rollupOptions: {
+ external: ["sharp"]
+ }
+ },
  ssr: {
  noExternal: ['@astrojs/image', resolvedOptions.serviceEntryPoint],
  },
+ assetsInclude: ['**/*.wasm']
  };
  }
 
  return {
  name: PKG_NAME,
  hooks: {
- 'astro:config:setup': ({ command, config, updateConfig, injectRoute }) => {
+ 'astro:config:setup': async ({ command, config, updateConfig, injectRoute }) => {
  _config = config;
 
  updateConfig({ vite: getViteConfiguration() });
@@ -67,8 +78,20 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
  entryPoint: '@astrojs/image/endpoint',
  });
  }
+
+ const { default: defaultLoader } = await import(resolvedOptions.serviceEntryPoint === '@astrojs/image/sharp'
+ ? './loaders/sharp.js'
+ : './loaders/squoosh.js'
+ );
+
+ globalThis.astroImage = {
+ defaultLoader
+ }
+ },
+ 'astro:build:start': async ({ buildConfig }) => {
+ _buildConfig = buildConfig
  },
- 'astro:build:setup': () => {
+ 'astro:build:setup': async () => {
  // Used to cache all images rendered to HTML
  // Added to globalThis to share the same map in Node and Vite
  function addStaticImage(transform: TransformOptions) {
@@ -89,29 +112,36 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
  }
 
  // Helpers for building static images should only be available for SSG
- globalThis.astroImage =
- _config.output === 'static'
- ? {
- addStaticImage,
- }
- : {};
- },
- 'astro:build:done': async ({ dir }) => {
  if (_config.output === 'static') {
- // for SSG builds, build all requested image transforms to dist
- const loader = globalThis?.astroImage?.loader;
-
- if (loader && 'transform' in loader && staticImages.size > 0) {
- await ssgBuild({
- loader,
- staticImages,
- config: _config,
- outDir: dir,
- logLevel: resolvedOptions.logLevel,
- });
- }
+ globalThis.astroImage.addStaticImage = addStaticImage;
  }
  },
+ 'astro:build:generated': async ({ dir }) => {
+ // for SSG builds, build all requested image transforms to dist
+ const loader = globalThis?.astroImage?.loader;
+
+ if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
+ // For the Squoosh service, copy all wasm files to dist/chunks.
+ // Because the default loader is dynamically imported (above),
+ // Vite will bundle squoosh to dist/chunks and expect to find the wasm files there
+ await copyWasmFiles(new URL('./chunks', dir));
+ }
+
+ if (loader && 'transform' in loader && staticImages.size > 0) {
+ await ssgBuild({
+ loader,
+ staticImages,
+ config: _config,
+ outDir: dir,
+ logLevel: resolvedOptions.logLevel,
+ });
+ }
+ },
+ 'astro:build:ssr': async () => {
+ if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
+ await copyWasmFiles(_buildConfig.server);
+ }
+ }
  },
  };
 }