From 2d3866c4c991f8cd13f5365c778854b8fb6aa6bb Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 25 Nov 2024 21:48:51 +0200 Subject: [PATCH] chore(clerk-js): Bundle Accountless only in dev (#4649) --- .changeset/weak-poets-remember.md | 2 ++ packages/clerk-js/jest.setup.ts | 1 + packages/clerk-js/rspack.config.js | 1 + packages/clerk-js/src/core/clerk.ts | 20 +++++++++++-------- packages/clerk-js/src/globals.d.ts | 1 + packages/clerk-js/src/ui/Components.tsx | 12 ++++++----- .../clerk-js/src/ui/lazyModules/components.ts | 11 ++++++---- 7 files changed, 31 insertions(+), 17 deletions(-) create mode 100644 .changeset/weak-poets-remember.md diff --git a/.changeset/weak-poets-remember.md b/.changeset/weak-poets-remember.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ 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 index cf496bb413..38259c0787 100644 --- 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 index 91bddaa091..31dcf9c2fe 100644 --- 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 index 8d087aa7e5..8885f4bfc6 100644 --- 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 index 4cd691f52f..a1ac10dabf 100644 --- 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 index 81b8e93036..2118601a4c 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -517,11 +517,13 @@ const Components = (props: ComponentsProps) => { )} - {state.options?.__internal_claimAccountlessKeysUrl && ( - - - - )} + {__BUILD_FLAG_ACCOUNTLESS_UI__ + ? state.options?.__internal_claimAccountlessKeysUrl && ( + + + + ) + : null} {state.organizationSwitcherPrefetch && } diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index 8aae06059d..14c544bca9 100644 --- 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]?.();