feat(astro): Add support for View Transitions #4354

wobsoriano · 2024-10-17T17:21:01Z

Description

This PR adds Astro View Transitions support to our Clerk components. It is basically the "SPA mode" for Astro.

Before this change, Clerk components didn't work properly with Astro View Transitions. When using the <ViewTransitions /> component in an Astro app, our Clerk components weren't remounting during page navigation.

The solution was to:

Run the runInjectionScript function in the astro:page-load to ensure Clerk components are properly mounted when switching pages.
Create a custom swap function and keep the elements added by @emotion/cache. This maintains the styling across page transitions.

Here's a basic demo using <SignIn />, <UserProfile /> and <UserButton /> components being rendered in a view transitions enabled pages:

Screen.Recording.2024-10-17.at.1.10.21.PM.mov

Resolves ECO-64

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-10-17T17:21:04Z

🦋 Changeset detected

Latest commit: b58e76b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/astro/src/integration/create-integration.ts

wobsoriano · 2024-10-17T20:36:28Z

packages/astro/src/internal/swap-document.ts

+  const emotionElements = document.querySelectorAll(`style[${EMOTION_ATTR}]`);
+  swapHeadElements(doc, Array.from(emotionElements));


We need to keep the <style> element added by @emotion/cache to keep the styling when switching between pages.

The default Astro swap function will remove this one

panteliselef

Seems great. In the video, i see that the "afterSignIn" navigation did not run with the page transitions (fade-in/out). Is this expected ?

panteliselef · 2024-10-18T10:05:55Z

packages/astro/src/internal/swap-document.ts

@@ -0,0 +1,61 @@
+// eslint-disable-next-line import/no-unresolved
+import { swapFunctions } from 'astro:transitions/client';


❓ Is this always bundled with Astro ? Is there a case where the module will not exists causing our integration to break ?

It is indeed bundled with Astro (astro/virtual-modules/transitions-swap-functions.js), but is not available in Astro v3.

Also we let the Astro Vite plugin handle it by excluding from vite.optimizeDeps:

javascript/packages/astro/src/integration/vite-plugin-astro-config.ts

Line 30 in b58e76b

config.optimizeDeps?.exclude?.push('astro:transitions/client');

wobsoriano · 2024-10-18T15:15:39Z

Seems great. In the video, i see that the "afterSignIn" navigation did not run with the page transitions (fade-in/out). Is this expected ?

Good catch! I've added another update that will use the navigate method from astro:transitions/client if transition is enabled on a page:

Screen.Recording.2024-10-18.at.7.59.28.AM.mov

It should now handle any routing within the components too

wobsoriano · 2024-10-18T15:44:55Z

!snapshot

clerk-cookie · 2024-10-18T15:49:22Z

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.4.0-snapshot.vb58e76b
@clerk/backend	1.14.2-snapshot.vb58e76b
@clerk/chrome-extension	1.3.21-snapshot.vb58e76b
@clerk/clerk-js	5.28.0-snapshot.vb58e76b
@clerk/elements	0.17.0-snapshot.vb58e76b
@clerk/clerk-expo	2.2.27-snapshot.vb58e76b
@clerk/express	1.3.2-snapshot.vb58e76b
@clerk/fastify	2.0.4-snapshot.vb58e76b
@clerk/localizations	3.3.1-snapshot.vb58e76b
@clerk/nextjs	5.8.0-snapshot.vb58e76b
@clerk/clerk-react	5.12.1-snapshot.vb58e76b
@clerk/remix	4.2.40-snapshot.vb58e76b
@clerk/clerk-sdk-node	5.0.53-snapshot.vb58e76b
@clerk/shared	2.10.0-snapshot.vb58e76b
@clerk/tanstack-start	0.4.16-snapshot.vb58e76b
@clerk/testing	1.3.14-snapshot.vb58e76b
@clerk/themes	2.1.38-snapshot.vb58e76b
@clerk/types	4.27.0-snapshot.vb58e76b

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

mlafeldt · 2024-11-06T18:20:30Z

Hey @wobsoriano!

I'm using @clerk/astro v1.4.7, which should contain this change. However, I'm still seeing exactly this behavior on Cloudflare Pages with the UserButton disappearing randomly on navigation:

Before this change, Clerk components didn't work properly with Astro View Transitions. When using the <ViewTransitions /> component in an Astro app, our Clerk components weren't remounting during page navigation.

My workaround is to use UserButton from @clerk/astro/react instead of @clerk/astro/components, which works fine.

Maybe they changed something in the latest Astro release?

❯ bun astro info
Astro                    v4.16.9
Node                     v22.9.0
System                   macOS (arm64)
Package Manager          bun
Output                   hybrid
Adapter                  @astrojs/cloudflare
Integrations             @clerk/astro/integration
                         @astrojs/react
                         @astrojs/tailwind

wobsoriano · 2024-11-06T18:27:28Z

@mlafeldt that is interesting. I will try and update my astro template here and check if the UI components from @clerk/astro/components fails 👀

mlafeldt · 2024-11-06T19:10:56Z

@wobsoriano It looks like the UserButton disappears when navigating between pre-rendered and server-rendered pages. One page in my app uses React without SSR. Adding export const prerender = false to that page fixes the problem.

feat(astro): Add support for View Transitions

84773f6

chore: add changeset

4311c3c

clerk-cookie added the integration label Oct 17, 2024

wobsoriano added 3 commits October 17, 2024 10:39

chore: Improve variables and comments

5727a57

chore: keep div element created by Clerk in new document

1c59384

test(astro): Add initial e2e

8765cd4

wobsoriano removed the integration label Oct 17, 2024

test: improve view transition e2e

1946e59

clerk-cookie added the integration label Oct 17, 2024

wobsoriano added 4 commits October 17, 2024 12:53

test: fix vite error

12568f7

test: fix vite error

2324c73

test: add more guide comments

9160f13

test: add vite fix to hybrid test

695e25f

wobsoriano commented Oct 17, 2024

View reviewed changes

packages/astro/src/integration/create-integration.ts Outdated Show resolved Hide resolved

Merge branch 'main' into rob/eco-64-astro-view-transitions-support

9201794

wobsoriano marked this pull request as ready for review October 17, 2024 20:29

wobsoriano requested review from panteliselef and LekoArts October 17, 2024 20:32

wobsoriano commented Oct 17, 2024

View reviewed changes

test: fix vite optimize deps error

6963147

panteliselef approved these changes Oct 18, 2024

View reviewed changes

chore: improve navigation

a2afb95

Merge branch 'main' into rob/eco-64-astro-view-transitions-support

8e9a101

wobsoriano marked this pull request as draft October 18, 2024 15:36

chore: exclude astro transitions imports from optimized deps

b58e76b

clerk deleted a comment from clerk-cookie Oct 18, 2024

wobsoriano marked this pull request as ready for review October 18, 2024 15:51

wobsoriano merged commit 9d34d4f into main Oct 18, 2024
21 checks passed

wobsoriano deleted the rob/eco-64-astro-view-transitions-support branch October 18, 2024 16:02

clerk-cookie mentioned this pull request Oct 18, 2024

ci(repo): Version packages #4358

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(astro): Add support for View Transitions #4354

feat(astro): Add support for View Transitions #4354

wobsoriano commented Oct 17, 2024 •

edited

Loading

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

wobsoriano Oct 17, 2024

panteliselef left a comment

panteliselef Oct 18, 2024 •

edited

Loading

wobsoriano Oct 18, 2024 •

edited

Loading

wobsoriano commented Oct 18, 2024 •

edited

Loading

wobsoriano commented Oct 18, 2024

clerk-cookie commented Oct 18, 2024

mlafeldt commented Nov 6, 2024

wobsoriano commented Nov 6, 2024

mlafeldt commented Nov 6, 2024

		const emotionElements = document.querySelectorAll(`style[${EMOTION_ATTR}]`);
		swapHeadElements(doc, Array.from(emotionElements));

		@@ -0,0 +1,61 @@
		// eslint-disable-next-line import/no-unresolved
		import { swapFunctions } from 'astro:transitions/client';

feat(astro): Add support for View Transitions #4354

feat(astro): Add support for View Transitions #4354

Conversation

wobsoriano commented Oct 17, 2024 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Oct 17, 2024 • edited Loading

🦋 Changeset detected

wobsoriano Oct 17, 2024

Choose a reason for hiding this comment

panteliselef left a comment

Choose a reason for hiding this comment

panteliselef Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

wobsoriano Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

wobsoriano commented Oct 18, 2024 • edited Loading

wobsoriano commented Oct 18, 2024

clerk-cookie commented Oct 18, 2024

mlafeldt commented Nov 6, 2024

wobsoriano commented Nov 6, 2024

mlafeldt commented Nov 6, 2024

wobsoriano commented Oct 17, 2024 •

edited

Loading

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

panteliselef Oct 18, 2024 •

edited

Loading

wobsoriano Oct 18, 2024 •

edited

Loading

wobsoriano commented Oct 18, 2024 •

edited

Loading