michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Handle back navigation from page without VT (#7750)

Browse source 
* Handle back navigation from page without VT

* Adding a changeset
This commit is contained in:
Matthew Phillips 2023-07-21 10:40:36 -04:00 committed by GitHub
parent 29162c99fb
commit 201d32dcfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sixty-peas-join.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Trigger full page refresh on back nav from page without VT enabled

7
packages/astro/components/ViewTransitions.astro
View file

@ -128,7 +128,12 @@ const { fallback = 'animate' } = Astro.props as Props;
}
});
window.addEventListener('popstate', () => {
if (!transitionEnabledOnThisPage()) return;
if (!transitionEnabledOnThisPage()) {
// The current page doesn't haven't View Transitions,
// respect that with a full page reload
location.reload();
return;
}
const nextIndex = history.state?.index ?? currentHistoryIndex + 1;
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
navigate(direction, location.href);

26
packages/astro/e2e/view-transitions.test.js
View file

@ -104,4 +104,30 @@ test.describe('View Transitions', () => {
'There should be 2 page loads. The original, then going from 3 to 2'
).toEqual(2);
});
test('Moving from a page without ViewTransitions w/ back button', async ({
page,
astro,
}) => {
const loads = [];
page.addListener('load', (p) => {
loads.push(p.title());
});
// Go to page 1
await page.goto(astro.resolveUrl('/one'));
let p = page.locator('#one');
await expect(p, 'should have content').toHaveText('Page 1');
// Go to page 3 which does *not* have ViewTransitions enabled
await page.click('#click-three');
p = page.locator('#three');
await expect(p, 'should have content').toHaveText('Page 3');
// Back to page 1
await page.goBack();
p = page.locator('#one');
await expect(p, 'should have content').toHaveText('Page 1');
});
});