astro 3.4.3 → 3.5.0

package/client.d.ts

@@ -119,6 +119,92 @@ declare module 'astro:transitions/client' {
 	export const supportsViewTransitions: TransitionRouterModule['supportsViewTransitions'];
 	export const transitionEnabledOnThisPage: TransitionRouterModule['transitionEnabledOnThisPage'];
 	export const navigate: TransitionRouterModule['navigate'];
+	export type Options = import('./dist/transitions/router.js').Options;
+}
+
+declare module 'astro:prefetch' {
+	export { prefetch, PrefetchOptions } from 'astro/prefetch';
+}
+
+declare module 'astro:i18n' {
+	export type GetLocaleOptions = import('./dist/i18n/index.js').GetLocaleOptions;
+
+	/**
+	 * @param {string} locale A locale
+	 * @param {string} [path=""] An optional path to add after the `locale`.
+	 * @param {import('./dist/i18n/index.js').GetLocaleOptions} options Customise the generated path
+	 * @return {string}
+	 *
+	 * Returns a _relative_ path with passed locale.
+	 *
+	 * ## Errors
+	 *
+	 * Throws an error if the locale doesn't exist in the list of locales defined in the configuration.
+	 *
+	 * ## Examples
+	 *
+	 * ```js
+	 * import { getRelativeLocaleUrl } from "astro:i18n";
+	 * getRelativeLocaleUrl("es"); // /es
+	 * getRelativeLocaleUrl("es", "getting-started"); // /es/getting-started
+	 * getRelativeLocaleUrl("es_US", "getting-started", { prependWith: "blog" }); // /blog/es-us/getting-started
+	 * getRelativeLocaleUrl("es_US", "getting-started", { prependWith: "blog", normalizeLocale: false }); // /blog/es_US/getting-started
+	 * ```
+	 */
+	export const getRelativeLocaleUrl: (
+		locale: string,
+		path?: string,
+		options?: GetLocaleOptions
+	) => string;
+
+	/**
+	 *
+	 * @param {string} locale A locale
+	 * @param {string} [path=""] An optional path to add after the `locale`.
+	 * @param {import('./dist/i18n/index.js').GetLocaleOptions} options Customise the generated path
+	 * @return {string}
+	 *
+	 * Returns an absolute path with the passed locale. The behaviour is subject to change based on `site` configuration.
+	 * If _not_ provided, the function will return a _relative_ URL.
+	 *
+	 * ## Errors
+	 *
+	 * Throws an error if the locale doesn't exist in the list of locales defined in the configuration.
+	 *
+	 * ## Examples
+	 *
+	 * If `site` is `https://example.com`:
+	 *
+	 * ```js
+	 * import { getAbsoluteLocaleUrl } from "astro:i18n";
+	 * getAbsoluteLocaleUrl("es"); // https://example.com/es
+	 * getAbsoluteLocaleUrl("es", "getting-started"); // https://example.com/es/getting-started
+	 * getAbsoluteLocaleUrl("es_US", "getting-started", { prependWith: "blog" }); // https://example.com/blog/es-us/getting-started
+	 * getAbsoluteLocaleUrl("es_US", "getting-started", { prependWith: "blog", normalizeLocale: false }); // https://example.com/blog/es_US/getting-started
+	 * ```
+	 */
+	export const getAbsoluteLocaleUrl: (
+		locale: string,
+		path?: string,
+		options?: GetLocaleOptions
+	) => string;
+
+	/**
+	 * @param {string} [path=""] An optional path to add after the `locale`.
+	 * @param {import('./dist/i18n/index.js').GetLocaleOptions} options Customise the generated path
+	 * @return {string[]}
+	 *
+	 * Works like `getRelativeLocaleUrl` but it emits the relative URLs for ALL locales:
+	 */
+	export const getRelativeLocaleUrlList: (path?: string, options?: GetLocaleOptions) => string[];
+	/**
+	 * @param {string} [path=""] An optional path to add after the `locale`.
+	 * @param {import('./dist/i18n/index.js').GetLocaleOptions} options Customise the generated path
+	 * @return {string[]}
+	 *
+	 * Works like `getAbsoluteLocaleUrl` but it emits the absolute URLs for ALL locales:
+	 */
+	export const getAbsoluteLocaleUrlList: (path?: string, options?: GetLocaleOptions) => string[];
 }
 
 declare module 'astro:middleware' {

package/components/Code.astro

@@ -1,4 +1,7 @@
 ---
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import type {
 	BuiltinLanguage,
 	BuiltinTheme,
@@ -29,6 +32,11 @@ interface Props {
 	 * @default "github-dark"
 	 */
 	theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;
+	/**
+	 * Multiple themes to style with -- alternative to "theme" option.
+	 * Supports all themes found above; see https://github.com/antfu/shikiji#lightdark-dual-themes for more information.
+	 */
+	experimentalThemes?: Record<string, BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw>;
 	/**
 	 * Enable word wrapping.
 	 *  - true: enabled.
@@ -50,14 +58,32 @@ const {
 	code,
 	lang = 'plaintext',
 	theme = 'github-dark',
+	experimentalThemes = {},
 	wrap = false,
 	inline = false,
 } = Astro.props;
 
 // shiki -> shikiji compat
 if (typeof lang === 'object') {
-	// `id` renamed to `name
-	if ((lang as any).id && !lang.name) {
+	// shikiji does not support `path`
+	// https://github.com/shikijs/shiki/blob/facb6ff37996129626f8066a5dccb4608e45f649/packages/shiki/src/loader.ts#L98
+	const langPath = (lang as any).path;
+	if (langPath) {
+		// shiki resolves path from within its package directory :shrug:
+		const astroRoot = fileURLToPath(new URL('../', import.meta.url));
+		const normalizedPath = path.isAbsolute(langPath) ? langPath : path.resolve(astroRoot, langPath);
+		try {
+			const content = fs.readFileSync(normalizedPath, 'utf-8');
+			const parsed = JSON.parse(content);
+			Object.assign(lang, parsed);
+		} catch (e) {
+			throw new Error(`Unable to find language file at ${normalizedPath}`, {
+				cause: e,
+			});
+		}
+	}
+	// `id` renamed to `name` (always override)
+	if ((lang as any).id) {
 		lang.name = (lang as any).id;
 	}
 	// `grammar` flattened to lang itself
@@ -68,12 +94,15 @@ if (typeof lang === 'object') {
 
 const highlighter = await getCachedHighlighter({
 	langs: [lang],
-	themes: [theme],
+	themes: Object.values(experimentalThemes).length ? Object.values(experimentalThemes) : [theme],
 });
 
+const themeOptions = Object.values(experimentalThemes).length
+	? { themes: experimentalThemes }
+	: { theme };
 const html = highlighter.codeToHtml(code, {
 	lang: typeof lang === 'string' ? lang : lang.name,
-	theme,
+	...themeOptions,
 	transforms: {
 		pre(node) {
 			// Swap to `code` tag if inline
@@ -103,6 +132,10 @@ const html = highlighter.codeToHtml(code, {
 			}
 		},
 		root(node) {
+			if (Object.values(experimentalThemes).length) {
+				return;
+			}
+
 			// theme.id for shiki -> shikiji compat
 			const themeName = typeof theme === 'string' ? theme : theme.name;
 			if (themeName === 'css-variables') {

package/components/Image.astro

@@ -1,6 +1,7 @@
 ---
 import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+import type { HTMLAttributes } from '../types';
 
 // 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
@@ -24,8 +25,7 @@ if (typeof props.height === 'string') {
 
 const image = await getImage(props);
 
-const additionalAttributes: Record<string, any> = {};
-
+const additionalAttributes: HTMLAttributes<'img'> = {};
 if (image.srcSet.values.length > 0) {
 	additionalAttributes.srcset = image.srcSet.attribute;
 }

package/components/Picture.astro

@@ -17,8 +17,9 @@ 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
+// - JPEGs compress photographs and high-noise images better than PNG in most cases
 // For those, we'll use the original format as the fallback instead.
-const specialFormatsFallback = ['gif', 'svg'] as const;
+const specialFormatsFallback = ['gif', 'svg', 'jpg', 'jpeg'] as const;
 
 const { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro.props;
 
@@ -49,9 +50,16 @@ const fallbackImage = await getImage({
 	densities: props.densities,
 });
 
-const additionalAttributes: Record<string, any> = {};
+const imgAdditionalAttributes: HTMLAttributes<'img'> = {};
+const sourceAdditionaAttributes: HTMLAttributes<'source'> = {};
+
+// Propagate the `sizes` attribute to the `source` elements
+if (props.sizes) {
+	sourceAdditionaAttributes.sizes = props.sizes;
+}
+
 if (fallbackImage.srcSet.values.length > 0) {
-	additionalAttributes.srcset = fallbackImage.srcSet.attribute;
+	imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
 }
 ---
 
@@ -62,8 +70,14 @@ if (fallbackImage.srcSet.values.length > 0) {
 				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} />;
+			return (
+				<source
+					srcset={srcsetAttribute}
+					type={'image/' + image.options.format}
+					{...sourceAdditionaAttributes}
+				/>
+			);
 		})
 	}
-	<img src={fallbackImage.src} {...additionalAttributes} {...fallbackImage.attributes} />
+	<img src={fallbackImage.src} {...imgAdditionalAttributes} {...fallbackImage.attributes} />
 </picture>

package/components/ViewTransitions.astro

@@ -3,9 +3,10 @@ type Fallback = 'none' | 'animate' | 'swap';
 
 export interface Props {
 	fallback?: Fallback;
+	handleForms?: boolean;
 }
 
-const { fallback = 'animate' } = Astro.props;
+const { fallback = 'animate', handleForms } = Astro.props;
 ---
 
 <style is:global>
@@ -24,12 +25,13 @@ const { fallback = 'animate' } = Astro.props;
 </style>
 <meta name="astro-view-transitions-enabled" content="true" />
 <meta name="astro-view-transitions-fallback" content={fallback} />
+{handleForms ? <meta name="astro-view-transitions-forms" content="true" /> : ''}
 <script>
-	import {
-		supportsViewTransitions,
-		transitionEnabledOnThisPage,
-		navigate,
-	} from 'astro:transitions/client';
+	import type { Options } from 'astro:transitions/client';
+	import { supportsViewTransitions, navigate } from 'astro:transitions/client';
+	// NOTE: import from `astro/prefetch` as `astro:prefetch` requires the `prefetch` config to be enabled
+	import { init } from 'astro/prefetch';
+
 	export type Fallback = 'none' | 'animate' | 'swap';
 
 	function getFallback(): Fallback {
@@ -40,19 +42,8 @@ const { fallback = 'animate' } = Astro.props;
 		return 'animate';
 	}
 
-	// Prefetching
-	function maybePrefetch(pathname: string) {
-		if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
-		// @ts-expect-error: connection might exist
-		if (navigator.connection) {
-			// @ts-expect-error: connection does exist
-			let conn = navigator.connection;
-			if (conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
-		}
-		let link = document.createElement('link');
-		link.setAttribute('rel', 'prefetch');
-		link.setAttribute('href', pathname);
-		document.head.append(link);
+	function isReloadEl(el: HTMLElement): boolean {
+		return el.dataset.astroReload !== undefined;
 	}
 
 	if (supportsViewTransitions || getFallback() !== 'none') {
@@ -67,7 +58,7 @@ const { fallback = 'animate' } = Astro.props;
 			if (
 				!link ||
 				!(link instanceof HTMLAnchorElement) ||
-				link.dataset.astroReload !== undefined ||
+				isReloadEl(link) ||
 				link.hasAttribute('download') ||
 				!link.href ||
 				(link.target && link.target !== '_self') ||
@@ -89,23 +80,33 @@ const { fallback = 'animate' } = Astro.props;
 			});
 		});
 
-		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
-			document.addEventListener(
-				evName,
-				(ev) => {
-					if (ev.target instanceof HTMLAnchorElement) {
-						let el = ev.target;
-						if (
-							el.origin === location.origin &&
-							el.pathname !== location.pathname &&
-							transitionEnabledOnThisPage()
-						) {
-							maybePrefetch(el.pathname);
-						}
-					}
-				},
-				{ passive: true, capture: true }
-			);
-		});
+		if (document.querySelector('[name="astro-view-transitions-forms"]')) {
+			document.addEventListener('submit', (ev) => {
+				let el = ev.target as HTMLElement;
+				if (el.tagName !== 'FORM' || isReloadEl(el)) {
+					return;
+				}
+
+				const form = el as HTMLFormElement;
+				const formData = new FormData(form);
+				let action = form.action;
+				const options: Options = {};
+				if (form.method === 'get') {
+					const params = new URLSearchParams(formData as any);
+					const url = new URL(action);
+					url.search = params.toString();
+					action = url.toString();
+				} else {
+					options.formData = formData;
+				}
+				ev.preventDefault();
+				navigate(action, options);
+			});
+		}
+
+		// @ts-expect-error injected by vite-plugin-transitions for treeshaking
+		if (!__PREFETCH_DISABLED__) {
+			init({ prefetchAll: true });
+		}
 	}
 </script>

package/content-module.template.mjs

@@ -9,21 +9,18 @@ import {
 	createReference,
 } from 'astro/content/runtime';
 
+export { defineCollection } from 'astro/content/runtime';
 export { z } from 'astro/zod';
 
 const contentDir = '@@CONTENT_DIR@@';
 
-const contentEntryGlob = import.meta.glob('@@CONTENT_ENTRY_GLOB_PATH@@', {
-	query: { astroContentCollectionEntry: true },
-});
+const contentEntryGlob = '@@CONTENT_ENTRY_GLOB_PATH@@';
 const contentCollectionToEntryMap = createCollectionToGlobResultMap({
 	globResult: contentEntryGlob,
 	contentDir,
 });
 
-const dataEntryGlob = import.meta.glob('@@DATA_ENTRY_GLOB_PATH@@', {
-	query: { astroDataCollectionEntry: true },
-});
+const dataEntryGlob = '@@DATA_ENTRY_GLOB_PATH@@';
 const dataCollectionToEntryMap = createCollectionToGlobResultMap({
 	globResult: dataEntryGlob,
 	contentDir,
@@ -45,19 +42,12 @@ function createGlobLookup(glob) {
 	};
 }
 
-const renderEntryGlob = import.meta.glob('@@RENDER_ENTRY_GLOB_PATH@@', {
-	query: { astroRenderContent: true },
-});
+const renderEntryGlob = '@@RENDER_ENTRY_GLOB_PATH@@';
 const collectionToRenderEntryMap = createCollectionToGlobResultMap({
 	globResult: renderEntryGlob,
 	contentDir,
 });
 
-export function defineCollection(config) {
-	if (!config.type) config.type = 'content';
-	return config;
-}
-
 export const getCollection = createGetCollection({
 	contentCollectionToEntryMap,
 	dataCollectionToEntryMap,