fix(astro): preserve bundled ui in injected scripts

Author: jescalan

.changeset/astro-bundled-ui-serialization.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': patch
+---
+
+Fix bundled Clerk UI initialization when `ui` is passed to the Astro integration.

packages/astro/src/integration/__tests__/snippets.test.ts

@@ -0,0 +1,67 @@
+import type { ClerkOptions } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { buildBeforeHydrationSnippet, buildPageLoadSnippet } from '../snippets';
+
+const buildSnippetOptions = (internalParams: ClerkOptions) => ({
+  command: 'build',
+  packageName: '@clerk/astro',
+  buildImportPath: '@clerk/astro/internal',
+  internalParams,
+});
+
+describe('integration snippets', () => {
+  it('imports bundled Clerk UI instead of serializing the constructor for before-hydration scripts', () => {
+    class ClerkUI {}
+
+    const snippet = buildBeforeHydrationSnippet(
+      buildSnippetOptions({
+        publishableKey: 'pk_test_123',
+        ui: {
+          __brand: '__clerkUI',
+          version: '1.2.3',
+          ClerkUI,
+        },
+      } as unknown as ClerkOptions),
+    );
+
+    expect(snippet).toContain('import { ui as __internal_clerkAstroUi } from "@clerk/ui";');
+    expect(snippet).toContain(
+      'await runInjectionScript({ ...{"publishableKey":"pk_test_123","ui":{"__brand":"__clerkUI","version":"1.2.3"}}, ui: __internal_clerkAstroUi });',
+    );
+  });
+
+  it('imports bundled Clerk UI for page-load scripts including view-transition reinitialization', () => {
+    class ClerkUI {}
+
+    const snippet = buildPageLoadSnippet(
+      buildSnippetOptions({
+        publishableKey: 'pk_test_123',
+        ui: {
+          __brand: '__clerkUI',
+          version: '1.2.3',
+          ClerkUI,
+        },
+      } as unknown as ClerkOptions),
+    );
+
+    expect(snippet).toContain('import { ui as __internal_clerkAstroUi } from "@clerk/ui";');
+    expect(snippet).toContain(
+      '...{ ...{"publishableKey":"pk_test_123","ui":{"__brand":"__clerkUI","version":"1.2.3"}}, ui: __internal_clerkAstroUi },',
+    );
+    expect(snippet).toContain(
+      'await runInjectionScript({ ...{"publishableKey":"pk_test_123","ui":{"__brand":"__clerkUI","version":"1.2.3"}}, ui: __internal_clerkAstroUi });',
+    );
+  });
+
+  it('keeps default snippets free of the bundled UI import', () => {
+    const snippet = buildBeforeHydrationSnippet(
+      buildSnippetOptions({
+        publishableKey: 'pk_test_123',
+      } as unknown as ClerkOptions),
+    );
+
+    expect(snippet).not.toContain('@clerk/ui');
+    expect(snippet).toContain('await runInjectionScript({"publishableKey":"pk_test_123"});');
+  });
+});

packages/astro/src/integration/snippets.ts

@@ -1,5 +1,21 @@
 import type { ClerkOptions } from '@clerk/shared/types';
 
+function buildInternalParamsExpression(internalParams: ClerkOptions) {
+  const serializedParams = JSON.stringify(internalParams);
+
+  if (!internalParams.ui) {
+    return {
+      imports: '',
+      params: serializedParams,
+    };
+  }
+
+  return {
+    imports: 'import { ui as __internal_clerkAstroUi } from "@clerk/ui";',
+    params: `{ ...${serializedParams}, ui: __internal_clerkAstroUi }`,
+  };
+}
+
 /**
  * Creates a snippet that initializes Clerk before client-side framework hydration occurs.
  *
@@ -24,10 +40,13 @@ export function buildBeforeHydrationSnippet({
   buildImportPath: string;
   internalParams: ClerkOptions;
 }) {
+  const { imports, params } = buildInternalParamsExpression(internalParams);
+
   return `
   ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: before-hydration")` : ''}
+  ${imports}
   import { runInjectionScript } from "${buildImportPath}";
-  await runInjectionScript(${JSON.stringify(internalParams)});`;
+  await runInjectionScript(${params});`;
 }
 
 /**
@@ -59,8 +78,11 @@ export function buildPageLoadSnippet({
   buildImportPath: string;
   internalParams: ClerkOptions;
 }) {
+  const { imports, params } = buildInternalParamsExpression(internalParams);
+
   return `
   ${command === 'dev' ? `console.log("${packageName}","Initialize Clerk: page")` : ''}
+  ${imports}
   import { runInjectionScript, swapDocument } from "${buildImportPath}";
 
   // Taken from https://github.com/withastro/astro/blob/e10b03e88c22592fbb42d7245b65c4f486ab736d/packages/astro/src/transitions/router.ts#L39.
@@ -89,12 +111,12 @@ export function buildPageLoadSnippet({
       const { navigate } = await import('astro:transitions/client');
 
       await runInjectionScript({
-        ...${JSON.stringify(internalParams)},
+        ...${params},
         routerPush: navigate,
         routerReplace: (url) => navigate(url, { history: 'replace' }),
       });
     })
   } else {
-    await runInjectionScript(${JSON.stringify(internalParams)});
+    await runInjectionScript(${params});
   }`;
 }