fix: solving #13577 (#13587)

robertoms99 · martrapp · web-flow · commit a0774b376a4f · 2025-04-09T20:58:35.000+02:00
* fix: solving #13577 * Update .changeset/yellow-dogs-say.md Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --------- Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com>
diff --git a/.changeset/yellow-dogs-say.md b/.changeset/yellow-dogs-say.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue with the client router where some attributes of the root element were not updated during swap, including the transition scope.
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/other-attributes.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/other-attributes.astro
@@ -6,6 +6,7 @@ lang="es"
 style="background-color: green"
 data-other-name="value"
 data-astro-fake="value"
-data-astro-transition="downward">
+data-astro-transition="downward"
+data-astro-transition-scope="scope-y">
 	<p id="heading">Page with other attributes</p>
 </AttributeLayout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/some-attributes.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/some-attributes.astro
@@ -1,7 +1,7 @@
 ---
 import AttributedLayout from '../components/AttributedLayout.astro';
 ---
-<AttributedLayout lang="en" class="ugly">
+<AttributedLayout lang="en" class="ugly" data-astro-transition-scope="scope-x">
 	<p id="heading">Page with some attributes</p>
 	<a id="click-other-attributes" href="/other-attributes">Other attributes</a>
 </AttributedLayout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -739,6 +739,10 @@ test.describe('View Transitions', () => {
 		await expect(h, 'should have content').toHaveAttribute('data-other-name', 'value');
 		await expect(h, 'should have content').toHaveAttribute('data-astro-fake', 'value');
 		await expect(h, 'should have content').toHaveAttribute('data-astro-transition', 'forward');
+		await expect(h, 'should have swap rest of data-astro-* attributes').toHaveAttribute(
+			'data-astro-transition-scope',
+			'scope-y',
+		);
 		await expect(h, 'should be absent').not.toHaveAttribute('class', /.*/);
 	});
 
diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts
@@ -6,6 +6,8 @@ export type SavedFocus = {
 
 const PERSIST_ATTR = 'data-astro-transition-persist';
 
+const NON_OVERRIDABLE_ASTRO_ATTRS = ['data-astro-transition', 'data-astro-transition-fallback'];
+
 const scriptsAlreadyRan = new Set<string>();
 export function detectScriptExecuted(script: HTMLScriptElement) {
 	const key = script.src ? new URL(script.src, location.href).href : script.textContent!;
@@ -36,15 +38,15 @@ export function deselectScripts(doc: Document) {
  * swap attributes of the html element
  * delete all attributes from the current document
  * insert all attributes from doc
- * reinsert all original attributes that are named 'data-astro-*'
+ * reinsert all original attributes that are referenced in NON_OVERRIDABLE_ASTRO_ATTRS'
  */
-export function swapRootAttributes(doc: Document) {
-	const html = document.documentElement;
-	const astroAttributes = [...html.attributes].filter(
-		({ name }) => (html.removeAttribute(name), name.startsWith('data-astro-')),
+export function swapRootAttributes(newDoc: Document) {
+	const currentRoot = document.documentElement;
+	const nonOverridableAstroAttributes = [...currentRoot.attributes].filter(
+		({ name }) => (currentRoot.removeAttribute(name), NON_OVERRIDABLE_ASTRO_ATTRS.includes(name)),
 	);
-	[...doc.documentElement.attributes, ...astroAttributes].forEach(({ name, value }) =>
-		html.setAttribute(name, value),
+	[...newDoc.documentElement.attributes, ...nonOverridableAstroAttributes].forEach(
+		({ name, value }) => currentRoot.setAttribute(name, value),
 	);
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes an issue with the client router where some attributes of the root element were not updated during swap, including the transition scope.