Adds a new `<Picture>` component to the image integration (#3866)

* moving all normalization logic out of the Image component

* refactor: only require loaders to provide the image src

* Adding a `<Picture />` component

* fixing types.ts imports

* refactor: moving getImage to it's own file

* updating component types to use astroHTML.JSX

* Revert "updating component types to use astroHTML.JSX"

This reverts commit 6e5f578da8d1d3fd262f3cd9add7549f7580af97.

* going back to letting loaders add extra HTML attributes

* Always use lazy loading and async decoding

* Cleaning up the Picture component

* Adding test coverage for <Picture>

* updating the README

* using JSX types for the Image and Picture elements

* chore: adding changeset

* Update packages/integrations/image/src/get-image.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* allow users to override loading and async on the <img>

* renaming config to constants, exporting getPicture()

* found the right syntax to import astro-jsx

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 4 insertions, 50 deletions

diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts
index f87fcd4b2..8b06484e7 100644
--- a/packages/integrations/image/src/index.ts
+++ b/packages/integrations/image/src/index.ts
@@ -1,14 +1,11 @@
 import type { AstroConfig, AstroIntegration } from 'astro';
 import fs from 'fs/promises';
 import path from 'path';
-import slash from 'slash';
 import { fileURLToPath } from 'url';
-import type {
-	ImageAttributes,
-	IntegrationOptions,
-	SSRImageService,
-	TransformOptions,
-} from './types';
+import { OUTPUT_DIR, PKG_NAME, ROUTE_PATTERN } from './constants.js';
+export * from './get-image.js';
+export * from './get-picture.js';
+import { IntegrationOptions, TransformOptions } from './types.js';
 import {
 	ensureDir,
 	isRemoteImage,
@@ -18,49 +15,6 @@ import {
 } from './utils.js';
 import { createPlugin } from './vite-plugin-astro-image.js';
 
-const PKG_NAME = '@astrojs/image';
-const ROUTE_PATTERN = '/_image';
-const OUTPUT_DIR = '/_image';
-
-/**
- * Gets the HTML attributes required to build an `<img />` for the transformed image.
- *
- * @param loader @type {ImageService} The image service used for transforming images.
- * @param transform @type {TransformOptions} The transformations requested for the optimized image.
- * @returns @type {ImageAttributes} The HTML attributes to be included on the built `<img />` element.
- */
-export async function getImage(
-	loader: SSRImageService,
-	transform: TransformOptions
-): Promise<ImageAttributes> {
-	(globalThis as any).loader = loader;
-
-	const attributes = await loader.getImageAttributes(transform);
-
-	// For SSR services, build URLs for the injected route
-	if (typeof loader.transform === 'function') {
-		const { searchParams } = loader.serializeTransform(transform);
-
-		// cache all images rendered to HTML
-		if (globalThis && (globalThis as any).addStaticImage) {
-			(globalThis as any)?.addStaticImage(transform);
-		}
-
-		const src =
-			globalThis && (globalThis as any).filenameFormat
-				? (globalThis as any).filenameFormat(transform, searchParams)
-				: `${ROUTE_PATTERN}?${searchParams.toString()}`;
-
-		return {
-			...attributes,
-			src: slash(src), // Windows compat
-		};
-	}
-
-	// For hosted services, return the <img /> attributes as-is
-	return attributes;
-}
-
 const createIntegration = (options: IntegrationOptions = {}): AstroIntegration => {
 	const resolvedOptions = {
 		serviceEntryPoint: '@astrojs/image/sharp',