feat(*): Wire clerkUIVersion through all framework packages (#7740)

Author: nikosdouvlis

.changeset/eager-baboons-sink.md

@@ -0,0 +1,10 @@
+---
+"@clerk/astro": patch
+"@clerk/express": patch
+"@clerk/nextjs": patch
+"@clerk/nuxt": patch
+"@clerk/react-router": patch
+"@clerk/tanstack-react-start": patch
+---
+
+Wire `clerkUIVersion` option through all framework packages

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

@@ -174,9 +174,9 @@ function createClerkEnvSchema() {
     PUBLIC_CLERK_DOMAIN: envField.string({ context: 'client', access: 'public', optional: true, url: true }),
     PUBLIC_CLERK_JS_URL: envField.string({ context: 'client', access: 'public', optional: true, url: true }),
     PUBLIC_CLERK_JS_VERSION: envField.string({ context: 'client', access: 'public', optional: true }),
+    PUBLIC_CLERK_UI_URL: envField.string({ context: 'client', access: 'public', optional: true, url: true }),
     PUBLIC_CLERK_UI_VERSION: envField.string({ context: 'client', access: 'public', optional: true }),
     PUBLIC_CLERK_PREFETCH_UI: envField.string({ context: 'client', access: 'public', optional: true }),
-    PUBLIC_CLERK_UI_URL: envField.string({ context: 'client', access: 'public', optional: true, url: true }),
     PUBLIC_CLERK_TELEMETRY_DISABLED: envField.boolean({ context: 'client', access: 'public', optional: true }),
     PUBLIC_CLERK_TELEMETRY_DEBUG: envField.boolean({ context: 'client', access: 'public', optional: true }),
     CLERK_SECRET_KEY: envField.string({ context: 'server', access: 'secret' }),

packages/express/src/utils.ts

@@ -13,6 +13,7 @@ export const loadClientEnv = () => {
     clerkJSUrl: process.env.CLERK_JS || process.env.CLERK_JS_URL || '',
     clerkJSVersion: process.env.CLERK_JS_VERSION || '',
     clerkUIUrl: process.env.CLERK_UI_URL || '',
+    clerkUIVersion: process.env.CLERK_UI_VERSION || '',
     prefetchUI: process.env.CLERK_PREFETCH_UI === 'false' ? false : undefined,
   };
 };

packages/nextjs/src/server/constants.ts

@@ -3,6 +3,7 @@ import { isTruthy } from '@clerk/shared/underscore';
 
 export const CLERK_JS_VERSION = process.env.NEXT_PUBLIC_CLERK_JS_VERSION || '';
 export const CLERK_JS_URL = process.env.NEXT_PUBLIC_CLERK_JS_URL || '';
+export const CLERK_UI_VERSION = process.env.NEXT_PUBLIC_CLERK_UI_VERSION || '';
 export const CLERK_UI_URL = process.env.NEXT_PUBLIC_CLERK_UI_URL || '';
 export const API_VERSION = process.env.CLERK_API_VERSION || 'v1';
 export const SECRET_KEY = process.env.CLERK_SECRET_KEY || '';

packages/nextjs/src/utils/clerk-script.tsx

@@ -38,7 +38,8 @@ function ClerkScript(props: ClerkScriptProps) {
 }
 
 export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) {
-  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, prefetchUI, ui } = useClerkNextOptions();
+  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, clerkUIVersion, nonce, prefetchUI, ui } =
+    useClerkNextOptions();
   const { domain, proxyUrl } = useClerk();
 
   if (!publishableKey) {
@@ -50,6 +51,7 @@ export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] })
     clerkJSUrl,
     clerkJSVersion,
     clerkUIUrl,
+    clerkUIVersion,
     nonce,
     domain,
     proxyUrl,

packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts

@@ -25,6 +25,7 @@ export const mergeNextClerkPropsWithEnv = (props: Omit<NextClerkProviderProps, '
     clerkJSUrl: props.clerkJSUrl || process.env.NEXT_PUBLIC_CLERK_JS_URL,
     clerkJSVersion: props.clerkJSVersion || process.env.NEXT_PUBLIC_CLERK_JS_VERSION,
     clerkUIUrl: props.clerkUIUrl || process.env.NEXT_PUBLIC_CLERK_UI_URL,
+    clerkUIVersion: props.clerkUIVersion || process.env.NEXT_PUBLIC_CLERK_UI_VERSION,
     prefetchUI: getPrefetchUIFromEnvAndProps(props.prefetchUI),
     proxyUrl: props.proxyUrl || process.env.NEXT_PUBLIC_CLERK_PROXY_URL || '',
     domain: props.domain || process.env.NEXT_PUBLIC_CLERK_DOMAIN || '',

packages/nuxt/src/module.ts

@@ -69,6 +69,7 @@ export default defineNuxtModule<ModuleOptions>({
           jsUrl: options.clerkJSUrl,
           uiUrl: options.clerkUIUrl,
           clerkJSVersion: options.clerkJSVersion,
+          clerkUIVersion: options.clerkUIVersion,
           // prefetchUI config: can be false or undefined
           prefetchUI: options.prefetchUI,
           isSatellite: options.isSatellite,

packages/react-router/src/client/ReactRouterClerkProvider.tsx

@@ -64,6 +64,7 @@ function ClerkProviderBase<TUi extends Ui = Ui>({ children, ...rest }: ClerkProv
     __clerkJSUrl,
     __clerkJSVersion,
     __clerkUIUrl,
+    __clerkUIVersion,
     __prefetchUI,
     __telemetryDisabled,
     __telemetryDebug,
@@ -95,6 +96,7 @@ function ClerkProviderBase<TUi extends Ui = Ui>({ children, ...rest }: ClerkProv
     clerkJSUrl: __clerkJSUrl,
     clerkJSVersion: __clerkJSVersion,
     clerkUIUrl: __clerkUIUrl,
+    clerkUIVersion: __clerkUIVersion,
     prefetchUI: __prefetchUI,
     telemetry: {
       disabled: __telemetryDisabled,

packages/react-router/src/client/types.ts

@@ -21,6 +21,7 @@ export type ClerkState = {
     __clerkJSUrl: string | undefined;
     __clerkJSVersion: string | undefined;
     __clerkUIUrl: string | undefined;
+    __clerkUIVersion: string | undefined;
     __prefetchUI: boolean | undefined;
     __telemetryDisabled: boolean | undefined;
     __telemetryDebug: boolean | undefined;

packages/react-router/src/server/utils.ts

@@ -98,6 +98,7 @@ export function getResponseClerkState(requestState: RequestStateWithRedirectUrls
     __clerkJSUrl: envVars.clerkJsUrl,
     __clerkJSVersion: envVars.clerkJsVersion,
     __clerkUIUrl: envVars.clerkUIUrl,
+    __clerkUIVersion: envVars.clerkUIVersion,
     __prefetchUI: envVars.prefetchUI,
     __telemetryDisabled: envVars.telemetryDisabled,
     __telemetryDebug: envVars.telemetryDebug,