diff --git a/packages/shared/global.d.ts b/packages/shared/global.d.ts index c7fb0726f76..ffc87dfc746 100644 --- a/packages/shared/global.d.ts +++ b/packages/shared/global.d.ts @@ -1,6 +1,7 @@ declare const PACKAGE_NAME: string; declare const PACKAGE_VERSION: string; declare const JS_PACKAGE_VERSION: string; +declare const UI_PACKAGE_VERSION: string; declare const __DEV__: boolean; declare const __BUILD_DISABLE_RHC__: boolean; declare const __CLERK_USE_RQ__: boolean; diff --git a/packages/shared/src/__tests__/loadClerkJsScript.spec.ts b/packages/shared/src/__tests__/loadClerkJsScript.spec.ts index d15397d2a52..f25cec679ff 100644 --- a/packages/shared/src/__tests__/loadClerkJsScript.spec.ts +++ b/packages/shared/src/__tests__/loadClerkJsScript.spec.ts @@ -19,6 +19,7 @@ vi.mock('../loadScript'); setClerkJsLoadingErrorPackageName('@clerk/react'); const jsPackageMajorVersion = getMajorVersion(JS_PACKAGE_VERSION); +const uiPackageMajorVersion = getMajorVersion(UI_PACKAGE_VERSION); const mockClerk = { status: 'ready', @@ -318,7 +319,7 @@ describe('loadClerkUiScript(options)', () => { expect(result).toBeNull(); expect(loadScript).toHaveBeenCalledWith( expect.stringContaining( - `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`, + `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`, ), expect.objectContaining({ async: true, @@ -401,13 +402,13 @@ describe('clerkUiScriptUrl()', () => { test('constructs URL correctly for development key', () => { const result = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey }); expect(result).toBe( - `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`, + `https://foo-bar-13.clerk.accounts.dev/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`, ); }); test('constructs URL correctly for production key', () => { const result = clerkUiScriptUrl({ publishableKey: mockProdPublishableKey }); - expect(result).toBe(`https://example.clerk.com/npm/@clerk/ui@${jsPackageMajorVersion}/dist/ui.browser.js`); + expect(result).toBe(`https://example.clerk.com/npm/@clerk/ui@${uiPackageMajorVersion}/dist/ui.browser.js`); }); test('uses provided clerkUiVersion', () => { @@ -418,7 +419,23 @@ describe('clerkUiScriptUrl()', () => { test('uses latest as default version when not specified', () => { const result = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey }); // When no version is specified, versionSelector should return the major version - expect(result).toContain(`/npm/@clerk/ui@${jsPackageMajorVersion}/`); + expect(result).toContain(`/npm/@clerk/ui@${uiPackageMajorVersion}/`); + }); + + test('uses UI_PACKAGE_VERSION independently from JS_PACKAGE_VERSION', () => { + // Verify that clerkUiScriptUrl uses UI_PACKAGE_VERSION, not JS_PACKAGE_VERSION + const uiResult = clerkUiScriptUrl({ publishableKey: mockDevPublishableKey }); + const jsResult = clerkJsScriptUrl({ publishableKey: mockDevPublishableKey }); + + // UI script should use UI package version + expect(uiResult).toContain(`/npm/@clerk/ui@${uiPackageMajorVersion}/`); + // JS script should use JS package version + expect(jsResult).toContain(`/npm/@clerk/clerk-js@${jsPackageMajorVersion}/`); + + // They should be using their respective versions (which may differ) + // This test ensures we don't accidentally use JS version for UI + expect(uiResult).not.toContain('@clerk/clerk-js'); + expect(jsResult).not.toContain('@clerk/ui'); }); }); diff --git a/packages/shared/src/loadClerkJsScript.ts b/packages/shared/src/loadClerkJsScript.ts index 7660f5581d9..2e3a6012dbe 100644 --- a/packages/shared/src/loadClerkJsScript.ts +++ b/packages/shared/src/loadClerkJsScript.ts @@ -236,7 +236,7 @@ export const clerkUiScriptUrl = (opts: LoadClerkUiScriptOptions) => { } const scriptHost = buildScriptHost({ publishableKey, proxyUrl, domain }); - const version = versionSelector(clerkUiVersion); + const version = versionSelector(clerkUiVersion, UI_PACKAGE_VERSION); return `https://${scriptHost}/npm/@clerk/ui@${version}/dist/ui.browser.js`; }; diff --git a/packages/shared/tsdown.config.mts b/packages/shared/tsdown.config.mts index 69edacfcef7..93c58027e0e 100644 --- a/packages/shared/tsdown.config.mts +++ b/packages/shared/tsdown.config.mts @@ -5,6 +5,7 @@ import type { Options } from 'tsdown'; import { defineConfig } from 'tsdown'; import clerkJsPackage from '../clerk-js/package.json' with { type: 'json' }; +import clerkUiPackage from '../ui/package.json' with { type: 'json' }; import sharedPackage from './package.json' with { type: 'json' }; export default defineConfig(({ watch }) => { @@ -21,6 +22,7 @@ export default defineConfig(({ watch }) => { PACKAGE_NAME: `"${sharedPackage.name}"`, PACKAGE_VERSION: `"${sharedPackage.version}"`, JS_PACKAGE_VERSION: `"${clerkJsPackage.version}"`, + UI_PACKAGE_VERSION: `"${clerkUiPackage.version}"`, __DEV__: `${watch}`, __BUILD_DISABLE_RHC__: JSON.stringify(false), __CLERK_USE_RQ__: `${process.env.CLERK_USE_RQ === 'true'}`, diff --git a/packages/shared/vitest.setup.mts b/packages/shared/vitest.setup.mts index d3d20aa47ce..e418b9f0ddf 100644 --- a/packages/shared/vitest.setup.mts +++ b/packages/shared/vitest.setup.mts @@ -7,6 +7,7 @@ globalThis.__DEV__ = true; globalThis.PACKAGE_NAME = '@clerk/react'; globalThis.PACKAGE_VERSION = '0.0.0-test'; globalThis.JS_PACKAGE_VERSION = '5.0.0'; +globalThis.UI_PACKAGE_VERSION = '1.0.0'; globalThis.__CLERK_USE_RQ__ = process.env.CLERK_USE_RQ === 'true'; // Setup Web Crypto API for tests (Node.js 18+ compatibility)