From 8fe75604df27b6e4758e0aa02cf6076e14933f6c Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Wed, 14 Aug 2024 15:23:33 +0200
Subject: [PATCH 1/8] extend virtual module astro:transitions/client to exports
 swapFunctions

---
 .changeset/new-monkeys-sit.md                            | 5 +++++
 packages/astro/client.d.ts                               | 2 ++
 packages/astro/src/transitions/swap-functions.ts         | 9 +++++++++
 .../astro/src/transitions/vite-plugin-transitions.ts     | 1 +
 .../src/virtual-modules/transitions-swap-functions.ts    | 1 +
 5 files changed, 18 insertions(+)
 create mode 100644 .changeset/new-monkeys-sit.md
 create mode 100644 packages/astro/src/virtual-modules/transitions-swap-functions.ts

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
new file mode 100644
index 000000000000..911ebfaa29ea
--- /dev/null
+++ b/.changeset/new-monkeys-sit.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Extends `astro:transitions/client` with `swapFunctions`, which provides building blocks for custom swap functions.
diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts
index ed5c1b894d28..11bb35cd783a 100644
--- a/packages/astro/client.d.ts
+++ b/packages/astro/client.d.ts
@@ -150,6 +150,8 @@ declare module 'astro:transitions/client' {
 		import('./dist/virtual-modules/transitions-events.js').TransitionBeforeSwapEvent;
 	export const isTransitionBeforePreparationEvent: EventModule['isTransitionBeforePreparationEvent'];
 	export const isTransitionBeforeSwapEvent: EventModule['isTransitionBeforeSwapEvent'];
+	type TransitionSwapFunctionModule = typeof import('./dist/virtual-modules/transitions-swap-functions.js');
+	export const swapFunctions: TransitionSwapFunctionModule['swapFunctions']
 }
 
 declare module 'astro:prefetch' {
diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts
index 4c8db82eef90..e69842fa1a3f 100644
--- a/packages/astro/src/transitions/swap-functions.ts
+++ b/packages/astro/src/transitions/swap-functions.ts
@@ -133,6 +133,15 @@ const shouldCopyProps = (el: HTMLElement): boolean => {
 	return persistProps == null || persistProps === 'false';
 };
 
+export const swapFunctions = {
+	deselectScripts,
+	swapRootAttributes,
+	swapHeadElements,
+	swapBodyElement,
+	saveFocus,
+	restoreFocus,
+};
+
 export const swap = (doc: Document) => {
 	deselectScripts(doc);
 	swapRootAttributes(doc);
diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts
index d88c96f8919f..547ef3f38af0 100644
--- a/packages/astro/src/transitions/vite-plugin-transitions.ts
+++ b/packages/astro/src/transitions/vite-plugin-transitions.ts
@@ -42,6 +42,7 @@ export default function astroTransitions({ settings }: { settings: AstroSettings
 					TRANSITION_BEFORE_SWAP, isTransitionBeforeSwapEvent, TransitionBeforeSwapEvent,
 					TRANSITION_AFTER_SWAP, TRANSITION_PAGE_LOAD
 				} from "astro/virtual-modules/transitions-events.js";
+				export { swapFunctions } from "astro/virtual-modules/transitions-swap-functions.js";
 			`;
 			}
 		},
diff --git a/packages/astro/src/virtual-modules/transitions-swap-functions.ts b/packages/astro/src/virtual-modules/transitions-swap-functions.ts
new file mode 100644
index 000000000000..5947533e3d02
--- /dev/null
+++ b/packages/astro/src/virtual-modules/transitions-swap-functions.ts
@@ -0,0 +1 @@
+export * from '../transitions/swap-functions.js';

From b9c5c8e4264bb382db03b49bc732066d0ad473d8 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Wed, 14 Aug 2024 16:53:20 +0200
Subject: [PATCH 2/8] use virtual module in e2e tests

---
 .../src/pages/keep-style-one.astro                 | 12 ++++++------
 .../src/pages/keep-theme-one.astro                 | 12 ++++++------
 .../src/pages/replace-main-one.astro               | 14 +++++++-------
 packages/astro/e2e/view-transitions.test.js        |  2 +-
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-style-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-style-one.astro
index 413a404d76fe..f71898d8153f 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-style-one.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-style-one.astro
@@ -7,22 +7,22 @@ import Layout from '../components/Layout.astro';
 </Layout>
 <script>
 
-	import { deselectScripts, saveFocus, swapBodyElement, swapHeadElements, swapRootAttributes } from '../../node_modules/astro/dist/transitions/swap-functions'
+	import { swapFunctions } from 'astro:transitions/client';
 
 	document.addEventListener('astro:before-swap', (e) => {
 		e.swap = () => keepStyle(e.newDocument)
 	});
 
 	function keepStyle(doc: Document) {
-		deselectScripts(doc);
-		swapRootAttributes(doc);
+		swapFunctions.deselectScripts(doc);
+		swapFunctions.swapRootAttributes(doc);
 		{
 			const dynamicStyle = document.head.querySelector('style:not(:empty)');
-			swapHeadElements(doc);
+			swapFunctions.swapHeadElements(doc);
 			dynamicStyle && document.head.insertAdjacentElement('afterbegin', dynamicStyle);
 		}
-		const restoreFocusFunction = saveFocus();
-		swapBodyElement(doc.body, document.body)
+		const restoreFocusFunction = swapFunctions.saveFocus();
+		swapFunctions.swapBodyElement(doc.body, document.body)
 		restoreFocusFunction();
 	}
 </script>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-theme-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-theme-one.astro
index a4c942d587f2..18ae0221fc65 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-theme-one.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/keep-theme-one.astro
@@ -6,18 +6,18 @@ import Layout from '../components/Layout.astro';
 	<a id="click" href="/keep-two">go to next page</a>
 </Layout>
 <script>
-	import { deselectScripts, saveFocus, swapBodyElement, swapHeadElements, swapRootAttributes } from '../../node_modules/astro/dist/transitions/swap-functions'
+	import { swapFunctions } from 'astro:transitions/client';
 
 	function keepTheme(doc:Document) {
-		deselectScripts(doc);
+		swapFunctions.deselectScripts(doc);
 		{
 			const theme = document.documentElement.getAttribute('data-theme')!;
-			swapRootAttributes(doc);
+			swapFunctions.swapRootAttributes(doc);
 			document.documentElement.setAttribute('data-theme', theme);
 		}
-		swapHeadElements(doc);
-		const restoreFocusFunction = saveFocus();
-		swapBodyElement(doc.body, document.body)
+		swapFunctions.swapHeadElements(doc);
+		const restoreFocusFunction = swapFunctions.saveFocus();
+		swapFunctions.swapBodyElement(doc.body, document.body)
 		restoreFocusFunction();
 	}
 
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/replace-main-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/replace-main-one.astro
index 1709661e8aca..c43ce78a9629 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/replace-main-one.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/replace-main-one.astro
@@ -9,24 +9,24 @@ import Layout from '../components/Layout.astro';
 	<a id="click" href="/keep-two">go to next page</a>
 </Layout>
 <script>
-	import { deselectScripts, saveFocus, swapBodyElement, swapHeadElements, swapRootAttributes } from "../../node_modules/astro/dist/transitions/swap-functions"
+	import { swapFunctions } from 'astro:transitions/client';
 
 	document.addEventListener('astro:before-swap', (e) => {
 		e.swap = () => replaceMain(e.newDocument)
 	});
 
 	function replaceMain(doc:Document){
-		deselectScripts(doc);
-		swapRootAttributes(doc);
-		swapHeadElements(doc);
-		const restoreFocusFunction = saveFocus();
+		swapFunctions.deselectScripts(doc);
+		swapFunctions.swapRootAttributes(doc);
+		swapFunctions.swapHeadElements(doc);
+		const restoreFocusFunction = swapFunctions.saveFocus();
 		{
 			const newMain = doc.body.querySelector('main section');
 				const oldMain = document.body.querySelector('main section');
 				if (newMain && oldMain) {
-					swapBodyElement(newMain, oldMain);
+					swapFunctions.swapBodyElement(newMain, oldMain);
 				} else {
-					swapBodyElement(doc.body, document.body);
+					swapFunctions.swapBodyElement(doc.body, document.body);
 				}
 		}
 		restoreFocusFunction();
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 135ec5571ab8..8be3cb8a9d22 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -1445,7 +1445,7 @@ test.describe('View Transitions', () => {
 		await page.click('#click');
 		await expect(page.locator('#name'), 'should have content').toHaveText('Keep 2');
 
-		const styleElement = await page.$('head > style');
+		const styleElement = await page.$('head > style:nth-child(1)');
 		const styleContent = await page.evaluate((style) => style.innerHTML, styleElement);
 		expect(styleContent).toBe('body { background-color: purple; }');
 	});

From 181bb2a170041657bfcfb511494c40e81fc5c538 Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Thu, 15 Aug 2024 09:44:55 +0100
Subject: [PATCH 3/8] Update .changeset/new-monkeys-sit.md

---
 .changeset/new-monkeys-sit.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
index 911ebfaa29ea..b5df6a086cc1 100644
--- a/.changeset/new-monkeys-sit.md
+++ b/.changeset/new-monkeys-sit.md
@@ -1,5 +1,5 @@
 ---
-'astro': patch
+'astro': minor
 ---
 
 Extends `astro:transitions/client` with `swapFunctions`, which provides building blocks for custom swap functions.

From fc6d792e50913324f38365073c3931630cdee5c1 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Tue, 20 Aug 2024 18:59:39 +0200
Subject: [PATCH 4/8] Update .changeset/new-monkeys-sit.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/new-monkeys-sit.md | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
index b5df6a086cc1..518245af5377 100644
--- a/.changeset/new-monkeys-sit.md
+++ b/.changeset/new-monkeys-sit.md
@@ -2,4 +2,24 @@
 'astro': minor
 ---
 
-Extends `astro:transitions/client` with `swapFunctions`, which provides building blocks for custom swap functions.
+Adds a new object `swapFunctions` to expose the necessary utility functions on `astro:transitions/client` that allow you to build custom swap functions as view transitions.
+
+The example below uses these functions to recreate Astro's own default `swap` transition as a defined custom swap:
+
+```astro
+<script>
+import { swapFunctions } from 'astro:transitions/client';
+// substitutes window.document with doc
+function myAstroSwap(doc: Document) {
+  swapFunctions.deselectScripts(doc);
+  swapFunctions.swapRootAttributes(doc);
+  swapFunctions.swapHeadElements(doc);
+  const restoreFocusFunction = swapFunctions.saveFocus();
+  swapFunctions.swapBodyElement(doc.body, document.body);
+  restoreFocusFunction();
+};
+
+  event.swap = () => myAstroSwap(event.newDocument);
+
+<script>
+```

From 8e66e30e42389496ed84c0e149936b132f62b865 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:23:37 +0200
Subject: [PATCH 5/8] Update new-monkeys-sit.md

---
 .changeset/new-monkeys-sit.md | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
index 518245af5377..b942c9975ae9 100644
--- a/.changeset/new-monkeys-sit.md
+++ b/.changeset/new-monkeys-sit.md
@@ -2,24 +2,29 @@
 '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 as view transitions.
+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 recreate Astro's own default `swap` transition as a defined custom swap:
+The example below uses these functions to replace the default `swap` function with one that only swaps the `<main>` part of the page:
 
 ```astro
 <script>
 import { swapFunctions } from 'astro:transitions/client';
-// substitutes window.document with doc
-function myAstroSwap(doc: Document) {
+
+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();
-  swapFunctions.swapBodyElement(doc.body, document.body);
+  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();
 };
-
-  event.swap = () => myAstroSwap(event.newDocument);
-
 <script>
 ```

From 21b0dbc79d46950571a94934af08a2a2c5a56f66 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:13:39 +0200
Subject: [PATCH 6/8] Update swap-functions.ts

restoreFocus() bindings are now returned by saveFocus() and do not make sense anymore as a member of the swapFunctions object
---
 packages/astro/src/transitions/swap-functions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts
index e69842fa1a3f..e2d8557f5d50 100644
--- a/packages/astro/src/transitions/swap-functions.ts
+++ b/packages/astro/src/transitions/swap-functions.ts
@@ -139,7 +139,6 @@ export const swapFunctions = {
 	swapHeadElements,
 	swapBodyElement,
 	saveFocus,
-	restoreFocus,
 };
 
 export const swap = (doc: Document) => {

From 72df6e16301d1540c9c2dc362f03d23c98d7a386 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:30:35 +0200
Subject: [PATCH 7/8] take over suggestion

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/new-monkeys-sit.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
index b942c9975ae9..dc5b40ca87da 100644
--- a/.changeset/new-monkeys-sit.md
+++ b/.changeset/new-monkeys-sit.md
@@ -28,3 +28,5 @@ function swapMainOnly(doc: Document) {
 };
 <script>
 ```
+
+See the [view transitions guide](https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap) for more information about hooking into the `astro:before-swap` lifecycle event and adding a custom swap implementation.

From c9ed2d4fa30b5a7747c4c6a3ed886440ad88695f Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:37:26 +0200
Subject: [PATCH 8/8] Update .changeset/new-monkeys-sit.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/new-monkeys-sit.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/new-monkeys-sit.md b/.changeset/new-monkeys-sit.md
index dc5b40ca87da..b147b593f4a1 100644
--- a/.changeset/new-monkeys-sit.md
+++ b/.changeset/new-monkeys-sit.md
@@ -4,7 +4,7 @@
 
 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 the default `swap` function with one that only swaps the `<main>` part of the page:
+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:
 
 ```astro
 <script>