poc: experimental clerk-js build

.changeset/salty-ravens-build.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add the experimental cross-tab session sync proof of concept behind a dev-only flag, including worker lifecycle safeguards, automatic fallbacks, and metric hooks for observability.
+

packages/clerk-js/bundlewatch.config.json

@@ -1,17 +1,19 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "538KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "63KB" },
-    { "path": "./dist/clerk.chips.browser.js", "maxSize": "63KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "105KB" },
-    { "path": "./dist/clerk.no-rhc.js", "maxSize": "305KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "7KB" },
-    { "path": "./dist/coinbase*.js", "maxSize": "36KB" },
-    { "path": "./dist/base-account-sdk*.js", "maxSize": "203KB" },
-    { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
-    { "path": "./dist/query-core-vendors*.js", "maxSize": "11KB" },
-    { "path": "./dist/zxcvbn-ts-core*.js", "maxSize": "12KB" },
-    { "path": "./dist/zxcvbn-common*.js", "maxSize": "226KB" }
+    { "maxSize": "840KB", "path": "./dist/clerk.js" },
+    { "maxSize": "81KB", "path": "./dist/clerk.browser.js" },
+    { "maxSize": "95KB", "path": "./dist/clerk.experimental.browser.js" },
+    { "maxSize": "81KB", "path": "./dist/clerk.channel.browser.js" },
+    { "maxSize": "123KB", "path": "./dist/clerk.legacy.browser.js" },
+    { "maxSize": "63KB", "path": "./dist/clerk.chips.browser.js" },
+    { "maxSize": "305KB", "path": "./dist/clerk.no-rhc.js" },
+    { "maxSize": "65KB", "path": "./dist/clerk.headless*.js" },
+    { "maxSize": "7KB", "path": "./dist/vendors*.js" },
+    { "maxSize": "36KB", "path": "./dist/coinbase*.js" },
+    { "maxSize": "203KB", "path": "./dist/base-account-sdk*.js" },
+    { "maxSize": "1KB", "path": "./dist/stripe-vendors*.js" },
+    { "maxSize": "11KB", "path": "./dist/query-core-vendors*.js" },
+    { "maxSize": "12KB", "path": "./dist/zxcvbn-ts-core*.js" },
+    { "maxSize": "226KB", "path": "./dist/zxcvbn-common*.js" }
   ]
 }

packages/clerk-js/package.json

@@ -42,6 +42,7 @@
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
     "dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
+    "dev:experimental": "rspack serve --config rspack.config.js --env variant=\"clerk.experimental.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}",
     "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",

packages/clerk-js/rspack.config.js

@@ -5,29 +5,34 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
 const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
-const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common');
 
 const isProduction = mode => mode === 'production';
 const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
   clerk: 'clerk',
-  clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
   clerkBrowser: 'clerk.browser',
+  clerkBrowserNoRHC: 'clerk.browser.no-rhc',
+  clerkCHIPS: 'clerk.chips.browser',
+  clerkChannelBrowser: 'clerk.channel.browser',
+  clerkExperimentalBrowser: 'clerk.experimental.browser',
   clerkHeadless: 'clerk.headless',
   clerkHeadlessBrowser: 'clerk.headless.browser',
   clerkLegacyBrowser: 'clerk.legacy.browser',
-  clerkCHIPS: 'clerk.chips.browser',
+  clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
 };
 
 const variantToSourceFile = {
   [variants.clerk]: './src/index.ts',
-  [variants.clerkNoRHC]: './src/index.ts',
   [variants.clerkBrowser]: './src/index.browser.ts',
+  [variants.clerkBrowserNoRHC]: './src/index.browser.ts',
+  [variants.clerkCHIPS]: './src/index.browser.ts',
+  [variants.clerkChannelBrowser]: './src/index.browser.ts',
+  [variants.clerkExperimentalBrowser]: './src/index.browser.ts',
   [variants.clerkHeadless]: './src/index.headless.ts',
   [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
   [variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
-  [variants.clerkCHIPS]: './src/index.browser.ts',
+  [variants.clerkNoRHC]: './src/index.ts',
 };
 
 /**
@@ -51,15 +56,17 @@ const common = ({ mode, variant, disableRHC = false }) => {
     },
     plugins: [
       new rspack.DefinePlugin({
-        __DEV__: isDevelopment(mode),
-        __PKG_VERSION__: JSON.stringify(packageJSON.version),
-        __PKG_NAME__: JSON.stringify(packageJSON.name),
         /**
          * Build time feature flags.
          */
-        __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
+        __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
+        __BUILD_VARIANT_CHANNEL__: variant === variants.clerkChannelBrowser,
         __BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
+        __BUILD_VARIANT_EXPERIMENTAL__: variant === variants.clerkExperimentalBrowser,
+        __DEV__: isDevelopment(mode),
+        __PKG_NAME__: JSON.stringify(packageJSON.name),
+        __PKG_VERSION__: JSON.stringify(packageJSON.version),
       }),
       new rspack.EnvironmentPlugin({
         CLERK_ENV: mode,
@@ -142,6 +149,139 @@ const common = ({ mode, variant, disableRHC = false }) => {
   };
 };
 
+/** @type { () => (import('@rspack/core').RuleSetRule) }  */
+const svgLoader = () => {
+  return {
+    test: /\.svg$/,
+    resolve: {
+      fullySpecified: false,
+    },
+    use: {
+      loader: '@svgr/webpack',
+      options: {
+        svgo: true,
+        svgoConfig: {
+          floatPrecision: 3,
+          transformPrecision: 1,
+          plugins: ['preset-default', 'removeDimensions', 'removeStyleElement'],
+        },
+      },
+    },
+  };
+};
+
+/** @type { () => (import('@rspack/core').RuleSetRule) }  */
+const workerLoader = () => {
+  return {
+    test: /\.worker\.ts$/,
+    type: 'asset/source',
+    use: {
+      loader: 'builtin:swc-loader',
+      options: {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+          },
+          minify: {
+            compress: true,
+            mangle: true,
+          },
+        },
+        minify: true,
+      },
+    },
+  };
+};
+
+/** @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').RuleSetRule[]) } */
+const typescriptLoaderProd = (
+  { targets = packageJSON.browserslist, useCoreJs = false } = { targets: packageJSON.browserslist, useCoreJs: false },
+) => {
+  return [
+    {
+      test: /\.(jsx?|tsx?)$/,
+      exclude: [/node_modules/, /\.worker\.ts$/],
+      use: {
+        loader: 'builtin:swc-loader',
+        options: {
+          env: {
+            targets,
+            ...(useCoreJs
+              ? {
+                  mode: 'usage',
+                  coreJs: require('core-js/package.json').version,
+                }
+              : {}),
+          },
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+            externalHelpers: true,
+            transform: {
+              react: {
+                runtime: 'automatic',
+                importSource: '@emotion/react',
+                development: false,
+                refresh: false,
+              },
+            },
+          },
+        },
+      },
+    },
+    {
+      test: /\.m?js$/,
+      exclude: /node_modules[\\/]core-js/,
+      use: {
+        loader: 'builtin:swc-loader',
+        options: {
+          env: {
+            targets,
+            ...(useCoreJs
+              ? {
+                  mode: 'usage',
+                  coreJs: '3.41.0',
+                }
+              : {}),
+          },
+          isModule: 'unknown',
+        },
+      },
+    },
+  ];
+};
+
+/** @type { () => (import('@rspack/core').RuleSetRule[]) } */
+const typescriptLoaderDev = () => {
+  return [
+    {
+      test: /\.(jsx?|tsx?)$/,
+      exclude: [/node_modules/, /\.worker\.ts$/],
+      loader: 'builtin:swc-loader',
+      options: {
+        jsc: {
+          target: 'esnext',
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+          },
+          externalHelpers: true,
+          transform: {
+            react: {
+              runtime: 'automatic',
+              importSource: '@emotion/react',
+              development: true,
+              refresh: true,
+            },
+          },
+        },
+      },
+    },
+  ];
+};
+
 /**
  * Used for production builds that have dynamicly loaded chunks.
  * @type { (opts?: { targets?: string, useCoreJs?: boolean }) => (import('@rspack/core').Configuration) }
@@ -151,7 +291,7 @@ const commonForProdChunked = (
 ) => {
   return {
     module: {
-      rules: [svgLoader(), ...typescriptLoaderProd({ targets, useCoreJs })],
+      rules: [workerLoader(), svgLoader(), ...typescriptLoaderProd({ targets, useCoreJs })],
     },
   };
 };
@@ -165,7 +305,7 @@ const commonForProdBundled = (
 ) => {
   return {
     module: {
-      rules: [svgLoader(), ...typescriptLoaderProd({ targets, useCoreJs })],
+      rules: [workerLoader(), svgLoader(), ...typescriptLoaderProd({ targets, useCoreJs })],
     },
   };
 };
@@ -272,6 +412,13 @@ const prodConfig = ({ mode, env, analysis }) => {
     commonForProdChunked(),
   );
 
+  const clerkExperimentalBrowser = merge(
+    entryForVariant(variants.clerkExperimentalBrowser),
+    common({ mode, variant: variants.clerkExperimentalBrowser }),
+    commonForProd(),
+    commonForProdChunked(),
+  );
+
   const clerkLegacyBrowser = merge(
     entryForVariant(variants.clerkLegacyBrowser),
     common({ mode, variant: variants.clerkLegacyBrowser }),
@@ -423,6 +570,7 @@ const prodConfig = ({ mode, env, analysis }) => {
 
   return [
     clerkBrowser,
+    clerkExperimentalBrowser,
     clerkLegacyBrowser,
     clerkHeadless,
     clerkHeadlessBrowser,
@@ -453,7 +601,7 @@ const devConfig = ({ mode, env }) => {
   const commonForDev = () => {
     return {
       module: {
-        rules: [svgLoader(), ...typescriptLoaderDev()],
+        rules: [workerLoader(), svgLoader(), ...typescriptLoaderDev()],
       },
       plugins: [
         new ReactRefreshPlugin(/** @type {any} **/ ({ overlay: { sockHost: devUrl.host } })),
@@ -520,6 +668,21 @@ const devConfig = ({ mode, env }) => {
       common({ mode, disableRHC: true, variant: variants.clerkBrowserNoRHC }),
       commonForDev(),
     ),
+    [variants.clerkCHIPS]: merge(
+      entryForVariant(variants.clerkCHIPS),
+      common({ mode, variant: variants.clerkCHIPS }),
+      commonForDev(),
+    ),
+    [variants.clerkChannelBrowser]: merge(
+      entryForVariant(variants.clerkChannelBrowser),
+      common({ mode, variant: variants.clerkChannelBrowser }),
+      commonForDev(),
+    ),
+    [variants.clerkExperimentalBrowser]: merge(
+      entryForVariant(variants.clerkExperimentalBrowser),
+      common({ mode, variant: variants.clerkExperimentalBrowser }),
+      commonForDev(),
+    ),
     [variants.clerkHeadless]: merge(
       entryForVariant(variants.clerkHeadless),
       common({ mode, variant: variants.clerkHeadless }),
@@ -532,11 +695,6 @@ const devConfig = ({ mode, env }) => {
       commonForDev(),
       // externalsForHeadless(),
     ),
-    [variants.clerkCHIPS]: merge(
-      entryForVariant(variants.clerkCHIPS),
-      common({ mode, variant: variants.clerkCHIPS }),
-      commonForDev(),
-    ),
   };
 
   if (!entryToConfigMap[variant]) {