astro 3.2.4 → 3.3.1

package/client.d.ts

@@ -53,6 +53,7 @@ declare module 'astro:assets' {
 		imageConfig: import('./dist/@types/astro.js').AstroConfig['image'];
 		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
 		Image: typeof import('./components/Image.astro').default;
+		Picture: typeof import('./components/Picture.astro').default;
 	};
 
 	type ImgAttributes = import('./dist/type-utils.js').WithRequired<
@@ -66,17 +67,10 @@ declare module 'astro:assets' {
 	export type RemoteImageProps = import('./dist/type-utils.js').Simplify<
 		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
 	>;
-	export const { getImage, getConfiguredImageService, imageConfig, Image }: AstroAssets;
+	export const { getImage, getConfiguredImageService, imageConfig, Image, Picture }: AstroAssets;
 }
 
-type InputFormat = import('./dist/assets/types.js').ImageInputFormat;
-
-interface ImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: InputFormat;
-}
+type ImageMetadata = import('./dist/assets/types.js').ImageMetadata;
 
 declare module '*.gif' {
 	const metadata: ImageMetadata;

package/components/Code.astro

@@ -1,7 +1,14 @@
 ---
-import type * as shiki from 'shiki';
-import { renderToHtml } from 'shiki';
-import { getHighlighter } from './Shiki.js';
+import type {
+	BuiltinLanguage,
+	BuiltinTheme,
+	LanguageRegistration,
+	SpecialLanguage,
+	ThemeRegistration,
+	ThemeRegistrationRaw,
+} from 'shikiji';
+import { visit } from 'unist-util-visit';
+import { getCachedHighlighter, replaceCssVariables } from '../dist/core/shiki.js';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -13,7 +20,7 @@ interface Props {
 	 *
 	 * @default "plaintext"
 	 */
-	lang?: shiki.Lang | shiki.ILanguageRegistration;
+	lang?: BuiltinLanguage | SpecialLanguage | LanguageRegistration;
 	/**
 	 * The styling theme.
 	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
@@ -21,7 +28,7 @@ interface Props {
 	 *
 	 * @default "github-dark"
 	 */
-	theme?: shiki.IThemeRegistration;
+	theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;
 	/**
 	 * Enable word wrapping.
 	 *  - true: enabled.
@@ -47,41 +54,65 @@ const {
 	inline = false,
 } = Astro.props;
 
-// 1. Get the shiki syntax highlighter
-const highlighter = await getHighlighter({
-	theme,
-	// Load custom lang if passed an object, otherwise load the default
-	langs: typeof lang !== 'string' ? [lang] : undefined,
+// shiki -> shikiji compat
+if (typeof lang === 'object') {
+	// `id` renamed to `name
+	if ((lang as any).id && !lang.name) {
+		lang.name = (lang as any).id;
+	}
+	// `grammar` flattened to lang itself
+	if ((lang as any).grammar) {
+		Object.assign(lang, (lang as any).grammar);
+	}
+}
+
+const highlighter = await getCachedHighlighter({
+	langs: [lang],
+	themes: [theme],
 });
 
-// 2. Turn code into shiki theme tokens
-const tokens = highlighter.codeToThemedTokens(code, typeof lang === 'string' ? lang : lang.id);
+const html = highlighter.codeToHtml(code, {
+	lang: typeof lang === 'string' ? lang : lang.name,
+	theme,
+	transforms: {
+		pre(node) {
+			// Swap to `code` tag if inline
+			if (inline) {
+				node.tagName = 'code';
+			}
 
-// 3. Get shiki theme object
-const _theme = highlighter.getTheme();
+			// Cast to string as shikiji will always pass them as strings instead of any other types
+			const classValue = (node.properties.class as string) ?? '';
+			const styleValue = (node.properties.style as string) ?? '';
 
-// 4. Render the theme tokens as html
-const html = renderToHtml(tokens, {
-	themeName: _theme.name,
-	fg: _theme.fg,
-	bg: _theme.bg,
-	elements: {
-		pre({ className, style, children }) {
-			// Swap to `code` tag if inline
-			const tag = inline ? 'code' : 'pre';
 			// Replace "shiki" class naming with "astro-code"
-			className = className.replace(/shiki/g, 'astro-code');
+			node.properties.class = classValue.replace(/shiki/g, 'astro-code');
+
 			// Handle code wrapping
 			// if wrap=null, do nothing.
 			if (wrap === false) {
-				style += '; overflow-x: auto;';
+				node.properties.style = styleValue + '; overflow-x: auto;';
 			} else if (wrap === true) {
-				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
+				node.properties.style =
+					styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
 			}
-			return `<${tag} class="${className}" style="${style}" tabindex="0">${children}</${tag}>`;
 		},
-		code({ children }) {
-			return inline ? children : `<code>${children}</code>`;
+		code(node) {
+			if (inline) {
+				return node.children[0] as typeof node;
+			}
+		},
+		root(node) {
+			// theme.id for shiki -> shikiji compat
+			const themeName = typeof theme === 'string' ? theme : theme.name;
+			if (themeName === 'css-variables') {
+				// Replace special color tokens to CSS variables
+				visit(node as any, 'element', (child) => {
+					if (child.properties?.style) {
+						child.properties.style = replaceCssVariables(child.properties.style);
+					}
+				});
+			}
 		},
 	},
 });

package/components/Image.astro

@@ -23,6 +23,12 @@ if (typeof props.height === 'string') {
 }
 
 const image = await getImage(props);
+
+const additionalAttributes: Record<string, any> = {};
+
+if (image.srcSet.values.length > 0) {
+	additionalAttributes.srcset = image.srcSet.attribute;
+}
 ---
 
-<img src={image.src} {...image.attributes} />
+<img src={image.src} {...additionalAttributes} {...image.attributes} />

package/components/Picture.astro

@@ -0,0 +1,69 @@
+---
+import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
+import { isESMImportedImage } from '../dist/assets/internal';
+import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+import type { HTMLAttributes } from '../types';
+
+type Props = (LocalImageProps | RemoteImageProps) & {
+	formats?: ImageOutputFormat[];
+	fallbackFormat?: ImageOutputFormat;
+	pictureAttributes?: HTMLAttributes<'picture'>;
+};
+
+const defaultFormats = ['webp'] as const;
+const defaultFallbackFormat = 'png' as const;
+
+// Certain formats don't want PNG fallbacks:
+// - GIF will typically want to stay as a gif, either for animation or for the lower amount of colors
+// - SVGs can't be converted to raster formats in most cases
+// For those, we'll use the original format as the fallback instead.
+const specialFormatsFallback = ['gif', 'svg'] as const;
+
+const { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro.props;
+
+if (props.alt === undefined || props.alt === null) {
+	throw new AstroError(AstroErrorData.ImageMissingAlt);
+}
+
+const optimizedImages: GetImageResult[] = await Promise.all(
+	formats.map(
+		async (format) =>
+			await getImage({ ...props, format: format, widths: props.widths, densities: props.densities })
+	)
+);
+
+let resultFallbackFormat = fallbackFormat ?? defaultFallbackFormat;
+if (
+	!fallbackFormat &&
+	isESMImportedImage(props.src) &&
+	specialFormatsFallback.includes(props.src.format)
+) {
+	resultFallbackFormat = props.src.format;
+}
+
+const fallbackImage = await getImage({
+	...props,
+	format: resultFallbackFormat,
+	widths: props.widths,
+	densities: props.densities,
+});
+
+const additionalAttributes: Record<string, any> = {};
+if (fallbackImage.srcSet.values.length > 0) {
+	additionalAttributes.srcset = fallbackImage.srcSet.attribute;
+}
+---
+
+<picture {...pictureAttributes}>
+	{
+		Object.entries(optimizedImages).map(([_, image]) => {
+			const srcsetAttribute =
+				props.densities || (!props.densities && !props.widths)
+					? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
+					: image.srcSet.attribute;
+			return <source srcset={srcsetAttribute} type={'image/' + image.options.format} />;
+		})
+	}
+	<img src={fallbackImage.src} {...additionalAttributes} {...fallbackImage.attributes} />
+</picture>

package/dist/@types/astro.d.ts

@@ -6,13 +6,13 @@ import type * as babel from '@babel/core';
 import type { OutgoingHttpHeaders } from 'node:http';
 import type { AddressInfo } from 'node:net';
 import type * as rollup from 'rollup';
-import type { TsConfigJson } from 'tsconfig-resolver';
 import type * as vite from 'vite';
 import type { RemotePattern } from '../assets/utils/remotePattern.js';
 import type { SerializedSSRManifest } from '../core/app/types.js';
 import type { PageBuildData } from '../core/build/types.js';
 import type { AstroConfigType } from '../core/config/index.js';
 import type { AstroTimer } from '../core/config/timer.js';
+import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroCookies } from '../core/cookies/index.js';
 import type { ResponseWithEncoding } from '../core/endpoint/index.js';
 import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
@@ -1381,7 +1381,7 @@ export interface AstroSettings {
      * Map of directive name (e.g. `load`) to the directive script code
      */
     clientDirectives: Map<string, string>;
-    tsConfig: TsConfigJson | undefined;
+    tsConfig: TSConfig | undefined;
     tsConfigPath: string | undefined;
     watchFiles: string[];
     timer: AstroTimer;

package/dist/assets/consts.d.ts

@@ -6,4 +6,5 @@ export declare const VALID_INPUT_FORMATS: readonly ["jpeg", "jpg", "png", "tiff"
  * Certain formats can be imported (namely SVGs) but will not be processed.
  */
 export declare const VALID_SUPPORTED_FORMATS: readonly ["jpeg", "jpg", "png", "tiff", "webp", "gif", "svg", "avif"];
+export declare const DEFAULT_OUTPUT_FORMAT: "webp";
 export declare const VALID_OUTPUT_FORMATS: readonly ["avif", "png", "webp", "jpeg", "jpg", "svg"];

package/dist/assets/consts.js

@@ -20,8 +20,10 @@ const VALID_SUPPORTED_FORMATS = [
   "svg",
   "avif"
 ];
+const DEFAULT_OUTPUT_FORMAT = "webp";
 const VALID_OUTPUT_FORMATS = ["avif", "png", "webp", "jpeg", "jpg", "svg"];
 export {
+  DEFAULT_OUTPUT_FORMAT,
   VALID_INPUT_FORMATS,
   VALID_OUTPUT_FORMATS,
   VALID_SUPPORTED_FORMATS,

package/dist/assets/internal.js

@@ -56,15 +56,31 @@ async function getImage(options, imageConfig) {
     src: typeof options.src === "object" && "then" in options.src ? (await options.src).default ?? await options.src : options.src
   };
   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);
-  if (isLocalService(service) && globalThis.astroAsset.addStaticImage && // If `getURL` returned the same URL as the user provided, it means the service doesn't need to do anything
-  !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
+  let srcSets = await Promise.all(
+    srcSetTransforms.map(async (srcSet) => ({
+      url: await service.getURL(srcSet.transform, imageConfig),
+      descriptor: srcSet.descriptor,
+      attributes: srcSet.attributes
+    }))
+  );
+  if (isLocalService(service) && globalThis.astroAsset.addStaticImage && !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
     imageURL = globalThis.astroAsset.addStaticImage(validatedOptions);
+    srcSets = srcSetTransforms.map((srcSet) => ({
+      url: globalThis.astroAsset.addStaticImage(srcSet.transform),
+      descriptor: srcSet.descriptor,
+      attributes: srcSet.attributes
+    }));
   }
   return {
     rawOptions: resolvedOptions,
     options: validatedOptions,
     src: imageURL,
+    srcSet: {
+      values: srcSets,
+      attribute: srcSets.map((srcSet) => `${srcSet.url} ${srcSet.descriptor}`).join(", ")
+    },
     attributes: service.getHTMLAttributes !== void 0 ? await service.getHTMLAttributes(validatedOptions, imageConfig) : {}
   };
 }

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

@@ -10,6 +10,11 @@ type ImageConfig<T> = Omit<AstroConfig['image'], 'service'> & {
         config: T;
     };
 };
+type SrcSetValue = {
+    transform: ImageTransform;
+    descriptor?: string;
+    attributes?: Record<string, any>;
+};
 interface SharedServiceProps<T extends Record<string, any> = Record<string, any>> {
     /**
      * Return the URL to the endpoint or URL your images are generated from.
@@ -20,6 +25,13 @@ interface SharedServiceProps<T extends Record<string, any> = Record<string, any>
      *
      */
     getURL: (options: ImageTransform, imageConfig: ImageConfig<T>) => string | Promise<string>;
+    /**
+     * Generate additional `srcset` values for the image.
+     *
+     * While in most cases this is exclusively used for `srcset`, it can also be used in a more generic way to generate
+     * multiple variants of the same image. For instance, you can use this to generate multiple aspect ratios or multiple formats.
+     */
+    getSrcSet?: (options: ImageTransform, imageConfig: ImageConfig<T>) => SrcSetValue[] | Promise<SrcSetValue[]>;
     /**
      * Return any additional HTML attributes separate from `src` that your service requires to show the image properly.
      *

package/dist/assets/services/service.js

@@ -1,6 +1,6 @@
 import { AstroError, AstroErrorData } from "../../core/errors/index.js";
 import { isRemotePath, joinPaths } from "../../core/path.js";
-import { VALID_SUPPORTED_FORMATS } from "../consts.js";
+import { DEFAULT_OUTPUT_FORMAT, VALID_SUPPORTED_FORMATS } from "../consts.js";
 import { isESMImportedImage, isRemoteAllowed } from "../internal.js";
 function isLocalService(service) {
   if (!service) {
@@ -59,30 +59,28 @@ const baseService = {
           )
         });
       }
+      if (options.widths && options.densities) {
+        throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
+      }
       if (options.src.format === "svg") {
         options.format = "svg";
       }
+      if (options.src.format === "svg" && options.format !== "svg" || options.src.format !== "svg" && options.format === "svg") {
+        throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+      }
     }
     if (!options.format) {
-      options.format = "webp";
+      options.format = DEFAULT_OUTPUT_FORMAT;
     }
+    if (options.width)
+      options.width = Math.round(options.width);
+    if (options.height)
+      options.height = Math.round(options.height);
     return options;
   },
   getHTMLAttributes(options) {
-    let targetWidth = options.width;
-    let targetHeight = options.height;
-    if (isESMImportedImage(options.src)) {
-      const aspectRatio = options.src.width / options.src.height;
-      if (targetHeight && !targetWidth) {
-        targetWidth = Math.round(targetHeight * aspectRatio);
-      } else if (targetWidth && !targetHeight) {
-        targetHeight = Math.round(targetWidth / aspectRatio);
-      } else if (!targetWidth && !targetHeight) {
-        targetWidth = options.src.width;
-        targetHeight = options.src.height;
-      }
-    }
-    const { src, width, height, format, quality, ...attributes } = options;
+    const { targetWidth, targetHeight } = getTargetDimensions(options);
+    const { src, width, height, format, quality, densities, widths, formats, ...attributes } = options;
     return {
       ...attributes,
       width: targetWidth,
@@ -91,6 +89,66 @@ const baseService = {
       decoding: attributes.decoding ?? "async"
     };
   },
+  getSrcSet(options) {
+    const srcSet = [];
+    const { targetWidth } = getTargetDimensions(options);
+    const { widths, densities } = options;
+    const targetFormat = options.format ?? DEFAULT_OUTPUT_FORMAT;
+    let imageWidth = options.width;
+    let maxWidth = Infinity;
+    if (isESMImportedImage(options.src)) {
+      imageWidth = options.src.width;
+      maxWidth = imageWidth;
+    }
+    const {
+      width: transformWidth,
+      height: transformHeight,
+      ...transformWithoutDimensions
+    } = options;
+    const allWidths = [];
+    if (densities) {
+      const densityValues = densities.map((density) => {
+        if (typeof density === "number") {
+          return density;
+        } else {
+          return parseFloat(density);
+        }
+      });
+      const densityWidths = densityValues.sort().map((density) => Math.round(targetWidth * density));
+      allWidths.push(
+        ...densityWidths.map((width, index) => ({
+          maxTargetWidth: Math.min(width, maxWidth),
+          descriptor: `${densityValues[index]}x`
+        }))
+      );
+    } else if (widths) {
+      allWidths.push(
+        ...widths.map((width) => ({
+          maxTargetWidth: Math.min(width, maxWidth),
+          descriptor: `${width}w`
+        }))
+      );
+    }
+    for (const { maxTargetWidth, descriptor } of allWidths) {
+      const srcSetTransform = { ...transformWithoutDimensions };
+      if (maxTargetWidth !== imageWidth) {
+        srcSetTransform.width = maxTargetWidth;
+      } else {
+        if (options.width && options.height) {
+          srcSetTransform.width = options.width;
+          srcSetTransform.height = options.height;
+        }
+      }
+      srcSet.push({
+        transform: srcSetTransform,
+        descriptor,
+        attributes: {
+          type: `image/${targetFormat}`
+        }
+      });
+    }
+    return srcSet;
+  },
   getURL(options, imageConfig) {
     const searchParams = new URLSearchParams();
     if (isESMImportedImage(options.src)) {
@@ -127,6 +185,25 @@ const baseService = {
     return transform;
   }
 };
+function getTargetDimensions(options) {
+  let targetWidth = options.width;
+  let targetHeight = options.height;
+  if (isESMImportedImage(options.src)) {
+    const aspectRatio = options.src.width / options.src.height;
+    if (targetHeight && !targetWidth) {
+      targetWidth = Math.round(targetHeight * aspectRatio);
+    } else if (targetWidth && !targetHeight) {
+      targetHeight = Math.round(targetWidth / aspectRatio);
+    } else if (!targetWidth && !targetHeight) {
+      targetWidth = options.src.width;
+      targetHeight = options.src.height;
+    }
+  }
+  return {
+    targetWidth,
+    targetHeight
+  };
+}
 export {
   baseService,
   isLocalService,

package/dist/assets/services/sharp.js

@@ -24,6 +24,7 @@ const sharpService = {
   getURL: baseService.getURL,
   parseURL: baseService.parseURL,
   getHTMLAttributes: baseService.getHTMLAttributes,
+  getSrcSet: baseService.getSrcSet,
   async transform(inputBuffer, transformOptions) {
     if (!sharp)
       sharp = await loadSharp();
@@ -33,9 +34,9 @@ const sharpService = {
     let result = sharp(inputBuffer, { failOnError: false, pages: -1 });
     result.rotate();
     if (transform.height && !transform.width) {
-      result.resize({ height: transform.height });
+      result.resize({ height: Math.round(transform.height) });
     } else if (transform.width) {
-      result.resize({ width: transform.width });
+      result.resize({ width: Math.round(transform.width) });
     }
     if (transform.format) {
       let quality = void 0;

package/dist/assets/services/squoosh.js

@@ -39,6 +39,7 @@ const service = {
   getURL: baseService.getURL,
   parseURL: baseService.parseURL,
   getHTMLAttributes: baseService.getHTMLAttributes,
+  getSrcSet: baseService.getSrcSet,
   async transform(inputBuffer, transformOptions) {
     const transform = transformOptions;
     let format = transform.format;
@@ -52,12 +53,12 @@ const service = {
     if (transform.height && !transform.width) {
       operations.push({
         type: "resize",
-        height: transform.height
+        height: Math.round(transform.height)
       });
     } else if (transform.width) {
       operations.push({
         type: "resize",
-        width: transform.width
+        width: Math.round(transform.width)
       });
     }
     let quality = void 0;

package/dist/assets/types.d.ts

@@ -25,6 +25,11 @@ export interface ImageMetadata {
     format: ImageInputFormat;
     orientation?: number;
 }
+export interface SrcSetValue {
+    url: string;
+    descriptor?: string;
+    attributes?: Record<string, string>;
+}
 /**
  * A yet to be resolved image transform. Used by `getImage`
  */
@@ -39,6 +44,8 @@ export type UnresolvedImageTransform = Omit<ImageTransform, 'src'> & {
 export type ImageTransform = {
     src: ImageMetadata | string;
     width?: number | undefined;
+    widths?: number[] | undefined;
+    densities?: (number | `${number}x`)[] | undefined;
     height?: number | undefined;
     quality?: ImageQuality | undefined;
     format?: ImageOutputFormat | undefined;
@@ -48,13 +55,17 @@ export interface GetImageResult {
     rawOptions: ImageTransform;
     options: ImageTransform;
     src: string;
+    srcSet: {
+        values: SrcSetValue[];
+        attribute: string;
+    };
     attributes: Record<string, any>;
 }
 type ImageSharedProps<T> = T & {
     /**
      * Width of the image, the value of this property will be used to assign the `width` property on the final `img` element.
      *
-     * For local images, this value will additionally be used to resize the image to the desired width, taking into account the original aspect ratio of the image.
+     * This value will additionally be used to resize the image to the desired width, taking into account the original aspect ratio of the image.
      *
      * **Example**:
      * ```astro
@@ -81,7 +92,23 @@ type ImageSharedProps<T> = T & {
      * ```
      */
     height?: number | `${number}`;
-};
+} & ({
+    /**
+     * A list of widths to generate images for. The value of this property will be used to assign the `srcset` property on the final `img` element.
+     *
+     * This attribute is incompatible with `densities`.
+     */
+    widths?: number[];
+    densities?: never;
+} | {
+    /**
+     * A list of pixel densities to generate images for. The value of this property will be used to assign the `srcset` property on the final `img` element.
+     *
+     * This attribute is incompatible with `widths`.
+     */
+    densities?: (number | `${number}x`)[];
+    widths?: never;
+});
 export type LocalImageProps<T> = ImageSharedProps<T> & {
     /**
      * A reference to a local image imported through an ESM import.

package/dist/assets/utils/transformToPath.js

@@ -1,3 +1,4 @@
+import { deterministicString } from "deterministic-object-hash";
 import { basename, extname } from "node:path";
 import { removeQueryString } from "../../core/path.js";
 import { shorthash } from "../../runtime/server/shorthash.js";
@@ -12,9 +13,9 @@ function propsToFilename(transform, hash) {
   return `/${filename}_${hash}${outputExt}`;
 }
 function hashTransform(transform, imageService) {
-  const { alt, ...rest } = transform;
+  const { alt, class: className, style, widths, densities, ...rest } = transform;
   const hashFields = { ...rest, imageService };
-  return shorthash(JSON.stringify(hashFields));
+  return shorthash(deterministicString(hashFields));
 }
 export {
   hashTransform,

package/dist/assets/vite-plugin-assets.js

@@ -47,6 +47,7 @@ function assets({
 					export { getConfiguredImageService, isLocalService } from "astro/assets";
 					import { getImage as getImageInternal } from "astro/assets";
 					export { default as Image } from "astro/components/Image.astro";
+					export { default as Picture } from "astro/components/Picture.astro";
 
 					export const imageConfig = ${JSON.stringify(settings.config.image)};
 					export const assetsDir = new URL(${JSON.stringify(