feat(shared): load clerk-js@v4 in interstitial

.changeset/good-llamas-deny.md

@@ -0,0 +1,5 @@
+---
+"@clerk/shared": patch
+---
+
+Ensure that the interstitial page loads clerk-js@v4.

.changeset/rich-crabs-fetch.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Ensure the interstitial loads a clerk-js version that matches the current major version.

packages/shared/global.d.ts

@@ -1,6 +1,7 @@
 export {};
 
 declare global {
+  const CLERK_JS_PACKAGE_VERSION: string;
   const PACKAGE_VERSION: string;
   const __DEV__: boolean;
 }

packages/shared/jest.config.js

@@ -3,6 +3,10 @@ const config = {
   displayName: 'shared',
   injectGlobals: true,
 
+  globals: {
+    CLERK_JS_PACKAGE_VERSION: '4.0.0-test',
+  },
+
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
   setupFiles: ['./jest.setup.ts'],

packages/shared/src/__tests__/url.test.ts

@@ -86,19 +86,13 @@ describe('getScriptUrl', () => {
     );
   });
 
-  it('returns URL using the latest version if clerkJSVersion & pkgVersion is not provided + frontendApi is not staging', () => {
-    expect(getScriptUrl(frontendApi, {})).toBe('https://foobar.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js');
+  it('returns URL using the major version if clerkJSVersion & pkgVersion is not provided + frontendApi is not staging', () => {
+    expect(getScriptUrl(frontendApi, {})).toBe('https://foobar.dev/npm/@clerk/clerk-js@4/dist/clerk.browser.js');
   });
 
   it('returns URL using the major version if only pkgVersion is provided', () => {
     expect(getScriptUrl(frontendApi, { pkgVersion: '1.2.3' })).toBe(
       'https://foobar.dev/npm/@clerk/clerk-js@1/dist/clerk.browser.js',
     );
   });
-
-  it('returns URL using the canary tag if frontendApi is staging', () => {
-    expect(getScriptUrl('https://foobar.lclstage.dev', {})).toBe(
-      'https://foobar.lclstage.dev/npm/@clerk/clerk-js@canary/dist/clerk.browser.js',
-    );
-  });
 });

packages/shared/src/url.ts

@@ -53,7 +53,7 @@ export const getClerkJsMajorVersionOrTag = (frontendApi: string, pkgVersion?: st
  */
 export const getScriptUrl = (
   frontendApi: string,
-  { pkgVersion, clerkJSVersion }: { pkgVersion?: string; clerkJSVersion?: string },
+  { pkgVersion = CLERK_JS_PACKAGE_VERSION, clerkJSVersion }: { pkgVersion?: string; clerkJSVersion?: string },
 ) => {
   const noSchemeFrontendApi = frontendApi.replace(/http(s)?:\/\//, '');
   const major = getClerkJsMajorVersionOrTag(frontendApi, pkgVersion);

packages/shared/tsup.config.ts

@@ -3,6 +3,7 @@ import { transform } from 'esbuild';
 import { readFile } from 'fs/promises';
 import { defineConfig } from 'tsup';
 
+import { version as clerkJsVersion } from '../clerk-js/package.json';
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
@@ -17,8 +18,9 @@ export default defineConfig(overrideOptions => {
     sourcemap: true,
     dts: true,
     external: ['react', 'react-dom'],
-    esbuildPlugins: [WebWorkerMinifyPlugin as any],
+    esbuildPlugins: [WebWorkerMinifyPlugin],
     define: {
+      CLERK_JS_PACKAGE_VERSION: `"${clerkJsVersion}"`,
       PACKAGE_NAME: `"${name}"`,
       PACKAGE_VERSION: `"${version}"`,
       __DEV__: `${isWatch}`,