astro 3.0.12 → 3.0.13

package/components/ViewTransitions.astro

@@ -15,6 +15,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 	type Direction = 'forward' | 'back';
 	type State = {
 		index: number;
+		scrollX: number;
 		scrollY: number;
 	};
 	type Events = 'astro:page-load' | 'astro:after-swap';
@@ -37,9 +38,9 @@ const { fallback = 'animate' } = Astro.props as Props;
 		// we reloaded a page with history state
 		// (e.g. history navigation from non-transition page or browser reload)
 		currentHistoryIndex = history.state.index;
-		scrollTo({ left: 0, top: history.state.scrollY });
+		scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
 	} else if (transitionEnabledOnThisPage()) {
-		history.replaceState({ index: currentHistoryIndex, scrollY }, '');
+		history.replaceState({ index: currentHistoryIndex, scrollX, scrollY }, '');
 	}
 	const throttle = (cb: (...args: any[]) => any, delay: number) => {
 		let wait = false;
@@ -64,9 +65,19 @@ const { fallback = 'animate' } = Astro.props as Props;
 	};
 
 	async function getHTML(href: string) {
-		const res = await fetch(href);
+		let res;
+		try {
+			res = await fetch(href);
+		} catch (err) {
+			return { ok: false };
+		}
 		const html = await res.text();
-		return { ok: res.ok, html };
+		return {
+			ok: res.ok,
+			html,
+			redirected: res.redirected ? res.url : undefined,
+			contentType: res.headers.get('content-type'),
+		};
 	}
 
 	function getFallback(): Fallback {
@@ -113,6 +124,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	const parser = new DOMParser();
 
+	// A noop element used to prevent styles from being removed
+	if (import.meta.env.DEV) {
+		var noopEl: string | undefined = document.createElement('div');
+	}
+
 	async function updateDOM(doc: Document, loc: URL, state?: State, fallback?: Fallback) {
 		// Check for a head element that should persist, either because it has the data
 		// attribute or is a link el.
@@ -139,6 +155,18 @@ const { fallback = 'animate' } = Astro.props as Props;
 					}
 				}
 			}
+			// Only run this in dev. This will get stripped from production builds and is not needed.
+			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 (
+						doc.querySelector(`style[data-astro-dev-id="${devId}"]`) ||
+						// Otherwise, keep it anyways. This is client:only styles.
+						noopEl
+					);
+				}
+			}
 			return null;
 		};
 
@@ -191,17 +219,29 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// Chromium based browsers (Chrome, Edge, Opera, ...)
 			scrollTo({ left: 0, top: 0, behavior: 'instant' });
 
+			let initialScrollX = 0;
 			let initialScrollY = 0;
 			if (!state && loc.hash) {
 				const id = decodeURIComponent(loc.hash.slice(1));
 				const elem = document.getElementById(id);
 				// prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account
-				elem && (initialScrollY = elem.offsetTop) && elem.scrollIntoView();
-			} else if (state && state.scrollY !== 0) {
-				scrollTo(0, state.scrollY); // usings default scrollBehavior
+				if (elem) {
+					elem.scrollIntoView();
+					initialScrollX = Math.max(
+						0,
+						elem.offsetLeft + elem.offsetWidth - document.documentElement.clientWidth
+					);
+					initialScrollY = elem.offsetTop;
+				}
+			} else if (state) {
+				scrollTo(state.scrollX, state.scrollY); // usings default scrollBehavior
 			}
 			!state &&
-				history.pushState({ index: ++currentHistoryIndex, scrollY: initialScrollY }, '', loc.href);
+				history.pushState(
+					{ index: ++currentHistoryIndex, scrollX: initialScrollX, scrollY: initialScrollY },
+					'',
+					loc.href
+				);
 			triggerEvent('astro:after-swap');
 		};
 
@@ -250,18 +290,24 @@ const { fallback = 'animate' } = Astro.props as Props;
 	async function navigate(dir: Direction, loc: URL, state?: State) {
 		let finished: Promise<void>;
 		const href = loc.href;
-		const { html, ok } = await getHTML(href);
+		const { html, ok, contentType, redirected } = await getHTML(href);
+		// if there was a redirection, show the final URL in the browser's address bar
+		redirected && (loc = new URL(redirected));
 		// If there is a problem fetching the new page, just do an MPA navigation to it.
-		if (!ok) {
+		if (!ok || contentType !== 'text/html') {
 			location.href = href;
 			return;
 		}
-		const doc = parser.parseFromString(html, 'text/html');
+
+		const doc = parser.parseFromString(html, contentType);
 		if (!doc.querySelector('[name="astro-view-transitions-enabled"]')) {
 			location.href = href;
 			return;
 		}
 
+		// Now we are sure that we will push state, and it is time to create a state if it is still missing.
+		!state && history.replaceState({ index: currentHistoryIndex, scrollX, scrollY }, '');
+
 		document.documentElement.dataset.astroTransition = dir;
 		if (supportsViewTransitions) {
 			finished = document.startViewTransition(() => updateDOM(doc, loc, state)).finished;
@@ -335,28 +381,31 @@ const { fallback = 'animate' } = Astro.props as Props;
 					// But we want to handle it like any other same page navigation
 					// So we scroll to the top of the page but do not start page transitions
 					ev.preventDefault();
-					persistState({ ...history.state, scrollY });
-					scrollTo({ left: 0, top: 0, behavior: 'instant' });
+					// push state on the first navigation but not if we were here already
 					if (location.hash) {
-						// last target was different
-						const newState: State = { index: ++currentHistoryIndex, scrollY: 0 };
+						history.replaceState(
+							{ index: currentHistoryIndex, scrollX, scrollY: -(scrollY + 1) },
+							''
+						);
+						const newState: State = { index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 };
 						history.pushState(newState, '', link.href);
 					}
+					scrollTo({ left: 0, top: 0, behavior: 'instant' });
 					return;
 				}
 			}
 
 			// these are the cases we will handle: same origin, different page
 			ev.preventDefault();
-			persistState({ index: currentHistoryIndex, scrollY });
 			navigate('forward', new URL(link.href));
 		});
 
 		addEventListener('popstate', (ev) => {
 			if (!transitionEnabledOnThisPage() && ev.state) {
-				// The current page doesn't haven't View Transitions,
-				// respect that with a full page reload
-				// -- but only for transition managed by us (ev.state is set)
+				// 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
 				history.scrollRestoration && (history.scrollRestoration = 'manual');
 				location.reload();
 				return;
@@ -383,7 +432,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 			const nextIndex = state.index;
 			const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
 			currentHistoryIndex = nextIndex;
-			navigate(direction, new URL(location.href), state);
+			if (state.scrollY < 0) {
+				scrollTo(state.scrollX, -(state.scrollY + 1));
+			} else {
+				navigate(direction, new URL(location.href), state);
+			}
 		});
 
 		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
@@ -408,7 +461,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 		// 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, scrollY });
+			persistState({ ...history.state, scrollX, scrollY });
 		};
 
 		if ('onscrollend' in window) addEventListener('scrollend', updateState);

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

@@ -543,12 +543,12 @@ export interface AstroUserConfig {
      * @description
      *
      * Specify the strategy used for scoping styles within Astro components. Choose from:
-     *   - `'where'` 		- Use `:where` selectors, causing no specifity increase.
-     *   - `'class'` 		- Use class-based selectors, causing a +1 specifity increase.
-     *   - `'attribute'` 	- Use `data-` attributes, causing no specifity increase.
+     *   - `'where'` 		- Use `:where` selectors, causing no specificity increase.
+     *   - `'class'` 		- Use class-based selectors, causing a +1 specificity increase.
+     *   - `'attribute'` 	- Use `data-` attributes, causing a +1 specificity increase.
      *
      * Using `'class'` is helpful when you want to ensure that element selectors within an Astro component override global style defaults (e.g. from a global stylesheet).
-     * Using `'where'` gives you more control over specifity, but requires that you use higher-specifity selectors, layers, and other tools to control which selectors are applied.
+     * Using `'where'` gives you more control over specificity, but requires that you use higher-specificity selectors, layers, and other tools to control which selectors are applied.
      * Using `'attribute'` is useful when you are manipulating the `class` attribute of elements and need to avoid conflicts between your own styling logic and Astro's application of styles.
      */
     scopedStyleStrategy?: 'where' | 'class' | 'attribute';
@@ -911,7 +911,7 @@ export interface AstroUserConfig {
          * }
          * ```
          */
-        service: ImageServiceConfig;
+        service?: ImageServiceConfig;
         /**
          * @docs
          * @name image.domains

package/dist/content/utils.js

@@ -296,7 +296,7 @@ function getContentPaths({ srcDir, root }, fs = fsMod) {
   };
 }
 function search(fs, srcDir) {
-  const paths = ["config.mjs", "config.js", "config.ts"].map(
+  const paths = ["config.mjs", "config.js", "config.mts", "config.ts"].map(
     (p) => new URL(`./content/${p}`, srcDir)
   );
   for (const file of paths) {

package/dist/core/build/generate.js

@@ -429,6 +429,9 @@ async function generatePath(pathname, gopts, pipeline) {
 <body>
 	<a href="${location}">Redirecting from <code>${fromPath}</code> to <code>${location}</code></a>
 </body>`;
+    if (pipeline.getConfig().compressHTML === true) {
+      body = body.replaceAll("\n", "");
+    }
     if (pageData.route.type !== "redirect") {
       pageData.route.redirect = location;
     }

package/dist/core/constants.js

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

package/dist/core/dev/dev.js

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

package/dist/core/messages.js

@@ -50,7 +50,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "3.0.12";
+  const version = "3.0.13";
   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.0.12"}`
+        `v${"3.0.13"}`
       )} ${headline}`
     );
   }

package/dist/core/render/ssr-element.js

@@ -11,9 +11,7 @@ function createAssetLink(href, base, assetsPrefix) {
 function createStylesheetElement(stylesheet, base, assetsPrefix) {
   if (stylesheet.type === "inline") {
     return {
-      props: {
-        type: "text/css"
-      },
+      props: {},
       children: stylesheet.content
     };
   } else {

package/dist/runtime/client/hmr.js

@@ -32,5 +32,5 @@ function isStyle(node) {
   return node.nodeType === node.ELEMENT_NODE && node.tagName.toLowerCase() === "style";
 }
 function isViteInjectedStyle(node) {
-  return isStyle(node) && node.getAttribute("type") === "text/css" && !!node.getAttribute("data-vite-dev-id");
+  return isStyle(node) && !!node.getAttribute("data-vite-dev-id");
 }

package/dist/runtime/server/render/tags.js

@@ -14,7 +14,7 @@ function renderUniqueStylesheet(result, sheet) {
   if (sheet.type === "inline") {
     if (Array.from(result.styles).some((s) => s.children.includes(sheet.content)))
       return "";
-    return renderElement("style", { props: { type: "text/css" }, children: sheet.content });
+    return renderElement("style", { props: {}, children: sheet.content });
   }
 }
 export {

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

@@ -241,7 +241,6 @@ async function getScriptsAndStyles({ pipeline, filePath }) {
     });
     styles.add({
       props: {
-        type: "text/css",
         // Track the ID so we can match it to Vite's injected style later
         "data-astro-dev-id": viteID(new URL(`.${url}`, settings.config.root))
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",