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

.changeset/perfect-singers-crash.md

@@ -0,0 +1,6 @@
+---
+"@clerk/astro": minor
+"@clerk/clerk-js": patch
+---
+
+Add support for Astro View Transitions

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

@@ -110,7 +110,16 @@ function createIntegration<Params extends HotloadAstroClerkIntegrationParams>()
             `
             ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''}
             import { runInjectionScript } from "${buildImportPath}";
-            await runInjectionScript(${JSON.stringify(internalParams)});`,
+
+            await runInjectionScript(${JSON.stringify(internalParams)});
+
+            document.addEventListener('astro:before-swap', () => {
+              window.Clerk.__internal_flushEmotionCache();
+            });
+
+            document.addEventListener('astro:page-load', async () => {
+              await runInjectionScript(${JSON.stringify(internalParams)});
+            })`,
           );
         },
       },

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

@@ -1526,6 +1526,17 @@ export class Clerk implements ClerkInterface {
     return this.navigate(to);
   }
 
+  /**
+   * This clears the emotion cache, which is particularly useful
+   * when working with Astro View Transitions to prevent style loss during page navigation.
+   *
+   * For more info on the issue, see:
+   * https://github.com/withastro/astro/issues/11000
+   */
+  __internal_flushEmotionCache() {
+    return this.#componentControls?.ensureMounted().then(controls => controls.flushEmotionCache());
+  }
+
   #hasJustSynced = () => getClerkQueryParam(CLERK_SYNCED) === 'true';
   #clearJustSynced = () => removeClerkQueryParam(CLERK_SYNCED);
 

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

@@ -39,6 +39,7 @@ import {
   LazyProviders,
   OrganizationSwitcherPrefetch,
 } from './lazyModules/providers';
+import { emotionCache } from './styledSystem/InternalThemeProvider';
 import type { AvailableComponentProps } from './types';
 
 const ROOT_ELEMENT_ID = 'clerk-components';
@@ -90,6 +91,7 @@ export type ComponentControls = {
     },
   ) => void;
   prefetch: (component: 'organizationSwitcher') => void;
+  flushEmotionCache: () => void;
   // Special case, as the impersonation fab mounts automatically
   mountImpersonationFab: () => void;
 };
@@ -309,6 +311,12 @@ const Components = (props: ComponentsProps) => {
       setState(s => ({ ...s, [`${component}Prefetch`]: true }));
     };
 
+    componentsControls.flushEmotionCache = () => {
+      emotionCache.sheet.flush();
+      emotionCache.inserted = {};
+      emotionCache.registered = {};
+    };
+
     props.onComponentsMounted();
   }, []);
 

packages/clerk-js/src/ui/styledSystem/InternalThemeProvider.tsx

@@ -9,7 +9,7 @@ import type { InternalTheme } from './index';
 
 const el = document.querySelector('style#cl-style-insertion-point');
 
-const cache = createCache({
+export const emotionCache = createCache({
   key: 'cl-internal',
   prepend: !el,
   insertionPoint: el ? (el as HTMLElement) : undefined,
@@ -23,7 +23,7 @@ export const InternalThemeProvider = (props: InternalThemeProviderProps) => {
   const { parsedInternalTheme } = useAppearance();
 
   return (
-    <CacheProvider value={cache}>
+    <CacheProvider value={emotionCache}>
       <ThemeProvider theme={parsedInternalTheme}>{props.children}</ThemeProvider>
     </CacheProvider>
   );