astro/.changeset/new-monkeys-sit.md

astro
minor

Adds a new object swapFunctions to expose the necessary utility functions on astro:transitions/client that allow you to build custom swap functions to be used with view transitions.

The example below uses these functions to replace Astro's built-in default swap function with one that only swaps the <main> part of the page:

<script>
import { swapFunctions } from 'astro:transitions/client';

document.addEventListener('astro:before-swap', (e) => { e.swap = () => swapMainOnly(e.newDocument) });

function swapMainOnly(doc: Document) {
  swapFunctions.deselectScripts(doc);
  swapFunctions.swapRootAttributes(doc);
  swapFunctions.swapHeadElements(doc);
  const restoreFocusFunction = swapFunctions.saveFocus();
  const newMain = doc.querySelector('main');
  const oldMain = document.querySelector('main');
  if (newMain && oldMain) {
    swapFunctions.swapBodyElement(newMain, oldMain);
  } else {
    swapFunctions.swapBodyElement(doc.body, document.body);
  }
  restoreFocusFunction();
};
</script>

See the view transitions guide for more information about hooking into the astro:before-swap lifecycle event and adding a custom swap implementation.