feat(vue,astro): support ui versioning

Author: nikosdouvlis

packages/astro/package.json

@@ -94,6 +94,7 @@
     "nanostores": "1.0.1"
   },
   "devDependencies": {
+    "@clerk/ui": "workspace:^",
     "astro": "^5.15.3"
   },
   "peerDependencies": {

packages/astro/src/internal/create-clerk-instance.ts

@@ -5,6 +5,7 @@ import {
 } from '@clerk/shared/loadClerkJsScript';
 import type { ClerkOptions } from '@clerk/shared/types';
 import type { ClerkUiConstructor } from '@clerk/shared/ui';
+import type { Ui } from '@clerk/ui/internal';
 
 import { $clerkStore } from '../stores/external';
 import { $clerk, $csrState } from '../stores/internal';
@@ -34,7 +35,7 @@ function createNavigationHandler(
  */
 const createClerkInstance = runOnce(createClerkInstanceInternal);
 
-async function createClerkInstanceInternal(options?: AstroClerkCreateInstanceParams) {
+async function createClerkInstanceInternal<TUi extends Ui = Ui>(options?: AstroClerkCreateInstanceParams<TUi>) {
   let clerkJSInstance = window.Clerk;
   let clerkUiCtor: Promise<ClerkUiConstructor> | undefined;
 
@@ -63,16 +64,18 @@ async function createClerkInstanceInternal(options?: AstroClerkCreateInstancePar
     $clerk.set(clerkJSInstance);
   }
 
-  initOptions = {
+  const clerkOptions = {
     routerPush: createNavigationHandler(window.history.pushState.bind(window.history)),
     routerReplace: createNavigationHandler(window.history.replaceState.bind(window.history)),
     ...options,
     // Pass the clerk-ui constructor promise to clerk.load()
     clerkUiCtor,
-  };
+  } as unknown as ClerkOptions;
+
+  initOptions = clerkOptions;
 
   return clerkJSInstance
-    .load(initOptions)
+    .load(clerkOptions)
     .then(() => {
       $csrState.setKey('isLoaded', true);
       // Notify subscribers that $clerkStore has been loaded.
@@ -94,16 +97,17 @@ async function createClerkInstanceInternal(options?: AstroClerkCreateInstancePar
     .catch(() => {});
 }
 
-function updateClerkOptions(options: AstroClerkUpdateOptions) {
+function updateClerkOptions<TUi extends Ui = Ui>(options: AstroClerkUpdateOptions<TUi>) {
   const clerk = $clerk.get();
   if (!clerk) {
     throw new Error('Missing clerk instance');
   }
-  // `__unstable__updateProps` is not exposed as public API from `@clerk/types`
-  void (clerk as any).__unstable__updateProps({
+  const updateOptions = {
     options: { ...initOptions, ...options },
     appearance: { ...initOptions?.appearance, ...options.appearance },
-  });
+  } as unknown as { options: ClerkOptions; appearance?: any };
+  // `__unstable__updateProps` is not exposed as public API from `@clerk/types`
+  void (clerk as any).__unstable__updateProps(updateOptions);
 }
 
 export { createClerkInstance, updateClerkOptions };

packages/astro/src/types.ts

@@ -7,10 +7,13 @@ import type {
   Without,
 } from '@clerk/shared/types';
 import type { ClerkUiConstructor } from '@clerk/shared/ui';
+import type { Appearance, Ui } from '@clerk/ui/internal';
 
-type AstroClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
+type AstroClerkUpdateOptions<TUi extends Ui = Ui> = Pick<ClerkOptions, 'localization'> & {
+  appearance?: Appearance<TUi>;
+};
 
-type AstroClerkIntegrationParams = Without<
+type AstroClerkIntegrationParams<TUi extends Ui = Ui> = Without<
   ClerkOptions,
   | 'isSatellite'
   | 'sdkMetadata'
@@ -21,8 +24,10 @@ type AstroClerkIntegrationParams = Without<
   | 'routerPush'
   | 'polling'
   | 'touchSession'
+  | 'appearance'
 > &
   MultiDomainAndOrProxyPrimitives & {
+    appearance?: Appearance<TUi>;
     clerkJSUrl?: string;
     clerkJSVariant?: 'headless' | '';
     clerkJSVersion?: string;
@@ -32,7 +37,9 @@ type AstroClerkIntegrationParams = Without<
     clerkUiUrl?: string;
   };
 
-type AstroClerkCreateInstanceParams = AstroClerkIntegrationParams & { publishableKey: string };
+type AstroClerkCreateInstanceParams<TUi extends Ui = Ui> = AstroClerkIntegrationParams<TUi> & {
+  publishableKey: string;
+};
 
 // Copied from `@clerk/react`
 export interface HeadlessBrowserClerk extends Clerk {

packages/vue/package.json

@@ -66,6 +66,7 @@
     "@clerk/shared": "workspace:^"
   },
   "devDependencies": {
+    "@clerk/ui": "workspace:^",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue.ts/tsx-auto-props": "^0.6.0",

packages/vue/src/plugin.ts

@@ -4,13 +4,15 @@ import { loadClerkJsScript, type LoadClerkJsScriptOptions, loadClerkUiScript } f
 import type {
   Clerk,
   ClientResource,
+  ClerkOptions,
   InitialState,
   IsomorphicClerkOptions,
   MultiDomainAndOrProxy,
   Resources,
   Without,
 } from '@clerk/shared/types';
 import type { ClerkUiConstructor } from '@clerk/shared/ui';
+import type { Appearance, Ui } from '@clerk/ui/internal';
 import type { Plugin } from 'vue';
 import { computed, ref, shallowRef, triggerRef } from 'vue';
 
@@ -22,9 +24,10 @@ declare global {
   }
 }
 
-export type PluginOptions = Without<IsomorphicClerkOptions, 'domain' | 'proxyUrl'> &
+export type PluginOptions<TUi extends Ui = Ui> = Without<IsomorphicClerkOptions, 'domain' | 'proxyUrl' | 'appearance'> &
   MultiDomainAndOrProxy & {
     initialState?: InitialState;
+    appearance?: Appearance<TUi>;
   };
 
 const SDK_METADATA = {
@@ -52,7 +55,7 @@ const SDK_METADATA = {
  * ```
  */
 export const clerkPlugin: Plugin<[PluginOptions]> = {
-  install(app, pluginOptions) {
+  install<TUi extends Ui = Ui>(app: any, pluginOptions: PluginOptions<TUi>) {
     const { initialState } = pluginOptions || {};
 
     const loaded = shallowRef(false);
@@ -93,7 +96,8 @@ export const clerkPlugin: Plugin<[PluginOptions]> = {
           }
 
           clerk.value = window.Clerk;
-          await window.Clerk.load({ ...options, clerkUiCtor: clerkUiCtorPromise });
+          const loadOptions = { ...options, clerkUiCtor: clerkUiCtorPromise } as unknown as ClerkOptions;
+          await window.Clerk.load(loadOptions);
           loaded.value = true;
 
           if (clerk.value) {

packages/vue/src/utils/updateClerkOptions.ts

@@ -1,6 +1,9 @@
 import type { ClerkOptions } from '@clerk/shared/types';
+import type { Appearance, Ui } from '@clerk/ui/internal';
 
-type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
+type ClerkUpdateOptions<TUi extends Ui = Ui> = Pick<ClerkOptions, 'localization'> & {
+  appearance?: Appearance<TUi>;
+};
 
 /**
  * Updates Clerk's options at runtime.
@@ -9,23 +12,25 @@ type ClerkUpdateOptions = Pick<ClerkOptions, 'appearance' | 'localization'>;
  *
  * @example
  * import { frFR } from '@clerk/localizations';
- * import { dark } from '@clerk/themes';
+ * import { dark } from '@clerk/ui/themes';
  *
  * updateClerkOptions({
  *   appearance: { baseTheme: dark },
  *   localization: frFR
  * });
  */
-export function updateClerkOptions(options: ClerkUpdateOptions) {
+export function updateClerkOptions<TUi extends Ui = Ui>(options: ClerkUpdateOptions<TUi>) {
   if (!window.Clerk) {
     throw new Error('Missing Clerk instance');
   }
 
-  // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
-  void window.Clerk.__unstable__updateProps({
+  const updateOptions = {
     options: {
       localization: options.localization,
     },
     appearance: options.appearance,
-  });
+  } as unknown as { options: any; appearance?: any };
+
+  // @ts-expect-error - `__unstable__updateProps` is not exposed as public API from `@clerk/types`
+  void window.Clerk.__unstable__updateProps(updateOptions);
 }