From a068d30a67a0f81ec3f5436721214b5da5b257d2 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 21 Feb 2025 16:18:20 +0200 Subject: [PATCH 1/4] feat(clerk-js): Lazy load Sign up on Combined flow --- .changeset/olive-humans-leave.md | 5 +++ packages/clerk-js/rspack.config.js | 8 ++++ .../src/ui/components/SignIn/SignIn.tsx | 38 +++++++++++++------ .../SignIn/handleCombinedFlowTransfer.ts | 5 ++- .../src/ui/components/SignIn/lazy-sign-up.ts | 22 +++++++++++ .../src/ui/components/SignUp/SignUp.tsx | 2 + packages/clerk-js/src/ui/hooks/useFetch.ts | 3 +- 7 files changed, 68 insertions(+), 15 deletions(-) create mode 100644 .changeset/olive-humans-leave.md create mode 100644 packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts diff --git a/.changeset/olive-humans-leave.md b/.changeset/olive-humans-leave.md new file mode 100644 index 00000000000..f234e5697f4 --- /dev/null +++ b/.changeset/olive-humans-leave.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +On `` mount, load `` on combined flow. diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js index 9c6b23a7c64..8249488b47c 100644 --- a/packages/clerk-js/rspack.config.js +++ b/packages/clerk-js/rspack.config.js @@ -85,6 +85,14 @@ const common = ({ mode, disableRHC = false }) => { name: 'coinbase-wallet-sdk', chunks: 'all', }, + /** + * Sign up is shared between the SignUp component and the SignIn component. + */ + signUp: { + minChunks: 1, + name: 'sign-up', + test: module => module.resource && module.resource.includes('/ui/components/SignUp'), + }, common: { minChunks: 1, name: 'ui-common', diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx index a767b6dbf1e..c30b60ed5a0 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx @@ -13,12 +13,16 @@ import { withCoreSessionSwitchGuard, } from '../../contexts'; import { Flow } from '../../customizables'; +import { useFetch } from '../../hooks'; import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; -import { SignUpContinue } from '../SignUp/SignUpContinue'; -import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback'; -import { SignUpStart } from '../SignUp/SignUpStart'; -import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail'; -import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone'; +import { + LazySignUpContinue, + LazySignUpSSOCallback, + LazySignUpStart, + LazySignUpVerifyEmail, + LazySignUpVerifyPhone, + preloadSignUp, +} from './lazy-sign-up'; import { ResetPassword } from './ResetPassword'; import { ResetPasswordSuccess } from './ResetPasswordSuccess'; import { SignInAccountSwitcher } from './SignInAccountSwitcher'; @@ -76,22 +80,23 @@ function SignInRoutes(): JSX.Element { redirectUrl='../factor-two' /> + {signInContext.isCombinedFlow && ( !!clerk.client.signUp.emailAddress} > - + !!clerk.client.signUp.phoneNumber} > - + - !!clerk.client.signUp.emailAddress} > - + !!clerk.client.signUp.phoneNumber} > - + - + - + )} + @@ -143,6 +149,9 @@ function SignInRoutes(): JSX.Element { ); } +const usePreloadSignUp = (enabled = false) => + useFetch(enabled ? preloadSignUp : undefined, 'preloadComponent', { staleTime: Infinity }); + function SignInRoot() { const signInContext = useSignInContext(); const normalizedSignUpContext = { @@ -156,6 +165,11 @@ function SignInRoot() { ...normalizeRoutingOptions({ routing: signInContext?.routing, path: signInContext?.path }), } as SignUpContextType; + /** + * Preload Sign Up when in Combined Flow. + */ + usePreloadSignUp(signInContext.isCombinedFlow); + return ( diff --git a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts index 1337057372b..c9b426a795b 100644 --- a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts +++ b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts @@ -2,7 +2,7 @@ import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types'; import { SIGN_UP_MODES } from '../../../core/constants'; import type { RouteContextValue } from '../../router/RouteContext'; -import { completeSignUpFlow } from '../SignUp/util'; +import { lazyCompleteSignUpFlow } from './lazy-sign-up'; type HandleCombinedFlowTransferProps = { identifierAttribute: 'emailAddress' | 'phoneNumber' | 'username'; @@ -65,7 +65,8 @@ export function handleCombinedFlowTransfer({ .create({ [identifierAttribute]: identifierValue, }) - .then(res => { + .then(async res => { + const completeSignUpFlow = await lazyCompleteSignUpFlow(); return completeSignUpFlow({ signUp: res, verifyEmailPath: 'create/verify-email-address', diff --git a/packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts b/packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts new file mode 100644 index 00000000000..e3c08113fd9 --- /dev/null +++ b/packages/clerk-js/src/ui/components/SignIn/lazy-sign-up.ts @@ -0,0 +1,22 @@ +import { lazy } from 'react'; + +const preloadSignUp = () => import(/* webpackChunkName: "signUp" */ '../SignUp'); + +const LazySignUpVerifyPhone = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpVerifyPhone }))); +const LazySignUpVerifyEmail = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpVerifyEmail }))); +const LazySignUpStart = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpStart }))); +const LazySignUpSSOCallback = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpSSOCallback }))); +const LazySignUpContinue = lazy(() => preloadSignUp().then(m => ({ default: m.SignUpContinue }))); + +const lazyCompleteSignUpFlow = () => + import(/* webpackChunkName: "signUp" */ '../SignUp/util').then(m => m.completeSignUpFlow); + +export { + preloadSignUp, + LazySignUpVerifyPhone, + LazySignUpVerifyEmail, + LazySignUpStart, + LazySignUpSSOCallback, + LazySignUpContinue, + lazyCompleteSignUpFlow, +}; diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx index 430ae2f53a9..c96abac836b 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx @@ -117,3 +117,5 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => { ); }; + +export { SignUpContinue, SignUpSSOCallback, SignUpStart, SignUpVerifyEmail, SignUpVerifyPhone }; diff --git a/packages/clerk-js/src/ui/hooks/useFetch.ts b/packages/clerk-js/src/ui/hooks/useFetch.ts index ba9337dadbd..f7ad937678f 100644 --- a/packages/clerk-js/src/ui/hooks/useFetch.ts +++ b/packages/clerk-js/src/ui/hooks/useFetch.ts @@ -103,7 +103,8 @@ export const useFetch = ( useEffect(() => { const fetcherMissing = !fetcherRef.current; - const isCacheStale = Date.now() - (getCache()?.cachedAt || 0) >= staleTime; + const isCacheStale = + typeof getCache()?.cachedAt === 'undefined' ? true : Date.now() - (getCache()?.cachedAt || 0) >= staleTime; const isRequestOnGoing = getCache()?.isValidating ?? false; if (fetcherMissing || !isCacheStale || isRequestOnGoing) { From 65235a19a02ad8436847391fc973d6d4d1511129 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Wed, 26 Feb 2025 16:03:33 +0200 Subject: [PATCH 2/4] update bundlewatch.config.json --- packages/clerk-js/bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index fe0ea8fb266..7f2ac0b2970 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -11,8 +11,8 @@ { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" }, { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" }, { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" }, - { "path": "./dist/signin*.js", "maxSize": "12.1KB" }, - { "path": "./dist/signup*.js", "maxSize": "10KB" }, + { "path": "./dist/signin*.js", "maxSize": "12.4KB" }, + { "path": "./dist/signup*.js", "maxSize": "6.4KB" }, { "path": "./dist/userbutton*.js", "maxSize": "5KB" }, { "path": "./dist/userprofile*.js", "maxSize": "15KB" }, { "path": "./dist/userverification*.js", "maxSize": "5KB" }, From c3848f8f01e493f1618a251dd40d7c4566a78093 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 27 Feb 2025 14:01:06 +0200 Subject: [PATCH 3/4] Update .changeset/olive-humans-leave.md Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com> --- .changeset/olive-humans-leave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/olive-humans-leave.md b/.changeset/olive-humans-leave.md index f234e5697f4..01f1ef14f39 100644 --- a/.changeset/olive-humans-leave.md +++ b/.changeset/olive-humans-leave.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': minor --- -On `` mount, load `` on combined flow. +Lazily load components related to `` functionality when used with the combined flow in ``. From d701f0d1fa73134358bfc9650cdf063305db184d Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 27 Feb 2025 14:11:56 +0200 Subject: [PATCH 4/4] update name of chunk --- packages/clerk-js/rspack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js index 8249488b47c..68b3df3ec39 100644 --- a/packages/clerk-js/rspack.config.js +++ b/packages/clerk-js/rspack.config.js @@ -90,7 +90,7 @@ const common = ({ mode, disableRHC = false }) => { */ signUp: { minChunks: 1, - name: 'sign-up', + name: 'signup', test: module => module.resource && module.resource.includes('/ui/components/SignUp'), }, common: {