feat(ui): build legacy variant (#7472)

Author: jacekradko

.changeset/legacy-browser-variant.md

@@ -0,0 +1,5 @@
+---
+"@clerk/ui": minor
+---
+
+Add legacy browser variant build support for older browsers

packages/clerk-js/package.json

@@ -66,14 +66,14 @@
     "@solana/wallet-adapter-react": "catalog:module-manager",
     "@solana/wallet-standard": "catalog:module-manager",
     "@stripe/stripe-js": "5.6.0",
-    "@swc/helpers": "^0.5.17",
+    "@swc/helpers": "catalog:repo",
     "@tanstack/query-core": "5.87.4",
     "@wallet-standard/core": "catalog:module-manager",
     "@zxcvbn-ts/core": "catalog:module-manager",
     "@zxcvbn-ts/language-common": "catalog:module-manager",
     "alien-signals": "2.0.6",
     "browser-tabs-lock": "1.3.0",
-    "core-js": "3.41.0",
+    "core-js": "catalog:repo",
     "crypto-js": "^4.2.0",
     "dequal": "2.0.3"
   },

packages/ui/bundlewatch.config.json

@@ -1,9 +1,10 @@
 {
   "files": [
     { "path": "./dist/ui.browser.js", "maxSize": "19.5KB" },
+    { "path": "./dist/ui.legacy.browser.js", "maxSize": "54KB" },
     { "path": "./dist/framework*.js", "maxSize": "44KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "69KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "123KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "73KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "128KB" },
     { "path": "./dist/signin*.js", "maxSize": "16KB" },
     { "path": "./dist/signup*.js", "maxSize": "11KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
@@ -31,6 +32,6 @@
     { "path": "./dist/op-plans-page*.js", "maxSize": "3KB" },
     { "path": "./dist/statement-page*.js", "maxSize": "5KB" },
     { "path": "./dist/payment-attempt-page*.js", "maxSize": "4KB" },
-    { "path": "./dist/web3-solana-wallet-buttons*.js", "maxSize": "78KB" }
+    { "path": "./dist/web3-solana-wallet-buttons*.js", "maxSize": "79KB" }
   ]
 }

packages/ui/package.json

@@ -78,7 +78,9 @@
     "@solana/wallet-adapter-base": "catalog:module-manager",
     "@solana/wallet-adapter-react": "catalog:module-manager",
     "@solana/wallet-standard": "catalog:module-manager",
+    "@swc/helpers": "catalog:repo",
     "copy-to-clipboard": "3.3.3",
+    "core-js": "catalog:repo",
     "csstype": "3.1.3",
     "dequal": "2.0.3",
     "input-otp": "1.4.2",
@@ -106,5 +108,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "browserslistLegacy": "Chrome > 73, Firefox > 66, Safari > 12, iOS > 12, Edge > 18, Opera > 58"
 }

packages/ui/rspack.config.js

@@ -3,10 +3,13 @@ import rspack from '@rspack/core';
 import packageJSON from './package.json' with { type: 'json' };
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
 import { merge } from 'webpack-merge';
 import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
 import { svgLoader, typescriptLoaderProd, typescriptLoaderDev } from '../../scripts/rspack-common.js';
 
+const require = createRequire(import.meta.url);
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -15,10 +18,12 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
   uiBrowser: 'ui.browser',
+  uiLegacyBrowser: 'ui.legacy.browser',
 };
 
 const variantToSourceFile = {
   [variants.uiBrowser]: './src/index.browser.ts',
+  [variants.uiLegacyBrowser]: './src/index.legacy.browser.ts',
 };
 
 /**
@@ -126,9 +131,12 @@ const entryForVariant = variant => {
 
 /**
  * Common production configuration for chunked browser builds
+ * @param {object} [options]
+ * @param {string} [options.targets] - Browserslist targets
+ * @param {boolean} [options.useCoreJs] - Whether to use core-js polyfills
  * @returns {import('@rspack/core').Configuration}
  */
-const commonForProdBrowser = () => {
+const commonForProdBrowser = ({ targets = 'last 2 years', useCoreJs = false } = {}) => {
   return {
     devtool: false,
     output: {
@@ -138,7 +146,7 @@ const commonForProdBrowser = () => {
       globalObject: 'globalThis',
     },
     module: {
-      rules: [svgLoader(), ...typescriptLoaderProd({ targets: 'last 2 years' })],
+      rules: [svgLoader(), ...typescriptLoaderProd({ targets, useCoreJs })],
     },
     optimization: {
       minimize: true,
@@ -157,13 +165,22 @@ const commonForProdBrowser = () => {
         }),
       ],
     },
+    ...(useCoreJs
+      ? {
+          resolve: {
+            alias: {
+              'core-js': path.dirname(require.resolve('core-js/package.json')),
+            },
+          },
+        }
+      : {}),
   };
 };
 
 /**
- * Production configuration - builds UMD browser variant only
+ * Production configuration - builds UMD browser variants
  * @param {'development'|'production'} mode
- * @returns {import('@rspack/core').Configuration}
+ * @returns {import('@rspack/core').Configuration[]}
  */
 const prodConfig = mode => {
   // Browser bundle with chunks (UMD)
@@ -173,7 +190,14 @@ const prodConfig = mode => {
     commonForProdBrowser(),
   );
 
-  return uiBrowser;
+  // Legacy browser bundle with chunks (UMD) for Safari 12 support
+  const uiLegacyBrowser = merge(
+    entryForVariant(variants.uiLegacyBrowser),
+    common({ mode, variant: variants.uiLegacyBrowser }),
+    commonForProdBrowser({ targets: packageJSON.browserslistLegacy, useCoreJs: true }),
+  );
+
+  return [uiBrowser, uiLegacyBrowser];
 };
 
 /**

packages/ui/src/index.legacy.browser.ts

@@ -0,0 +1,15 @@
+// It's crucial this is the first import,
+// otherwise chunk loading will not work
+// eslint-disable-next-line
+import './utils/setWebpackChunkPublicPath';
+
+import { ClerkUi } from './ClerkUi';
+
+if (!window.__internal_ClerkUiCtor) {
+  window.__internal_ClerkUiCtor = ClerkUi;
+}
+
+// Hot module replacement for development
+if (module.hot) {
+  module.hot.accept();
+}

pnpm-lock.yaml

@@ -11,13 +11,15 @@ catalogs:
     react: 18.3.1
     react-dom: 18.3.1
   repo:
-    tslib: 2.8.1
+    '@swc/helpers': 0.5.17
+    core-js: 3.47.0
+    rolldown: 1.0.0-beta.47
     tsdown: 0.15.7
+    tslib: 2.8.1
     tsup: 8.5.0
     typescript: 5.8.3
-    zx: 8.8.5
-    rolldown: 1.0.0-beta.47
     vue: 3.5.24
+    zx: 8.8.5
   module-manager:
     '@base-org/account': 2.0.1
     '@coinbase/wallet-sdk': 4.3.0