astro 4.7.0 → 4.8.0

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

@@ -35,8 +35,7 @@ async function renderSlotToString(result, slotted, fallback) {
           instructions ??= [];
           instructions.push(...chunk.instructions);
         }
-      } else if (chunk instanceof Response)
-        return;
+      } else if (chunk instanceof Response) return;
       else if (typeof chunk === "object" && "type" in chunk && typeof chunk.type === "string") {
         if (instructions === null) {
           instructions = [];

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

@@ -7,13 +7,11 @@ function renderScriptElement({ props, children }) {
 }
 function renderUniqueStylesheet(result, sheet) {
   if (sheet.type === "external") {
-    if (Array.from(result.styles).some((s) => s.props.href === sheet.src))
-      return "";
+    if (Array.from(result.styles).some((s) => s.props.href === sheet.src)) return "";
     return renderElement("link", { props: { rel: "stylesheet", href: sheet.src }, children: "" });
   }
   if (sheet.type === "inline") {
-    if (Array.from(result.styles).some((s) => s.children.includes(sheet.content)))
-      return "";
+    if (Array.from(result.styles).some((s) => s.children.includes(sheet.content))) return "";
     return renderElement("style", { props: {}, children: sheet.content });
   }
 }

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

@@ -4,17 +4,17 @@ const voidElementNames = /^(area|base|br|col|command|embed|hr|img|input|keygen|l
 const htmlBooleanAttributes = /^(?:allowfullscreen|async|autofocus|autoplay|controls|default|defer|disabled|disablepictureinpicture|disableremoteplayback|formnovalidate|hidden|loop|nomodule|novalidate|open|playsinline|readonly|required|reversed|scoped|seamless|itemscope)$/i;
 const htmlEnumAttributes = /^(?:contenteditable|draggable|spellcheck|value)$/i;
 const svgEnumAttributes = /^(?:autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i;
+const AMPERSAND_REGEX = /&/g;
+const DOUBLE_QUOTE_REGEX = /"/g;
 const STATIC_DIRECTIVES = /* @__PURE__ */ new Set(["set:html", "set:text"]);
 const toIdent = (k) => k.trim().replace(/(?!^)\b\w|\s+|\W+/g, (match, index) => {
-  if (/\W/.test(match))
-    return "";
+  if (/\W/.test(match)) return "";
   return index === 0 ? match : match.toUpperCase();
 });
-const toAttributeString = (value, shouldEscape = true) => shouldEscape ? String(value).replace(/&/g, "&").replace(/"/g, """) : value;
+const toAttributeString = (value, shouldEscape = true) => shouldEscape ? String(value).replace(AMPERSAND_REGEX, "&").replace(DOUBLE_QUOTE_REGEX, """) : value;
 const kebab = (k) => k.toLowerCase() === k ? k : k.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 const toStyleString = (obj) => Object.entries(obj).filter(([_, v]) => typeof v === "string" && v.trim() || typeof v === "number").map(([k, v]) => {
-  if (k[0] !== "-" && k[1] !== "-")
-    return `${kebab(k)}:${v}`;
+  if (k[0] !== "-" && k[1] !== "-") return `${kebab(k)}:${v}`;
   return `${k}:${v}`;
 }).join(";");
 function defineScriptVars(vars) {

package/dist/runtime/server/shorthash.js

@@ -32,8 +32,7 @@ const dictionary = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWX
 const binary = dictionary.length;
 function bitwise(str) {
   let hash = 0;
-  if (str.length === 0)
-    return hash;
+  if (str.length === 0) return hash;
   for (let i = 0; i < str.length; i++) {
     const ch = str.charCodeAt(i);
     hash = (hash << 5) - hash + ch;

package/dist/runtime/server/transition.js

@@ -15,12 +15,9 @@ function createTransitionScope(result, hash) {
   return `astro-${hash}-${num}`;
 }
 const getAnimations = (name) => {
-  if (name === "fade")
-    return fade();
-  if (name === "slide")
-    return slide();
-  if (typeof name === "object")
-    return name;
+  if (name === "fade") return fade();
+  if (name === "slide") return slide();
+  if (typeof name === "object") return name;
 };
 const addPairs = (animations, stylesheet) => {
   for (const [direction, images] of Object.entries(animations)) {
@@ -46,8 +43,7 @@ function renderTransition(result, hash, animationName, transitionName) {
   if (typeof (transitionName ?? "") !== "string") {
     throw new Error(`Invalid transition name {${transitionName}}`);
   }
-  if (!animationName)
-    animationName = "fade";
+  if (!animationName) animationName = "fade";
   const scope = createTransitionScope(result, hash);
   const name = transitionName ? cssesc(reEncode(transitionName), { isIdentifier: true }) : scope;
   const sheet = new ViewTransitionStyleSheet(scope, name);

package/dist/runtime/server/util.js

@@ -6,8 +6,7 @@ async function* streamAsyncIterator(stream) {
   try {
     while (true) {
       const { done, value } = await reader.read();
-      if (done)
-        return;
+      if (done) return;
       yield value;
     }
   } finally {

package/dist/transitions/events.d.ts

@@ -16,21 +16,22 @@ declare class BeforeEvent extends Event {
     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);
+    readonly signal: AbortSignal;
+    constructor(type: string, eventInitDict: EventInit | undefined, from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document, signal: AbortSignal);
 }
 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>);
+    constructor(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, newDocument: Document, signal: AbortSignal, 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);
+    constructor(afterPreparation: BeforeEvent, viewTransition: ViewTransition);
 }
-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 declare function doPreparation(from: URL, to: URL, direction: Direction | string, navigationType: NavigationTypeString, sourceElement: Element | undefined, info: any, signal: AbortSignal, formData: FormData | undefined, defaultLoader: (event: TransitionBeforePreparationEvent) => Promise<void>): Promise<TransitionBeforePreparationEvent>;
+export declare function doSwap(afterPreparation: BeforeEvent, viewTransition: ViewTransition): TransitionBeforeSwapEvent;
 export {};

package/dist/transitions/events.js

@@ -1,4 +1,5 @@
 import { updateScrollPosition } from "./router.js";
+import { swap } from "./swap-functions.js";
 const TRANSITION_BEFORE_PREPARATION = "astro:before-preparation";
 const TRANSITION_AFTER_PREPARATION = "astro:after-preparation";
 const TRANSITION_BEFORE_SWAP = "astro:before-swap";
@@ -14,7 +15,8 @@ class BeforeEvent extends Event {
   sourceElement;
   info;
   newDocument;
-  constructor(type, eventInitDict, from, to, direction, navigationType, sourceElement, info, newDocument) {
+  signal;
+  constructor(type, eventInitDict, from, to, direction, navigationType, sourceElement, info, newDocument, signal) {
     super(type, eventInitDict);
     this.from = from;
     this.to = to;
@@ -23,6 +25,7 @@ class BeforeEvent extends Event {
     this.sourceElement = sourceElement;
     this.info = info;
     this.newDocument = newDocument;
+    this.signal = signal;
     Object.defineProperties(this, {
       from: { enumerable: true },
       to: { enumerable: true, writable: true },
@@ -30,7 +33,8 @@ class BeforeEvent extends Event {
       navigationType: { enumerable: true },
       sourceElement: { enumerable: true },
       info: { enumerable: true },
-      newDocument: { enumerable: true, writable: true }
+      newDocument: { enumerable: true, writable: true },
+      signal: { enumerable: true }
     });
   }
 }
@@ -38,7 +42,7 @@ const isTransitionBeforePreparationEvent = (value) => value.type === TRANSITION_
 class TransitionBeforePreparationEvent extends BeforeEvent {
   formData;
   loader;
-  constructor(from, to, direction, navigationType, sourceElement, info, newDocument, formData, loader) {
+  constructor(from, to, direction, navigationType, sourceElement, info, newDocument, signal, formData, loader) {
     super(
       TRANSITION_BEFORE_PREPARATION,
       { cancelable: true },
@@ -48,7 +52,8 @@ class TransitionBeforePreparationEvent extends BeforeEvent {
       navigationType,
       sourceElement,
       info,
-      newDocument
+      newDocument,
+      signal
     );
     this.formData = formData;
     this.loader = loader.bind(this, this);
@@ -63,7 +68,7 @@ class TransitionBeforeSwapEvent extends BeforeEvent {
   direction;
   viewTransition;
   swap;
-  constructor(afterPreparation, viewTransition, swap) {
+  constructor(afterPreparation, viewTransition) {
     super(
       TRANSITION_BEFORE_SWAP,
       void 0,
@@ -73,11 +78,12 @@ class TransitionBeforeSwapEvent extends BeforeEvent {
       afterPreparation.navigationType,
       afterPreparation.sourceElement,
       afterPreparation.info,
-      afterPreparation.newDocument
+      afterPreparation.newDocument,
+      afterPreparation.signal
     );
     this.direction = afterPreparation.direction;
     this.viewTransition = viewTransition;
-    this.swap = swap.bind(this, this);
+    this.swap = () => swap(this.newDocument);
     Object.defineProperties(this, {
       direction: { enumerable: true },
       viewTransition: { enumerable: true },
@@ -85,7 +91,7 @@ class TransitionBeforeSwapEvent extends BeforeEvent {
     });
   }
 }
-async function doPreparation(from, to, direction, navigationType, sourceElement, info, formData, defaultLoader) {
+async function doPreparation(from, to, direction, navigationType, sourceElement, info, signal, formData, defaultLoader) {
   const event = new TransitionBeforePreparationEvent(
     from,
     to,
@@ -94,6 +100,7 @@ async function doPreparation(from, to, direction, navigationType, sourceElement,
     sourceElement,
     info,
     window.document,
+    signal,
     formData,
     defaultLoader
   );
@@ -108,8 +115,8 @@ async function doPreparation(from, to, direction, navigationType, sourceElement,
   }
   return event;
 }
-async function doSwap(afterPreparation, viewTransition, defaultSwap) {
-  const event = new TransitionBeforeSwapEvent(afterPreparation, viewTransition, defaultSwap);
+function doSwap(afterPreparation, viewTransition) {
+  const event = new TransitionBeforeSwapEvent(afterPreparation, viewTransition);
   document.dispatchEvent(event);
   event.swap();
   return event;

package/dist/transitions/router.js

@@ -1,4 +1,12 @@
 import { TRANSITION_AFTER_SWAP, doPreparation, doSwap } from "./events.js";
+import {
+  deselectScripts,
+  restoreFocus,
+  saveFocus,
+  swapBodyElement,
+  swapHeadElements,
+  swapRootAttributes
+} from "./swap-functions.js";
 const inBrowser = import.meta.env.SSR === false;
 const pushState = inBrowser && history.pushState.bind(history);
 const replaceState = inBrowser && history.replaceState.bind(history);
@@ -11,10 +19,9 @@ const updateScrollPosition = (positions) => {
 const supportsViewTransitions = inBrowser && !!document.startViewTransition;
 const transitionEnabledOnThisPage = () => inBrowser && !!document.querySelector('[name="astro-view-transitions-enabled"]');
 const samePage = (thisLocation, otherLocation) => thisLocation.pathname === otherLocation.pathname && thisLocation.search === otherLocation.search;
+let mostRecentNavigation;
+let mostRecentTransition;
 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 = () => {
@@ -77,11 +84,9 @@ function getFallback() {
 function runScripts() {
   let wait = Promise.resolve();
   for (const script of Array.from(document.scripts)) {
-    if (script.dataset.astroExec === "")
-      continue;
+    if (script.dataset.astroExec === "") continue;
     const type = script.getAttribute("type");
-    if (type && type !== "module" && type !== "text/javascript")
-      continue;
+    if (type && type !== "module" && type !== "text/javascript") continue;
     const newScript = document.createElement("script");
     newScript.innerHTML = script.innerHTML;
     for (const attr of script.attributes) {
@@ -173,98 +178,11 @@ function preloadStyleLinks(newDocument) {
   }
   return links;
 }
-async function updateDOM(preparationEvent, options, historyState, fallback) {
-  const persistedHeadElement = (el, newDoc) => {
-    const id = el.getAttribute(PERSIST_ATTR);
-    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 newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
-    }
-    return null;
-  };
-  const saveFocus = () => {
-    const activeElement = document.activeElement;
-    if (activeElement?.closest(`[${PERSIST_ATTR}]`)) {
-      if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
-        const start = activeElement.selectionStart;
-        const end = activeElement.selectionEnd;
-        return { activeElement, start, end };
-      }
-      return { activeElement };
-    } else {
-      return { activeElement: null };
-    }
-  };
-  const restoreFocus = ({ activeElement, start, end }) => {
-    if (activeElement) {
-      activeElement.focus();
-      if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
-        if (typeof start === "number")
-          activeElement.selectionStart = start;
-        if (typeof end === "number")
-          activeElement.selectionEnd = end;
-      }
-    }
-  };
-  const shouldCopyProps = (el) => {
-    const persistProps = el.dataset.astroTransitionPersistProps;
-    return persistProps == null || persistProps === "false";
-  };
-  const defaultSwap = (beforeSwapEvent) => {
-    const html = document.documentElement;
-    const astroAttributes = [...html.attributes].filter(
-      ({ name }) => (html.removeAttribute(name), name.startsWith("data-astro-"))
-    );
-    [...beforeSwapEvent.newDocument.documentElement.attributes, ...astroAttributes].forEach(
-      ({ name, value }) => html.setAttribute(name, value)
-    );
-    for (const s1 of document.scripts) {
-      for (const s2 of beforeSwapEvent.newDocument.scripts) {
-        if (
-          // Check if the script should be rerun regardless of it being the same
-          !s2.hasAttribute("data-astro-rerun") && // 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, beforeSwapEvent.newDocument);
-      if (newEl) {
-        newEl.remove();
-      } else {
-        el.remove();
-      }
-    }
-    document.head.append(...beforeSwapEvent.newDocument.head.children);
-    const oldBody = document.body;
-    const savedFocus = saveFocus();
-    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}"]`);
-      if (newEl) {
-        newEl.replaceWith(el);
-        if (newEl.localName === "astro-island" && shouldCopyProps(el)) {
-          el.setAttribute("ssr", "");
-          el.setAttribute("props", newEl.getAttribute("props"));
-        }
-      }
-    }
-    restoreFocus(savedFocus);
-  };
+async function updateDOM(preparationEvent, options, currentTransition, historyState, fallback) {
   async function animate(phase) {
     function isInfinite(animation) {
       const effect = animation.effect;
-      if (!effect || !(effect instanceof KeyframeEffect) || !effect.target)
-        return false;
+      if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
       const style = window.getComputedStyle(effect.target, effect.pseudoElement);
       return style.animationIterationCount === "infinite";
     }
@@ -274,26 +192,36 @@ async function updateDOM(preparationEvent, options, historyState, fallback) {
     const newAnimations = nextAnimations.filter(
       (a) => !currentAnimations.includes(a) && !isInfinite(a)
     );
-    return Promise.all(newAnimations.map((a) => a.finished));
+    return Promise.allSettled(newAnimations.map((a) => a.finished));
   }
-  if (!skipTransition) {
-    document.documentElement.setAttribute(DIRECTION_ATTR, preparationEvent.direction);
-    if (fallback === "animate") {
+  if (fallback === "animate" && !currentTransition.transitionSkipped && !preparationEvent.signal.aborted) {
+    try {
       await animate("old");
+    } catch (err) {
     }
-  } else {
-    throw new DOMException("Transition was skipped");
   }
   const pageTitleForBrowserHistory = document.title;
-  const swapEvent = await doSwap(preparationEvent, viewTransition, defaultSwap);
+  const swapEvent = doSwap(preparationEvent, currentTransition.viewTransition);
   moveToLocation(swapEvent.to, swapEvent.from, options, pageTitleForBrowserHistory, historyState);
   triggerEvent(TRANSITION_AFTER_SWAP);
-  if (fallback === "animate" && !skipTransition) {
-    animate("new").then(() => viewTransitionFinished());
+  if (fallback === "animate") {
+    if (!currentTransition.transitionSkipped && !swapEvent.signal.aborted) {
+      animate("new").finally(() => currentTransition.viewTransitionFinished());
+    } else {
+      currentTransition.viewTransitionFinished();
+    }
   }
 }
+function abortAndRecreateMostRecentNavigation() {
+  mostRecentNavigation?.controller.abort();
+  return mostRecentNavigation = {
+    controller: new AbortController()
+  };
+}
 async function transition(direction, from, to, options, historyState) {
+  const currentNavigation = abortAndRecreateMostRecentNavigation();
   if (!transitionEnabledOnThisPage() || location.origin !== to.origin) {
+    if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
     location.href = to.href;
     return;
   }
@@ -304,6 +232,7 @@ async function transition(direction, from, to, options, historyState) {
   if (samePage(from, to)) {
     if (direction !== "back" && to.hash || direction === "back" && from.hash) {
       moveToLocation(to, from, options, document.title, historyState);
+      if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
       return;
     }
   }
@@ -314,16 +243,20 @@ async function transition(direction, from, to, options, historyState) {
     navigationType,
     options.sourceElement,
     options.info,
+    currentNavigation.controller.signal,
     options.formData,
     defaultLoader
   );
-  if (prepEvent.defaultPrevented) {
-    location.href = to.href;
+  if (prepEvent.defaultPrevented || prepEvent.signal.aborted) {
+    if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
+    if (!prepEvent.signal.aborted) {
+      location.href = to.href;
+    }
     return;
   }
   async function defaultLoader(preparationEvent) {
     const href = preparationEvent.to.href;
-    const init = {};
+    const init = { signal: preparationEvent.signal };
     if (preparationEvent.formData) {
       init.method = "POST";
       const form = preparationEvent.sourceElement instanceof HTMLFormElement ? preparationEvent.sourceElement : preparationEvent.sourceElement instanceof HTMLElement && "form" in preparationEvent.sourceElement ? preparationEvent.sourceElement.form : preparationEvent.sourceElement?.closest("form");
@@ -345,42 +278,77 @@ async function transition(direction, from, to, options, historyState) {
       return;
     }
     const links = preloadStyleLinks(preparationEvent.newDocument);
-    links.length && await Promise.all(links);
-    if (import.meta.env.DEV)
-      await prepareForClientOnlyComponents(preparationEvent.newDocument, preparationEvent.to);
+    links.length && !preparationEvent.signal.aborted && await Promise.all(links);
+    if (import.meta.env.DEV && !preparationEvent.signal.aborted)
+      await prepareForClientOnlyComponents(
+        preparationEvent.newDocument,
+        preparationEvent.to,
+        preparationEvent.signal
+      );
   }
-  skipTransition = false;
+  async function abortAndRecreateMostRecentTransition() {
+    if (mostRecentTransition) {
+      if (mostRecentTransition.viewTransition) {
+        try {
+          mostRecentTransition.viewTransition.skipTransition();
+        } catch {
+        }
+        try {
+          await mostRecentTransition.viewTransition.updateCallbackDone;
+        } catch {
+        }
+      }
+    }
+    return mostRecentTransition = { transitionSkipped: false };
+  }
+  const currentTransition = await abortAndRecreateMostRecentTransition();
+  if (prepEvent.signal.aborted) {
+    if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
+    return;
+  }
+  document.documentElement.setAttribute(DIRECTION_ATTR, prepEvent.direction);
   if (supportsViewTransitions) {
-    viewTransition = document.startViewTransition(
-      async () => await updateDOM(prepEvent, options, historyState)
+    currentTransition.viewTransition = document.startViewTransition(
+      async () => await updateDOM(prepEvent, options, currentTransition, historyState)
     );
   } else {
     const updateDone = (async () => {
-      await new Promise((r) => setTimeout(r));
-      await updateDOM(prepEvent, options, historyState, getFallback());
+      await Promise.resolve();
+      await updateDOM(prepEvent, options, currentTransition, historyState, getFallback());
     })();
-    viewTransition = {
+    currentTransition.viewTransition = {
       updateCallbackDone: updateDone,
       // this is about correct
       ready: updateDone,
       // good enough
-      finished: new Promise((r) => viewTransitionFinished = r),
+      // Finished promise could have been done better: finished rejects iff updateDone does.
+      // Our simulation always resolves, never rejects.
+      finished: new Promise((r) => currentTransition.viewTransitionFinished = r),
       // see end of updateDOM
       skipTransition: () => {
-        skipTransition = true;
+        currentTransition.transitionSkipped = true;
+        document.documentElement.removeAttribute(OLD_NEW_ATTR);
       }
     };
   }
-  viewTransition.ready.then(async () => {
+  currentTransition.viewTransition.updateCallbackDone.finally(async () => {
     await runScripts();
     onPageLoad();
     announce();
   });
-  viewTransition.finished.then(() => {
+  currentTransition.viewTransition.finished.finally(() => {
+    currentTransition.viewTransition = void 0;
+    if (currentTransition === mostRecentTransition) mostRecentTransition = void 0;
+    if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
     document.documentElement.removeAttribute(DIRECTION_ATTR);
     document.documentElement.removeAttribute(OLD_NEW_ATTR);
   });
-  await viewTransition.ready;
+  try {
+    await currentTransition.viewTransition.updateCallbackDone;
+  } catch (e) {
+    const err = e;
+    console.log("[astro]", err.name, err.message, err.stack);
+  }
 }
 let navigateOnServerWarned = false;
 async function navigate(href, options) {
@@ -421,8 +389,7 @@ if (inBrowser) {
     originalLocation = new URL(location.href);
     addEventListener("popstate", onPopState);
     addEventListener("load", onPageLoad);
-    if ("onscrollend" in window)
-      addEventListener("scrollend", onScrollEnd);
+    if ("onscrollend" in window) addEventListener("scrollend", onScrollEnd);
     else {
       let intervalId, lastY, lastX, lastIndex;
       const scrollInterval = () => {
@@ -443,8 +410,7 @@ if (inBrowser) {
       addEventListener(
         "scroll",
         () => {
-          if (intervalId !== void 0)
-            return;
+          if (intervalId !== void 0) return;
           lastIndex = history.state.index, lastY = scrollY, lastX = scrollX;
           intervalId = window.setInterval(scrollInterval, 50);
         },
@@ -456,7 +422,7 @@ if (inBrowser) {
     script.dataset.astroExec = "";
   }
 }
-async function prepareForClientOnlyComponents(newDocument, toLocation) {
+async function prepareForClientOnlyComponents(newDocument, toLocation, signal) {
   if (newDocument.body.querySelector(`astro-island[client='only']`)) {
     const nextPage = document.createElement("iframe");
     nextPage.src = toLocation.href;
@@ -481,13 +447,15 @@ async function prepareForClientOnlyComponents(newDocument, toLocation) {
       });
     }
     async function hydrationDone(loadingPage) {
-      await new Promise(
-        (r) => loadingPage.contentWindow?.addEventListener("load", r, { once: true })
-      );
+      if (!signal.aborted) {
+        await new Promise(
+          (r) => loadingPage.contentWindow?.addEventListener("load", r, { once: true })
+        );
+      }
       return new Promise(async (r) => {
         for (let count = 0; count <= 20; ++count) {
-          if (!loadingPage.contentDocument.body.querySelector("astro-island[ssr]"))
-            break;
+          if (signal.aborted) break;
+          if (!loadingPage.contentDocument.body.querySelector("astro-island[ssr]")) break;
           await new Promise((r2) => setTimeout(r2, 50));
         }
         r();

package/dist/transitions/swap-functions.d.ts

@@ -0,0 +1,12 @@
+export type SavedFocus = {
+    activeElement: HTMLElement | null;
+    start?: number | null;
+    end?: number | null;
+};
+export declare function deselectScripts(doc: Document): void;
+export declare function swapRootAttributes(doc: Document): void;
+export declare function swapHeadElements(doc: Document): void;
+export declare function swapBodyElement(newElement: Element, oldElement: Element): void;
+export declare const saveFocus: () => (() => void);
+export declare const restoreFocus: ({ activeElement, start, end }: SavedFocus) => void;
+export declare const swap: (doc: Document) => void;