From 52606a3909f9de5ced9b9ba3ba25832f73a8689e Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:09:22 +0200
Subject: [PATCH] View Transition: swap attributes of document's root element
(#8206)
* swap attributes of the root element
* + changeset
---
.changeset/lovely-ducks-move.md | 5 +++++
.../astro/components/ViewTransitions.astro | 12 ++++++++++
.../src/components/AttributedLayout.astro | 17 ++++++++++++++
.../src/pages/other-attributes.astro | 11 ++++++++++
.../src/pages/some-attributes.astro | 7 ++++++
packages/astro/e2e/view-transitions.test.js | 22 +++++++++++++++++++
6 files changed, 74 insertions(+)
create mode 100644 .changeset/lovely-ducks-move.md
create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/other-attributes.astro
create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/some-attributes.astro
diff --git a/.changeset/lovely-ducks-move.md b/.changeset/lovely-ducks-move.md
new file mode 100644
index 000000000..305c20e15
--- /dev/null
+++ b/.changeset/lovely-ducks-move.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+fix: View Transition: swap attributes of document's root element
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 612b89659..cb6cbbd33 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -136,6 +136,18 @@ const { fallback = 'animate' } = Astro.props as Props;
// Remove them before swapping.
doc.querySelectorAll('head noscript').forEach((el) => el.remove());
+ // 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-*'
+ const html = document.documentElement;
+ const astro = [...html.attributes].filter(
+ ({ name }) => (html.removeAttribute(name), name.startsWith('data-astro-'))
+ );
+ [...doc.documentElement.attributes, ...astro].forEach(({ name, value }) =>
+ html.setAttribute(name, value)
+ );
+
// Swap head
for (const el of Array.from(document.head.children)) {
const newEl = persistedHeadElement(el);
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
new file mode 100644
index 000000000..7a3284dd4
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
@@ -0,0 +1,17 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+import { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'html'> {}
+---
+
+
+ Testing
+
+
+
+
+
+
+
+
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
new file mode 100644
index 000000000..ade923277
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/other-attributes.astro
@@ -0,0 +1,11 @@
+---
+import AttributeLayout from '../components/AttributedLayout.astro';
+---
+
+ Page with other attributes
+
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
new file mode 100644
index 000000000..165ef81c1
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/some-attributes.astro
@@ -0,0 +1,7 @@
+---
+import AttributedLayout from '../components/AttributedLayout.astro';
+---
+
+ Page with some attributes
+ Other attributes
+
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index c681bfea0..57e23e6a9 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -397,3 +397,25 @@ test.describe('View Transitions', () => {
).toEqual(1);
});
});
+
+test('Navigation also swaps the attributes of the document root', async ({ page, astro }) => {
+ page.on('console', (msg) => console.log(msg.text()));
+ await page.goto(astro.resolveUrl('/some-attributes'));
+ let p = page.locator('#heading');
+ await expect(p, 'should have content').toHaveText('Page with some attributes');
+
+ let h = page.locator('html');
+ await expect(h, 'should have content').toHaveAttribute('lang', 'en');
+
+ await page.click('#click-other-attributes');
+ p = page.locator('#heading');
+ await expect(p, 'should have content').toHaveText('Page with other attributes');
+
+ h = page.locator('html');
+ await expect(h, 'should have content').toHaveAttribute('lang', 'es');
+ await expect(h, 'should have content').toHaveAttribute('style', 'background-color: green');
+ 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 be absent').not.toHaveAttribute('class', /.*/);
+});