Merge branch 'main' into media-type

.changeset/cold-flies-clean.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vercel': major
+---
+
+Adds a configuration option `devImageService` to choose which of the built-in image services to use in development. Defaults to `sharp`.

.changeset/cyan-penguins-divide.md

@@ -0,0 +1,48 @@
+---
+'@astrojs/mdx': minor
+---
+
+Support the `img` component export for optimized images. This allows you to customize how optimized images are styled and rendered.
+
+When rendering an optimized image, Astro will pass the `ImageMetadata` object to your `img` component as the `src` prop. For unoptimized images (i.e. images using URLs or absolute paths), Astro will continue to pass the `src` as a string.
+
+This example handles both cases and applies custom styling:
+
+```astro
+---
+// src/components/MyImage.astro
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+
+type Props = {
+	src: string | ImageMetadata;
+	alt: string;
+};
+
+const { src, alt } = Astro.props;
+---
+
+{
+	typeof src === 'string' ? (
+		<img class="custom-styles" src={src} alt={alt} />
+	) : (
+		<Image class="custom-styles" {src} {alt} />
+	)
+}
+
+<style>
+	.custom-styles {
+		border: 1px solid red;
+	}
+</style>
+```
+
+Now, this components can be applied to the `img` component props object or file export:
+
+```md
+import MyImage from '../../components/MyImage.astro';
+
+export const components = { img: MyImage };
+
+# My MDX article
+```

.changeset/dirty-seahorses-move.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add a new `image.endpoint` setting to allow using a custom endpoint in dev and SSR

.changeset/five-doors-love.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Adds support for using AVIF (`.avif`) files with the Image component. Importing an AVIF file will now correctly return the same object shape as other image file types. See the [Image docs](https://docs.astro.build/en/guides/images/#update-existing-img-tags) for more information on the different properties available on the returned object.

.changeset/grumpy-seas-learn.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': minor
+---
+
+feat(markdown): Add support for `imageReference` paths when collecting images

.changeset/long-trees-listen.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add types for the object syntax for `style` (ex: `style={{color: 'red'}}`)

.changeset/slow-mirrors-provide.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improved error messages around `astro:assets`

.changeset/small-apes-clap.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Add `CollectionKey`, `ContentCollectionKey`, and `DataCollectionKey` exports to `astro:content`

.changeset/ten-kings-smash.md

@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Improve startup performance by removing dependencies, lazily initializing async contextual values

benchmark/packages/timer/tsconfig.json

@@ -2,9 +2,6 @@
   "extends": "../../../tsconfig.base.json",
   "include": ["src"],
   "compilerOptions": {
-    "allowJs": true,
-    "module": "ES2022",
-    "outDir": "./dist",
-    "target": "ES2022"
+    "outDir": "./dist"
   }
 }

packages/astro-prism/tsconfig.json

@@ -2,9 +2,6 @@
   "extends": "../../tsconfig.base.json",
   "include": ["src"],
   "compilerOptions": {
-    "allowJs": true,
-    "target": "ES2022",
-    "module": "ES2022",
     "outDir": "./dist"
   }
 }

packages/astro-rss/src/util.ts

@@ -1,5 +1,5 @@
 import type { z } from 'astro/zod';
-import type { RSSOptions } from './index';
+import type { RSSOptions } from './index.js';
 
 /** Normalize URL to its canonical form */
 export function createCanonicalURL(

packages/astro-rss/tsconfig.json

@@ -2,10 +2,6 @@
   "extends": "../../tsconfig.base.json",
   "include": ["src"],
   "compilerOptions": {
-    "allowJs": true,
-    "module": "ES2022",
-    "outDir": "./dist",
-    "target": "ES2022",
-    "strictNullChecks": true
+    "outDir": "./dist"
   }
 }

packages/astro/astro-jsx.d.ts

@@ -471,6 +471,33 @@ declare namespace astroHTML.JSX {
 		| 'treegrid'
 		| 'treeitem';
 
+	type CssProperty = keyof Omit<
+		CSSStyleDeclaration,
+		| 'item'
+		| 'setProperty'
+		| 'removeProperty'
+		| 'getPropertyValue'
+		| 'getPropertyPriority'
+		| 'parentRule'
+		| 'length'
+		| 'cssFloat'
+		| 'cssText'
+		| typeof Symbol.iterator
+		| number
+	>;
+
+	type KebabCSSDOMProperties = import('./dist/type-utils.js').KebabKeys<DOMCSSProperties>;
+
+	type DOMCSSProperties = {
+		[key in CssProperty]?: string | number | null | undefined;
+	};
+	type AllCSSProperties = {
+		[key: string]: string | number | null | undefined;
+	};
+	type StyleObject = import('./dist/type-utils.js').Simplify<
+		KebabCSSDOMProperties & DOMCSSProperties & AllCSSProperties
+	>;
+
 	interface HTMLAttributes extends AriaAttributes, DOMAttributes, AstroBuiltinAttributes {
 		// Standard HTML Attributes
 		accesskey?: string | undefined | null;
@@ -513,7 +540,7 @@ declare namespace astroHTML.JSX {
 		lang?: string | undefined | null;
 		slot?: string | undefined | null;
 		spellcheck?: 'true' | 'false' | boolean | undefined | null;
-		style?: string | Record<string, any> | undefined | null;
+		style?: string | StyleObject | undefined | null;
 		tabindex?: number | string | undefined | null;
 		title?: string | undefined | null;
 		translate?: 'yes' | 'no' | undefined | null;

packages/astro/client.d.ts

@@ -52,7 +52,7 @@ declare module 'astro:assets' {
 				| import('./dist/assets/types.js').ImageTransform
 				| import('./dist/assets/types.js').UnresolvedImageTransform
 		) => Promise<import('./dist/assets/types.js').GetImageResult>;
-		imageConfig: import('./dist/@types/astro').AstroConfig['image'];
+		imageConfig: import('./dist/@types/astro.js').AstroConfig['image'];
 		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
 		Image: typeof import('./components/Image.astro').default;
 	};
@@ -108,6 +108,10 @@ declare module '*.svg' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
+declare module '*.avif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
 
 declare module 'astro:transitions' {
 	type TransitionModule = typeof import('./dist/transitions/index.js');
@@ -126,7 +130,7 @@ declare module 'astro:components' {
 	export * from 'astro/components';
 }
 
-type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;
+type MD = import('./dist/@types/astro.js').MarkdownInstance<Record<string, any>>;
 interface ExportedMarkdownModuleEntities {
 	frontmatter: MD['frontmatter'];
 	file: MD['file'];
@@ -231,7 +235,7 @@ declare module '*.mdown' {
 }
 
 declare module '*.mdx' {
-	type MDX = import('./dist/@types/astro').MDXInstance<Record<string, any>>;
+	type MDX = import('./dist/@types/astro.js').MDXInstance<Record<string, any>>;
 
 	export const frontmatter: MDX['frontmatter'];
 	export const file: MDX['file'];
@@ -244,7 +248,7 @@ declare module '*.mdx' {
 }
 
 declare module 'astro:ssr-manifest' {
-	export const manifest: import('./dist/@types/astro').SSRManifest;
+	export const manifest: import('./dist/@types/astro.js').SSRManifest;
 }
 
 // Everything below are Vite's types (apart from image types, which are in `client.d.ts`)

packages/astro/content-types.template.d.ts

@@ -12,7 +12,12 @@ declare module 'astro:content' {
 	export { z } from 'astro/zod';
 
 	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-	export type CollectionEntry<C extends keyof AnyEntryMap> = Flatten<AnyEntryMap[C]>;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
 
 	// This needs to be in sync with ImageMetadata
 	export type ImageFunction = () => import('astro/zod').ZodObject<{

packages/astro/package.json

@@ -157,6 +157,7 @@
     "p-limit": "^4.0.0",
     "path-to-regexp": "^6.2.1",
     "preferred-pm": "^3.1.2",
+    "probe-image-size": "^7.2.3",
     "prompts": "^2.4.2",
     "rehype": "^12.0.1",
     "resolve": "^1.22.4",
@@ -197,6 +198,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/mime": "^3.0.1",
     "@types/mocha": "^10.0.1",
+    "@types/probe-image-size": "^7.2.0",
     "@types/prompts": "^2.4.4",
     "@types/resolve": "^1.20.2",
     "@types/send": "^0.17.1",

packages/astro/src/@types/astro.ts

@@ -13,16 +13,16 @@ 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';
-import type { SerializedSSRManifest } from '../core/app/types';
-import type { PageBuildData } from '../core/build/types';
-import type { AstroConfigType } from '../core/config';
-import type { AstroTimer } from '../core/config/timer';
-import type { AstroCookies } from '../core/cookies';
+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 { AstroCookies } from '../core/cookies/index.js';
 import type { ResponseWithEncoding } from '../core/endpoint/index.js';
-import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core';
-import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server';
-import type { OmitIndexSignature, Simplify } from '../type-utils';
+import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
+import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
+import type { OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
 
 export { type AstroIntegrationLogger };
@@ -39,7 +39,7 @@ export type {
 	ExternalImageService,
 	ImageService,
 	LocalImageService,
-} from '../assets/services/service';
+} from '../assets/services/service.js';
 export type {
 	GetImageResult,
 	ImageInputFormat,
@@ -48,10 +48,10 @@ export type {
 	ImageQuality,
 	ImageQualityPreset,
 	ImageTransform,
-} from '../assets/types';
-export type { RemotePattern } from '../assets/utils/remotePattern';
-export type { SSRManifest } from '../core/app/types';
-export type { AstroCookies } from '../core/cookies';
+} from '../assets/types.js';
+export type { RemotePattern } from '../assets/utils/remotePattern.js';
+export type { SSRManifest } from '../core/app/types.js';
+export type { AstroCookies } from '../core/cookies/index.js';
 
 export interface AstroBuiltinProps {
 	'client:load'?: boolean;
@@ -974,6 +974,28 @@ export interface AstroUserConfig {
 	 * @name Image Options
 	 */
 	image?: {
+		/**
+		 * @docs
+		 * @name image.endpoint
+		 * @type {string}
+		 * @default `undefined`
+		 * @version 3.1.0
+		 * @description
+		 * Set the endpoint to use for image optimization in dev and SSR. Set to `undefined` to use the default endpoint.
+		 *
+		 * The endpoint will always be injected at `/_image`.
+		 *
+		 * ```js
+		 * {
+		 *   image: {
+		 *     // Example: Use a custom image endpoint
+		 *     endpoint: './src/image-endpoint.ts',
+		 *   },
+		 * }
+		 * ```
+		 */
+		endpoint?: string;
+
 		/**
 		 * @docs
 		 * @name image.service

packages/astro/src/assets/build/generate.ts

@@ -1,6 +1,6 @@
 import fs, { readFileSync } from 'node:fs';
 import { basename, join } from 'node:path/posix';
-import type { BuildPipeline } from '../../core/build/buildPipeline';
+import type { BuildPipeline } from '../../core/build/buildPipeline.js';
 import { prependForwardSlash } from '../../core/path.js';
 import { isServerLikeOutput } from '../../prerender/utils.js';
 import { getConfiguredImageService, isESMImportedImage } from '../internal.js';

packages/astro/src/assets/consts.ts

@@ -1,21 +1,14 @@
 export const VIRTUAL_MODULE_ID = 'astro:assets';
 export const VIRTUAL_SERVICE_ID = 'virtual:image-service';
 export const VALID_INPUT_FORMATS = [
-	// TODO: `image-size` does not support the following formats, so users can't import them.
-	// However, it would be immensely useful to add, for three reasons:
-	// - `heic` and `heif` are common formats, especially among Apple users.
-	// - AVIF is a common format on the web that's bound to become more and more common.
-	// - It's totally reasonable for an user's provided image service to want to support more image types.
-	//'heic',
-	//'heif',
-	//'avif',
 	'jpeg',
 	'jpg',
 	'png',
 	'tiff',
 	'webp',
 	'gif',
 	'svg',
+	'avif',
 ] as const;
 /**
  * Valid formats that our base services support.
@@ -29,5 +22,6 @@ export const VALID_SUPPORTED_FORMATS = [
 	'webp',
 	'gif',
 	'svg',
+	'avif',
 ] as const;
 export const VALID_OUTPUT_FORMATS = ['avif', 'png', 'webp', 'jpeg', 'jpg', 'svg'] as const;