astro 2.8.5 → 2.9.0

package/client-base.d.ts

@@ -70,6 +70,15 @@ declare module 'astro:assets' {
 	export const { getImage, getConfiguredImageService, Image }: AstroAssets;
 }
 
+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'];
+}
+
 type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;
 interface ExportedMarkdownModuleEntities {
 	frontmatter: MD['frontmatter'];

package/components/ViewTransitions.astro

@@ -0,0 +1,157 @@
+---
+type Fallback = 'none' | 'animate' | 'swap';
+
+export interface Props {
+	fallback?: Fallback;
+}
+
+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';
+
+	// 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 = history.state?.index || 0;
+	if (!history.state) {
+		history.replaceState({ index: currentHistoryIndex }, document.title);
+	}
+
+	const supportsViewTransitions = !!document.startViewTransition;
+	const transitionEnabledOnThisPage = () =>
+		!!document.querySelector('[name="astro-view-transitions-enabled"]');
+
+	async function getHTML(href: string) {
+		const res = await fetch(href);
+		const html = await res.text();
+		return { ok: res.ok, html };
+	}
+
+	function getFallback(): Fallback {
+		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
+		if (el) {
+			return el.getAttribute('content') as Fallback;
+		}
+		return 'animate';
+	}
+
+	const parser = new DOMParser();
+
+	async function updateDOM(dir: Direction, html: string, fallback?: Fallback) {
+		const doc = parser.parseFromString(html, 'text/html');
+		doc.documentElement.dataset.astroTransition = dir;
+		const swap = () => document.documentElement.replaceWith(doc.documentElement);
+
+		if (fallback === 'animate') {
+			let isAnimating = false;
+			addEventListener('animationstart', () => (isAnimating = true), { once: true });
+
+			// Trigger the animations
+			document.documentElement.dataset.astroTransitionFallback = 'old';
+			doc.documentElement.dataset.astroTransitionFallback = 'new';
+			// If there are any animations, want for the animationend event.
+			addEventListener('animationend', swap, { once: true });
+			// If there are no animations, go ahead and swap on next tick
+			// This is necessary because we do not know if there are animations.
+			// The setTimeout is a fallback in case there are none.
+			setTimeout(() => !isAnimating && swap());
+		} else {
+			swap();
+		}
+	}
+
+	async function navigate(dir: Direction, href: string) {
+		let finished: Promise<void>;
+		const { html, ok } = await getHTML(href);
+		// If there is a problem fetching the new page, just do an MPA navigation to it.
+		if (!ok) {
+			location.href = href;
+			return;
+		}
+		if (supportsViewTransitions) {
+			finished = document.startViewTransition(() => updateDOM(dir, html)).finished;
+		} else {
+			finished = updateDOM(dir, html, getFallback());
+		}
+		try {
+			await finished;
+		} finally {
+			document.documentElement.removeAttribute('data-astro-transition');
+		}
+	}
+
+	// Prefetching
+	function maybePrefetch(pathname: string) {
+		if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
+		if (navigator.connection) {
+			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);
+	}
+
+	if (supportsViewTransitions || getFallback() !== 'none') {
+		document.addEventListener('click', (ev) => {
+			let link = ev.target;
+			if (link instanceof Element && link.tagName !== 'A') {
+				link = link.closest('a');
+			}
+			// This check verifies that the click is happening on an anchor
+			// that is going to another page within the same origin. Basically it determines
+			// same-origin navigation, but omits special key combos for new tabs, etc.
+			if (
+				link &&
+				link instanceof HTMLAnchorElement &&
+				link.href &&
+				(!link.target || link.target === '_self') &&
+				link.origin === location.origin &&
+				ev.button === 0 && // left clicks only
+				!ev.metaKey && // new tab (mac)
+				!ev.ctrlKey && // new tab (windows)
+				!ev.altKey && // download
+				!ev.shiftKey &&
+				!ev.defaultPrevented &&
+				transitionEnabledOnThisPage()
+			) {
+				ev.preventDefault();
+				navigate('forward', link.href);
+				currentHistoryIndex++;
+				history.pushState({ index: currentHistoryIndex }, '', link.href);
+			}
+		});
+		window.addEventListener('popstate', () => {
+			if (!transitionEnabledOnThisPage()) return;
+			const nextIndex = history.state?.index ?? currentHistoryIndex + 1;
+			const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
+			navigate(direction, location.href);
+			currentHistoryIndex = nextIndex;
+		});
+
+		['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 }
+			);
+		});
+	}
+</script>

package/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Code } from './Code.astro';
 export { default as Debug } from './Debug.astro';
+export { default as ViewTransitions } from './ViewTransitions.astro';

package/components/viewtransitions.css

@@ -0,0 +1,44 @@
+@keyframes astroFadeInOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes astroFadeIn {
+	from {
+		opacity: 0;
+	}
+}
+
+@keyframes astroFadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes astroSlideFromRight {
+	from {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes astroSlideFromLeft {
+	from {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes astroSlideToRight {
+	to {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes astroSlideToLeft {
+	to {
+		transform: translateX(-100%);
+	}
+}

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

@@ -29,6 +29,23 @@ export interface AstroBuiltinProps {
     'client:visible'?: boolean;
     'client:only'?: boolean | string;
 }
+export interface TransitionAnimation {
+    name: string;
+    delay?: number | string;
+    duration?: number | string;
+    easing?: string;
+    fillMode?: string;
+    direction?: string;
+}
+export interface TransitionAnimationPair {
+    old: TransitionAnimation | TransitionAnimation[];
+    new: TransitionAnimation | TransitionAnimation[];
+}
+export interface TransitionDirectionalAnimations {
+    forwards: TransitionAnimationPair;
+    backwards: TransitionAnimationPair;
+}
+export type TransitionAnimationValue = 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
 export interface AstroClientDirectives {
 }
 export interface AstroBuiltinAttributes {
@@ -36,6 +53,8 @@ export interface AstroBuiltinAttributes {
     'set:html'?: any;
     'set:text'?: any;
     'is:raw'?: boolean;
+    'transition:animate'?: 'morph' | 'slide' | 'fade' | TransitionDirectionalAnimations;
+    'transition:name'?: string;
 }
 export interface AstroDefineVarsAttribute {
     'define:vars'?: any;
@@ -73,7 +92,6 @@ export interface CLIFlags {
     drafts?: boolean;
     open?: boolean;
     experimentalAssets?: boolean;
-    experimentalRedirects?: boolean;
 }
 /**
  * Astro global available in all contexts in .astro files
@@ -399,10 +417,10 @@ export interface AstroUserConfig {
     cacheDir?: string;
     /**
      * @docs
-     * @name redirects (Experimental)
+     * @name redirects
      * @type {Record<string, RedirectConfig>}
      * @default `{}`
-     * @version 2.6.0
+     * @version 2.9.0
      * @description Specify a mapping of redirects where the key is the route to match
      * and the value is the path to redirect to.
      *
@@ -1149,24 +1167,24 @@ export interface AstroUserConfig {
         assets?: boolean;
         /**
          * @docs
-         * @name experimental.redirects
+         * @name experimental.viewTransitions
          * @type {boolean}
          * @default `false`
-         * @version 2.6.0
+         * @version 2.9.0
          * @description
-         * Enable experimental support for redirect configuration. With this enabled
-         * you can set redirects via the top-level `redirects` property. To enable
-         * this feature, set `experimental.redirects` to `true`.
+         * Enable experimental support for the `<ViewTransitions / >` component. With this enabled
+         * you can opt-in to  [client-side routing](https://docs.astro.build/en/guides/client-side-routing/) on a per-page basis using this component
+         * and enable animations with the `transition:animate` directive.
          *
          * ```js
          * {
          * 	experimental: {
-         *		redirects: true,
+         *		viewTransitions: true,
          * 	},
          * }
          * ```
          */
-        redirects?: boolean;
+        viewTransitions?: boolean;
     };
     /** @deprecated - Use "integrations" instead. Run Astro to learn more about migrating. */
     renderers?: never;

package/dist/assets/services/vendor/squoosh/impl.js

@@ -1,4 +1,4 @@
-import { codecs as supportedFormats, preprocessors } from "./codecs.js";
+import { preprocessors, codecs as supportedFormats } from "./codecs.js";
 import ImageData from "./image_data.js";
 const DELAY_MS = 1e3;
 let _promise;

package/dist/content/runtime.js

@@ -1,4 +1,4 @@
-import { string as zodString, ZodIssueCode } from "zod";
+import { ZodIssueCode, string as zodString } from "zod";
 import { AstroError, AstroErrorData } from "../core/errors/index.js";
 import { prependForwardSlash } from "../core/path.js";
 import {

package/dist/content/vite-plugin-content-assets.js

@@ -4,8 +4,8 @@ import { moduleIsTopLevelPage, walkParentInfos } from "../core/build/graph.js";
 import { getPageDataByViteID } from "../core/build/internal.js";
 import { createViteLoader } from "../core/module-loader/vite.js";
 import { joinPaths, prependForwardSlash } from "../core/path.js";
-import { getStylesForURL } from "../core/render/dev/css.js";
-import { getScriptsForURL } from "../core/render/dev/scripts.js";
+import { getStylesForURL } from "../vite-plugin-astro-server/css.js";
+import { getScriptsForURL } from "../vite-plugin-astro-server/scripts.js";
 import {
   CONTENT_RENDER_FLAG,
   LINKS_PLACEHOLDER,

package/dist/core/app/index.js

@@ -1,14 +1,14 @@
 import mime from "mime";
 import { attachToResponse, getSetCookiesFromResponse } from "../cookies/index.js";
-import { callEndpoint } from "../endpoint/index.js";
 import { consoleLogDestination } from "../logger/console.js";
 import { error } from "../logger/core.js";
 import { prependForwardSlash, removeTrailingForwardSlash } from "../path.js";
 import { RedirectSinglePageBuiltModule } from "../redirects/index.js";
+import { isResponse } from "../render/core";
 import {
   createEnvironment,
   createRenderContext,
-  tryRenderPage
+  tryRenderRoute
 } from "../render/index.js";
 import { RouteCache } from "../render/route-cache.js";
 import {
@@ -131,34 +131,140 @@ class App {
       defaultStatus = 404;
     }
     let mod = await this.#getModuleForRoute(routeData);
-    if (routeData.type === "page" || routeData.type === "redirect") {
-      let response = await this.#renderPage(request, routeData, mod, defaultStatus);
+    const pageModule = await mod.page();
+    const url = new URL(request.url);
+    const renderContext = await this.#createRenderContext(
+      url,
+      request,
+      routeData,
+      mod,
+      defaultStatus
+    );
+    let response;
+    try {
+      response = await tryRenderRoute(
+        routeData.type,
+        renderContext,
+        this.#env,
+        pageModule,
+        mod.onRequest
+      );
+    } catch (err) {
+      error(this.#logging, "ssr", err.stack || err.message || String(err));
+      response = new Response(null, {
+        status: 500,
+        statusText: "Internal server error"
+      });
+    }
+    if (isResponse(response, routeData.type)) {
       if (response.status === 500 || response.status === 404) {
         const errorRouteData = matchRoute("/" + response.status, this.#manifestData);
         if (errorRouteData && errorRouteData.route !== routeData.route) {
           mod = await this.#getModuleForRoute(errorRouteData);
           try {
-            let errorResponse = await this.#renderPage(
+            const newRenderContext = await this.#createRenderContext(
+              url,
               request,
-              errorRouteData,
+              routeData,
               mod,
               response.status
             );
+            const page = await mod.page();
+            const errorResponse = await tryRenderRoute(
+              routeData.type,
+              newRenderContext,
+              this.#env,
+              page
+            );
             return errorResponse;
           } catch {
           }
         }
       }
+      Reflect.set(response, responseSentSymbol, true);
       return response;
-    } else if (routeData.type === "endpoint") {
-      return this.#callEndpoint(request, routeData, mod, defaultStatus);
     } else {
-      throw new Error(`Unsupported route type [${routeData.type}].`);
+      if (response.type === "response") {
+        if (response.response.headers.get("X-Astro-Response") === "Not-Found") {
+          const fourOhFourRequest = new Request(new URL("/404", request.url));
+          const fourOhFourRouteData = this.match(fourOhFourRequest);
+          if (fourOhFourRouteData) {
+            return this.render(fourOhFourRequest, fourOhFourRouteData);
+          }
+        }
+        return response.response;
+      } else {
+        const body = response.body;
+        const headers = new Headers();
+        const mimeType = mime.getType(url.pathname);
+        if (mimeType) {
+          headers.set("Content-Type", `${mimeType};charset=utf-8`);
+        } else {
+          headers.set("Content-Type", "text/plain;charset=utf-8");
+        }
+        const bytes = this.#encoder.encode(body);
+        headers.set("Content-Length", bytes.byteLength.toString());
+        const newResponse = new Response(bytes, {
+          status: 200,
+          headers
+        });
+        attachToResponse(newResponse, response.cookies);
+        return newResponse;
+      }
     }
   }
   setCookieHeaders(response) {
     return getSetCookiesFromResponse(response);
   }
+  /**
+   * Creates the render context of the current route
+   */
+  async #createRenderContext(url, request, routeData, page, status = 200) {
+    if (routeData.type === "endpoint") {
+      const pathname = "/" + this.removeBase(url.pathname);
+      const mod = await page.page();
+      const handler = mod;
+      return await createRenderContext({
+        request,
+        pathname,
+        route: routeData,
+        status,
+        env: this.#env,
+        mod: handler
+      });
+    } else {
+      const pathname = prependForwardSlash(this.removeBase(url.pathname));
+      const info = this.#routeDataToRouteInfo.get(routeData);
+      const links = /* @__PURE__ */ new Set();
+      const styles = createStylesheetElementSet(info.styles);
+      let scripts = /* @__PURE__ */ new Set();
+      for (const script of info.scripts) {
+        if ("stage" in script) {
+          if (script.stage === "head-inline") {
+            scripts.add({
+              props: {},
+              children: script.children
+            });
+          }
+        } else {
+          scripts.add(createModuleScriptElement(script));
+        }
+      }
+      const mod = await page.page();
+      return await createRenderContext({
+        request,
+        pathname,
+        componentMetadata: this.#manifest.componentMetadata,
+        scripts,
+        styles,
+        links,
+        route: routeData,
+        status,
+        mod,
+        env: this.#env
+      });
+    }
+  }
   async #getModuleForRoute(route) {
     if (route.type === "redirect") {
       return RedirectSinglePageBuiltModule;
@@ -182,92 +288,6 @@ class App {
       }
     }
   }
-  async #renderPage(request, routeData, page, status = 200) {
-    const url = new URL(request.url);
-    const pathname = prependForwardSlash(this.removeBase(url.pathname));
-    const info = this.#routeDataToRouteInfo.get(routeData);
-    const links = /* @__PURE__ */ new Set();
-    const styles = createStylesheetElementSet(info.styles);
-    let scripts = /* @__PURE__ */ new Set();
-    for (const script of info.scripts) {
-      if ("stage" in script) {
-        if (script.stage === "head-inline") {
-          scripts.add({
-            props: {},
-            children: script.children
-          });
-        }
-      } else {
-        scripts.add(createModuleScriptElement(script));
-      }
-    }
-    try {
-      const mod = await page.page();
-      const renderContext = await createRenderContext({
-        request,
-        pathname,
-        componentMetadata: this.#manifest.componentMetadata,
-        scripts,
-        styles,
-        links,
-        route: routeData,
-        status,
-        mod,
-        env: this.#env
-      });
-      const response = await tryRenderPage(renderContext, this.#env, mod, page.onRequest);
-      Reflect.set(request, responseSentSymbol, true);
-      return response;
-    } catch (err) {
-      error(this.#logging, "ssr", err.stack || err.message || String(err));
-      return new Response(null, {
-        status: 500,
-        statusText: "Internal server error"
-      });
-    }
-  }
-  async #callEndpoint(request, routeData, page, status = 200) {
-    const url = new URL(request.url);
-    const pathname = "/" + this.removeBase(url.pathname);
-    const mod = await page.page();
-    const handler = mod;
-    const ctx = await createRenderContext({
-      request,
-      pathname,
-      route: routeData,
-      status,
-      env: this.#env,
-      mod: handler
-    });
-    const result = await callEndpoint(handler, this.#env, ctx, page.onRequest);
-    if (result.type === "response") {
-      if (result.response.headers.get("X-Astro-Response") === "Not-Found") {
-        const fourOhFourRequest = new Request(new URL("/404", request.url));
-        const fourOhFourRouteData = this.match(fourOhFourRequest);
-        if (fourOhFourRouteData) {
-          return this.render(fourOhFourRequest, fourOhFourRouteData);
-        }
-      }
-      return result.response;
-    } else {
-      const body = result.body;
-      const headers = new Headers();
-      const mimeType = mime.getType(url.pathname);
-      if (mimeType) {
-        headers.set("Content-Type", `${mimeType};charset=utf-8`);
-      } else {
-        headers.set("Content-Type", "text/plain;charset=utf-8");
-      }
-      const bytes = this.#encoder.encode(body);
-      headers.set("Content-Length", bytes.byteLength.toString());
-      const response = new Response(bytes, {
-        status: 200,
-        headers
-      });
-      attachToResponse(response, result.cookies);
-      return response;
-    }
-  }
 }
 export {
   App,

package/dist/core/build/generate.js

@@ -20,15 +20,11 @@ import {
 import { runHookBuildGenerated } from "../../integrations/index.js";
 import { isServerLikeOutput } from "../../prerender/utils.js";
 import { BEFORE_HYDRATION_SCRIPT_ID, PAGE_SCRIPT_ID } from "../../vite-plugin-scripts/index.js";
-import { callEndpoint, throwIfRedirectNotAllowed } from "../endpoint/index.js";
 import { AstroError, AstroErrorData } from "../errors/index.js";
 import { debug, info } from "../logger/core.js";
-import {
-  getRedirectLocationOrThrow,
-  RedirectSinglePageBuiltModule,
-  routeIsRedirect
-} from "../redirects/index.js";
-import { createEnvironment, createRenderContext, tryRenderPage } from "../render/index.js";
+import { RedirectSinglePageBuiltModule, getRedirectLocationOrThrow } from "../redirects/index.js";
+import { isEndpointResult } from "../render/core.js";
+import { createEnvironment, createRenderContext, tryRenderRoute } from "../render/index.js";
 import { callGetStaticPaths } from "../render/route-cache.js";
 import {
   createAssetLink,
@@ -165,9 +161,6 @@ async function generateImage(opts, transform, path) {
   info(opts.logging, null, `  ${green("\u25B6")} ${path} ${dim(statsText)} ${dim(timeIncrease)}`);
 }
 async function generatePage(opts, internals, pageData, ssrEntry, builtPaths, manifest) {
-  if (routeIsRedirect(pageData.route) && !opts.settings.config.experimental.redirects) {
-    throw new Error(`To use redirects first set experimental.redirects to \`true\``);
-  }
   let timeStart = performance.now();
   const pageInfo = getPageDataByComponent(internals, pageData.route.component);
   const linkIds = [];
@@ -399,34 +392,26 @@ async function generatePath(pathname, opts, gopts, manifest, onRequest) {
   });
   let body;
   let encoding;
-  if (pageData.route.type === "endpoint") {
-    const endpointHandler = mod;
-    const result = await callEndpoint(
-      endpointHandler,
-      env,
-      renderContext,
-      onRequest
-    );
-    if (result.type === "response") {
-      throwIfRedirectNotAllowed(result.response, opts.settings.config);
-      if (!result.response.body)
+  let response;
+  try {
+    response = await tryRenderRoute(pageData.route.type, renderContext, env, mod, onRequest);
+  } catch (err) {
+    if (!AstroError.is(err) && !err.id && typeof err === "object") {
+      err.id = pageData.component;
+    }
+    throw err;
+  }
+  if (isEndpointResult(response, pageData.route.type)) {
+    if (response.type === "response") {
+      if (!response.response.body)
         return;
-      const ab = await result.response.arrayBuffer();
+      const ab = await response.response.arrayBuffer();
       body = new Uint8Array(ab);
     } else {
-      body = result.body;
-      encoding = result.encoding;
+      body = response.body;
+      encoding = response.encoding;
     }
   } else {
-    let response;
-    try {
-      response = await tryRenderPage(renderContext, env, mod, onRequest);
-    } catch (err) {
-      if (!AstroError.is(err) && !err.id && typeof err === "object") {
-        err.id = pageData.component;
-      }
-      throw err;
-    }
     if (response.status >= 300 && response.status < 400) {
       if (!opts.settings.config.build.redirects) {
         return;

package/dist/core/build/graph.js

@@ -21,7 +21,7 @@ function* walkParentInfos(id, ctx, until, depth = 0, order = 0, seen = /* @__PUR
     if (seen.has(imp)) {
       continue;
     }
-    yield* walkParentInfos(imp, ctx, until, ++depth, order, seen, id);
+    yield* walkParentInfos(imp, ctx, until, depth + 1, order, seen, id);
   }
 }
 function moduleIsTopLevelPage(info) {