feat(*): Wire clerkUIVersion through all framework packages

.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

@@ -177,6 +177,7 @@ function createClerkEnvSchema() {
     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_UI_VERSION: envField.string({ context: 'client', access: 'public', optional: 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,
@@ -93,6 +94,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

@@ -96,6 +96,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,

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

@@ -17,6 +17,7 @@ export const getPublicEnvVariables = (context: AppLoadContext | undefined) => {
     clerkJsUrl: getValue('CLERK_JS_URL'),
     clerkJsVersion: getValue('CLERK_JS_VERSION'),
     clerkUIUrl: getValue('CLERK_UI_URL'),
+    clerkUIVersion: getValue('CLERK_UI_VERSION'),
     prefetchUI: getValue('CLERK_PREFETCH_UI') === 'false' ? false : undefined,
     telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
     telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),

packages/tanstack-react-start/src/client/types.ts

@@ -19,6 +19,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/tanstack-react-start/src/client/utils.ts

@@ -21,6 +21,7 @@ export const pickFromClerkInitState = (
     __clerkJSUrl,
     __clerkJSVersion,
     __clerkUIUrl,
+    __clerkUIVersion,
     __telemetryDisabled,
     __telemetryDebug,
     __signInForceRedirectUrl,
@@ -43,6 +44,7 @@ export const pickFromClerkInitState = (
     clerkJSUrl: __clerkJSUrl,
     clerkJSVersion: __clerkJSVersion,
     clerkUIUrl: __clerkUIUrl,
+    clerkUIVersion: __clerkUIVersion,
     prefetchUI: __prefetchUI,
     telemetry: {
       disabled: __telemetryDisabled,
@@ -69,6 +71,7 @@ export const mergeWithPublicEnvs = (restInitState: any) => {
     clerkJSUrl: restInitState.clerkJSUrl || envVars.clerkJsUrl,
     clerkJSVersion: restInitState.clerkJSVersion || envVars.clerkJsVersion,
     clerkUIUrl: restInitState.clerkUIUrl || envVars.clerkUIUrl,
+    clerkUIVersion: restInitState.clerkUIVersion || envVars.clerkUIVersion,
     signInForceRedirectUrl: restInitState.signInForceRedirectUrl,
     prefetchUI: restInitState.prefetchUI ?? envVars.prefetchUI,
   };

packages/tanstack-react-start/src/server/constants.ts

@@ -10,6 +10,8 @@ export const commonEnvs = () => {
     // Public environment variables
     CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
     CLERK_JS_URL: publicEnvs.clerkJsUrl,
+    CLERK_UI_URL: publicEnvs.clerkUIUrl,
+    CLERK_UI_VERSION: publicEnvs.clerkUIVersion,
     PREFETCH_UI: publicEnvs.prefetchUI,
     PUBLISHABLE_KEY: publicEnvs.publishableKey,
     DOMAIN: publicEnvs.domain,

packages/tanstack-react-start/src/server/utils/index.ts

@@ -44,6 +44,7 @@ export function getResponseClerkState(requestState: RequestState, additionalStat
     __clerkJSUrl: getEnvVariable('CLERK_JS') || getEnvVariable('CLERK_JS_URL'),
     __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
     __clerkUIUrl: getEnvVariable('CLERK_UI_URL'),
+    __clerkUIVersion: getEnvVariable('CLERK_UI_VERSION'),
     __prefetchUI: getPrefetchUIFromEnv(),
     __telemetryDisabled: isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
     __telemetryDebug: isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),

packages/tanstack-react-start/src/utils/env.ts

@@ -16,6 +16,7 @@ export const getPublicEnvVariables = () => {
     clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
     clerkJsVersion: getValue('CLERK_JS_VERSION'),
     clerkUIUrl: getValue('CLERK_UI_URL'),
+    clerkUIVersion: getValue('CLERK_UI_VERSION'),
     prefetchUI: getValue('CLERK_PREFETCH_UI') === 'false' ? false : undefined,
     telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
     telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),