chore(clerk-js): Bundle Accountless only in dev (#4649)

clerk · Nov 25, 2024 · 2d3866c · 2d3866c
1 parent 0a18075
commit 2d3866c
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 17 deletions.
diff --git a/.changeset/weak-poets-remember.md b/.changeset/weak-poets-remember.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/jest.setup.ts b/packages/clerk-js/jest.setup.ts
@@ -35,6 +35,7 @@ if (typeof window !== 'undefined') {
 
   global.__PKG_NAME__ = '';
   global.__PKG_VERSION__ = '';
+  global.__BUILD_FLAG_ACCOUNTLESS_UI__ = '';
   global.BUILD_ENABLE_NEW_COMPONENTS = '';
 
   //@ts-expect-error

diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js
@@ -44,6 +44,7 @@ const common = ({ mode, disableRHC = false }) => {
       new rspack.DefinePlugin({
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
         __DEV__: isDevelopment(mode),
+        __BUILD_FLAG_ACCOUNTLESS_UI__: isDevelopment(mode),
         __PKG_VERSION__: JSON.stringify(packageJSON.version),
         __PKG_NAME__: JSON.stringify(packageJSON.name),
         BUILD_ENABLE_NEW_COMPONENTS: JSON.stringify(process.env.BUILD_ENABLE_NEW_COMPONENTS),

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -1876,7 +1876,9 @@ export class Clerk implements ClerkInterface {
     void this.#captchaHeartbeat.start();
     this.#clearClerkQueryParams();
     this.#handleImpersonationFab();
-    this.#handleAccountlessPrompt();
+    if (__BUILD_FLAG_ACCOUNTLESS_UI__) {
+      this.#handleAccountlessPrompt();
+    }
     return true;
   };
 
@@ -2007,13 +2009,15 @@ export class Clerk implements ClerkInterface {
   };
 
   #handleAccountlessPrompt = () => {
-    void this.#componentControls?.ensureMounted().then(controls => {
-      if (this.#options.__internal_claimAccountlessKeysUrl) {
-        controls.updateProps({
-          options: { __internal_claimAccountlessKeysUrl: this.#options.__internal_claimAccountlessKeysUrl },
-        });
-      }
-    });
+    if (__BUILD_FLAG_ACCOUNTLESS_UI__) {
+      void this.#componentControls?.ensureMounted().then(controls => {
+        if (this.#options.__internal_claimAccountlessKeysUrl) {
+          controls.updateProps({
+            options: { __internal_claimAccountlessKeysUrl: this.#options.__internal_claimAccountlessKeysUrl },
+          });
+        }
+      });
+    }
   };
 
   #buildUrl = (

diff --git a/packages/clerk-js/src/globals.d.ts b/packages/clerk-js/src/globals.d.ts
@@ -1,5 +1,6 @@
 declare global {
   const __DEV__: boolean;
+  const __BUILD_FLAG_ACCOUNTLESS_UI__: boolean;
   const __PKG_NAME__: string;
   const __PKG_VERSION__: string;
   const __BUILD_DISABLE_RHC__: string;

diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
@@ -517,11 +517,13 @@ const Components = (props: ComponentsProps) => {
           </LazyImpersonationFabProvider>
         )}
 
-        {state.options?.__internal_claimAccountlessKeysUrl && (
-          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
-            <AccountlessPrompt url={state.options.__internal_claimAccountlessKeysUrl} />
-          </LazyImpersonationFabProvider>
-        )}
+        {__BUILD_FLAG_ACCOUNTLESS_UI__
+          ? state.options?.__internal_claimAccountlessKeysUrl && (
+              <LazyImpersonationFabProvider globalAppearance={state.appearance}>
+                <AccountlessPrompt url={state.options.__internal_claimAccountlessKeysUrl} />
+              </LazyImpersonationFabProvider>
+            )
+          : null}
 
         <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>
       </LazyProviders>

diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -16,7 +16,9 @@ const componentImportPaths = {
   BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
   UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
   Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
-  AccountlessPrompt: () => import(/* webpackChunkName: "accountlessPrompt" */ './../components/AccountlessPrompt'),
+  AccountlessPrompt: __BUILD_FLAG_ACCOUNTLESS_UI__
+    ? () => import(/* webpackChunkName: "accountlessPrompt" */ './../components/AccountlessPrompt')
+    : () => null,
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -84,9 +86,10 @@ export const BlankCaptchaModal = lazy(() =>
 export const ImpersonationFab = lazy(() =>
   componentImportPaths.ImpersonationFab().then(module => ({ default: module.ImpersonationFab })),
 );
-export const AccountlessPrompt = lazy(() =>
-  componentImportPaths.AccountlessPrompt().then(module => ({ default: module.AccountlessPrompt })),
-);
+export const AccountlessPrompt = __BUILD_FLAG_ACCOUNTLESS_UI__
+  ? // @ts-expect-error Types are broken due to __BUILD_FLAG_ACCOUNTLESS_UI__
+    lazy(() => componentImportPaths.AccountlessPrompt().then(module => ({ default: module.AccountlessPrompt })))
+  : () => null;
 
 export const preloadComponent = async (component: unknown) => {
   return componentImportPaths[component as keyof typeof componentImportPaths]?.();