feat(clerk-js): Remove BroadcastChannel build variant

Author: jacekradko

integration/presets/envs.ts

@@ -42,15 +42,6 @@ const withEmailCodes = base
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
   .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
-const withBroadcastChannel = withEmailCodes
-  .clone()
-  .setId('withBroadcastChannel')
-  .setEnvVariable(
-    'public',
-    'CLERK_JS_URL',
-    constants.E2E_APP_CLERK_JS || 'http://localhost:18211/clerk.channel.browser.js',
-  );
-
 const sessionsProd1 = base
   .clone()
   .setId('sessionsProd1')
@@ -201,7 +192,6 @@ export const envs = {
   withAPCore2ClerkV4,
   withBilling,
   withBillingJwtV2,
-  withBroadcastChannel,
   withCustomRoles,
   withDynamicKeys,
   withEmailCodes,

integration/tests/session-token-cache/single-session.test.ts

@@ -11,7 +11,7 @@ import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
  * token fetches in one tab are automatically broadcast and cached in other tabs,
  * eliminating redundant network requests.
  */
-testAgainstRunningApps({ withEnv: [appConfigs.envs.withBroadcastChannel] })(
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
   'MemoryTokenCache Multi-Tab Integration @generic',
   ({ app }) => {
     test.describe.configure({ mode: 'serial' });

packages/clerk-js/bundlewatch.config.json

@@ -2,7 +2,6 @@
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },

packages/clerk-js/package.json

@@ -42,7 +42,6 @@
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
-    "dev:channel": "rspack serve --config rspack.config.js --env variant=\"clerk.channel.browser\"",
     "dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
     "dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
     "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",

packages/clerk-js/rspack.config.js

@@ -17,7 +17,6 @@ const variants = {
   clerkHeadlessBrowser: 'clerk.headless.browser',
   clerkLegacyBrowser: 'clerk.legacy.browser',
   clerkCHIPS: 'clerk.chips.browser',
-  clerkChannelBrowser: 'clerk.channel.browser',
 };
 
 const variantToSourceFile = {
@@ -28,7 +27,6 @@ const variantToSourceFile = {
   [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
   [variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
   [variants.clerkCHIPS]: './src/index.browser.ts',
-  [variants.clerkChannelBrowser]: './src/index.browser.ts',
 };
 
 /**
@@ -60,7 +58,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
          */
         __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
-        __BUILD_VARIANT_CHANNEL__: variant === variants.clerkChannelBrowser,
         __BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
       }),
       new rspack.EnvironmentPlugin({
@@ -433,13 +430,6 @@ const prodConfig = ({ mode, env, analysis }) => {
     commonForProdChunked(),
   );
 
-  const clerkChannelBrowser = merge(
-    entryForVariant(variants.clerkChannelBrowser),
-    common({ mode, variant: variants.clerkChannelBrowser }),
-    commonForProd(),
-    commonForProdChunked(),
-  );
-
   const clerkEsm = merge(
     entryForVariant(variants.clerk),
     common({ mode, variant: variants.clerk }),
@@ -554,7 +544,6 @@ const prodConfig = ({ mode, env, analysis }) => {
     clerkHeadless,
     clerkHeadlessBrowser,
     clerkCHIPS,
-    clerkChannelBrowser,
     clerkEsm,
     clerkEsmNoRHC,
     clerkCjs,
@@ -662,11 +651,6 @@ const devConfig = ({ mode, env }) => {
       common({ mode, variant: variants.clerkCHIPS }),
       commonForDev(),
     ),
-    [variants.clerkChannelBrowser]: merge(
-      entryForVariant(variants.clerkChannelBrowser),
-      common({ mode, variant: variants.clerkChannelBrowser }),
-      commonForDev(),
-    ),
   };
 
   if (!entryToConfigMap[variant]) {

packages/clerk-js/src/core/tokenCache.ts

@@ -138,7 +138,7 @@ const generateTabId = (): string => {
 /**
  * Creates an in-memory token cache with optional BroadcastChannel synchronization across tabs.
  * Automatically manages token expiration and cleanup via scheduled timeouts.
- * BroadcastChannel support is enabled only in the channel build variant.
+ * BroadcastChannel support is enabled whenever the environment provides it.
  */
 const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
   const cache = new Map<string, TokenCacheValue>();
@@ -147,21 +147,19 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
   let broadcastChannel: BroadcastChannel | null = null;
 
   const ensureBroadcastChannel = (): BroadcastChannel | null => {
-    if (!__BUILD_VARIANT_CHANNEL__) {
-      return null;
-    }
-
     if (broadcastChannel) {
       return broadcastChannel;
     }
 
-    if (typeof BroadcastChannel !== 'undefined') {
-      broadcastChannel = new BroadcastChannel('clerk:session_token');
-      broadcastChannel.addEventListener('message', (e: MessageEvent<SessionTokenEvent>) => {
-        void handleBroadcastMessage(e);
-      });
+    if (typeof BroadcastChannel === 'undefined') {
+      return null;
     }
 
+    broadcastChannel = new BroadcastChannel('clerk:session_token');
+    broadcastChannel.addEventListener('message', (e: MessageEvent<SessionTokenEvent>) => {
+      void handleBroadcastMessage(e);
+    });
+
     return broadcastChannel;
   };
 

packages/clerk-js/src/global.d.ts

@@ -11,7 +11,6 @@ declare const __DEV__: boolean;
  * Build time feature flags.
  */
 declare const __BUILD_DISABLE_RHC__: string;
-declare const __BUILD_VARIANT_CHANNEL__: boolean;
 declare const __BUILD_VARIANT_CHIPS__: boolean;
 
 interface Window {

packages/clerk-js/vitest.config.mts

@@ -26,7 +26,6 @@ export default defineConfig({
   plugins: [react({ jsxRuntime: 'automatic', jsxImportSource: '@emotion/react' }), viteSvgMockPlugin()],
   define: {
     __BUILD_DISABLE_RHC__: JSON.stringify(false),
-    __BUILD_VARIANT_CHANNEL__: JSON.stringify(true),
     __BUILD_VARIANT_CHIPS__: JSON.stringify(false),
     __PKG_NAME__: JSON.stringify('@clerk/clerk-js'),
     __PKG_VERSION__: JSON.stringify('test'),