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

Finalize View Transition event names (#8181)

Browse source 
* Finalize View Transition event names

* Use hyphenated names
This commit is contained in:
Matthew Phillips 2023-08-24 14:44:48 -04:00 committed by GitHub
parent d87837e32b
commit a8f35777e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/proud-fans-type.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': minor
---
Finalize View Transition event names

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

@ -17,14 +17,14 @@ const { fallback = 'animate' } = Astro.props as Props;
index: number; index: number;
scrollY: number; scrollY: number;
}; };
type Events = 'astro:load' | 'astro:beforeload'; type Events = 'astro:page-load' | 'astro:after-swap';
const persistState = (state: State) => history.replaceState(state, ''); const persistState = (state: State) => history.replaceState(state, '');
const supportsViewTransitions = !!document.startViewTransition; const supportsViewTransitions = !!document.startViewTransition;
const transitionEnabledOnThisPage = () => const transitionEnabledOnThisPage = () =>
!!document.querySelector('[name="astro-view-transitions-enabled"]'); !!document.querySelector('[name="astro-view-transitions-enabled"]');
const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name)); const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
const onload = () => triggerEvent('astro:load'); const onPageLoad = () => triggerEvent('astro:page-load');
const PERSIST_ATTR = 'data-astro-transition-persist'; const PERSIST_ATTR = 'data-astro-transition-persist';
// The History API does not tell you if navigation is forward or back, so // The History API does not tell you if navigation is forward or back, so
@ -193,7 +193,7 @@ const { fallback = 'animate' } = Astro.props as Props;
scrollTo(0, state.scrollY); // usings default scrollBehavior scrollTo(0, state.scrollY); // usings default scrollBehavior
} }
triggerEvent('astro:beforeload'); triggerEvent('astro:after-swap');
}; };
// Wait on links to finish, to prevent FOUC // Wait on links to finish, to prevent FOUC
@ -263,7 +263,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// document.documentElement.removeAttribute('data-astro-transition'); // document.documentElement.removeAttribute('data-astro-transition');
await runScripts(); await runScripts();
markScriptsExec(); markScriptsExec();
onload(); onPageLoad();
} }
} }
@ -383,7 +383,7 @@ const { fallback = 'animate' } = Astro.props as Props;
{ passive: true, capture: true } { passive: true, capture: true }
); );
}); });
addEventListener('load', onload); addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button. // There's not a good way to record scroll position before a back button.
// So the way we do it is by listening to scroll and just continuously recording it. // So the way we do it is by listening to scroll and just continuously recording it.
addEventListener( addEventListener(

2
packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro
View file

@ -6,7 +6,7 @@
} }
toggle(); toggle();
document.addEventListener('astro:beforeload', () => { document.addEventListener('astro:after-swap', () => {
toggle(); toggle();
}) })
</script> </script>

2
packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro
View file

@ -6,7 +6,7 @@ import Layout from '../components/Layout.astro';
<article id="twoarticle"></article> <article id="twoarticle"></article>
</Layout> </Layout>
<script> <script>
document.addEventListener('astro:load', () => { document.addEventListener('astro:page-load', () => {
document.getElementById('twoarticle')!.textContent = 'works'; document.getElementById('twoarticle')!.textContent = 'works';
}, { once: true }); }, { once: true });
</script> </script>

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

@ -181,7 +181,7 @@ test.describe('View Transitions', () => {
await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px'); await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px');
}); });
test('astro:load event fires when navigating to new page', async ({ page, astro }) => { test('astro:page-load event fires when navigating to new page', async ({ page, astro }) => {
// Go to page 1 // Go to page 1
await page.goto(astro.resolveUrl('/one')); await page.goto(astro.resolveUrl('/one'));
const p = page.locator('#one'); const p = page.locator('#one');
@ -193,14 +193,14 @@ test.describe('View Transitions', () => {
await expect(article, 'should have script content').toHaveText('works'); await expect(article, 'should have script content').toHaveText('works');
}); });
test('astro:load event fires when navigating directly to a page', async ({ page, astro }) => { test('astro:page-load event fires when navigating directly to a page', async ({ page, astro }) => {
// Go to page 2 // Go to page 2
await page.goto(astro.resolveUrl('/two')); await page.goto(astro.resolveUrl('/two'));
const article = page.locator('#twoarticle'); const article = page.locator('#twoarticle');
await expect(article, 'should have script content').toHaveText('works'); await expect(article, 'should have script content').toHaveText('works');
}); });
test('astro:beforeload event fires right before the swap', async ({ page, astro }) => { test('astro:after-swap event fires right after the swap', async ({ page, astro }) => {
// Go to page 1 // Go to page 1
await page.goto(astro.resolveUrl('/one')); await page.goto(astro.resolveUrl('/one'));
let p = page.locator('#one'); let p = page.locator('#one');