astro 3.0.0-beta.2 → 3.0.0-beta.4

package/astro.js

@@ -16,11 +16,15 @@ const CI_INSTRUCTIONS = {
 const engines = '>=18.14.1';
 const skipSemverCheckIfAbove = 19;
 
+// HACK (2023-08-18) Stackblitz does not support Node 18 yet, so we'll fake Node 16 support for some time until it's supported
+// TODO: Remove when Node 18 is supported on Stackblitz
+const isStackblitz = process.env.SHELL === '/bin/jsh' && process.versions.webcontainer != null;
+
 /** `astro *` */
 async function main() {
 	const version = process.versions.node;
 	// Fast-path for higher Node.js versions
-	if ((parseInt(version) || 0) <= skipSemverCheckIfAbove) {
+	if (!isStackblitz && (parseInt(version) || 0) <= skipSemverCheckIfAbove) {
 		try {
 			const semver = await import('semver');
 			if (!semver.satisfies(version, engines)) {

package/client.d.ts

@@ -1,31 +1,473 @@
-/// <reference path="./client-base.d.ts" />
+/// <reference path="./import-meta.d.ts" />
 
-// images
+// eslint-disable-next-line  @typescript-eslint/no-namespace
+declare namespace App {
+	// eslint-disable-next-line  @typescript-eslint/no-empty-interface
+	export interface Locals {}
+}
+
+interface ImportMetaEnv {
+	/**
+	 * The prefix for Astro-generated asset links if the build.assetsPrefix config option is set. This can be used to create asset links not handled by Astro.
+	 */
+	readonly ASSETS_PREFIX: string;
+	/**
+	 * This is set to the site option specified in your project’s Astro config file.
+	 */
+	readonly SITE: string;
+}
+
+interface ImportMeta {
+	/**
+	 * Astro and Vite expose environment variables through `import.meta.env`. For a complete list of the environment variables available, see the two references below.
+	 *
+	 * - [Astro reference](https://docs.astro.build/en/guides/environment-variables/#default-environment-variables)
+	 * - [Vite reference](https://vitejs.dev/guide/env-and-mode.html#env-variables)
+	 */
+	readonly env: ImportMetaEnv;
+}
+
+declare module 'astro:assets' {
+	// Exporting things one by one is a bit cumbersome, not sure if there's a better way - erika, 2023-02-03
+	type AstroAssets = {
+		// getImage's type here is different from the internal function since the Vite module implicitly pass the service config
+		/**
+		 * Get an optimized image and the necessary attributes to render it.
+		 *
+		 * **Example**
+		 * ```astro
+		 * ---
+		 * import { getImage } from 'astro:assets';
+		 * import originalImage from '../assets/image.png';
+		 *
+		 * const optimizedImage = await getImage({src: originalImage, width: 1280 });
+		 * ---
+		 * <img src={optimizedImage.src} {...optimizedImage.attributes} />
+		 * ```
+		 *
+		 * This is functionally equivalent to using the `<Image />` component, as the component calls this function internally.
+		 */
+		getImage: (
+			options:
+				| import('./dist/assets/types.js').ImageTransform
+				| import('./dist/assets/types.js').UnresolvedImageTransform
+		) => Promise<import('./dist/assets/types.js').GetImageResult>;
+		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
+		Image: typeof import('./components/Image.astro').default;
+	};
+
+	type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+	type Simplify<T> = { [KeyType in keyof T]: T[KeyType] };
+	type ImgAttributes = WithRequired<
+		Omit<import('./types').HTMLAttributes<'img'>, 'src' | 'width' | 'height'>,
+		'alt'
+	>;
+
+	export type LocalImageProps = Simplify<
+		import('./dist/assets/types.js').LocalImageProps<ImgAttributes>
+	>;
+	export type RemoteImageProps = Simplify<
+		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
+	>;
+	export const { getImage, getConfiguredImageService, Image }: AstroAssets;
+}
+
+type InputFormat = import('./dist/assets/types.js').ImageInputFormat;
+
+interface ImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: InputFormat;
+}
+
+declare module '*.gif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.jpeg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
 declare module '*.jpg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.png' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.tiff' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.webp' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.svg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+
+declare module 'astro:transitions' {
+	type TransitionModule = typeof import('./dist/transitions/index.js');
+	export const slide: TransitionModule['slide'];
+	export const fade: TransitionModule['fade'];
+
+	type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro');
+	export const ViewTransitions: ViewTransitionsModule['default'];
+}
+
+declare module 'astro:middleware' {
+	export * from 'astro/middleware/namespace';
+}
+
+declare module 'astro:components' {
+	export * from 'astro/components';
+}
+
+type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;
+interface ExportedMarkdownModuleEntities {
+	frontmatter: MD['frontmatter'];
+	file: MD['file'];
+	url: MD['url'];
+	getHeadings: MD['getHeadings'];
+	/** @deprecated Renamed to `getHeadings()` */
+	getHeaders: () => void;
+	Content: MD['Content'];
+	rawContent: MD['rawContent'];
+	compiledContent: MD['compiledContent'];
+	load: MD['default'];
+}
+
+declare module '*.md' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.markdown' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.mkdn' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.mkd' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.mdwn' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.mdown' {
+	const { load }: ExportedMarkdownModuleEntities;
+	export const {
+		frontmatter,
+		file,
+		url,
+		getHeadings,
+		getHeaders,
+		Content,
+		rawContent,
+		compiledContent,
+	}: ExportedMarkdownModuleEntities;
+	export default load;
+}
+
+declare module '*.mdx' {
+	type MDX = import('./dist/@types/astro').MDXInstance<Record<string, any>>;
+
+	export const frontmatter: MDX['frontmatter'];
+	export const file: MDX['file'];
+	export const url: MDX['url'];
+	export const getHeadings: MDX['getHeadings'];
+	export const Content: MDX['Content'];
+
+	const load: MDX['default'];
+	export default load;
+}
+
+declare module 'astro:ssr-manifest' {
+	export const manifest: import('./dist/@types/astro').SSRManifest;
+}
+
+// Everything below are Vite's types (apart from image types, which are in `client.d.ts`)
+
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string };
+
+declare module '*.module.css' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.scss' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.sass' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.less' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.styl' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.stylus' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.pcss' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+declare module '*.module.sss' {
+	const classes: CSSModuleClasses;
+	export default classes;
+}
+
+// CSS
+declare module '*.css' {
+	const css: string;
+	export default css;
+}
+declare module '*.scss' {
+	const css: string;
+	export default css;
+}
+declare module '*.sass' {
+	const css: string;
+	export default css;
+}
+declare module '*.less' {
+	const css: string;
+	export default css;
+}
+declare module '*.styl' {
+	const css: string;
+	export default css;
+}
+declare module '*.stylus' {
+	const css: string;
+	export default css;
+}
+declare module '*.pcss' {
+	const css: string;
+	export default css;
+}
+declare module '*.sss' {
+	const css: string;
+	export default css;
+}
+
+// Built-in asset types
+// see `src/node/constants.ts`
+
+// images
+declare module '*.jfif' {
 	const src: string;
 	export default src;
 }
-declare module '*.jpeg' {
+declare module '*.pjpeg' {
 	const src: string;
 	export default src;
 }
-declare module '*.png' {
+declare module '*.pjp' {
 	const src: string;
 	export default src;
 }
-declare module '*.gif' {
+declare module '*.ico' {
 	const src: string;
 	export default src;
 }
-declare module '*.svg' {
+
+// media
+declare module '*.mp4' {
 	const src: string;
 	export default src;
 }
-declare module '*.webp' {
+declare module '*.webm' {
+	const src: string;
+	export default src;
+}
+declare module '*.ogg' {
+	const src: string;
+	export default src;
+}
+declare module '*.mp3' {
+	const src: string;
+	export default src;
+}
+declare module '*.wav' {
+	const src: string;
+	export default src;
+}
+declare module '*.flac' {
+	const src: string;
+	export default src;
+}
+declare module '*.aac' {
 	const src: string;
 	export default src;
 }
-declare module '*.avif' {
+
+declare module '*.opus' {
+	const src: string;
+	export default src;
+}
+
+// fonts
+declare module '*.woff' {
+	const src: string;
+	export default src;
+}
+declare module '*.woff2' {
+	const src: string;
+	export default src;
+}
+declare module '*.eot' {
+	const src: string;
+	export default src;
+}
+declare module '*.ttf' {
+	const src: string;
+	export default src;
+}
+declare module '*.otf' {
+	const src: string;
+	export default src;
+}
+
+// other
+declare module '*.webmanifest' {
+	const src: string;
+	export default src;
+}
+declare module '*.pdf' {
+	const src: string;
+	export default src;
+}
+declare module '*.txt' {
+	const src: string;
+	export default src;
+}
+
+// wasm?init
+declare module '*.wasm?init' {
+	const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Instance>;
+	export default initWasm;
+}
+
+// web worker
+declare module '*?worker' {
+	const workerConstructor: {
+		new (): Worker;
+	};
+	export default workerConstructor;
+}
+
+declare module '*?worker&inline' {
+	const workerConstructor: {
+		new (): Worker;
+	};
+	export default workerConstructor;
+}
+
+declare module '*?worker&url' {
+	const src: string;
+	export default src;
+}
+
+declare module '*?sharedworker' {
+	const sharedWorkerConstructor: {
+		new (): SharedWorker;
+	};
+	export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&inline' {
+	const sharedWorkerConstructor: {
+		new (): SharedWorker;
+	};
+	export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&url' {
+	const src: string;
+	export default src;
+}
+
+declare module '*?raw' {
+	const src: string;
+	export default src;
+}
+
+declare module '*?url' {
+	const src: string;
+	export default src;
+}
+
+declare module '*?inline' {
 	const src: string;
 	export default src;
 }

package/components/Code.astro

@@ -74,9 +74,9 @@ const html = renderToHtml(tokens, {
 			// Handle code wrapping
 			// if wrap=null, do nothing.
 			if (wrap === false) {
-				style += '; overflow-x: auto;"';
+				style += '; overflow-x: auto;';
 			} else if (wrap === true) {
-				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"';
+				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
 			}
 			return `<${tag} class="${className}" style="${style}" tabindex="0">${children}</${tag}>`;
 		},

package/components/ViewTransitions.astro

@@ -38,12 +38,21 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	const throttle = (cb: (...args: any[]) => any, delay: number) => {
 		let wait = false;
+		// During the waiting time additional events are lost.
+		// So repeat the callback at the end if we have swallowed events.
+		let onceMore = false;
 		return (...args: any[]) => {
-			if (wait) return;
-
+			if (wait) {
+				onceMore = true;
+				return;
+			}
 			cb(...args);
 			wait = true;
 			setTimeout(() => {
+				if (onceMore) {
+					onceMore = false;
+					cb(...args);
+				}
 				wait = false;
 			}, delay);
 		};
@@ -63,9 +72,16 @@ const { fallback = 'animate' } = Astro.props as Props;
 		return 'animate';
 	}
 
+	function markScriptsExec() {
+		for (const script of document.scripts) {
+			script.dataset.astroExec = '';
+		}
+	}
+
 	function runScripts() {
 		let wait = Promise.resolve();
 		for (const script of Array.from(document.scripts)) {
+			if (script.dataset.astroExec === '') continue;
 			const s = document.createElement('script');
 			s.innerHTML = script.innerHTML;
 			for (const attr of script.attributes) {
@@ -77,6 +93,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 				}
 				s.setAttribute(attr.name, attr.value);
 			}
+			s.dataset.astroExec = '';
 			script.replaceWith(s);
 		}
 		return wait;
@@ -100,10 +117,27 @@ const { fallback = 'animate' } = Astro.props as Props;
 				const href = el.getAttribute('href');
 				return doc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
 			}
+			if (el.tagName === 'SCRIPT') {
+				let s1 = el as HTMLScriptElement;
+				for (const s2 of doc.scripts) {
+					if (
+						// Inline
+						(s1.textContent && s1.textContent === s2.textContent) ||
+						// External
+						(s1.type === s2.type && s1.src === s2.src)
+					) {
+						return s2;
+					}
+				}
+			}
 			return null;
 		};
 
 		const swap = () => {
+			// noscript tags inside head element are not honored on swap (#7969).
+			// Remove them before swapping.
+			doc.querySelectorAll('head noscript').forEach((el) => el.remove());
+
 			// Swap head
 			for (const el of Array.from(document.head.children)) {
 				const newEl = persistedHeadElement(el);
@@ -132,8 +166,14 @@ const { fallback = 'animate' } = Astro.props as Props;
 				}
 			}
 
+			if (state?.scrollY === 0 && location.hash) {
+				const id = decodeURIComponent(location.hash.slice(1));
+				state.scrollY = document.getElementById(id)?.offsetTop || 0;
+			}
 			if (state?.scrollY != null) {
 				scrollTo(0, state.scrollY);
+				// Overwrite erroneous updates by the scroll handler during transition
+				persistState(state);
 			}
 
 			triggerEvent('astro:beforeload');
@@ -203,6 +243,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 		} finally {
 			document.documentElement.removeAttribute('data-astro-transition');
 			await runScripts();
+			markScriptsExec();
 			onload();
 		}
 	}
@@ -221,6 +262,8 @@ const { fallback = 'animate' } = Astro.props as Props;
 	}
 
 	if (supportsViewTransitions || getFallback() !== 'none') {
+		markScriptsExec();
+
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
 			if (link instanceof Element && link.tagName !== 'A') {
@@ -235,7 +278,10 @@ const { fallback = 'animate' } = Astro.props as Props;
 				link.href &&
 				(!link.target || link.target === '_self') &&
 				link.origin === location.origin &&
-				!link.hash &&
+				!(
+					// Same page means same path and same query params
+					(location.pathname === link.pathname && location.search === link.search)
+				) &&
 				ev.button === 0 && // left clicks only
 				!ev.metaKey && // new tab (mac)
 				!ev.ctrlKey && // new tab (windows)

package/config.d.ts

@@ -24,3 +24,10 @@ export function sharpImageService(): ImageServiceConfig;
  * Return the configuration needed to use the Squoosh-based image service
  */
 export function squooshImageService(): ImageServiceConfig;
+
+/**
+ * Return the configuration needed to use the passthrough image service. This image services does not perform
+ * any image transformations, and is mainly useful when your platform does not support other image services, or you are
+ * not using Astro's built-in image processing.
+ */
+export function passthroughImageService(): ImageServiceConfig;

package/config.mjs

@@ -13,3 +13,10 @@ export function squooshImageService() {
 		config: {},
 	};
 }
+
+export function passthroughImageService() {
+	return {
+		entrypoint: 'astro/assets/services/noop',
+		config: {},
+	};
+}

package/content-types.template.d.ts

@@ -10,7 +10,9 @@ declare module 'astro:content' {
 
 declare module 'astro:content' {
 	export { z } from 'astro/zod';
-	export type CollectionEntry<C extends keyof AnyEntryMap> = AnyEntryMap[C][keyof AnyEntryMap[C]];
+
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+	export type CollectionEntry<C extends keyof AnyEntryMap> = Flatten<AnyEntryMap[C]>;
 
 	// TODO: Remove this when having this fallback is no longer relevant. 2.3? 3.0? - erika, 2023-04-04
 	/**