Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename the ViewTransitions component to ClientRouter #11980

Merged
merged 3 commits into from
Sep 13, 2024
Merged

Rename the ViewTransitions component to ClientRouter #11980

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb2fa33
Rename the ViewTransitions component to ClientRouter
matthewp Sep 12, 2024
a983825
oops, move
matthewp Sep 12, 2024
add38f4
Move it
matthewp Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/hip-wombats-exercise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
'astro': minor
---

ViewTransitions component renamed to ClientRouter

The `<ViewTransitions />` component has been renamed to `<ClientRouter />`. There are no other changes than the name. The old name will continue to work in Astro 5.x, but will be removed in 6.0.

This change was done to clarify the role of the component within Astro's View Transitions support. Astro supports View Transitions APIs in a few different ways, and renaming the component makes it more clear that the features you get from the ClientRouter component are slightly different from what you get using the native CSS-based MPA router.

We still intend to maintain the ClientRouter as before, and it's still important for use-cases that the native support doesn't cover, such as persisting state between pages.
4 changes: 2 additions & 2 deletions examples/starlog/src/components/BaseHead.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there at all a concern regarding the fact that you still import this from astro:transitions? Perhaps it should be exported from astro/components now as well and documented as such?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it's "not real view transitions"? It still uses view transitions; that's still the biggest part of the router. It's not like the other stuff inside astro:transitions are not also enhancements to view transitions. This is no different. It's just a rename to clarify that it's an enhancement.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant more so in a marketing sense. If we start selling this to users outside of the context of view transitions (e.g. "If you need a client side router, use this") it could be confusing why it's imported from astro:transitions

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still pretty deeply tied to view transitions. The fallback property is about view transitions. The animations that occur are view transitions. If you wanted to disable the animations you need to do transition:animate="none". It's not a traditional SPA style router and I don't think we should rethink everything just for a rename.

import SEO, { type Props as SEOProps } from './SEO.astro';
import { SiteTitle, SiteDescription } from '../consts';

Expand All @@ -17,4 +17,4 @@ const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...s
rel="stylesheet"
/>

<ViewTransitions />
<ClientRouter />
4 changes: 2 additions & 2 deletions examples/view-transitions/src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import '../styles/styles.css';
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
import Footer from '../components/Footer.astro';
import Nav from '../components/Nav.astro';

Expand All @@ -20,7 +20,7 @@ const { title } = Astro.props as Props;
<meta name="generator" content={Astro.generator} />
<meta name="view-transition" content="same-origin" />
<title>{title}</title>
<ViewTransitions />
<ClientRouter />
</head>
<body class="font-sans bg-gray-900 text-white">
<div class="h-screen overflow-hidden flex flex-col">
Expand Down
0 ...es/astro/components/ViewTransitions.astro → packages/astro/ClientRouter.astro
View file
Open in desktop
File renamed without changes.
8 changes: 6 additions & 2 deletions packages/astro/client.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,12 @@ declare module 'astro:transitions' {
export const fade: TransitionModule['fade'];
export const createAnimationScope: TransitionModule['createAnimationScope'];

type ViewTransitionsModule = typeof import('./components/ViewTransitions.astro');
export const ViewTransitions: ViewTransitionsModule['default'];
type ClientRouterModule = typeof import('./components/ClientRouter.astro');
/**
* @deprecated The ViewTransitions component has been renamed to ClientRouter
*/
export const ViewTransitions: ClientRouterModule['default'];
export const ClientRouter: ClientRouterModule['default'];
}

declare module 'astro:transitions/client' {
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
---
<html lang="en">
<head>
<title>View Transition Test</title>
<ViewTransitions />
<ClientRouter />
<script is:inline>
// let playwright know when navigate() is done
document.addEventListener('astro:before-swap', (e) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/view-transitions/src/components/AttributedLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
import { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'html'> {}
---
<html {...Astro.props}>
<head>
<title>Testing</title>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<main transition:animate="slide">
Expand Down
18 changes: 10 additions & 8 deletions packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
import DarkMode from './DarkMode.astro';

interface Props {
Expand All @@ -8,25 +8,27 @@ interface Props {

const { link } = Astro.props as Props;
---

<html>
<head>
<title>Testing</title>
{link ? <link rel="stylesheet" href={link} > : ''}
{link ? <link rel="stylesheet" href={link} /> : ''}
<style>
main {
max-width: 900px;
margin: auto;
}
}
</style>
<link rel="stylesheet" href="/styles.css">
<ViewTransitions handleForms />
<link rel="stylesheet" href="/styles.css" />
<ClientRouter handleForms />
<DarkMode />
<meta name="script-executions" content="0">
<meta charset="utf-8">
<meta name="script-executions" content="0" />
<meta charset="utf-8" />
<script is:inline defer>
{
// Increment a global to see if this is running more than once
globalThis.scriptExecutions = globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions;
globalThis.scriptExecutions =
globalThis.scriptExecutions == null ? -1 : globalThis.scriptExecutions;
globalThis.scriptExecutions++;
const el = document.querySelector('[name="script-executions"]');
el.setAttribute('content', globalThis.scriptExecutions);
Expand Down
16 changes: 8 additions & 8 deletions packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
---

<html>
<head>
<ViewTransitions/>
<ClientRouter />
</head>
<body>
<p>Local transitions</p>
<slot/>
<slot />
<script>
document.addEventListener("astro:after-swap", () => {
document.documentElement.setAttribute("class", "blue");
document.documentElement.setAttribute("animations", "" + document.getAnimations().length);
document.addEventListener('astro:after-swap', () => {
document.documentElement.setAttribute('class', 'blue');
document.documentElement.setAttribute('animations', '' + document.getAnimations().length);
});
</script>
</body>
<style>
</body><style>
p {
transition: color 1s;
}
Expand Down
15 changes: 8 additions & 7 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/abort.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
---

<html>
<head>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<h1>Abort</h1>
</body>
</html>
<script>
import {navigate } from 'astro:transitions/client';
import { navigate } from 'astro:transitions/client';

document.addEventListener('astro:before-preparation', (e) => {
const originalLoader = e.loader;
e.loader = async () => {
const result = await originalLoader();
if (e.to.href.endsWith("/two")) {
if (e.to.href.endsWith('/two')) {
// delay loading of /two
await new Promise((resolve) => setTimeout(resolve, 1100));
}
}
};
});
// starts later, but is faster and overtakes the slower navigation
setTimeout(()=>navigate("/one"), 400);
setTimeout(() => navigate('/one'), 400);
// starts now, but is to slow to keep its lead
navigate("/two");
navigate('/two');
</script>
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/abort2.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
import { ViewTransitions, fade } from 'astro:transitions';
import { ClientRouter, fade } from 'astro:transitions';
---
<html transition:animate="none">
<head>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<h1 transition:name="h1" transition:animate={fade({duration:500})}>Abort</h1>
Expand Down
9 changes: 5 additions & 4 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/client-load.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
---
import { ViewTransitions } from "astro:transitions";
import ClickToNavigate from "../components/ClickToNavigate.jsx"
import { ClientRouter } from 'astro:transitions';
import ClickToNavigate from '../components/ClickToNavigate.jsx';
---

<html>
<head>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load/>
<ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load />
</body>
</html>
17 changes: 9 additions & 8 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/dialog.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
---
import { ViewTransitions } from "astro:transitions";
import { ClientRouter } from 'astro:transitions';
---

<html>
<head>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<button id="open" onclick="modal.showModal()">Open Modal</button>
<dialog id="modal">
<form method="dialog">
<button id="close">Close</button>
</form>
</dialog>
<button id="open" onclick="modal.showModal()">Open Modal</button>
<dialog id="modal">
<form method="dialog">
<button id="close">Close</button>
</form>
</dialog>
</body>
</html>
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';
---

<html>
<head>
<ViewTransitions handleForms/>
<ClientRouter handleForms />
<meta charset="UTF-8" />
</head>
<body>
Expand Down
7 changes: 4 additions & 3 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/half-baked.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';

// For the test fixture, we import the script but we don't use the <ViewTransitions /> component
// For the test fixture, we import the script but we don't use the <ClientRouter /> component
// While this seems to be some strange mistake,
// it might be realistic, e.g. in a configurable CommonHead component

Expand All @@ -10,10 +10,11 @@ interface Props {
}
const { transitions } = Astro.props;
---

<html>
<head>
<title>Half-Baked</title>
{transitions && <ViewTransitions />}
{transitions && <ClientRouter />}
</head>
<body>
<main>
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';

---
<html>
<head>
<title>Testing</title>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<p id="one">One</p>
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';

---
<html>
<head>
<title>Testing</title>
<ViewTransitions />
<ClientRouter />
</head>
<body>
<p id="two">Two</p>
Expand Down
18 changes: 9 additions & 9 deletions packages/astro/e2e/view-transitions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should only be 1 page load').toEqual(1);
});

test('Moving to a page without ViewTransitions triggers a full page navigation', async ({
test('Moving to a page without ClientRouter triggers a full page navigation', async ({
page,
astro,
}) => {
Expand All @@ -125,7 +125,7 @@ test.describe('View Transitions', () => {
let p = page.locator('#one');
await expect(p, 'should have content').toHaveText('Page 1');

// Go to page 3 which does *not* have ViewTransitions enabled
// Go to page 3 which does *not* have ClientRouter enabled
await page.click('#click-three');
p = page.locator('#three');
await expect(p, 'should have content').toHaveText('Page 3');
Expand All @@ -136,7 +136,7 @@ test.describe('View Transitions', () => {
).toEqual(2);
});

test('Moving within a page without ViewTransitions does not trigger a full page navigation', async ({
test('Moving within a page without ClientRouter does not trigger a full page navigation', async ({
page,
astro,
}) => {
Expand All @@ -146,7 +146,7 @@ test.describe('View Transitions', () => {
let p = page.locator('#one');
await expect(p, 'should have content').toHaveText('Page 1');

// Go to page 3 which does *not* have ViewTransitions enabled
// Go to page 3 which does *not* have ClientRouter enabled
await page.click('#click-three');
p = page.locator('#three');
await expect(p, 'should have content').toHaveText('Page 3');
Expand All @@ -167,14 +167,14 @@ test.describe('View Transitions', () => {
).toEqual(2);
});

test('Moving from a page without ViewTransitions w/ back button', async ({ page, astro }) => {
test('Moving from a page without ClientRouter w/ back button', async ({ page, astro }) => {
const loads = collectLoads(page);
// 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
// Go to page 3 which does *not* have ClientRouter enabled
await page.click('#click-three');
p = page.locator('#three');
await expect(p, 'should have content').toHaveText('Page 3');
Expand Down Expand Up @@ -606,7 +606,7 @@ test.describe('View Transitions', () => {
await expect(loads.length, 'There should only be 1 page load').toEqual(1);
});

test('Importing ViewTransitions w/o using the component must not mess with history', async ({
test('Importing ClientRouter w/o using the component must not mess with history', async ({
page,
astro,
}) => {
Expand Down Expand Up @@ -706,7 +706,7 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should be 2 page load').toEqual(2);
});

test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({
test('Scroll position is restored on back navigation from page w/o ClientRouter', async ({
page,
astro,
}) => {
Expand All @@ -716,7 +716,7 @@ test.describe('View Transitions', () => {
let locator = page.locator('#click-external');
await expect(locator).toBeInViewport();

// Go to a page that has not enabled ViewTransitions
// Go to a page that has not enabled ClientRouter
await page.click('#click-external');
locator = page.locator('#three');
await expect(locator).toHaveText('Page 3');
Expand Down
Loading
Loading