astro 3.5.6 → 3.6.0

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.6",
+  "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"
   },
@@ -165,8 +167,8 @@
     "yargs-parser": "^21.1.1",
     "zod": "^3.22.4",
     "@astrojs/markdown-remark": "3.5.0",
-    "@astrojs/internal-helpers": "0.2.1",
-    "@astrojs/telemetry": "3.0.4"
+    "@astrojs/telemetry": "3.0.4",
+    "@astrojs/internal-helpers": "0.2.1"
   },
   "optionalDependencies": {
     "sharp": "^0.32.5"