Adds an `@astrojs/image` integration for optimizing images (#3694)

* initial commit

* WIP: starting to define interfaces for images and transformers

* WIP: basic sharp service to test out the API setup

* adding a few tests for sharp.toImageSrc

* Adding tests for sharp.parseImageSrc

* hooking up basic SSR support

* updating image services to return width/height

* simplifying config setup for v1

* hooking up basic SSR + SSG support (dev & build)

* refactor: a bit of code cleanup and commenting

* WIP: migrating local files to ESM + vite plugin

* WIP: starting to hook up user-provided loaderEntryPoints

* chore: update lock file

* chore: update merged lockfile

* refactor: code cleanup and type docs

* pulling over the README template for first-party integrations

* moving metadata out to the loader

* updating the test for the refactored import

* revert: remove unrelated webapi formatting

* revert: remove unrelated change

* fixing up the existing sharp tests

* fix: vite plugin wasn't dynamically loading the image service properly

* refactor: minor API renaming, removing last hard-coded use of sharp loader

* don't manipulate src for hosted image services

* Adding support for automatically calculating dimensions by aspect ratio, if needed

* a few bug fixes + renaming the aspect ratio search param to "ar"

* Adding ETag support, removing need for loaders to parse file metadata

* using the battle tested `etag` package

* Adding support for dynamically calculating partial sizes

* refactor: moving to the packages/integrations dir, Astro Labs TBD later

* refactor: renaming parse/serialize functions

* Adding tests for SSG image optimizations

* refactor: clean up outdated names related to ImageProps

* nit: reusing cached SSG filename

* chore: update pnpm lock file

* handling file URLs when resolving local image imports

* updating image file resolution to use file URLs

* increasing test timeout for image build tests

* fixing eslint error in sharp test

* adding slash for windows compat in src URLs

* chore: update lockfile after merge

* Adding README content

* adding a readme call to action for configuration options

* review: A few of the quick updates from the PR review

* hack: adds a one-off check to allow query params for the _image route

* Adds support for src={import("...")}, and named component exports

* adding SSR tests

* nit: adding a bit more comments

* limiting the query params in SSG dev to the images integration

1 files changed, 61 insertions, 0 deletions

diff --git a/packages/integrations/image/test/sharp.test.js b/packages/integrations/image/test/sharp.test.js
new file mode 100644
index 000000000..04b63ed7b
--- /dev/null
+++ b/packages/integrations/image/test/sharp.test.js
@@ -0,0 +1,61 @@
+import { expect } from 'chai';
+import sharp from '../dist/loaders/sharp.js';
+
+describe('Sharp service', () => {
+	describe('serializeTransform', () => {
+		const src = '/assets/image.png';
+
+		[
+			['only requires src', { src }],
+			['quality', { src, quality: 80 }],
+			['format', { src, format: 'jpeg' }],
+			['width', { src, width: 1280 }],
+			['height', { src, height: 414 }],
+			['width & height', { src, height: 400, width: 200 }],
+			['aspect ratio string', { src, aspectRatio: '16:9' }],
+			['aspect ratio float', { src, aspectRatio: 1.7 }]
+		].forEach(([description, props]) => {
+			it(description, async () => {
+				const { searchParams } = await sharp.serializeTransform(props);
+
+				function verifyProp(expected, search) {
+					if (expected) {
+						expect(searchParams.get(search)).to.equal(expected.toString());
+					} else {
+						expect(searchParams.has(search)).to.be.false;
+					}
+				}
+
+				verifyProp(props.src, 'href');
+				verifyProp(props.quality, 'q');
+				verifyProp(props.format, 'f');
+				verifyProp(props.width, 'w');
+				verifyProp(props.height, 'h');
+				verifyProp(props.aspectRatio, 'ar');
+			});
+		});
+	});
+
+	describe('parseTransform', async () => {
+		const src = '/assets/image.png';
+		const href = encodeURIComponent(src);
+
+		[
+			['only requires src', `href=${href}`, { src }],
+			['quality', `q=80&href=${href}`, { src, quality: 80 }],
+			['format', `f=jpeg&href=${href}`, { src, format: 'jpeg' }],
+			['width', `w=1280&href=${href}`, { src, width: 1280 }],
+			['height', `h=414&href=${href}`, { src, height: 414 }],
+			['width & height', `w=200&h=400&href=${href}`, { src, height: 400, width: 200 }],
+			['aspect ratio string', `ar=16:9&href=${href}`, { src, aspectRatio: '16:9' }],
+			['aspect ratio float', `ar=1.7&href=${href}`, { src, aspectRatio: 1.7 }]
+		].forEach(([description, params, expected]) => {
+			it(description, async () => {
+				const searchParams = new URLSearchParams(params);
+				const props = sharp.parseTransform(searchParams);
+
+				expect(props).to.deep.equal(expected);
+			});
+		});
+	});
+});