astro 3.1.4 → 3.2.0

package/client.d.ts

@@ -120,6 +120,13 @@ declare module 'astro:transitions' {
 	export const ViewTransitions: ViewTransitionsModule['default'];
 }
 
+declare module 'astro:transitions/client' {
+	type TransitionRouterModule = typeof import('./dist/transitions/router.js');
+	export const supportsViewTransitions: TransitionRouterModule['supportsViewTransitions'];
+	export const transitionEnabledOnThisPage: TransitionRouterModule['transitionEnabledOnThisPage'];
+	export const navigate: TransitionRouterModule['navigate'];
+}
+
 declare module 'astro:middleware' {
 	export * from 'astro/middleware/namespace';
 }

package/components/ViewTransitions.astro

@@ -11,91 +11,12 @@ const { fallback = 'animate' } = Astro.props as Props;
 <meta name="astro-view-transitions-enabled" content="true" />
 <meta name="astro-view-transitions-fallback" content={fallback} />
 <script>
-	type Fallback = 'none' | 'animate' | 'swap';
-	type Direction = 'forward' | 'back';
-	type State = {
-		index: number;
-		scrollX: number;
-		scrollY: number;
-		intraPage?: boolean;
-	};
-	type Events = 'astro:page-load' | 'astro:after-swap';
-
-	// only update history entries that are managed by us
-	// leave other entries alone and do not accidently add state.
-	const persistState = (state: State) => history.state && history.replaceState(state, '');
-	// @ts-expect-error: startViewTransition might exist
-	const supportsViewTransitions = !!document.startViewTransition;
-	const transitionEnabledOnThisPage = () =>
-		!!document.querySelector('[name="astro-view-transitions-enabled"]');
-	const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
-	const onPageLoad = () => triggerEvent('astro:page-load');
-	const PERSIST_ATTR = 'data-astro-transition-persist';
-	const parser = new DOMParser();
-	// explained at its usage
-	let noopEl: HTMLDivElement;
-	if (import.meta.env.DEV) {
-		noopEl = document.createElement('div');
-	}
-
-	// The History API does not tell you if navigation is forward or back, so
-	// you can figure it using an index. On pushState the index is incremented so you
-	// can use that to determine popstate if going forward or back.
-	let currentHistoryIndex = 0;
-	if (history.state) {
-		// we reloaded a page with history state
-		// (e.g. history navigation from non-transition page or browser reload)
-		currentHistoryIndex = history.state.index;
-		scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
-	} else if (transitionEnabledOnThisPage()) {
-		history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, '');
-	}
-	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) {
-				onceMore = true;
-				return;
-			}
-			cb(...args);
-			wait = true;
-			setTimeout(() => {
-				if (onceMore) {
-					onceMore = false;
-					cb(...args);
-				}
-				wait = false;
-			}, delay);
-		};
-	};
-
-	// returns the contents of the page or null if the router can't deal with it.
-	async function fetchHTML(
-		href: string
-	): Promise<null | { html: string; redirected?: string; mediaType: DOMParserSupportedType }> {
-		try {
-			const res = await fetch(href);
-			// drop potential charset (+ other name/value pairs) as parser needs the mediaType
-			const mediaType = res.headers.get('content-type')?.replace(/;.*$/, '');
-			// the DOMParser can handle two types of HTML
-			if (mediaType !== 'text/html' && mediaType !== 'application/xhtml+xml') {
-				// everything else (e.g. audio/mp3) will be handled by the browser but not by us
-				return null;
-			}
-			const html = await res.text();
-			return {
-				html,
-				redirected: res.redirected ? res.url : undefined,
-				mediaType,
-			};
-		} catch (err) {
-			// can't fetch, let someone else deal with it.
-			return null;
-		}
-	}
+	import {
+		supportsViewTransitions,
+		transitionEnabledOnThisPage,
+		navigate,
+	} from 'astro:transitions/client';
+	export type Fallback = 'none' | 'animate' | 'swap';
 
 	function getFallback(): Fallback {
 		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
@@ -105,263 +26,6 @@ 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 newScript = document.createElement('script');
-			newScript.innerHTML = script.innerHTML;
-			for (const attr of script.attributes) {
-				if (attr.name === 'src') {
-					const p = new Promise((r) => {
-						newScript.onload = r;
-					});
-					wait = wait.then(() => p as any);
-				}
-				newScript.setAttribute(attr.name, attr.value);
-			}
-			newScript.dataset.astroExec = '';
-			script.replaceWith(newScript);
-		}
-		return wait;
-	}
-
-	function isInfinite(animation: Animation) {
-		const effect = animation.effect;
-		if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
-		const style = window.getComputedStyle(effect.target, effect.pseudoElement);
-		return style.animationIterationCount === 'infinite';
-	}
-
-	const updateHistoryAndScrollPosition = (toLocation) => {
-		if (toLocation.href !== location.href) {
-			history.pushState(
-				{ index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 },
-				'',
-				toLocation.href
-			);
-			// now we are on the new page for non-history navigations!
-			// (with history navigation page change happens before popstate is fired)
-		}
-		// freshly loaded pages start from the top
-		scrollTo({ left: 0, top: 0, behavior: 'instant' });
-
-		if (toLocation.hash) {
-			// because we are already on the target page ...
-			// ... what comes next is a intra-page navigation
-			// that won't reload the page but instead scroll to the fragment
-			location.href = toLocation.href;
-		}
-	};
-
-	// replace head and body of the windows document with contents from newDocument
-	// if !popstate, update the history entry and scroll position according to toLocation
-	// if popState is given, this holds the scroll position for history navigation
-	// if fallback === "animate" then simulate view transitions
-	async function updateDOM(
-		newDocument: Document,
-		toLocation: URL,
-		popState?: State,
-		fallback?: Fallback
-	) {
-		// Check for a head element that should persist and returns it,
-		// either because it has the data attribute or is a link el.
-		const persistedHeadElement = (el: HTMLElement): Element | null => {
-			const id = el.getAttribute(PERSIST_ATTR);
-			const newEl = id && newDocument.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
-			if (newEl) {
-				return newEl;
-			}
-			if (el.matches('link[rel=stylesheet]')) {
-				const href = el.getAttribute('href');
-				return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
-			}
-			// What follows is a fix for an issue (#8472) with missing client:only styles after transition.
-			// That problem exists only in dev mode where styles are injected into the page by Vite.
-			// Returning a noop element ensures that the styles are not removed from the old document.
-			// Guarding the code below with the dev mode check
-			// allows tree shaking to remove this code in production.
-			if (import.meta.env.DEV) {
-				if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
-					const devId = el.dataset.viteDevId;
-					// If this same style tag exists, remove it from the new page
-					return (
-						newDocument.querySelector(`style[data-astro-dev-id="${devId}"]`) ||
-						// Otherwise, keep it anyways. This is client:only styles.
-						noopEl
-					);
-				}
-			}
-			return null;
-		};
-
-		const swap = () => {
-			// swap attributes of the html element
-			// - delete all attributes from the current document
-			// - insert all attributes from doc
-			// - reinsert all original attributes that are named 'data-astro-*'
-			const html = document.documentElement;
-			const astro = [...html.attributes].filter(
-				({ name }) => (html.removeAttribute(name), name.startsWith('data-astro-'))
-			);
-			[...newDocument.documentElement.attributes, ...astro].forEach(({ name, value }) =>
-				html.setAttribute(name, value)
-			);
-
-			// Replace scripts in both the head and body.
-			for (const s1 of document.scripts) {
-				for (const s2 of newDocument.scripts) {
-					if (
-						// Inline
-						(!s1.src && s1.textContent === s2.textContent) ||
-						// External
-						(s1.src && s1.type === s2.type && s1.src === s2.src)
-					) {
-						// the old script is in the new document: we mark it as executed to prevent re-execution
-						s2.dataset.astroExec = '';
-						break;
-					}
-				}
-			}
-
-			// Swap head
-			for (const el of Array.from(document.head.children)) {
-				const newEl = persistedHeadElement(el as HTMLElement);
-				// If the element exists in the document already, remove it
-				// from the new document and leave the current node alone
-				if (newEl) {
-					newEl.remove();
-				} else {
-					// Otherwise remove the element in the head. It doesn't exist in the new page.
-					el.remove();
-				}
-			}
-
-			// Everything left in the new head is new, append it all.
-			document.head.append(...newDocument.head.children);
-
-			// Persist elements in the existing body
-			const oldBody = document.body;
-
-			// this will reset scroll Position
-			document.body.replaceWith(newDocument.body);
-			for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
-				const id = el.getAttribute(PERSIST_ATTR);
-				const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
-				if (newEl) {
-					// The element exists in the new page, replace it with the element
-					// from the old page so that state is preserved.
-					newEl.replaceWith(el);
-				}
-			}
-
-			if (popState) {
-				scrollTo(popState.scrollX, popState.scrollY); // usings 'auto' scrollBehavior
-			} else {
-				updateHistoryAndScrollPosition(toLocation);
-			}
-
-			triggerEvent('astro:after-swap');
-		};
-
-		// Wait on links to finish, to prevent FOUC
-		const links: Promise<any>[] = [];
-		for (const el of newDocument.querySelectorAll('head link[rel=stylesheet]')) {
-			// Do not preload links that are already on the page.
-			if (
-				!document.querySelector(
-					`[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`
-				)
-			) {
-				const c = document.createElement('link');
-				c.setAttribute('rel', 'preload');
-				c.setAttribute('as', 'style');
-				c.setAttribute('href', el.getAttribute('href')!);
-				links.push(
-					new Promise<any>((resolve) => {
-						['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve));
-						document.head.append(c);
-					})
-				);
-			}
-		}
-		links.length && (await Promise.all(links));
-
-		if (fallback === 'animate') {
-			// Trigger the animations
-			const currentAnimations = document.getAnimations();
-			document.documentElement.dataset.astroTransitionFallback = 'old';
-			const newAnimations = document
-				.getAnimations()
-				.filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
-			const finished = Promise.all(newAnimations.map((a) => a.finished));
-			const fallbackSwap = () => {
-				swap();
-				document.documentElement.dataset.astroTransitionFallback = 'new';
-			};
-			await finished;
-			fallbackSwap();
-		} else {
-			swap();
-		}
-	}
-
-	async function transition(direction: Direction, toLocation: URL, popState?: State) {
-		let finished: Promise<void>;
-		const href = toLocation.href;
-		const response = await fetchHTML(href);
-		// If there is a problem fetching the new page, just do an MPA navigation to it.
-		if (response === null) {
-			location.href = href;
-			return;
-		}
-		// if there was a redirection, show the final URL in the browser's address bar
-		if (response.redirected) {
-			toLocation = new URL(response.redirected);
-		}
-
-		const newDocument = parser.parseFromString(response.html, response.mediaType);
-		// The next line might look like a hack,
-		// but it is actually necessary as noscript elements
-		// and their contents are returned as markup by the parser,
-		// see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
-		newDocument.querySelectorAll('noscript').forEach((el) => el.remove());
-
-		if (!newDocument.querySelector('[name="astro-view-transitions-enabled"]')) {
-			location.href = href;
-			return;
-		}
-
-		if (!popState) {
-			// save the current scroll position before we change the DOM and transition to the new page
-			history.replaceState({ ...history.state, scrollX, scrollY }, '');
-		}
-		document.documentElement.dataset.astroTransition = direction;
-		if (supportsViewTransitions) {
-			// @ts-expect-error: startViewTransition exist
-			finished = document.startViewTransition(() =>
-				updateDOM(newDocument, toLocation, popState)
-			).finished;
-		} else {
-			finished = updateDOM(newDocument, toLocation, popState, getFallback());
-		}
-		try {
-			await finished;
-		} finally {
-			// skip this for the moment as it tends to stop fallback animations
-			// document.documentElement.removeAttribute('data-astro-transition');
-			await runScripts();
-			markScriptsExec();
-			onPageLoad();
-		}
-	}
-
 	// Prefetching
 	function maybePrefetch(pathname: string) {
 		if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
@@ -406,83 +70,9 @@ const { fallback = 'animate' } = Astro.props as Props;
 				return;
 			}
 			ev.preventDefault();
-			navigate(link.href);
-		});
-
-		function navigate(href) {
-			// not ours
-			if (!transitionEnabledOnThisPage()) {
-				location.href = href;
-				return;
-			}
-			const toLocation = new URL(href, location.href);
-			// We do not have page transitions on navigations to the same page (intra-page navigation)
-			// but we want to handle prevent reload on navigation to the same page
-			// Same page means same origin, path and query params (but maybe different hash)
-			if (
-				location.origin === toLocation.origin &&
-				location.pathname === toLocation.pathname &&
-				location.search === toLocation.search
-			) {
-				// mark current position as non transition intra-page scrolling
-				if (location.href !== toLocation.href) {
-					history.replaceState({ ...history.state, intraPage: true }, '');
-					history.pushState(
-						{ index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 },
-						'',
-						toLocation.href
-					);
-				}
-				if (toLocation.hash) {
-					location.href = toLocation.href;
-				} else {
-					scrollTo({ left: 0, top: 0, behavior: 'instant' });
-				}
-			} else {
-				transition('forward', toLocation);
-			}
-		}
-
-		addEventListener('popstate', (ev) => {
-			if (!transitionEnabledOnThisPage() && ev.state) {
-				// The current page doesn't have View Transitions enabled
-				// but the page we navigate to does (because it set the state).
-				// Do a full page refresh to reload the client-side router from the new page.
-				// Scroll restauration will then happen during the reload when the router's code is re-executed
-				if (history.scrollRestoration) {
-					history.scrollRestoration = 'manual';
-				}
-				location.reload();
-				return;
-			}
-
-			// History entries without state are created by the browser (e.g. for hash links)
-			// Our view transition entries always have state.
-			// Just ignore stateless entries.
-			// The browser will handle navigation fine without our help
-			if (ev.state === null) {
-				if (history.scrollRestoration) {
-					history.scrollRestoration = 'auto';
-				}
-				return;
-			}
-
-			// With the default "auto", the browser will jump to the old scroll position
-			// before the ViewTransition is complete.
-			if (history.scrollRestoration) {
-				history.scrollRestoration = 'manual';
-			}
-
-			const state: State = history.state;
-			if (state.intraPage) {
-				// this is non transition intra-page scrolling
-				scrollTo(state.scrollX, state.scrollY);
-			} else {
-				const nextIndex = state.index;
-				const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
-				currentHistoryIndex = nextIndex;
-				transition(direction, new URL(location.href), state);
-			}
+			navigate(link.href, {
+				history: link.dataset.astroHistory === 'replace' ? 'replace' : 'auto',
+			});
 		});
 
 		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
@@ -503,17 +93,5 @@ const { fallback = 'animate' } = Astro.props as Props;
 				{ passive: true, capture: true }
 			);
 		});
-
-		addEventListener('load', onPageLoad);
-		// There's not a good way to record scroll position before a back button.
-		// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
-		const updateState = () => {
-			persistState({ ...history.state, scrollX, scrollY });
-		};
-
-		if ('onscrollend' in window) addEventListener('scrollend', updateState);
-		else addEventListener('scroll', throttle(updateState, 300));
-
-		markScriptsExec();
 	}
 </script>

package/dist/assets/build/generate.js

@@ -1,5 +1,6 @@
 import fs, { readFileSync } from "node:fs";
 import { basename, join } from "node:path/posix";
+import { getOutDirWithinCwd } from "../../core/build/common.js";
 import { prependForwardSlash } from "../../core/path.js";
 import { isServerLikeOutput } from "../../prerender/utils.js";
 import { getConfiguredImageService, isESMImportedImage } from "../internal.js";
@@ -23,7 +24,7 @@ async function generateImage(pipeline, options, filepath) {
     serverRoot = config.build.server;
     clientRoot = config.build.client;
   } else {
-    serverRoot = config.outDir;
+    serverRoot = getOutDirWithinCwd(config.outDir);
     clientRoot = config.outDir;
   }
   const isLocalImage = isESMImportedImage(options.src);

package/dist/content/types-generator.js

@@ -53,7 +53,8 @@ async function createContentTypesGenerator({
       objectMode: true
     });
     for (const entry of globResult) {
-      const entryURL = new URL(entry.path, contentPaths.contentDir);
+      const fullPath = path.join(fileURLToPath(contentPaths.contentDir), entry.path);
+      const entryURL = pathToFileURL(fullPath);
       if (entryURL.href.startsWith(contentPaths.config.url.href))
         continue;
       if (entry.dirent.isFile()) {

package/dist/core/build/static-build.js

@@ -4,7 +4,7 @@ import glob from "fast-glob";
 import { bgGreen, bgMagenta, black, dim } from "kleur/colors";
 import fs from "node:fs";
 import path, { extname } from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import * as vite from "vite";
 import {
   createBuildInternals,
@@ -109,7 +109,8 @@ async function ssrBuild(opts, internals, input, container) {
   const viteBuildConfig = {
     ...viteConfig,
     mode: viteConfig.mode || "production",
-    logLevel: opts.viteConfig.logLevel ?? "error",
+    // Check using `settings...` as `viteConfig` always defaults to `warn` by Astro
+    logLevel: settings.config.vite.logLevel ?? "error",
     build: {
       target: "esnext",
       // Vite defaults cssMinify to false in SSR by default, but we want to minify it
@@ -137,6 +138,14 @@ async function ssrBuild(opts, internals, input, container) {
               const sanitizedName = name.split(".")[0];
               return `chunks/${sanitizedName}_[hash].mjs`;
             }
+            for (let i = 0; i < name.length; i++) {
+              if (name[i] === "%") {
+                const third = name.codePointAt(i + 2) | 32;
+                if (name[i + 1] !== "2" || third !== 102) {
+                  return `chunks/${name.replace(/%/g, "_percent_")}_[hash].mjs`;
+                }
+              }
+            }
             return `chunks/[name]_[hash].mjs`;
           },
           assetFileNames: `${settings.config.build.assets}/[name].[hash][extname]`,
@@ -199,7 +208,8 @@ ${bgGreen(black(" building client "))}`);
   const viteBuildConfig = {
     ...viteConfig,
     mode: viteConfig.mode || "production",
-    logLevel: "info",
+    // Check using `settings...` as `viteConfig` always defaults to `warn` by Astro
+    logLevel: settings.config.vite.logLevel ?? "info",
     build: {
       target: "esnext",
       ...viteConfig.build,
@@ -240,7 +250,8 @@ async function runPostBuildHooks(container, ssrReturn, clientReturn) {
   const build = container.options.settings.config.build;
   for (const [fileName, mutation] of mutations) {
     const root = isServerLikeOutput(config) ? mutation.build === "server" ? build.server : build.client : config.outDir;
-    const fileURL = new URL(fileName, root);
+    const fullPath = path.join(fileURLToPath(root), fileName);
+    const fileURL = pathToFileURL(fullPath);
     await fs.promises.mkdir(new URL("./", fileURL), { recursive: true });
     await fs.promises.writeFile(fileURL, mutation.code, "utf-8");
   }

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "3.1.4";
+const ASTRO_VERSION = "3.2.0";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/create-vite.js

@@ -188,7 +188,6 @@ async function createVite(commandConfig, { settings, logger, mode, command, fs =
     result = vite.mergeConfig(result, settings.config.vite || {});
   }
   result = vite.mergeConfig(result, commandConfig);
-  result.customLogger = vite.createLogger(result.logLevel ?? "warn");
   return result;
 }
 const COMMON_DEPENDENCIES_NOT_ASTRO = [

package/dist/core/dev/dev.js

@@ -20,7 +20,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "3.1.4";
+  const currentVersion = "3.2.0";
   if (currentVersion.includes("-")) {
     logger.warn(null, msg.prerelease({ currentVersion }));
   }

package/dist/core/errors/errors-data.js

@@ -203,7 +203,7 @@ const ImageNotFound = {
 const NoImageMetadata = {
   name: "NoImageMetadata",
   title: "Could not process image metadata.",
-  message: (imagePath) => `Could not process image metadata${imagePath ? " for `${imagePath}`" : ""}.`,
+  message: (imagePath) => `Could not process image metadata${imagePath ? ` for \`${imagePath}\`` : ""}.`,
   hint: "This is often caused by a corrupted or malformed image. Re-exporting the image from your image editor may fix this issue."
 };
 const MarkdownImageNotFound = {

package/dist/core/messages.js

@@ -50,7 +50,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "3.1.4";
+  const version = "3.2.0";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -235,7 +235,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"3.1.4"}`
+        `v${"3.2.0"}`
       )} ${headline}`
     );
   }

package/dist/core/render/params-and-props.js

@@ -1,4 +1,5 @@
 import { AstroError, AstroErrorData } from "../errors/index.js";
+import { routeIsRedirect } from "../redirects/index.js";
 import { getParams } from "../routing/params.js";
 import { RouteCache, callGetStaticPaths, findPathItemByKey } from "./route-cache.js";
 async function getParamsAndProps(opts) {
@@ -7,6 +8,9 @@ async function getParamsAndProps(opts) {
     return [{}, {}];
   }
   const params = getRouteParams(route, pathname) ?? {};
+  if (routeIsRedirect(route)) {
+    return [params, {}];
+  }
   validatePrerenderEndpointCollision(route, mod, params);
   const staticPaths = await callGetStaticPaths({
     mod,

package/dist/integrations/index.js

@@ -41,7 +41,8 @@ async function runHookConfigSetup({
   let updatedSettings = { ...settings, config: updatedConfig };
   let addedClientDirectives = /* @__PURE__ */ new Map();
   let astroJSXRenderer = null;
-  for (const integration of settings.config.integrations) {
+  for (let i = 0; i < updatedConfig.integrations.length; i++) {
+    const integration = updatedConfig.integrations[i];
     if (integration.hooks?.["astro:config:setup"]) {
       let addPageExtension2 = function(...input) {
         const exts = input.flat(Infinity).map((ext) => `.${ext.replace(/^\./, "")}`);

package/dist/transitions/router.d.ts

@@ -0,0 +1,8 @@
+export type Fallback = 'none' | 'animate' | 'swap';
+export type Direction = 'forward' | 'back';
+export type Options = {
+    history?: 'auto' | 'push' | 'replace';
+};
+export declare const supportsViewTransitions = true;
+export declare const transitionEnabledOnThisPage: () => boolean;
+export declare function navigate(href: string, options?: Options): void;

package/dist/transitions/router.js

@@ -0,0 +1,324 @@
+const persistState = (state) => history.state && history.replaceState(state, "");
+const supportsViewTransitions = !!document.startViewTransition;
+const transitionEnabledOnThisPage = () => !!document.querySelector('[name="astro-view-transitions-enabled"]');
+const samePage = (otherLocation) => location.pathname === otherLocation.pathname && location.search === otherLocation.search;
+const triggerEvent = (name) => document.dispatchEvent(new Event(name));
+const onPageLoad = () => triggerEvent("astro:page-load");
+const announce = () => {
+  let div = document.createElement("div");
+  div.setAttribute("aria-live", "assertive");
+  div.setAttribute("aria-atomic", "true");
+  div.setAttribute(
+    "style",
+    "position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px"
+  );
+  document.body.append(div);
+  setTimeout(
+    () => {
+      let title = document.title || document.querySelector("h1")?.textContent || location.pathname;
+      div.textContent = title;
+    },
+    // Much thought went into this magic number; the gist is that screen readers
+    // need to see that the element changed and might not do so if it happens
+    // too quickly.
+    60
+  );
+};
+const PERSIST_ATTR = "data-astro-transition-persist";
+const parser = new DOMParser();
+let noopEl;
+if (import.meta.env.DEV) {
+  noopEl = document.createElement("div");
+}
+let currentHistoryIndex = 0;
+if (history.state) {
+  currentHistoryIndex = history.state.index;
+  scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
+} else if (transitionEnabledOnThisPage()) {
+  history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, "");
+}
+const throttle = (cb, delay) => {
+  let wait = false;
+  let onceMore = false;
+  return (...args) => {
+    if (wait) {
+      onceMore = true;
+      return;
+    }
+    cb(...args);
+    wait = true;
+    setTimeout(() => {
+      if (onceMore) {
+        onceMore = false;
+        cb(...args);
+      }
+      wait = false;
+    }, delay);
+  };
+};
+async function fetchHTML(href) {
+  try {
+    const res = await fetch(href);
+    const mediaType = res.headers.get("content-type")?.replace(/;.*$/, "");
+    if (mediaType !== "text/html" && mediaType !== "application/xhtml+xml") {
+      return null;
+    }
+    const html = await res.text();
+    return {
+      html,
+      redirected: res.redirected ? res.url : void 0,
+      mediaType
+    };
+  } catch (err) {
+    return null;
+  }
+}
+function getFallback() {
+  const el = document.querySelector('[name="astro-view-transitions-fallback"]');
+  if (el) {
+    return el.getAttribute("content");
+  }
+  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 newScript = document.createElement("script");
+    newScript.innerHTML = script.innerHTML;
+    for (const attr of script.attributes) {
+      if (attr.name === "src") {
+        const p = new Promise((r) => {
+          newScript.onload = r;
+        });
+        wait = wait.then(() => p);
+      }
+      newScript.setAttribute(attr.name, attr.value);
+    }
+    newScript.dataset.astroExec = "";
+    script.replaceWith(newScript);
+  }
+  return wait;
+}
+function isInfinite(animation) {
+  const effect = animation.effect;
+  if (!effect || !(effect instanceof KeyframeEffect) || !effect.target)
+    return false;
+  const style = window.getComputedStyle(effect.target, effect.pseudoElement);
+  return style.animationIterationCount === "infinite";
+}
+const updateHistoryAndScrollPosition = (toLocation, replace, intraPage) => {
+  const fresh = !samePage(toLocation);
+  if (toLocation.href !== location.href) {
+    if (replace) {
+      history.replaceState({ ...history.state }, "", toLocation.href);
+    } else {
+      history.replaceState({ ...history.state, intraPage }, "");
+      history.pushState({ index: ++currentHistoryIndex, scrollX, scrollY }, "", toLocation.href);
+    }
+    if (fresh) {
+      scrollTo({ left: 0, top: 0, behavior: "instant" });
+    }
+  }
+  if (toLocation.hash) {
+    location.href = toLocation.href;
+  } else {
+    scrollTo({ left: 0, top: 0, behavior: "instant" });
+  }
+};
+async function updateDOM(newDocument, toLocation, options, popState, fallback) {
+  const persistedHeadElement = (el) => {
+    const id = el.getAttribute(PERSIST_ATTR);
+    const newEl = id && newDocument.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+    if (newEl) {
+      return newEl;
+    }
+    if (el.matches("link[rel=stylesheet]")) {
+      const href = el.getAttribute("href");
+      return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
+    }
+    if (import.meta.env.DEV) {
+      if (el.tagName === "STYLE" && el.dataset.viteDevId) {
+        const devId = el.dataset.viteDevId;
+        return newDocument.querySelector(`style[data-astro-dev-id="${devId}"]`) || // Otherwise, keep it anyways. This is client:only styles.
+        noopEl;
+      }
+    }
+    return null;
+  };
+  const swap = () => {
+    const html = document.documentElement;
+    const astro = [...html.attributes].filter(
+      ({ name }) => (html.removeAttribute(name), name.startsWith("data-astro-"))
+    );
+    [...newDocument.documentElement.attributes, ...astro].forEach(
+      ({ name, value }) => html.setAttribute(name, value)
+    );
+    for (const s1 of document.scripts) {
+      for (const s2 of newDocument.scripts) {
+        if (
+          // Inline
+          !s1.src && s1.textContent === s2.textContent || // External
+          s1.src && s1.type === s2.type && s1.src === s2.src
+        ) {
+          s2.dataset.astroExec = "";
+          break;
+        }
+      }
+    }
+    for (const el of Array.from(document.head.children)) {
+      const newEl = persistedHeadElement(el);
+      if (newEl) {
+        newEl.remove();
+      } else {
+        el.remove();
+      }
+    }
+    document.head.append(...newDocument.head.children);
+    const oldBody = document.body;
+    document.body.replaceWith(newDocument.body);
+    for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
+      const id = el.getAttribute(PERSIST_ATTR);
+      const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+      if (newEl) {
+        newEl.replaceWith(el);
+      }
+    }
+    if (popState) {
+      scrollTo(popState.scrollX, popState.scrollY);
+    } else {
+      updateHistoryAndScrollPosition(toLocation, options.history === "replace", false);
+    }
+    triggerEvent("astro:after-swap");
+  };
+  const links = [];
+  for (const el of newDocument.querySelectorAll("head link[rel=stylesheet]")) {
+    if (!document.querySelector(
+      `[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`
+    )) {
+      const c = document.createElement("link");
+      c.setAttribute("rel", "preload");
+      c.setAttribute("as", "style");
+      c.setAttribute("href", el.getAttribute("href"));
+      links.push(
+        new Promise((resolve) => {
+          ["load", "error"].forEach((evName) => c.addEventListener(evName, resolve));
+          document.head.append(c);
+        })
+      );
+    }
+  }
+  links.length && await Promise.all(links);
+  if (fallback === "animate") {
+    const currentAnimations = document.getAnimations();
+    document.documentElement.dataset.astroTransitionFallback = "old";
+    const newAnimations = document.getAnimations().filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
+    const finished = Promise.all(newAnimations.map((a) => a.finished));
+    const fallbackSwap = () => {
+      swap();
+      document.documentElement.dataset.astroTransitionFallback = "new";
+    };
+    await finished;
+    fallbackSwap();
+  } else {
+    swap();
+  }
+}
+async function transition(direction, toLocation, options, popState) {
+  let finished;
+  const href = toLocation.href;
+  const response = await fetchHTML(href);
+  if (response === null) {
+    location.href = href;
+    return;
+  }
+  if (response.redirected) {
+    toLocation = new URL(response.redirected);
+  }
+  const newDocument = parser.parseFromString(response.html, response.mediaType);
+  newDocument.querySelectorAll("noscript").forEach((el) => el.remove());
+  if (!newDocument.querySelector('[name="astro-view-transitions-enabled"]')) {
+    location.href = href;
+    return;
+  }
+  if (!popState) {
+    history.replaceState({ ...history.state, scrollX, scrollY }, "");
+  }
+  document.documentElement.dataset.astroTransition = direction;
+  if (supportsViewTransitions) {
+    finished = document.startViewTransition(
+      () => updateDOM(newDocument, toLocation, options, popState)
+    ).finished;
+  } else {
+    finished = updateDOM(newDocument, toLocation, options, popState, getFallback());
+  }
+  try {
+    await finished;
+  } finally {
+    await runScripts();
+    markScriptsExec();
+    onPageLoad();
+    announce();
+  }
+}
+function navigate(href, options) {
+  if (!transitionEnabledOnThisPage()) {
+    location.href = href;
+    return;
+  }
+  const toLocation = new URL(href, location.href);
+  if (location.origin === toLocation.origin && samePage(toLocation)) {
+    updateHistoryAndScrollPosition(toLocation, options?.history === "replace", true);
+  } else {
+    transition("forward", toLocation, options ?? {});
+  }
+}
+if (supportsViewTransitions || getFallback() !== "none") {
+  addEventListener("popstate", (ev) => {
+    if (!transitionEnabledOnThisPage() && ev.state) {
+      if (history.scrollRestoration) {
+        history.scrollRestoration = "manual";
+      }
+      location.reload();
+      return;
+    }
+    if (ev.state === null) {
+      if (history.scrollRestoration) {
+        history.scrollRestoration = "auto";
+      }
+      return;
+    }
+    if (history.scrollRestoration) {
+      history.scrollRestoration = "manual";
+    }
+    const state = history.state;
+    if (state.intraPage) {
+      scrollTo(state.scrollX, state.scrollY);
+    } else {
+      const nextIndex = state.index;
+      const direction = nextIndex > currentHistoryIndex ? "forward" : "back";
+      currentHistoryIndex = nextIndex;
+      transition(direction, new URL(location.href), {}, state);
+    }
+  });
+  addEventListener("load", onPageLoad);
+  const updateState = () => {
+    persistState({ ...history.state, scrollX, scrollY });
+  };
+  if ("onscrollend" in window)
+    addEventListener("scrollend", updateState);
+  else
+    addEventListener("scroll", throttle(updateState, 300));
+  markScriptsExec();
+}
+export {
+  navigate,
+  supportsViewTransitions,
+  transitionEnabledOnThisPage
+};

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

@@ -1,6 +1,8 @@
 import * as vite from "vite";
 const virtualModuleId = "astro:transitions";
 const resolvedVirtualModuleId = "\0" + virtualModuleId;
+const virtualClientModuleId = "astro:transitions/client";
+const resolvedVirtualClientModuleId = "\0" + virtualClientModuleId;
 function astroTransitions() {
   return {
     name: "astro:transitions",
@@ -8,6 +10,9 @@ function astroTransitions() {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
       }
+      if (id === virtualClientModuleId) {
+        return resolvedVirtualClientModuleId;
+      }
     },
     load(id) {
       if (id === resolvedVirtualModuleId) {
@@ -16,6 +21,11 @@ function astroTransitions() {
 				export { default as ViewTransitions } from "astro/components/ViewTransitions.astro";
 			`;
       }
+      if (id === resolvedVirtualClientModuleId) {
+        return `
+				export * from "astro/transitions/router";
+			`;
+      }
     }
   };
 }

package/dist/vite-plugin-astro-server/route.js

@@ -155,19 +155,20 @@ async function handleRoute({
   let response = await pipeline.renderRoute(renderContext, mod);
   if (response.status === 404 && has404Route(manifestData)) {
     const fourOhFourRoute = await matchRoute("/404", manifestData, pipeline);
-    return handleRoute({
-      ...options,
-      matchedRoute: fourOhFourRoute,
-      url: new URL(pathname, url),
-      status: 404,
-      body,
-      origin,
-      pipeline,
-      manifestData,
-      incomingRequest,
-      incomingResponse,
-      manifest
-    });
+    if (fourOhFourRoute?.route !== options.route)
+      return handleRoute({
+        ...options,
+        matchedRoute: fourOhFourRoute,
+        url: new URL(pathname, url),
+        status: 404,
+        body,
+        origin,
+        pipeline,
+        manifestData,
+        incomingRequest,
+        incomingResponse,
+        manifest
+      });
   }
   if (route.type === "endpoint") {
     await writeWebResponse(incomingResponse, response);
@@ -259,7 +260,7 @@ function getStatus(matchedRoute) {
     return 500;
 }
 function has404Route(manifest) {
-  return manifest.routes.find((route) => route.route === "/404");
+  return manifest.routes.some((route) => route.route === "/404");
 }
 export {
   handleRoute,

package/dist/vite-plugin-markdown/index.js

@@ -5,7 +5,7 @@ import {
 import matter from "gray-matter";
 import fs from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { normalizePath } from "vite";
 import { AstroError, AstroErrorData, MarkdownError } from "../core/errors/index.js";
 import { isMarkdownFile } from "../core/util.js";
@@ -57,8 +57,9 @@ function markdown({ settings, logger }) {
         const { fileId, fileUrl } = getFileInfo(id, settings.config);
         const rawFile = await fs.promises.readFile(fileId, "utf-8");
         const raw = safeMatter(rawFile, id);
+        const fileURL = pathToFileURL(fileId);
         const renderResult = await processor.render(raw.content, {
-          fileURL: new URL(`file://${fileId}`),
+          fileURL,
           frontmatter: raw.data
         }).catch((err) => {
           if (err instanceof InvalidAstroDataError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -77,7 +77,8 @@
       "types": "./dist/core/middleware/namespace.d.ts",
       "default": "./dist/core/middleware/namespace.js"
     },
-    "./transitions": "./dist/transitions/index.js"
+    "./transitions": "./dist/transitions/index.js",
+    "./transitions/router": "./dist/transitions/router.js"
   },
   "imports": {
     "#astro/*": "./dist/*.js"