feat(react): Do not hotload clerkUi if clerkUiCtor was passed

Author: nikosdouvlis

integration/templates/express-vite/src/client/main.ts

@@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', async function () {
   const clerk = new Clerk(publishableKey);
 
   await clerk.load({
-    clerkUiCtor: Promise.resolve(ClerkUi),
+    clerkUiCtor: ClerkUi,
   });
 
   if (clerk.isSignedIn) {

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

@@ -461,7 +461,7 @@ export class Clerk implements ClerkInterface {
 
     // Initialize ClerkUi if it was provided
     if (this.#options.clerkUiCtor) {
-      this.#clerkUi = this.#options.clerkUiCtor.then(
+      this.#clerkUi = Promise.resolve(this.#options.clerkUiCtor).then(
         ClerkUI =>
           new ClerkUI(
             () => this,

packages/react/src/isomorphicClerk.ts

@@ -250,12 +250,11 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   }
 
   constructor(options: IsomorphicClerkOptions) {
-    const { Clerk = null, publishableKey } = options || {};
-    this.#publishableKey = publishableKey;
+    this.#publishableKey = options?.publishableKey;
     this.#proxyUrl = options?.proxyUrl;
     this.#domain = options?.domain;
     this.options = options;
-    this.Clerk = Clerk;
+    this.Clerk = options?.Clerk || null;
     this.mode = inBrowser() ? 'browser' : 'server';
     this.#stateProxy = new StateProxy(this);
 
@@ -266,7 +265,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     this.#eventBus.prioritizedOn(clerkEvents.Status, status => (this.#status = status));
 
     if (this.#publishableKey) {
-      void this.loadClerkEntryChunks();
+      void this.getEntryChunks();
     }
   }
 
@@ -436,7 +435,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     });
   }
 
-  async loadClerkEntryChunks(): Promise<void> {
+  async getEntryChunks(): Promise<void> {
     if (this.mode !== 'browser' || this.loaded) {
       return;
     }
@@ -456,10 +455,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
 
     try {
-      const clerkPromise = this.loadClerkJsEntryChunk();
-      const clerkUiCtor = this.loadClerkUiEntryChunk();
-      await clerkPromise;
+      const clerkPromise = this.getClerkJsEntryChunk();
+      const clerkUiCtor = this.getClerkUiEntryChunk();
 
+      global.Clerk = await clerkPromise;
       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].');
@@ -480,9 +479,9 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   }
 
-  private async loadClerkJsEntryChunk() {
+  private async getClerkJsEntryChunk(): Promise<HeadlessBrowserClerk | BrowserClerk | undefined> {
     // Hotload bundle
-    if (!this.Clerk && !__BUILD_DISABLE_RHC__) {
+    if (!this.options.Clerk && !__BUILD_DISABLE_RHC__) {
       // the UMD script sets the global.Clerk instance
       await loadClerkJsScript({
         ...this.options,
@@ -494,25 +493,32 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
 
     // Otherwise, set global.Clerk to the bundled ctor or instance
-    if (this.Clerk) {
-      global.Clerk = isConstructor<BrowserClerkConstructor | HeadlessBrowserClerkConstructor>(this.Clerk)
-        ? new this.Clerk(this.#publishableKey, { proxyUrl: this.proxyUrl, domain: this.domain })
-        : this.Clerk;
+    if (this.options.Clerk) {
+      return isConstructor<BrowserClerkConstructor | HeadlessBrowserClerkConstructor>(this.options.Clerk)
+        ? new this.options.Clerk(this.#publishableKey, { proxyUrl: this.proxyUrl, domain: this.domain })
+        : this.options.Clerk;
     }
-    return global.Clerk;
+
+    return;
   }
 
-  private async loadClerkUiEntryChunk() {
+  private async getClerkUiEntryChunk(): Promise<ClerkUiConstructor> {
+    if (this.options.clerkUiCtor) {
+      return this.options.clerkUiCtor;
+    }
+
     await loadClerkUiScript({
       ...this.options,
       publishableKey: this.#publishableKey,
       proxyUrl: this.proxyUrl,
       domain: this.domain,
       nonce: this.options.nonce,
     });
+
     if (!global.__unstable_ClerkUiCtor) {
       throw new Error('Failed to download latest Clerk UI. Contact [email protected].');
     }
+
     return global.__unstable_ClerkUiCtor;
   }
 

packages/shared/src/types/clerk.ts

@@ -1056,7 +1056,7 @@ export type ClerkOptions = ClerkOptionsNavigation &
     /**
      * Clerk UI entrypoint.
      */
-    clerkUiCtor?: Promise<ClerkUiConstructor>;
+    clerkUiCtor?: ClerkUiConstructor | Promise<ClerkUiConstructor>;
     /**
      * Optional object to style your components. Will only affect [Clerk Components](https://clerk.com/docs/reference/components/overview) and not [Account Portal](https://clerk.com/docs/guides/customizing-clerk/account-portal) pages.
      */