astro 5.0.0-beta.8 → 5.0.0-beta.9

package/client.d.ts

@@ -47,7 +47,9 @@ declare module 'astro:assets' {
 		getImage: (
 			options: import('./dist/assets/types.js').UnresolvedImageTransform,
 		) => Promise<import('./dist/assets/types.js').GetImageResult>;
-		imageConfig: import('./dist/types/public/config.js').AstroConfig['image'];
+		imageConfig: import('./dist/types/public/config.js').AstroConfig['image'] & {
+			experimentalResponsiveImages: boolean;
+		};
 		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
 		inferRemoteSize: typeof import('./dist/assets/utils/index.js').inferRemoteSize;
 		Image: typeof import('./components/Image.astro').default;
@@ -101,14 +103,31 @@ declare module '*.webp' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
-declare module '*.svg' {
-	const metadata: ImageMetadata;
-	export default metadata;
-}
 declare module '*.avif' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
+declare module '*.svg' {
+	type Props = {
+		/**
+		 * Accesible, short-text description
+		 *
+		 *  {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title|MDN Reference}
+		 */
+		title?: string;
+		/**
+		 * Shorthand for setting the `height` and `width` properties
+		 */
+		size?: number | string;
+		/**
+		 * Override the default rendering mode for SVGs
+		 */
+		mode?: import('./dist/assets/utils/svg.js').SvgRenderMode;
+	} & astroHTML.JSX.SVGAttributes;
+
+	const Component: ((_props: Props) => any) & ImageMetadata;
+	export default Component;
+}
 
 declare module 'astro:transitions' {
 	type TransitionModule = typeof import('./dist/virtual-modules/transitions.js');

package/components/Image.astro

@@ -1,7 +1,10 @@
 ---
-import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import { type LocalImageProps, type RemoteImageProps, getImage, imageConfig } from 'astro:assets';
+import type { UnresolvedImageTransform } from '../dist/assets/types';
+import { applyResponsiveAttributes } from '../dist/assets/utils/imageAttributes.js';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
+import './image.css';
 
 // The TypeScript diagnostic for JSX props uses the last member of the union to suggest props, so it would be better for
 // LocalImageProps to be last. Unfortunately, when we do this the error messages that remote images get are complete nonsense
@@ -23,7 +26,17 @@ if (typeof props.height === 'string') {
 	props.height = parseInt(props.height);
 }
 
-const image = await getImage(props);
+const layout = props.layout ?? imageConfig.experimentalLayout ?? 'none';
+const useResponsive = imageConfig.experimentalResponsiveImages && layout !== 'none';
+
+if (useResponsive) {
+	// Apply defaults from imageConfig if not provided
+	props.layout ??= imageConfig.experimentalLayout;
+	props.fit ??= imageConfig.experimentalObjectFit ?? 'cover';
+	props.position ??= imageConfig.experimentalObjectPosition ?? 'center';
+}
+
+const image = await getImage(props as UnresolvedImageTransform);
 
 const additionalAttributes: HTMLAttributes<'img'> = {};
 if (image.srcSet.values.length > 0) {
@@ -33,6 +46,16 @@ if (image.srcSet.values.length > 0) {
 if (import.meta.env.DEV) {
 	additionalAttributes['data-image-component'] = 'true';
 }
+
+const attributes = useResponsive
+	? applyResponsiveAttributes({
+			layout,
+			image,
+			props,
+			additionalAttributes,
+		})
+	: { ...additionalAttributes, ...image.attributes };
 ---
 
-<img src={image.src} {...additionalAttributes} {...image.attributes} />
+{/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}
+<img src={image.src} {...attributes} class={attributes.class} />

package/components/Picture.astro

@@ -1,10 +1,16 @@
 ---
-import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import { type LocalImageProps, type RemoteImageProps, getImage, imageConfig } from 'astro:assets';
 import * as mime from 'mrmime';
+import { applyResponsiveAttributes } from '../dist/assets/utils/imageAttributes';
 import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
-import type { GetImageResult, ImageOutputFormat } from '../dist/types/public/index.js';
+import type {
+	GetImageResult,
+	ImageOutputFormat,
+	UnresolvedImageTransform,
+} from '../dist/types/public/index.js';
 import type { HTMLAttributes } from '../types';
+import './image.css';
 
 type Props = (LocalImageProps | RemoteImageProps) & {
 	formats?: ImageOutputFormat[];
@@ -37,6 +43,17 @@ if (scopedStyleClass) {
 		pictureAttributes.class = scopedStyleClass;
 	}
 }
+
+const layout = props.layout ?? imageConfig.experimentalLayout ?? 'none';
+const useResponsive = imageConfig.experimentalResponsiveImages && layout !== 'none';
+
+if (useResponsive) {
+	// Apply defaults from imageConfig if not provided
+	props.layout ??= imageConfig.experimentalLayout;
+	props.fit ??= imageConfig.experimentalObjectFit ?? 'cover';
+	props.position ??= imageConfig.experimentalObjectPosition ?? 'center';
+}
+
 for (const key in props) {
 	if (key.startsWith('data-astro-cid')) {
 		pictureAttributes[key] = props[key];
@@ -53,7 +70,7 @@ const optimizedImages: GetImageResult[] = await Promise.all(
 				format: format,
 				widths: props.widths,
 				densities: props.densities,
-			}),
+			} as UnresolvedImageTransform),
 	),
 );
 
@@ -71,7 +88,7 @@ const fallbackImage = await getImage({
 	format: resultFallbackFormat,
 	widths: props.widths,
 	densities: props.densities,
-});
+} as UnresolvedImageTransform);
 
 const imgAdditionalAttributes: HTMLAttributes<'img'> = {};
 const sourceAdditionalAttributes: HTMLAttributes<'source'> = {};
@@ -85,6 +102,15 @@ if (fallbackImage.srcSet.values.length > 0) {
 	imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
 }
 
+const attributes = useResponsive
+	? applyResponsiveAttributes({
+			layout,
+			image: fallbackImage,
+			props,
+			additionalAttributes: imgAdditionalAttributes,
+		})
+	: { ...imgAdditionalAttributes, ...fallbackImage.attributes };
+
 if (import.meta.env.DEV) {
 	imgAdditionalAttributes['data-image-component'] = 'true';
 }
@@ -94,7 +120,7 @@ if (import.meta.env.DEV) {
 	{
 		Object.entries(optimizedImages).map(([_, image]) => {
 			const srcsetAttribute =
-				props.densities || (!props.densities && !props.widths)
+				props.densities || (!props.densities && !props.widths && !useResponsive)
 					? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
 					: image.srcSet.attribute;
 			return (
@@ -106,5 +132,6 @@ if (import.meta.env.DEV) {
 			);
 		})
 	}
-	<img src={fallbackImage.src} {...imgAdditionalAttributes} {...fallbackImage.attributes} />
+	{/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}
+	<img src={fallbackImage.src} {...attributes} class={attributes.class} />
 </picture>

package/components/image.css

@@ -0,0 +1,17 @@
+[data-astro-image] {
+	width: 100%;
+	height: auto;
+	object-fit: var(--fit);
+	object-position: var(--pos);
+	aspect-ratio: var(--w) / var(--h);
+}
+/* Styles for responsive layout */
+[data-astro-image='responsive'] {
+	max-width: calc(var(--w) * 1px);
+	max-height: calc(var(--h) * 1px);
+}
+/* Styles for fixed layout */
+[data-astro-image='fixed'] {
+	width: calc(var(--w) * 1px);
+	height: calc(var(--h) * 1px);
+}

package/dist/actions/integration.js

@@ -9,10 +9,11 @@ function astroIntegrationActionsRouteHandler({
     name: VIRTUAL_MODULE_ID,
     hooks: {
       async "astro:config:setup"(params) {
-        params.injectRoute({
+        settings.injectedRoutes.push({
           pattern: ACTION_RPC_ROUTE_PATTERN,
           entrypoint: "astro/actions/runtime/route.js",
-          prerender: false
+          prerender: false,
+          origin: "internal"
         });
         params.addMiddleware({
           entrypoint: "astro/actions/runtime/middleware.js",

package/dist/actions/runtime/virtual/server.js

@@ -3,8 +3,10 @@ import { ActionCalledFromServerError } from "../../../core/errors/errors-data.js
 import { AstroError } from "../../../core/errors/errors.js";
 import { ACTION_RPC_ROUTE_PATTERN } from "../../consts.js";
 import {
+  ACTION_API_CONTEXT_SYMBOL,
   formContentTypes,
-  hasContentType
+  hasContentType,
+  isActionAPIContext
 } from "../utils.js";
 import { getAction } from "./get-action.js";
 import {
@@ -23,7 +25,7 @@ function defineAction({
 }) {
   const serverHandler = accept === "form" ? getFormServerHandler(handler, inputSchema) : getJsonServerHandler(handler, inputSchema);
   async function safeServerHandler(unparsedInput) {
-    if (typeof this === "function") {
+    if (typeof this === "function" || !isActionAPIContext(this)) {
       throw new AstroError(ActionCalledFromServerError);
     }
     return callSafely(() => serverHandler(unparsedInput, this));
@@ -158,6 +160,7 @@ function getActionContext(context) {
           redirect: _redirect,
           ...actionAPIContext
         } = context;
+        Reflect.set(actionAPIContext, ACTION_API_CONTEXT_SYMBOL, true);
         const handler = baseAction.bind(actionAPIContext);
         return handler(input);
       }

package/dist/actions/utils.d.ts

@@ -1,6 +1,6 @@
 import type fsMod from 'node:fs';
 import type { APIContext } from '../types/public/context.js';
-import type { ActionAPIContext, Locals } from './runtime/utils.js';
+import { type ActionAPIContext, type Locals } from './runtime/utils.js';
 export declare function hasActionPayload(locals: APIContext['locals']): locals is Locals;
 export declare function createGetActionResult(locals: APIContext['locals']): APIContext['getActionResult'];
 export declare function createCallAction(context: ActionAPIContext): APIContext['callAction'];

package/dist/actions/utils.js

@@ -1,4 +1,5 @@
 import * as eslexer from "es-module-lexer";
+import { ACTION_API_CONTEXT_SYMBOL } from "./runtime/utils.js";
 import { deserializeActionResult, getActionQueryString } from "./runtime/virtual/shared.js";
 function hasActionPayload(locals) {
   return "_actionPayload" in locals;
@@ -13,6 +14,7 @@ function createGetActionResult(locals) {
 }
 function createCallAction(context) {
   return (baseAction, input) => {
+    Reflect.set(context, ACTION_API_CONTEXT_SYMBOL, true);
     const action = baseAction.bind(context);
     return action(input);
   };

package/dist/assets/build/generate.js

@@ -83,6 +83,8 @@ async function generateImagesForPath(originalFilePath, transformsAndPath, env, q
   async function generateImageInternal(filepath, options) {
     const isLocalImage = isESMImportedImage(options.src);
     const finalFileURL = new URL("." + filepath, env.clientRoot);
+    const finalFolderURL = new URL("./", finalFileURL);
+    await fs.promises.mkdir(finalFolderURL, { recursive: true });
     const cacheFile = basename(filepath) + (isLocalImage ? "" : ".json");
     const cachedFileURL = new URL(cacheFile, env.assetsCacheDir);
     try {
@@ -113,8 +115,6 @@ async function generateImagesForPath(originalFilePath, transformsAndPath, env, q
         throw new Error(`An error was encountered while reading the cache file. Error: ${e}`);
       }
     }
-    const finalFolderURL = new URL("./", finalFileURL);
-    await fs.promises.mkdir(finalFolderURL, { recursive: true });
     const originalImagePath = isLocalImage ? options.src.src : options.src;
     if (!originalImage) {
       originalImage = await loadImage(originalFilePath, env);

package/dist/assets/consts.js

@@ -22,7 +22,15 @@ const VALID_SUPPORTED_FORMATS = [
 ];
 const DEFAULT_OUTPUT_FORMAT = "webp";
 const VALID_OUTPUT_FORMATS = ["avif", "png", "webp", "jpeg", "jpg", "svg"];
-const DEFAULT_HASH_PROPS = ["src", "width", "height", "format", "quality"];
+const DEFAULT_HASH_PROPS = [
+  "src",
+  "width",
+  "height",
+  "format",
+  "quality",
+  "fit",
+  "position"
+];
 export {
   DEFAULT_HASH_PROPS,
   DEFAULT_OUTPUT_FORMAT,

package/dist/assets/endpoint/config.js

@@ -36,7 +36,8 @@ function getImageEndpointData(settings, mode, cwd) {
     generate: () => "",
     pathname: settings.config.image.endpoint.route,
     prerender: false,
-    fallbackRoutes: []
+    fallbackRoutes: [],
+    origin: "internal"
   };
 }
 export {

package/dist/assets/internal.d.ts

@@ -2,4 +2,8 @@ import type { AstroConfig } from '../types/public/config.js';
 import { type ImageService } from './services/service.js';
 import { type GetImageResult, type UnresolvedImageTransform } from './types.js';
 export declare function getConfiguredImageService(): Promise<ImageService>;
-export declare function getImage(options: UnresolvedImageTransform, imageConfig: AstroConfig['image']): Promise<GetImageResult>;
+type ImageConfig = AstroConfig['image'] & {
+    experimentalResponsiveImages: boolean;
+};
+export declare function getImage(options: UnresolvedImageTransform, imageConfig: ImageConfig): Promise<GetImageResult>;
+export {};

package/dist/assets/internal.js

@@ -1,6 +1,12 @@
 import { isRemotePath } from "@astrojs/internal-helpers/path";
 import { AstroError, AstroErrorData } from "../core/errors/index.js";
 import { DEFAULT_HASH_PROPS } from "./consts.js";
+import {
+  DEFAULT_RESOLUTIONS,
+  LIMITED_RESOLUTIONS,
+  getSizesAttribute,
+  getWidths
+} from "./layout.js";
 import { isLocalService } from "./services/service.js";
 import {
   isImageMetadata
@@ -48,10 +54,16 @@ async function getImage(options, imageConfig) {
     ...options,
     src: await resolveSrc(options.src)
   };
+  let originalWidth;
+  let originalHeight;
+  let originalFormat;
   if (options.inferSize && isRemoteImage(resolvedOptions.src) && isRemotePath(resolvedOptions.src)) {
     const result = await inferRemoteSize(resolvedOptions.src);
     resolvedOptions.width ??= result.width;
     resolvedOptions.height ??= result.height;
+    originalWidth = result.width;
+    originalHeight = result.height;
+    originalFormat = result.format;
     delete resolvedOptions.inferSize;
   }
   const originalFilePath = isESMImportedImage(resolvedOptions.src) ? resolvedOptions.src.fsPath : void 0;
@@ -59,17 +71,57 @@ async function getImage(options, imageConfig) {
     // @ts-expect-error - clone is a private, hidden prop
     resolvedOptions.src.clone ?? resolvedOptions.src
   ) : resolvedOptions.src;
+  if (isESMImportedImage(clonedSrc)) {
+    originalWidth = clonedSrc.width;
+    originalHeight = clonedSrc.height;
+    originalFormat = clonedSrc.format;
+  }
+  if (originalWidth && originalHeight) {
+    const aspectRatio = originalWidth / originalHeight;
+    if (resolvedOptions.height && !resolvedOptions.width) {
+      resolvedOptions.width = Math.round(resolvedOptions.height * aspectRatio);
+    } else if (resolvedOptions.width && !resolvedOptions.height) {
+      resolvedOptions.height = Math.round(resolvedOptions.width / aspectRatio);
+    } else if (!resolvedOptions.width && !resolvedOptions.height) {
+      resolvedOptions.width = originalWidth;
+      resolvedOptions.height = originalHeight;
+    }
+  }
   resolvedOptions.src = clonedSrc;
+  const layout = options.layout ?? imageConfig.experimentalLayout;
+  if (imageConfig.experimentalResponsiveImages && layout) {
+    resolvedOptions.widths ||= getWidths({
+      width: resolvedOptions.width,
+      layout,
+      originalWidth,
+      breakpoints: imageConfig.experimentalBreakpoints?.length ? imageConfig.experimentalBreakpoints : isLocalService(service) ? LIMITED_RESOLUTIONS : DEFAULT_RESOLUTIONS
+    });
+    resolvedOptions.sizes ||= getSizesAttribute({ width: resolvedOptions.width, layout });
+    if (resolvedOptions.priority) {
+      resolvedOptions.loading ??= "eager";
+      resolvedOptions.decoding ??= "sync";
+      resolvedOptions.fetchpriority ??= "high";
+    } else {
+      resolvedOptions.loading ??= "lazy";
+      resolvedOptions.decoding ??= "async";
+      resolvedOptions.fetchpriority ??= "auto";
+    }
+    delete resolvedOptions.priority;
+    delete resolvedOptions.densities;
+  }
   const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, imageConfig) : resolvedOptions;
   const srcSetTransforms = service.getSrcSet ? await service.getSrcSet(validatedOptions, imageConfig) : [];
   let imageURL = await service.getURL(validatedOptions, imageConfig);
+  const matchesOriginal = (transform) => transform.width === originalWidth && transform.height === originalHeight && transform.format === originalFormat;
   let srcSets = await Promise.all(
-    srcSetTransforms.map(async (srcSet) => ({
-      transform: srcSet.transform,
-      url: await service.getURL(srcSet.transform, imageConfig),
-      descriptor: srcSet.descriptor,
-      attributes: srcSet.attributes
-    }))
+    srcSetTransforms.map(async (srcSet) => {
+      return {
+        transform: srcSet.transform,
+        url: matchesOriginal(srcSet.transform) ? imageURL : await service.getURL(srcSet.transform, imageConfig),
+        descriptor: srcSet.descriptor,
+        attributes: srcSet.attributes
+      };
+    })
   );
   if (isLocalService(service) && globalThis.astroAsset.addStaticImage && !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
     const propsToHash = service.propertiesToHash ?? DEFAULT_HASH_PROPS;
@@ -78,12 +130,14 @@ async function getImage(options, imageConfig) {
       propsToHash,
       originalFilePath
     );
-    srcSets = srcSetTransforms.map((srcSet) => ({
-      transform: srcSet.transform,
-      url: globalThis.astroAsset.addStaticImage(srcSet.transform, propsToHash, originalFilePath),
-      descriptor: srcSet.descriptor,
-      attributes: srcSet.attributes
-    }));
+    srcSets = srcSetTransforms.map((srcSet) => {
+      return {
+        transform: srcSet.transform,
+        url: matchesOriginal(srcSet.transform) ? imageURL : globalThis.astroAsset.addStaticImage(srcSet.transform, propsToHash, originalFilePath),
+        descriptor: srcSet.descriptor,
+        attributes: srcSet.attributes
+      };
+    });
   }
   return {
     rawOptions: resolvedOptions,

package/dist/assets/layout.d.ts

@@ -0,0 +1,25 @@
+import type { ImageLayout } from './types.js';
+export declare const DEFAULT_RESOLUTIONS: number[];
+export declare const LIMITED_RESOLUTIONS: number[];
+/**
+ * Gets the breakpoints for an image, based on the layout and width
+ *
+ * The rules are as follows:
+ *
+ * - For full-width layout we return all breakpoints smaller than the original image width
+ * - For fixed layout we return 1x and 2x the requested width, unless the original image is smaller than that.
+ * - For responsive layout we return all breakpoints smaller than 2x the requested width, unless the original image is smaller than that.
+ */
+export declare const getWidths: ({ width, layout, breakpoints, originalWidth, }: {
+    width?: number;
+    layout: ImageLayout;
+    breakpoints?: Array<number>;
+    originalWidth?: number;
+}) => Array<number>;
+/**
+ * Gets the `sizes` attribute for an image, based on the layout and width
+ */
+export declare const getSizesAttribute: ({ width, layout, }: {
+    width?: number;
+    layout?: ImageLayout;
+}) => string | undefined;

package/dist/assets/layout.js

@@ -0,0 +1,103 @@
+const DEFAULT_RESOLUTIONS = [
+  640,
+  // older and lower-end phones
+  750,
+  // iPhone 6-8
+  828,
+  // iPhone XR/11
+  960,
+  // older horizontal phones
+  1080,
+  // iPhone 6-8 Plus
+  1280,
+  // 720p
+  1668,
+  // Various iPads
+  1920,
+  // 1080p
+  2048,
+  // QXGA
+  2560,
+  // WQXGA
+  3200,
+  // QHD+
+  3840,
+  // 4K
+  4480,
+  // 4.5K
+  5120,
+  // 5K
+  6016
+  // 6K
+];
+const LIMITED_RESOLUTIONS = [
+  640,
+  // older and lower-end phones
+  750,
+  // iPhone 6-8
+  828,
+  // iPhone XR/11
+  1080,
+  // iPhone 6-8 Plus
+  1280,
+  // 720p
+  1668,
+  // Various iPads
+  2048,
+  // QXGA
+  2560
+  // WQXGA
+];
+const getWidths = ({
+  width,
+  layout,
+  breakpoints = DEFAULT_RESOLUTIONS,
+  originalWidth
+}) => {
+  const smallerThanOriginal = (w) => !originalWidth || w <= originalWidth;
+  if (layout === "full-width") {
+    return breakpoints.filter(smallerThanOriginal);
+  }
+  if (!width) {
+    return [];
+  }
+  const doubleWidth = width * 2;
+  const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth;
+  if (layout === "fixed") {
+    return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize];
+  }
+  if (layout === "responsive") {
+    return [
+      // Always include the image at 1x and 2x the specified width
+      width,
+      doubleWidth,
+      ...breakpoints
+    ].filter((w) => w <= maxSize).sort((a, b) => a - b);
+  }
+  return [];
+};
+const getSizesAttribute = ({
+  width,
+  layout
+}) => {
+  if (!width || !layout) {
+    return void 0;
+  }
+  switch (layout) {
+    case `responsive`:
+      return `(min-width: ${width}px) ${width}px, 100vw`;
+    case `fixed`:
+      return `${width}px`;
+    case `full-width`:
+      return `100vw`;
+    case "none":
+    default:
+      return void 0;
+  }
+};
+export {
+  DEFAULT_RESOLUTIONS,
+  LIMITED_RESOLUTIONS,
+  getSizesAttribute,
+  getWidths
+};

package/dist/assets/runtime.d.ts

@@ -0,0 +1,10 @@
+import type { ImageMetadata } from './types.js';
+export interface SvgComponentProps {
+    meta: ImageMetadata;
+    attributes: Record<string, string>;
+    children: string;
+}
+export declare function createSvgComponent({ meta, attributes, children }: SvgComponentProps): import("../runtime/server/index.js").AstroComponentFactory & ImageMetadata;
+type SvgAttributes = Record<string, any>;
+export declare function dropAttributes(attributes: SvgAttributes): SvgAttributes;
+export {};

package/dist/assets/runtime.js

@@ -0,0 +1,69 @@
+import {
+  createComponent,
+  render,
+  spreadAttributes,
+  unescapeHTML
+} from "../runtime/server/index.js";
+const ids = /* @__PURE__ */ new WeakMap();
+let counter = 0;
+function createSvgComponent({ meta, attributes, children }) {
+  const rendered = /* @__PURE__ */ new WeakSet();
+  const Component = createComponent((result, props) => {
+    let id;
+    if (ids.has(result)) {
+      id = ids.get(result);
+    } else {
+      counter += 1;
+      ids.set(result, counter);
+      id = counter;
+    }
+    id = `a:${id}`;
+    const {
+      title: titleProp,
+      viewBox,
+      mode,
+      ...normalizedProps
+    } = normalizeProps(attributes, props);
+    const title = titleProp ? unescapeHTML(`<title>${titleProp}</title>`) : "";
+    if (mode === "sprite") {
+      let symbol = "";
+      if (!rendered.has(result.response)) {
+        symbol = unescapeHTML(`<symbol${spreadAttributes({ viewBox, id })}>${children}</symbol>`);
+        rendered.add(result.response);
+      }
+      return render`<svg${spreadAttributes(normalizedProps)}>${title}${symbol}<use href="#${id}" /></svg>`;
+    }
+    return render`<svg${spreadAttributes({ viewBox, ...normalizedProps })}>${title}${unescapeHTML(children)}</svg>`;
+  });
+  if (import.meta.env.DEV) {
+    makeNonEnumerable(Component);
+    Object.defineProperty(Component, Symbol.for("nodejs.util.inspect.custom"), {
+      value: (_, opts, inspect) => inspect(meta, opts)
+    });
+  }
+  return Object.assign(Component, meta);
+}
+const ATTRS_TO_DROP = ["xmlns", "xmlns:xlink", "version"];
+const DEFAULT_ATTRS = { role: "img" };
+function dropAttributes(attributes) {
+  for (const attr of ATTRS_TO_DROP) {
+    delete attributes[attr];
+  }
+  return attributes;
+}
+function normalizeProps(attributes, { size, ...props }) {
+  if (size !== void 0 && props.width === void 0 && props.height === void 0) {
+    props.height = size;
+    props.width = size;
+  }
+  return dropAttributes({ ...DEFAULT_ATTRS, ...attributes, ...props });
+}
+function makeNonEnumerable(object) {
+  for (const property in object) {
+    Object.defineProperty(object, property, { enumerable: false });
+  }
+}
+export {
+  createSvgComponent,
+  dropAttributes
+};

package/dist/assets/services/service.d.ts

@@ -1,5 +1,5 @@
 import type { AstroConfig } from '../../types/public/config.js';
-import type { ImageOutputFormat, ImageTransform, UnresolvedSrcSetValue } from '../types.js';
+import type { ImageFit, ImageOutputFormat, ImageTransform, UnresolvedSrcSetValue } from '../types.js';
 export type ImageService = LocalImageService | ExternalImageService;
 export declare function isLocalService(service: ImageService | undefined): service is LocalImageService;
 export declare function parseQuality(quality: string): string | number;
@@ -76,6 +76,8 @@ export type BaseServiceTransform = {
     height?: number;
     format: string;
     quality?: string | null;
+    fit?: ImageFit;
+    position?: string;
 };
 /**
  * Basic local service using the included `_image` endpoint.