wip

Author: nikosdouvlis

eslint.config.mjs

@@ -457,7 +457,7 @@ export default tseslint.config([
   },
   {
     name: 'repo/jsdoc-internal',
-    files: ['packages/shared/src/**/internal/**/*.{ts,tsx}'],
+    files: ['packages/shared/src/**/internal/**/*.{ts,tsx}', 'packages/shared/src/**/*.{ts,tsx}'],
     plugins: {
       jsdoc: pluginJsDoc,
     },

packages/clerk-js/package.json

@@ -32,7 +32,6 @@
   ],
   "scripts": {
     "build": "pnpm build:bundle && pnpm build:declarations",
-    "postbuild": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs",
     "build:analyze": "rspack build --config rspack.config.js --env production --env variant=\"clerk.browser\" --env analysis --analyze",
     "build:bundle": "pnpm clean && rspack build --config rspack.config.js --env production",
     "build:declarations": "tsc -p tsconfig.declarations.json",
@@ -52,6 +51,7 @@
     "lint": "eslint src",
     "lint:attw": "attw --pack . --profile node16 --ignore-rules named-exports",
     "lint:publint": "publint || true",
+    "postbuild:disabled": "node ../../scripts/search-for-rhc.mjs file dist/clerk.no-rhc.mjs",
     "test": "vitest --watch=false",
     "test:sandbox:integration": "playwright test",
     "test:sandbox:integration:ui": "playwright test --ui",
@@ -91,10 +91,6 @@
     "minimatch": "^10.0.3",
     "webpack-merge": "^5.10.0"
   },
-  "peerDependencies": {
-    "react": "catalog:peer-react",
-    "react-dom": "catalog:peer-react"
-  },
   "engines": {
     "node": ">=18.17.0"
   },

packages/clerk-js/rspack.config.js

@@ -5,6 +5,7 @@ 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);
@@ -117,20 +118,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
             chunks: 'all',
             enforce: true,
           },
-          /**
-           * Sign up is shared between the SignUp component and the SignIn component.
-           */
-          signUp: {
-            minChunks: 1,
-            name: 'signup',
-            test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
-          },
-          common: {
-            minChunks: 1,
-            name: 'ui-common',
-            priority: -20,
-            test: module => !!(module.resource && !module.resource.includes('/ui/components')),
-          },
           defaultVendors: {
             minChunks: 1,
             test: /[\\/]node_modules[\\/]/,
@@ -152,116 +139,6 @@ 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 { (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/,
-      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/,
-      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) }
@@ -613,7 +490,7 @@ const devConfig = ({ mode, env }) => {
       cache: true,
       experiments: {
         cache: {
-          type: 'persistent',
+          type: 'memory',
         },
       },
     };

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

@@ -19,7 +19,12 @@ import {
   noOrganizationExists,
   noUserExists,
 } from '@clerk/shared/internal/clerk-js/componentGuards';
-import { ERROR_CODES } from '@clerk/shared/internal/clerk-js/constants';
+import {
+  CLERK_SATELLITE_URL,
+  CLERK_SUFFIXED_COOKIES,
+  CLERK_SYNCED,
+  ERROR_CODES,
+} from '@clerk/shared/internal/clerk-js/constants';
 import { RedirectUrls } from '@clerk/shared/internal/clerk-js/redirectUrls';
 import {
   getTaskEndpoint,
@@ -113,7 +118,25 @@ import type {
 } from '@clerk/shared/types';
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
-import type { MountComponentRenderer } from '@clerk/ui/internal';
+
+// TODO: Replace with proper type from @clerk/ui
+type MountComponentRenderer = (
+  clerk: any,
+  environment: any,
+  options: any,
+) => {
+  ensureMounted: (options?: { preloadHint?: string }) => Promise<{
+    mountImpersonationFab: () => void;
+    updateProps: (props: any) => void;
+    openModal: (name: string, props: any) => void;
+    closeModal: (name: string) => void;
+    openDrawer: (name: string, props: any) => void;
+    closeDrawer: (name: string) => void;
+    mountComponent: (config: any) => void;
+    unmountComponent: (config: any) => void;
+    prefetch: (name: string) => void;
+  }>;
+};
 
 import { debugLogger, initDebugLogger } from '@/utils/debug';
 

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

@@ -17,4 +17,14 @@ declare const __BUILD_VARIANT_CHIPS__: boolean;
 interface Window {
   __unstable__onBeforeSetActive: (intent?: 'sign-out') => Promise<void> | void;
   __unstable__onAfterSetActive: () => Promise<void> | void;
+
+  /**
+   * TODO @nikos: implment type
+   * UI components loaded from @clerk/ui browser bundle.
+   * This is injected by the @clerk/ui package and consumed by clerk-js.
+   */
+  __unstable_ClerkUi?: {
+    mountComponentRenderer: any;
+    version: string;
+  };
 }

packages/clerk-js/src/index.browser.ts

@@ -1,13 +1,14 @@
 // It's crucial this is the first import,
 // otherwise chunk loading will not work
-// eslint-disable-next-line
+
 import './utils/setWebpackChunkPublicPath';
 
 import { Clerk } from './core/clerk';
 
-import { mountComponentRenderer } from './ui/Components';
-
-Clerk.mountComponentRenderer = mountComponentRenderer;
+// Load UI components from window (injected by @clerk/ui browser bundle)
+if (window.__unstable_ClerkUi) {
+  Clerk.mountComponentRenderer = window.__unstable_ClerkUi.mountComponentRenderer;
+}
 
 const publishableKey =
   document.querySelector('script[data-clerk-publishable-key]')?.getAttribute('data-clerk-publishable-key') ||
@@ -26,7 +27,7 @@ const domain =
 if (!window.Clerk) {
   window.Clerk = new Clerk(publishableKey, {
     proxyUrl,
-    // @ts-expect-error
+    // @ts-expect-error - domain is not typed
     domain,
   });
 }

packages/clerk-js/src/index.legacy.browser.ts

@@ -7,9 +7,10 @@ import 'regenerator-runtime/runtime';
 
 import { Clerk } from './core/clerk';
 
-import { mountComponentRenderer } from './ui/Components';
-
-Clerk.mountComponentRenderer = mountComponentRenderer;
+// Load UI components from window (injected by @clerk/ui browser bundle)
+if (window.__unstable_ClerkUi) {
+  Clerk.mountComponentRenderer = window.__unstable_ClerkUi.mountComponentRenderer;
+}
 
 const publishableKey =
   document.querySelector('script[data-clerk-publishable-key]')?.getAttribute('data-clerk-publishable-key') ||

packages/clerk-js/src/index.ts

@@ -1,7 +1,6 @@
 import 'regenerator-runtime/runtime';
 
 import { Clerk } from './core/clerk';
-import { mountComponentRenderer } from './ui/Components';
 
 export {
   ClerkAPIResponseError,
@@ -19,8 +18,6 @@ export {
 } from '@clerk/shared/error';
 export { Clerk };
 
-Clerk.mountComponentRenderer = mountComponentRenderer;
-
 if (module.hot) {
   module.hot.accept();
 }

packages/react/src/isomorphicClerk.ts

@@ -1,6 +1,6 @@
 import { inBrowser } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
-import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
+import { loadClerkJsScript, loadClerkUiScript } from '@clerk/shared/loadClerkJsScript';
 import type {
   __internal_CheckoutProps,
   __internal_OAuthConsentProps,
@@ -81,6 +81,10 @@ const SDK_METADATA = {
 
 export interface Global {
   Clerk?: HeadlessBrowserClerk | BrowserClerk;
+  __unstable_ClerkUi?: {
+    mountComponentRenderer: any;
+    version: string;
+  };
 }
 
 declare const global: Global;
@@ -429,6 +433,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   }
 
   async loadClerkJS(): Promise<HeadlessBrowserClerk | BrowserClerk | undefined> {
+    console.log('local clerk react');
+
     if (this.mode !== 'browser' || this.loaded) {
       return;
     }
@@ -475,20 +481,26 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
         global.Clerk = c;
       } else if (!__BUILD_DISABLE_RHC__) {
         // Hot-load latest ClerkJS from Clerk CDN
-        if (!global.Clerk) {
-          await loadClerkJsScript({
-            ...this.options,
-            publishableKey: this.#publishableKey,
-            proxyUrl: this.proxyUrl,
-            domain: this.domain,
-            nonce: this.options.nonce,
-          });
-        }
+        const scriptLoadingOptions = {
+          ...this.options,
+          publishableKey: this.#publishableKey,
+          proxyUrl: this.proxyUrl,
+          domain: this.domain,
+          nonce: this.options.nonce,
+        };
+
+        await Promise.all([
+          global.Clerk ? Promise.resolve() : loadClerkJsScript(scriptLoadingOptions),
+          global.__unstable_ClerkUi ? Promise.resolve() : loadClerkUiScript(scriptLoadingOptions),
+        ]);
 
         if (!global.Clerk) {
+          // TODO @nikos: somehow throw if clerk ui failed to load but it was not headless
           throw new Error('Failed to download latest ClerkJS. Contact [email protected].');
         }
 
+        console.log('all loaded');
+
         this.beforeLoad(global.Clerk);
         await global.Clerk.load(this.options);
       }

packages/shared/global.d.ts

@@ -2,6 +2,7 @@ declare const PACKAGE_NAME: string;
 declare const PACKAGE_VERSION: string;
 declare const JS_PACKAGE_VERSION: string;
 declare const __DEV__: boolean;
+declare const __BUILD_DISABLE_RHC__: boolean;
 
 interface ImportMetaEnv {
   readonly [key: string]: string;