astro 3.5.7 → 3.6.0

package/client.d.ts

@@ -109,6 +109,7 @@ declare module 'astro:transitions' {
 	type TransitionModule = typeof import('./dist/transitions/index.js');
 	export const slide: TransitionModule['slide'];
 	export const fade: TransitionModule['fade'];
+	export const createAnimationScope: TransitionModule['createAnimationScope'];
 
 	type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro');
 	export const ViewTransitions: ViewTransitionsModule['default'];
@@ -116,10 +117,30 @@ declare module 'astro:transitions' {
 
 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'];
-	export type Options = import('./dist/transitions/router.js').Options;
+
+	type TransitionUtilModule = typeof import('./dist/transitions/util.js');
+	export const supportsViewTransitions: TransitionUtilModule['supportsViewTransitions'];
+	export const getFallback: TransitionUtilModule['getFallback'];
+	export const transitionEnabledOnThisPage: TransitionUtilModule['transitionEnabledOnThisPage'];
+
+	export type Fallback = import('./dist/transitions/types.ts').Fallback;
+	export type Direction = import('./dist/transitions/types.ts').Direction;
+	export type NavigationTypeString = import('./dist/transitions/types.ts').NavigationTypeString;
+	export type Options = import('./dist/transitions/types.ts').Options;
+
+	type EventModule = typeof import('./dist/transitions/events.js');
+	export const TRANSITION_BEFORE_PREPARATION: EventModule['TRANSITION_BEFORE_PREPARATION'];
+	export const TRANSITION_AFTER_PREPARATION: EventModule['TRANSITION_AFTER_PREPARATION'];
+	export const TRANSITION_BEFORE_SWAP: EventModule['TRANSITION_BEFORE_SWAP'];
+	export const TRANSITION_AFTER_SWAP: EventModule['TRANSITION_AFTER_SWAP'];
+	export const TRANSITION_PAGE_LOAD: EventModule['TRANSITION_PAGE_LOAD'];
+	export type TransitionBeforePreparationEvent =
+		import('./dist/transitions/events.ts').TransitionBeforePreparationEvent;
+	export type TransitionBeforeSwapEvent =
+		import('./dist/transitions/events.ts').TransitionBeforeSwapEvent;
+	export const isTransitionBeforePreparationEvent: EventModule['isTransitionBeforePreparationEvent'];
+	export const isTransitionBeforeSwapEvent: EventModule['isTransitionBeforeSwapEvent'];
 }
 
 declare module 'astro:prefetch' {

package/components/ViewTransitions.astro

@@ -33,7 +33,7 @@ const { fallback = 'animate', handleForms } = Astro.props;
 	// @ts-ignore
 	import { init } from 'astro/prefetch';
 
-	export type Fallback = 'none' | 'animate' | 'swap';
+	type Fallback = 'none' | 'animate' | 'swap';
 
 	function getFallback(): Fallback {
 		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
@@ -85,6 +85,7 @@ const { fallback = 'animate', handleForms } = Astro.props;
 			ev.preventDefault();
 			navigate(href, {
 				history: link.dataset.astroHistory === 'replace' ? 'replace' : 'auto',
+				sourceElement: link,
 			});
 		});
 
@@ -102,7 +103,7 @@ const { fallback = 'animate', handleForms } = Astro.props;
 				let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
 				const method = submitter?.getAttribute('formmethod') ?? form.method;
 
-				const options: Options = {};
+				const options: Options = { sourceElement: submitter ?? form };
 				if (method === 'get') {
 					const params = new URLSearchParams(formData as any);
 					const url = new URL(action);

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "3.5.7";
+const ASTRO_VERSION = "3.6.0";
 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.5.7";
+  const currentVersion = "3.6.0";
   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.5.7";
+  const version = "3.6.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.5.7"}`
+        `v${"3.6.0"}`
       )} ${headline}`
     );
   }

package/dist/prefetch/index.d.ts

@@ -15,6 +15,10 @@ export interface PrefetchOptions {
      * - `'fetch'`: use `fetch()`, has higher loading priority.
      */
     with?: 'link' | 'fetch';
+    /**
+     * Should prefetch even on data saver mode or slow connection. (default `false`)
+     */
+    ignoreSlowConnection?: boolean;
 }
 /**
  * Prefetch a URL so it's cached when the user navigates to it.

package/dist/prefetch/index.js

@@ -24,7 +24,7 @@ function initTapStrategy() {
       event,
       (e) => {
         if (elMatchesStrategy(e.target, "tap")) {
-          prefetch(e.target.href, { with: "fetch" });
+          prefetch(e.target.href, { with: "fetch", ignoreSlowConnection: true });
         }
       },
       { passive: true }
@@ -112,7 +112,8 @@ function createViewportIntersectionObserver() {
   });
 }
 function prefetch(url, opts) {
-  if (!canPrefetchUrl(url))
+  const ignoreSlowConnection = opts?.ignoreSlowConnection ?? false;
+  if (!canPrefetchUrl(url, ignoreSlowConnection))
     return;
   prefetchedUrls.add(url);
   const priority = opts?.with ?? "link";
@@ -129,14 +130,11 @@ function prefetch(url, opts) {
     });
   }
 }
-function canPrefetchUrl(url) {
+function canPrefetchUrl(url, ignoreSlowConnection) {
   if (!navigator.onLine)
     return false;
-  if ("connection" in navigator) {
-    const conn = navigator.connection;
-    if (conn.saveData || /(2|3)g/.test(conn.effectiveType))
-      return false;
-  }
+  if (!ignoreSlowConnection && isSlowConnection())
+    return false;
   try {
     const urlObj = new URL(url, location.href);
     return location.origin === urlObj.origin && location.pathname !== urlObj.pathname && !prefetchedUrls.has(url);
@@ -151,6 +149,9 @@ function elMatchesStrategy(el, strategy) {
   if (attrValue === "false") {
     return false;
   }
+  if (strategy === "tap" && (attrValue != null || prefetchAll) && isSlowConnection()) {
+    return true;
+  }
   if (attrValue == null && prefetchAll || attrValue === "") {
     return strategy === defaultStrategy;
   }
@@ -159,6 +160,13 @@ function elMatchesStrategy(el, strategy) {
   }
   return false;
 }
+function isSlowConnection() {
+  if ("connection" in navigator) {
+    const conn = navigator.connection;
+    return conn.saveData || /(2|3)g/.test(conn.effectiveType);
+  }
+  return false;
+}
 function onPageLoad(cb) {
   cb();
   let firstLoad = false;

package/dist/runtime/server/transition.d.ts

@@ -1,3 +1,7 @@
-import type { SSRResult, TransitionAnimationValue } from '../../@types/astro.js';
+import type { SSRResult, TransitionAnimationPair, TransitionAnimationValue } from '../../@types/astro.js';
 export declare function createTransitionScope(result: SSRResult, hash: string): string;
 export declare function renderTransition(result: SSRResult, hash: string, animationName: TransitionAnimationValue | undefined, transitionName: string): string;
+export declare function createAnimationScope(transitionName: string, animations: Record<string, TransitionAnimationPair>): {
+    scope: string;
+    styles: string;
+};

package/dist/runtime/server/transition.js

@@ -24,6 +24,13 @@ const getAnimations = (name) => {
   if (typeof name === "object")
     return name;
 };
+const addPairs = (animations, stylesheet) => {
+  for (const [direction, images] of Object.entries(animations)) {
+    for (const [image, rules] of Object.entries(images)) {
+      stylesheet.addAnimationPair(direction, image, rules);
+    }
+  }
+};
 function renderTransition(result, hash, animationName, transitionName) {
   if (!animationName)
     animationName = "fade";
@@ -32,11 +39,7 @@ function renderTransition(result, hash, animationName, transitionName) {
   const sheet = new ViewTransitionStyleSheet(scope, name);
   const animations = getAnimations(animationName);
   if (animations) {
-    for (const [direction, images] of Object.entries(animations)) {
-      for (const [image, rules] of Object.entries(images)) {
-        sheet.addAnimationPair(direction, image, rules);
-      }
-    }
+    addPairs(animations, sheet);
   } else if (animationName === "none") {
     sheet.addFallback("old", "animation: none; mix-blend-mode: normal;");
     sheet.addModern("old", "animation: none; opacity: 0; mix-blend-mode: normal;");
@@ -45,6 +48,13 @@ function renderTransition(result, hash, animationName, transitionName) {
   result._metadata.extraHead.push(markHTMLString(`<style>${sheet.toString()}</style>`));
   return scope;
 }
+function createAnimationScope(transitionName, animations) {
+  const hash = Math.random().toString(36).slice(2, 8);
+  const scope = `astro-${hash}`;
+  const sheet = new ViewTransitionStyleSheet(scope, transitionName);
+  addPairs(animations, sheet);
+  return { scope, styles: sheet.toString().replaceAll('"', "") };
+}
 class ViewTransitionStyleSheet {
   constructor(scope, name) {
     this.scope = scope;
@@ -87,7 +97,7 @@ class ViewTransitionStyleSheet {
   addAnimationPair(direction, image, rules) {
     const { scope, name } = this;
     const animation = stringifyAnimation(rules);
-    const prefix = direction === "backwards" ? `[data-astro-transition=back]` : "";
+    const prefix = direction === "backwards" ? `[data-astro-transition=back]` : direction === "forwards" ? "" : `[data-astro-transition=${direction}]`;
     this.addRule("modern", `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
     this.addRule(
       "fallback",
@@ -152,6 +162,7 @@ function toTimeValue(num) {
   return typeof num === "number" ? num + "ms" : num;
 }
 export {
+  createAnimationScope,
   createTransitionScope,
   renderTransition
 };

package/dist/transitions/events.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="@types/dom-view-transitions" />
+import type { Direction, NavigationTypeString } from './types.js';
+export declare const TRANSITION_BEFORE_PREPARATION = "astro:before-preparation";
+export declare const TRANSITION_AFTER_PREPARATION = "astro:after-preparation";
+export declare const TRANSITION_BEFORE_SWAP = "astro:before-swap";
+export declare const TRANSITION_AFTER_SWAP = "astro:after-swap";
+export declare const TRANSITION_PAGE_LOAD = "astro:page-load";
+type Events = typeof TRANSITION_AFTER_PREPARATION | typeof TRANSITION_AFTER_SWAP | typeof TRANSITION_PAGE_LOAD;
+export declare const triggerEvent: (name: Events) => boolean;
+export declare const onPageLoad: () => boolean;
+declare class BeforeEvent extends Event {
+    readonly from: URL;
+    to: URL;
+    direction: Direction | string;
+    readonly navigationType: NavigationTypeString;
+    readonly sourceElement: Element | undefined;
+    readonly info: any;
+    newDocument: Document;
+    constructor(type: string, eventInitDict: EventInit | undefined, from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document);
+}
+export declare const isTransitionBeforePreparationEvent: (value: any) => value is TransitionBeforePreparationEvent;
+export declare class TransitionBeforePreparationEvent extends BeforeEvent {
+    formData: FormData | undefined;
+    loader: () => Promise<void>;
+    constructor(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document, formData: FormData | undefined, loader: (event: TransitionBeforePreparationEvent) => Promise<void>);
+}
+export declare const isTransitionBeforeSwapEvent: (value: any) => value is TransitionBeforeSwapEvent;
+export declare class TransitionBeforeSwapEvent extends BeforeEvent {
+    readonly direction: Direction | string;
+    readonly viewTransition: ViewTransition;
+    swap: () => void;
+    constructor(afterPreparation: BeforeEvent, viewTransition: ViewTransition, swap: (event: TransitionBeforeSwapEvent) => void);
+}
+export declare function doPreparation(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, formData: FormData | undefined, defaultLoader: (event: TransitionBeforePreparationEvent) => Promise<void>): Promise<TransitionBeforePreparationEvent>;
+export declare function doSwap(afterPreparation: BeforeEvent, viewTransition: ViewTransition, defaultSwap: (event: TransitionBeforeSwapEvent) => void): Promise<TransitionBeforeSwapEvent>;
+export {};

package/dist/transitions/events.js

@@ -0,0 +1,131 @@
+import { updateScrollPosition } from "./router.js";
+const TRANSITION_BEFORE_PREPARATION = "astro:before-preparation";
+const TRANSITION_AFTER_PREPARATION = "astro:after-preparation";
+const TRANSITION_BEFORE_SWAP = "astro:before-swap";
+const TRANSITION_AFTER_SWAP = "astro:after-swap";
+const TRANSITION_PAGE_LOAD = "astro:page-load";
+const triggerEvent = (name) => document.dispatchEvent(new Event(name));
+const onPageLoad = () => triggerEvent(TRANSITION_PAGE_LOAD);
+class BeforeEvent extends Event {
+  from;
+  to;
+  direction;
+  navigationType;
+  sourceElement;
+  info;
+  newDocument;
+  constructor(type, eventInitDict, from, to, direction, navigationType, sourceElement, info, newDocument) {
+    super(type, eventInitDict);
+    this.from = from;
+    this.to = to;
+    this.direction = direction;
+    this.navigationType = navigationType;
+    this.sourceElement = sourceElement;
+    this.info = info;
+    this.newDocument = newDocument;
+    Object.defineProperties(this, {
+      from: { enumerable: true },
+      to: { enumerable: true, writable: true },
+      direction: { enumerable: true, writable: true },
+      navigationType: { enumerable: true },
+      sourceElement: { enumerable: true },
+      info: { enumerable: true },
+      newDocument: { enumerable: true, writable: true }
+    });
+  }
+}
+const isTransitionBeforePreparationEvent = (value) => value.type === TRANSITION_BEFORE_PREPARATION;
+class TransitionBeforePreparationEvent extends BeforeEvent {
+  formData;
+  loader;
+  constructor(from, to, direction, navigationType, sourceElement, info, newDocument, formData, loader) {
+    super(
+      TRANSITION_BEFORE_PREPARATION,
+      { cancelable: true },
+      from,
+      to,
+      direction,
+      navigationType,
+      sourceElement,
+      info,
+      newDocument
+    );
+    this.formData = formData;
+    this.loader = loader.bind(this, this);
+    Object.defineProperties(this, {
+      formData: { enumerable: true },
+      loader: { enumerable: true, writable: true }
+    });
+  }
+}
+const isTransitionBeforeSwapEvent = (value) => value.type === TRANSITION_BEFORE_SWAP;
+class TransitionBeforeSwapEvent extends BeforeEvent {
+  direction;
+  viewTransition;
+  swap;
+  constructor(afterPreparation, viewTransition, swap) {
+    super(
+      TRANSITION_BEFORE_SWAP,
+      void 0,
+      afterPreparation.from,
+      afterPreparation.to,
+      afterPreparation.direction,
+      afterPreparation.navigationType,
+      afterPreparation.sourceElement,
+      afterPreparation.info,
+      afterPreparation.newDocument
+    );
+    this.direction = afterPreparation.direction;
+    this.viewTransition = viewTransition;
+    this.swap = swap.bind(this, this);
+    Object.defineProperties(this, {
+      direction: { enumerable: true },
+      viewTransition: { enumerable: true },
+      swap: { enumerable: true, writable: true }
+    });
+  }
+}
+async function doPreparation(from, to, direction, navigationType, sourceElement, info, formData, defaultLoader) {
+  const event = new TransitionBeforePreparationEvent(
+    from,
+    to,
+    direction,
+    navigationType,
+    sourceElement,
+    info,
+    window.document,
+    formData,
+    defaultLoader
+  );
+  if (document.dispatchEvent(event)) {
+    await event.loader();
+    if (!event.defaultPrevented) {
+      triggerEvent(TRANSITION_AFTER_PREPARATION);
+      if (event.navigationType !== "traverse") {
+        updateScrollPosition({ scrollX, scrollY });
+      }
+    }
+  }
+  return event;
+}
+async function doSwap(afterPreparation, viewTransition, defaultSwap) {
+  const event = new TransitionBeforeSwapEvent(afterPreparation, viewTransition, defaultSwap);
+  document.dispatchEvent(event);
+  event.swap();
+  return event;
+}
+export {
+  TRANSITION_AFTER_PREPARATION,
+  TRANSITION_AFTER_SWAP,
+  TRANSITION_BEFORE_PREPARATION,
+  TRANSITION_BEFORE_SWAP,
+  TRANSITION_PAGE_LOAD,
+  TransitionBeforePreparationEvent,
+  TransitionBeforeSwapEvent,
+  doPreparation,
+  doSwap,
+  isTransitionBeforePreparationEvent,
+  isTransitionBeforeSwapEvent,
+  onPageLoad,
+  triggerEvent
+};

package/dist/transitions/index.d.ts

@@ -1,4 +1,5 @@
 import type { TransitionDirectionalAnimations } from '../@types/astro.js';
+export { createAnimationScope } from '../runtime/server/transition.js';
 export declare function slide({ duration, }?: {
     duration?: string | number;
 }): TransitionDirectionalAnimations;

package/dist/transitions/index.js

@@ -1,3 +1,4 @@
+import { createAnimationScope } from "../runtime/server/transition.js";
 const EASE_IN_OUT_QUART = "cubic-bezier(0.76, 0, 0.24, 1)";
 function slide({
   duration
@@ -63,6 +64,7 @@ function fade({
   };
 }
 export {
+  createAnimationScope,
   fade,
   slide
 };

package/dist/transitions/router.d.ts

@@ -1,9 +1,8 @@
-export type Fallback = 'none' | 'animate' | 'swap';
-export type Direction = 'forward' | 'back';
-export type Options = {
-    history?: 'auto' | 'push' | 'replace';
-    formData?: FormData;
-};
+import type { Options } from './types.js';
+export declare const updateScrollPosition: (positions: {
+    scrollX: number;
+    scrollY: number;
+}) => void;
 export declare const supportsViewTransitions: boolean;
 export declare const transitionEnabledOnThisPage: () => boolean;
-export declare function navigate(href: string, options?: Options): void;
+export declare function navigate(href: string, options?: Options): Promise<void>;

package/dist/transitions/router.js

@@ -1,8 +1,23 @@
-const updateScrollPosition = (positions) => history.state && history.replaceState({ ...history.state, ...positions }, "");
+import {
+  TRANSITION_AFTER_SWAP,
+  TransitionBeforeSwapEvent,
+  doPreparation,
+  doSwap
+} from "./events.js";
+const updateScrollPosition = (positions) => {
+  if (history.state) {
+    history.scrollRestoration = "manual";
+    history.replaceState({ ...history.state, ...positions }, "");
+  }
+};
 const inBrowser = import.meta.env.SSR === false;
 const supportsViewTransitions = inBrowser && !!document.startViewTransition;
 const transitionEnabledOnThisPage = () => inBrowser && !!document.querySelector('[name="astro-view-transitions-enabled"]');
-const samePage = (otherLocation) => location.pathname === otherLocation.pathname && location.search === otherLocation.search;
+const samePage = (thisLocation, otherLocation) => thisLocation.origin === otherLocation.origin && thisLocation.pathname === otherLocation.pathname && thisLocation.search === otherLocation.search;
+let originalLocation;
+let viewTransition;
+let skipTransition = false;
+let viewTransitionFinished;
 const triggerEvent = (name) => document.dispatchEvent(new Event(name));
 const onPageLoad = () => triggerEvent("astro:page-load");
 const announce = () => {
@@ -23,6 +38,8 @@ const announce = () => {
   );
 };
 const PERSIST_ATTR = "data-astro-transition-persist";
+const DIRECTION_ATTR = "data-astro-transition";
+const OLD_NEW_ATTR = "data-astro-transition-fallback";
 const VITE_ID = "data-vite-dev-id";
 let parser;
 let currentHistoryIndex = 0;
@@ -31,7 +48,8 @@ if (inBrowser) {
     currentHistoryIndex = history.state.index;
     scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
   } else if (transitionEnabledOnThisPage()) {
-    history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, "");
+    history.replaceState({ index: currentHistoryIndex, scrollX, scrollY }, "");
+    history.scrollRestoration = "manual";
   }
 }
 const throttle = (cb, delay) => {
@@ -98,41 +116,49 @@ function runScripts() {
   }
   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 moveToLocation = (toLocation, replace, intraPage) => {
-  const fresh = !samePage(toLocation);
+const moveToLocation = (to, from, options, historyState) => {
+  const intraPage = samePage(from, to);
   let scrolledToTop = false;
-  if (toLocation.href !== location.href) {
-    if (replace) {
-      history.replaceState({ ...history.state }, "", toLocation.href);
+  if (to.href !== location.href && !historyState) {
+    if (options.history === "replace") {
+      const current = history.state;
+      history.replaceState(
+        {
+          ...options.state,
+          index: current.index,
+          scrollX: current.scrollX,
+          scrollY: current.scrollY
+        },
+        "",
+        to.href
+      );
     } else {
-      history.replaceState({ ...history.state, intraPage }, "");
       history.pushState(
-        { index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 },
+        { ...options.state, index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 },
         "",
-        toLocation.href
+        to.href
       );
     }
-    if (fresh) {
-      scrollTo({ left: 0, top: 0, behavior: "instant" });
-      scrolledToTop = true;
-    }
+    history.scrollRestoration = "manual";
+  }
+  originalLocation = to;
+  if (!intraPage) {
+    scrollTo({ left: 0, top: 0, behavior: "instant" });
+    scrolledToTop = true;
   }
-  if (toLocation.hash) {
-    location.href = toLocation.href;
+  if (historyState) {
+    scrollTo(historyState.scrollX, historyState.scrollY);
   } else {
-    if (!scrolledToTop) {
-      scrollTo({ left: 0, top: 0, behavior: "instant" });
+    if (to.hash) {
+      location.href = to.href;
+    } else {
+      if (!scrolledToTop) {
+        scrollTo({ left: 0, top: 0, behavior: "instant" });
+      }
     }
   }
 };
-function stylePreloadLinks(newDocument) {
+function preloadStyleLinks(newDocument) {
   const links = [];
   for (const el of newDocument.querySelectorAll("head link[rel=stylesheet]")) {
     if (!document.querySelector(
@@ -154,16 +180,16 @@ function stylePreloadLinks(newDocument) {
   }
   return links;
 }
-async function updateDOM(newDocument, toLocation, options, popState, fallback) {
-  const persistedHeadElement = (el) => {
+async function updateDOM(preparationEvent, options, historyState, fallback) {
+  const persistedHeadElement = (el, newDoc) => {
     const id = el.getAttribute(PERSIST_ATTR);
-    const newEl = id && newDocument.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+    const newEl = id && newDoc.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}"]`);
+      return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
     }
     return null;
   };
@@ -189,16 +215,16 @@ async function updateDOM(newDocument, toLocation, options, popState, fallback) {
       }
     }
   };
-  const swap = () => {
+  const defaultSwap = (beforeSwapEvent) => {
     const html = document.documentElement;
-    const astro = [...html.attributes].filter(
+    const astroAttributes = [...html.attributes].filter(
       ({ name }) => (html.removeAttribute(name), name.startsWith("data-astro-"))
     );
-    [...newDocument.documentElement.attributes, ...astro].forEach(
+    [...beforeSwapEvent.newDocument.documentElement.attributes, ...astroAttributes].forEach(
       ({ name, value }) => html.setAttribute(name, value)
     );
     for (const s1 of document.scripts) {
-      for (const s2 of newDocument.scripts) {
+      for (const s2 of beforeSwapEvent.newDocument.scripts) {
         if (
           // Inline
           !s1.src && s1.textContent === s2.textContent || // External
@@ -210,17 +236,17 @@ async function updateDOM(newDocument, toLocation, options, popState, fallback) {
       }
     }
     for (const el of Array.from(document.head.children)) {
-      const newEl = persistedHeadElement(el);
+      const newEl = persistedHeadElement(el, beforeSwapEvent.newDocument);
       if (newEl) {
         newEl.remove();
       } else {
         el.remove();
       }
     }
-    document.head.append(...newDocument.head.children);
+    document.head.append(...beforeSwapEvent.newDocument.head.children);
     const oldBody = document.body;
     const savedFocus = saveFocus();
-    document.body.replaceWith(newDocument.body);
+    document.body.replaceWith(beforeSwapEvent.newDocument.body);
     for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
       const id = el.getAttribute(PERSIST_ATTR);
       const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
@@ -229,73 +255,131 @@ async function updateDOM(newDocument, toLocation, options, popState, fallback) {
       }
     }
     restoreFocus(savedFocus);
-    if (popState) {
-      scrollTo(popState.scrollX, popState.scrollY);
-    } else {
-      moveToLocation(toLocation, options.history === "replace", false);
-    }
-    triggerEvent("astro:after-swap");
   };
-  const links = stylePreloadLinks(newDocument);
-  links.length && await Promise.all(links);
-  if (fallback === "animate") {
+  async function animate(phase) {
+    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 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));
-    await finished;
-    swap();
-    document.documentElement.dataset.astroTransitionFallback = "new";
+    document.documentElement.setAttribute(OLD_NEW_ATTR, phase);
+    const nextAnimations = document.getAnimations();
+    const newAnimations = nextAnimations.filter(
+      (a) => !currentAnimations.includes(a) && !isInfinite(a)
+    );
+    return Promise.all(newAnimations.map((a) => a.finished));
+  }
+  if (!skipTransition) {
+    document.documentElement.setAttribute(DIRECTION_ATTR, preparationEvent.direction);
+    if (fallback === "animate") {
+      await animate("old");
+    }
   } else {
-    swap();
+    throw new DOMException("Transition was skipped");
   }
-}
-async function transition(direction, toLocation, options, popState) {
-  let finished;
-  const href = toLocation.href;
-  const init = {};
-  if (options.formData) {
-    init.method = "POST";
-    init.body = options.formData;
+  const swapEvent = await doSwap(preparationEvent, viewTransition, defaultSwap);
+  moveToLocation(swapEvent.to, swapEvent.from, options, historyState);
+  triggerEvent(TRANSITION_AFTER_SWAP);
+  if (fallback === "animate" && !skipTransition) {
+    animate("new").then(() => viewTransitionFinished());
   }
-  const response = await fetchHTML(href, init);
-  if (response === null) {
-    location.href = href;
+}
+async function transition(direction, from, to, options, historyState) {
+  const navigationType = historyState ? "traverse" : options.history === "replace" ? "replace" : "push";
+  if (samePage(from, to) && !options.formData) {
+    if (navigationType !== "traverse") {
+      updateScrollPosition({ scrollX, scrollY });
+    }
+    moveToLocation(to, from, options, historyState);
     return;
   }
-  if (response.redirected) {
-    toLocation = new URL(response.redirected);
-  }
-  parser ??= new DOMParser();
-  const newDocument = parser.parseFromString(response.html, response.mediaType);
-  newDocument.querySelectorAll("noscript").forEach((el) => el.remove());
-  if (!newDocument.querySelector('[name="astro-view-transitions-enabled"]') && !options.formData) {
-    location.href = href;
+  const prepEvent = await doPreparation(
+    from,
+    to,
+    direction,
+    navigationType,
+    options.sourceElement,
+    options.info,
+    options.formData,
+    defaultLoader
+  );
+  if (prepEvent.defaultPrevented) {
+    location.href = to.href;
     return;
   }
-  if (import.meta.env.DEV)
-    await prepareForClientOnlyComponents(newDocument, toLocation);
-  if (!popState) {
-    history.replaceState({ ...history.state, scrollX, scrollY }, "");
+  function pageMustReload(preparationEvent) {
+    return preparationEvent.to.hash === "" || !samePage(preparationEvent.from, preparationEvent.to) || preparationEvent.sourceElement instanceof HTMLFormElement;
+  }
+  async function defaultLoader(preparationEvent) {
+    if (pageMustReload(preparationEvent)) {
+      const href = preparationEvent.to.href;
+      const init = {};
+      if (preparationEvent.formData) {
+        init.method = "POST";
+        init.body = preparationEvent.formData;
+      }
+      const response = await fetchHTML(href, init);
+      if (response === null) {
+        preparationEvent.preventDefault();
+        return;
+      }
+      if (response.redirected) {
+        preparationEvent.to = new URL(response.redirected);
+      }
+      parser ??= new DOMParser();
+      preparationEvent.newDocument = parser.parseFromString(response.html, response.mediaType);
+      preparationEvent.newDocument.querySelectorAll("noscript").forEach((el) => el.remove());
+      if (!preparationEvent.newDocument.querySelector('[name="astro-view-transitions-enabled"]') && !preparationEvent.formData) {
+        preparationEvent.preventDefault();
+        return;
+      }
+      const links = preloadStyleLinks(preparationEvent.newDocument);
+      links.length && await Promise.all(links);
+      if (import.meta.env.DEV)
+        await prepareForClientOnlyComponents(preparationEvent.newDocument, preparationEvent.to);
+    } else {
+      preparationEvent.newDocument = document;
+      return;
+    }
   }
-  document.documentElement.dataset.astroTransition = direction;
+  skipTransition = false;
   if (supportsViewTransitions) {
-    finished = document.startViewTransition(
-      () => updateDOM(newDocument, toLocation, options, popState)
-    ).finished;
+    viewTransition = document.startViewTransition(
+      async () => await updateDOM(prepEvent, options, historyState)
+    );
   } else {
-    finished = updateDOM(newDocument, toLocation, options, popState, getFallback());
+    const updateDone = (async () => {
+      await new Promise((r) => setTimeout(r));
+      await updateDOM(prepEvent, options, historyState, getFallback());
+    })();
+    viewTransition = {
+      updateCallbackDone: updateDone,
+      // this is about correct
+      ready: updateDone,
+      // good enough
+      finished: new Promise((r) => viewTransitionFinished = r),
+      // see end of updateDOM
+      skipTransition: () => {
+        skipTransition = true;
+      }
+    };
   }
-  try {
-    await finished;
-  } finally {
+  viewTransition.ready.then(async () => {
     await runScripts();
     onPageLoad();
     announce();
-  }
+  });
+  viewTransition.finished.then(() => {
+    document.documentElement.removeAttribute(DIRECTION_ATTR);
+    document.documentElement.removeAttribute(OLD_NEW_ATTR);
+  });
+  await viewTransition.ready;
 }
 let navigateOnServerWarned = false;
-function navigate(href, options) {
+async function navigate(href, options) {
   if (inBrowser === false) {
     if (!navigateOnServerWarned) {
       const warning = new Error(
@@ -311,45 +395,28 @@ function navigate(href, options) {
     location.href = href;
     return;
   }
-  const toLocation = new URL(href, location.href);
-  if (location.origin === toLocation.origin && samePage(toLocation) && !options?.formData) {
-    moveToLocation(toLocation, options?.history === "replace", true);
-  } else {
-    transition("forward", toLocation, options ?? {});
-  }
+  await transition("forward", originalLocation, new URL(href, location.href), options ?? {});
 }
 function onPopState(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);
-  }
+  const nextIndex = state.index;
+  const direction = nextIndex > currentHistoryIndex ? "forward" : "back";
+  currentHistoryIndex = nextIndex;
+  transition(direction, originalLocation, new URL(location.href), {}, state);
 }
 const onScroll = () => {
   updateScrollPosition({ scrollX, scrollY });
 };
 if (inBrowser) {
   if (supportsViewTransitions || getFallback() !== "none") {
+    originalLocation = new URL(location.href);
     addEventListener("popstate", onPopState);
     addEventListener("load", onPageLoad);
     if ("onscrollend" in window)
@@ -404,5 +471,6 @@ async function prepareForClientOnlyComponents(newDocument, toLocation) {
 export {
   navigate,
   supportsViewTransitions,
-  transitionEnabledOnThisPage
+  transitionEnabledOnThisPage,
+  updateScrollPosition
 };

package/dist/transitions/types.d.ts

@@ -0,0 +1,10 @@
+export type Fallback = 'none' | 'animate' | 'swap';
+export type Direction = 'forward' | 'back';
+export type NavigationTypeString = 'push' | 'replace' | 'traverse';
+export type Options = {
+    history?: 'auto' | 'push' | 'replace';
+    info?: any;
+    state?: any;
+    formData?: FormData;
+    sourceElement?: Element;
+};

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

@@ -23,7 +23,14 @@ function astroTransitions({ settings }) {
       }
       if (id === resolvedVirtualClientModuleId) {
         return `
-				export * from "astro/transitions/router";
+				export { navigate, supportsViewTransitions, transitionEnabledOnThisPage } from "astro/transitions/router";
+				export * from "astro/transitions/types";
+				export {
+					TRANSITION_BEFORE_PREPARATION, isTransitionBeforePreparationEvent, TransitionBeforePreparationEvent,
+					TRANSITION_AFTER_PREPARATION,
+					TRANSITION_BEFORE_SWAP, isTransitionBeforeSwapEvent, TransitionBeforeSwapEvent,
+					TRANSITION_AFTER_SWAP, TRANSITION_PAGE_LOAD
+				} from "astro/transitions/events";
 			`;
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.5.7",
+  "version": "3.6.0",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -78,7 +78,9 @@
       "default": "./dist/core/middleware/namespace.js"
     },
     "./transitions": "./dist/transitions/index.js",
+    "./transitions/events": "./dist/transitions/events.js",
     "./transitions/router": "./dist/transitions/router.js",
+    "./transitions/types": "./dist/transitions/types.js",
     "./prefetch": "./dist/prefetch/index.js",
     "./i18n": "./dist/i18n/index.js"
   },
@@ -164,9 +166,9 @@
     "which-pm": "^2.1.1",
     "yargs-parser": "^21.1.1",
     "zod": "^3.22.4",
-    "@astrojs/internal-helpers": "0.2.1",
     "@astrojs/markdown-remark": "3.5.0",
-    "@astrojs/telemetry": "3.0.4"
+    "@astrojs/telemetry": "3.0.4",
+    "@astrojs/internal-helpers": "0.2.1"
   },
   "optionalDependencies": {
     "sharp": "^0.32.5"