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

* feat(shared): Ensure we only load clerk-js v4 in the interstitial, instead of latest * Create good-llamas-deny.md * Update .changeset/good-llamas-deny.md * chore(repo): Add changeset * chore(shared): Add global to jest * chore(shared): Tweak tests --------- Co-authored-by: Nikos Douvlis <[email protected]>
clerk · Nov 22, 2023 · e41374a · e41374a
1 parent aaaf24a
commit e41374a
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 10 deletions.
diff --git a/.changeset/good-llamas-deny.md b/.changeset/good-llamas-deny.md
@@ -0,0 +1,5 @@
+---
+"@clerk/shared": patch
+---
+
+Ensure that the interstitial page loads clerk-js@v4.
diff --git a/.changeset/rich-crabs-fetch.md b/.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.
diff --git a/packages/shared/global.d.ts b/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;
 }
diff --git a/packages/shared/jest.config.js b/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'],

diff --git a/packages/shared/src/__tests__/url.test.ts b/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',
-    );
-  });
 });
diff --git a/packages/shared/src/url.ts b/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);

diff --git a/packages/shared/tsup.config.ts b/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}`,