summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Roberto Molina <54558382+robertoms99@users.noreply.github.com> 2025-04-09 13:58:35 -0500
committerGravatar GitHub <noreply@github.com> 2025-04-09 20:58:35 +0200
commita0774b376a4f24e2bf1db5b70616dff63d7412dd (patch)
tree55c2112044b2adaec0eee0b07bd427840f95e58e
parent5a0563de9e377ba7b0af7e055a85893773616d4b (diff)
downloadastro-a0774b376a4f24e2bf1db5b70616dff63d7412dd.tar.gz
astro-a0774b376a4f24e2bf1db5b70616dff63d7412dd.tar.zst
astro-a0774b376a4f24e2bf1db5b70616dff63d7412dd.zip
fix: solving #13577 (#13587)
* 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>
-rw-r--r--.changeset/yellow-dogs-say.md5
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/other-attributes.astro3
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/some-attributes.astro2
-rw-r--r--packages/astro/e2e/view-transitions.test.js4
-rw-r--r--packages/astro/src/transitions/swap-functions.ts16
5 files changed, 21 insertions, 9 deletions
diff --git a/.changeset/yellow-dogs-say.md b/.changeset/yellow-dogs-say.md
new file mode 100644
index 000000000..969ed4732
--- /dev/null
+++ 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
index ade923277..358223ecd 100644
--- 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
index 165ef81c1..f550c0e76 100644
--- 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
index fbd00970e..60e315f31 100644
--- 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
index 06264d709..e02ac423b 100644
--- 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),
);
}