Move buildRedirectUrl to utils to avoid import cycle issue

Author: LauraBeatris

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "625KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "75KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "78KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "117KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "61KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "113KB" },

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

@@ -28,9 +28,9 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
+  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
-  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -1993,7 +1993,7 @@ export class Clerk implements ClerkInterface {
     }
 
     if (this.session?.currentTask) {
-      return this.navigate(params.taskUrl ?? this.buildTasksUrl());
+      return navigate(params.taskUrl ?? this.buildTasksUrl());
     }
 
     return navigateToSignIn();

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

@@ -1,8 +1,8 @@
 import { logger } from '@clerk/shared/logger';
 import type { ClerkOptions, SessionTask, SetActiveParams } from '@clerk/types';
 
-import { buildRedirectUrl } from '@/ui/common';
 import { buildURL } from '@/utils';
+import { buildRedirectUrl } from '@/utils/redirects';
 
 /**
  * @internal

packages/clerk-js/src/ui/common/redirects.ts

@@ -1,5 +1,6 @@
-import { buildURL } from '../../utils/url';
-import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts';
+import { buildRedirectUrl } from '@/utils/redirects';
+
+import type { SignInContextType, SignUpContextType, UserProfileContextType } from '../contexts';
 
 export const SSO_CALLBACK_PATH_ROUTE = '/sso-callback';
 export const MAGIC_LINK_VERIFY_PATH_ROUTE = '/verify';
@@ -44,58 +45,3 @@ export function buildSSOCallbackURL(
     endpoint: SSO_CALLBACK_PATH_ROUTE,
   });
 }
-
-type AuthQueryString = string | null | undefined;
-
-type BuildRedirectUrlParams = {
-  routing: string | undefined;
-  authQueryString: AuthQueryString;
-  baseUrl: string;
-  path: string | undefined;
-  endpoint: string;
-};
-
-export const buildRedirectUrl = ({
-  routing,
-  authQueryString,
-  baseUrl,
-  path,
-  endpoint,
-}: BuildRedirectUrlParams): string => {
-  // If a routing strategy is not provided, default to hash routing
-  // All routing strategies know how to convert a hash-based url to their own format
-  // Example: navigating from a hash-based to a path-based component,
-  // the path-based component can parse and fix the URL automatically
-  // /#/sso-callback?code=123 -> /sso-callback?code=123
-  if (!routing || routing === 'hash') {
-    return buildHashBasedUrl(authQueryString, endpoint);
-  }
-
-  if (routing === 'path') {
-    return buildPathBasedUrl(path || '', authQueryString, endpoint);
-  }
-
-  return buildVirtualBasedUrl(baseUrl || '', authQueryString, endpoint);
-};
-
-const buildHashBasedUrl = (authQueryString: AuthQueryString, endpoint: string): string => {
-  // Strip hash to get the URL where we're mounted
-  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
-  return buildURL({ hash }, { stringify: true });
-};
-
-const buildPathBasedUrl = (path: string, authQueryString: AuthQueryString, endpoint: string): string => {
-  const searchArg = authQueryString ? { search: '?' + authQueryString } : {};
-  return buildURL(
-    {
-      pathname: path + endpoint,
-      ...searchArg,
-    },
-    { stringify: true },
-  );
-};
-
-const buildVirtualBasedUrl = (base: string, authQueryString: AuthQueryString, endpoint: string): string => {
-  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
-  return buildURL({ base, hash }, { stringify: true });
-};

packages/clerk-js/src/ui/contexts/components/SignIn.ts

@@ -3,12 +3,12 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { SessionResource } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
-import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
-
 import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
+import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { buildURL } from '../../../utils';
+import { buildRedirectUrl } from '../../../utils/redirects';
 import { RedirectUrls } from '../../../utils/redirectUrls';
-import { buildRedirectUrl, MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects';
+import { MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects';
 import { useEnvironment, useOptions } from '../../contexts';
 import type { ParsedQueryString } from '../../router';
 import { useRouter } from '../../router';

packages/clerk-js/src/ui/contexts/components/SignUp.ts

@@ -3,12 +3,11 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { SessionResource } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
-import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
-
 import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants';
-import { buildURL } from '../../../utils';
+import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
+import { MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../../ui/common';
+import { buildRedirectUrl, buildURL } from '../../../utils';
 import { RedirectUrls } from '../../../utils/redirectUrls';
-import { buildRedirectUrl, MAGIC_LINK_VERIFY_PATH_ROUTE, SSO_CALLBACK_PATH_ROUTE } from '../../common/redirects';
 import { useEnvironment, useOptions } from '../../contexts';
 import type { ParsedQueryString } from '../../router';
 import { useRouter } from '../../router';

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

@@ -21,6 +21,7 @@ export * from './path';
 export * from './props';
 export * from './queryStateParams';
 export * from './querystring';
+export * from './redirects';
 export * from './runtime';
 export * from './url';
 export * from './web3';

packages/clerk-js/src/utils/redirects.ts

@@ -0,0 +1,56 @@
+import { buildURL } from './url';
+
+type AuthQueryString = string | null | undefined;
+
+type BuildRedirectUrlParams = {
+  routing: string | undefined;
+  authQueryString: AuthQueryString;
+  baseUrl: string;
+  path: string | undefined;
+  endpoint: string;
+};
+
+export const buildRedirectUrl = ({
+  routing,
+  authQueryString,
+  baseUrl,
+  path,
+  endpoint,
+}: BuildRedirectUrlParams): string => {
+  // If a routing strategy is not provided, default to hash routing
+  // All routing strategies know how to convert a hash-based url to their own format
+  // Example: navigating from a hash-based to a path-based component,
+  // the path-based component can parse and fix the URL automatically
+  // /#/sso-callback?code=123 -> /sso-callback?code=123
+  if (!routing || routing === 'hash') {
+    return buildHashBasedUrl(authQueryString, endpoint);
+  }
+
+  if (routing === 'path') {
+    return buildPathBasedUrl(path || '', authQueryString, endpoint);
+  }
+
+  return buildVirtualBasedUrl(baseUrl || '', authQueryString, endpoint);
+};
+
+const buildHashBasedUrl = (authQueryString: AuthQueryString, endpoint: string): string => {
+  // Strip hash to get the URL where we're mounted
+  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
+  return buildURL({ hash }, { stringify: true });
+};
+
+const buildPathBasedUrl = (path: string, authQueryString: AuthQueryString, endpoint: string): string => {
+  const searchArg = authQueryString ? { search: '?' + authQueryString } : {};
+  return buildURL(
+    {
+      pathname: path + endpoint,
+      ...searchArg,
+    },
+    { stringify: true },
+  );
+};
+
+const buildVirtualBasedUrl = (base: string, authQueryString: AuthQueryString, endpoint: string): string => {
+  const hash = endpoint + (authQueryString ? `?${authQueryString}` : '');
+  return buildURL({ base, hash }, { stringify: true });
+};

packages/nextjs/src/client-boundary/controlComponents.ts

@@ -1,20 +1,20 @@
 'use client';
 
 export {
-  AuthenticateWithRedirectCallback,
-  ClerkDegraded,
-  ClerkFailed,
   ClerkLoaded,
   ClerkLoading,
+  ClerkDegraded,
+  ClerkFailed,
+  SignedOut,
+  SignedIn,
   Protect,
-  RedirectToCreateOrganization,
-  RedirectToOrganizationProfile,
   RedirectToSignIn,
   RedirectToSignUp,
   RedirectToTasks,
   RedirectToUserProfile,
-  SignedIn,
-  SignedOut,
+  AuthenticateWithRedirectCallback,
+  RedirectToCreateOrganization,
+  RedirectToOrganizationProfile,
 } from '@clerk/clerk-react';
 
 export { MultisessionAppSupport } from '@clerk/clerk-react/internal';