feat(astro,clerk-js): View transitions support #4342

wobsoriano · 2024-10-16T17:45:55Z

Description

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-16T17:45:59Z

🦋 Changeset detected

Latest commit: 7915b29

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

This PR includes changesets to release 4 packages

Name	Type
@clerk/astro	Minor
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

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

wobsoriano · 2024-10-16T22:44:18Z

!snapshot

clerk-cookie · 2024-10-16T22:49:06Z

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

Package	Version
@clerk/astro	1.3.15-snapshot.v78908b6
@clerk/backend	1.14.0-snapshot.v78908b6
@clerk/chrome-extension	1.3.20-snapshot.v78908b6
@clerk/clerk-js	5.27.0-snapshot.v78908b6
@clerk/elements	0.16.2-snapshot.v78908b6
@clerk/clerk-expo	2.2.26-snapshot.v78908b6
@clerk/express	1.3.0-snapshot.v78908b6
@clerk/fastify	2.0.2-snapshot.v78908b6
@clerk/localizations	3.3.0-snapshot.v78908b6
@clerk/nextjs	5.7.4-snapshot.v78908b6
@clerk/clerk-react	5.12.0-snapshot.v78908b6
@clerk/remix	4.2.38-snapshot.v78908b6
@clerk/clerk-sdk-node	5.0.51-snapshot.v78908b6
@clerk/shared	2.9.2-snapshot.v78908b6
@clerk/tanstack-start	0.4.14-snapshot.v78908b6
@clerk/testing	1.3.12-snapshot.v78908b6
@clerk/themes	2.1.37-snapshot.v78908b6
@clerk/types	4.26.0-snapshot.v78908b6

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

wobsoriano · 2024-10-17T01:31:21Z

packages/clerk-js/src/core/clerk.ts

+   * For more info on the issue, see:
+   * https://github.com/withastro/astro/issues/11000
+   */
+  __internal_flushEmotionCache() {


@nikosdouvlis asking in advance here if there's a better way to access the internal emotion cache rather than what I did here. Any advice would do!

Issue: With Astro's View Transitions, navigating to a new page removes unnecessary head elements, including the emotion cache. Clearing the cache resolves this.

Yep, this adds 140KB to the bundle size so this is not a good solution

wobsoriano · 2024-10-17T01:45:14Z

packages/clerk-js/src/ui/Components.tsx

+    componentsControls.flushEmotionCache = () => {
+      emotionCache.sheet.flush();
+      emotionCache.inserted = {};
+      emotionCache.registered = {};
+    };


I got the idea here

wobsoriano · 2024-10-17T01:48:28Z

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

+            document.addEventListener('astro:page-load', async () => {
+              await runInjectionScript(${JSON.stringify(internalParams)});
+            })`,


This and astro:before-swap runs only on view transition enabled pages. This will run on load and every page navigation.

It mounts all Clerk components in the new document.

wobsoriano · 2024-10-17T01:49:59Z

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

+            document.addEventListener('astro:before-swap', async e => {
+              window.Clerk.__internal_flushEmotionCache();
+            });


This event will run before the new document replaces the current document.

The __internal_flushEmotionCache function fixes the issue where mounted components in the next document don't have styles. See implementation here

chore(astro,clerk-js): Initial support for view transitions

203b721

wobsoriano changed the title ~~chore(astro,clerk-js): View transitions support~~ feat(astro,clerk-js): View transitions support Oct 16, 2024

clerk-cookie added the clerk-js label Oct 16, 2024

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

d121fb0

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

wobsoriano added 2 commits October 16, 2024 14:12

chore: Move cache flush function to Components

c3afcbb

chore: clean up lockfile

286a9ee

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

wobsoriano added 2 commits October 16, 2024 14:21

chore: use built-in use cache hook

9cd9d12

chore: rename clear cache function

812a6b8

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

chore: directly import emotion cache

78908b6

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

wobsoriano added 5 commits October 16, 2024 16:13

chore: remove test comment

09cb9bd

chore: add changeset

726f7c3

chore: update changeset

3928246

chore: type improvements

18c28d4

chore: add comment about style loss in view transitions

ce98122

wobsoriano commented Oct 17, 2024

View reviewed changes

wobsoriano added 2 commits October 16, 2024 18:59

chore: remove unused async keyword

d37a5e7

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

7915b29

wobsoriano closed this Oct 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(astro,clerk-js): View transitions support #4342

feat(astro,clerk-js): View transitions support #4342

wobsoriano commented Oct 16, 2024

changeset-bot bot commented Oct 16, 2024 •

edited

Loading

wobsoriano commented Oct 16, 2024

clerk-cookie commented Oct 16, 2024

wobsoriano Oct 17, 2024 •

edited

Loading

wobsoriano Oct 17, 2024

wobsoriano Oct 17, 2024

wobsoriano Oct 17, 2024 •

edited

Loading

wobsoriano Oct 17, 2024 •

edited

Loading

feat(astro,clerk-js): View transitions support #4342

feat(astro,clerk-js): View transitions support #4342

Conversation

wobsoriano commented Oct 16, 2024

Description

Checklist

Type of change

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

🦋 Changeset detected

wobsoriano commented Oct 16, 2024

clerk-cookie commented Oct 16, 2024

wobsoriano Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

wobsoriano Oct 17, 2024

Choose a reason for hiding this comment

wobsoriano Oct 17, 2024

Choose a reason for hiding this comment

wobsoriano Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

wobsoriano Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

changeset-bot bot commented Oct 16, 2024 •

edited

Loading

wobsoriano Oct 17, 2024 •

edited

Loading

wobsoriano Oct 17, 2024 •

edited

Loading

wobsoriano Oct 17, 2024 •

edited

Loading