refactor(clerk-js,types): Remove virtual routing option from component types

.changeset/silent-ducks-wait.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Remove `virtual` routing option from components.

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx

@@ -1,16 +1,16 @@
 import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
+import type { __internal_RoutingOptions, OrganizationProfileCtx } from 'ui/types';
 
 import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
-import type { OrganizationProfileCtx } from '../../types';
 import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
 import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
 
-const _OrganizationProfile = (_: OrganizationProfileProps) => {
+const _OrganizationProfile = () => {
   const { organization } = useOrganization();
 
   if (!organization) {
@@ -48,6 +48,10 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
 
 export const OrganizationProfile = withCardStateProvider(_OrganizationProfile);
 
+const InternalOrganizationProfile: React.ComponentType<
+  Omit<OrganizationProfileProps, 'routing'> & __internal_RoutingOptions
+> = withCardStateProvider(_OrganizationProfile);
+
 export const OrganizationProfileModal = (props: OrganizationProfileModalProps): JSX.Element => {
   const organizationProfileProps: OrganizationProfileCtx = {
     ...props,
@@ -61,7 +65,7 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps):
       <OrganizationProfileContext.Provider value={organizationProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <OrganizationProfile {...organizationProfileProps} />
+          <InternalOrganizationProfile {...organizationProfileProps} />
         </div>
       </OrganizationProfileContext.Provider>
     </Route>

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -1,6 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
+import type { __internal_RoutingOptions } from 'ui/types';
 
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
@@ -165,6 +166,9 @@ SignInRoutes.displayName = 'SignIn';
 
 export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoot);
 
+const InternalSignIn: React.ComponentType<Omit<SignInProps, 'routing'> & __internal_RoutingOptions> =
+  withCoreSessionSwitchGuard(SignInRoot);
+
 export const SignInModal = (props: SignInModalProps): JSX.Element => {
   const signInProps = {
     signUpUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-up`,
@@ -184,7 +188,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => {
       >
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <SignIn
+          <InternalSignIn
             {...signInProps}
             routing='virtual'
           />

packages/clerk-js/src/ui/components/SignUp/SignUp.tsx

@@ -1,6 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
+import type { __internal_RoutingOptions } from 'ui/types';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
@@ -89,6 +90,9 @@ SignUpRoutes.displayName = 'SignUp';
 
 export const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);
 
+const InternalSignUp: React.ComponentType<Omit<SignUpProps, 'routing'> & __internal_RoutingOptions> =
+  withCoreSessionSwitchGuard(SignUpRoutes);
+
 export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
   const signUpProps = {
     signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,
@@ -108,7 +112,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
       >
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <SignUp
+          <InternalSignUp
             {...signUpProps}
             routing='virtual'
           />

packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx

@@ -5,12 +5,12 @@ import { UserProfileContext, withCoreUserGuard } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
-import type { UserProfileCtx } from '../../types';
+import type { __internal_RoutingOptions, UserProfileCtx } from '../../types';
 import { UserProfileNavbar } from './UserProfileNavbar';
 import { UserProfileRoutes } from './UserProfileRoutes';
 import { VerificationSuccessPage } from './VerifyWithLink';
 
-const _UserProfile = (_: UserProfileProps) => {
+const _UserProfile = () => {
   return (
     <Flow.Root flow='userProfile'>
       <Flow.Part>
@@ -42,7 +42,10 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
   );
 });
 
-export const UserProfile = withCardStateProvider(_UserProfile);
+export const UserProfile: React.ComponentType<UserProfileProps> = withCardStateProvider(_UserProfile);
+
+const InternalUserProfile: React.ComponentType<Omit<UserProfileProps, 'routing'> & __internal_RoutingOptions> =
+  withCardStateProvider(_UserProfile);
 
 export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
   const userProfileProps: UserProfileCtx = {
@@ -57,7 +60,7 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
       <UserProfileContext.Provider value={userProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <UserProfile {...userProfileProps} />
+          <InternalUserProfile {...userProfileProps} />
         </div>
       </UserProfileContext.Provider>
     </Route>

packages/clerk-js/src/ui/components/UserVerification/index.tsx

@@ -1,5 +1,6 @@
 import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/types';
 import React, { useEffect } from 'react';
+import type { __internal_RoutingOptions } from 'ui/types';
 
 import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
@@ -31,8 +32,9 @@ function UserVerificationRoutes(): JSX.Element {
 
 UserVerificationRoutes.displayName = 'UserVerification';
 
-const UserVerification: React.ComponentType<__internal_UserVerificationProps> =
-  withCoreSessionSwitchGuard(UserVerificationRoutes);
+const UserVerification: React.ComponentType<
+  Omit<__internal_UserVerificationProps, 'routing'> & __internal_RoutingOptions
+> = withCoreSessionSwitchGuard(UserVerificationRoutes);
 
 const UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => {
   return (

packages/clerk-js/src/ui/types.ts

@@ -5,6 +5,7 @@ import type {
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
+  RoutingStrategy,
   SignInProps,
   SignUpProps,
   UserButtonProps,
@@ -40,42 +41,48 @@ export type AvailableComponentProps =
 
 type ComponentMode = 'modal' | 'mounted';
 
-export type SignInCtx = SignInProps & {
-  componentName: 'SignIn';
-  mode?: ComponentMode;
-};
-
-export type UserVerificationCtx = __internal_UserVerificationProps & {
-  componentName: 'UserVerification';
-  mode?: ComponentMode;
-};
-
-export type UserProfileCtx = UserProfileProps & {
-  componentName: 'UserProfile';
-  mode?: ComponentMode;
-};
-
-export type SignUpCtx = SignUpProps & {
-  componentName: 'SignUp';
-  mode?: ComponentMode;
-  emailLinkRedirectUrl?: string;
-  ssoCallbackUrl?: string;
-};
+export type SignInCtx = Omit<SignInProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'SignIn';
+    mode?: ComponentMode;
+  };
+
+export type UserVerificationCtx = Omit<__internal_UserVerificationProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'UserVerification';
+    mode?: ComponentMode;
+  };
+
+export type UserProfileCtx = Omit<UserProfileProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'UserProfile';
+    mode?: ComponentMode;
+  };
+
+export type SignUpCtx = Omit<SignUpProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'SignUp';
+    mode?: ComponentMode;
+    emailLinkRedirectUrl?: string;
+    ssoCallbackUrl?: string;
+  };
 
 export type UserButtonCtx = UserButtonProps & {
   componentName: 'UserButton';
   mode?: ComponentMode;
 };
 
-export type OrganizationProfileCtx = OrganizationProfileProps & {
-  componentName: 'OrganizationProfile';
-  mode?: ComponentMode;
-};
+export type OrganizationProfileCtx = Omit<OrganizationProfileProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'OrganizationProfile';
+    mode?: ComponentMode;
+  };
 
-export type CreateOrganizationCtx = CreateOrganizationProps & {
-  componentName: 'CreateOrganization';
-  mode?: ComponentMode;
-};
+export type CreateOrganizationCtx = Omit<CreateOrganizationProps, 'routing'> &
+  __internal_RoutingOptions & {
+    componentName: 'CreateOrganization';
+    mode?: ComponentMode;
+  };
 
 export type OrganizationSwitcherCtx = OrganizationSwitcherProps & {
   componentName: 'OrganizationSwitcher';
@@ -110,3 +117,7 @@ export type AvailableComponentCtx =
   | WaitlistCtx;
 
 export type AvailableComponentName = AvailableComponentCtx['componentName'];
+
+export type __internal_RoutingOptions = {
+  routing?: RoutingStrategy;
+};

packages/react/src/components/__tests__/OrganizationProfile.test.tsx

@@ -19,18 +19,6 @@ describe('<OrganizationProfile/>', () => {
       }).toMatchTypeOf<OrganizationProfileComponentProps>();
     });
 
-    test('when path is filled, routing must only have path as value', () => {
-      expectTypeOf({
-        path: '/org',
-        routing: 'virtual' as const,
-      }).not.toMatchTypeOf<OrganizationProfileComponentProps>();
-
-      expectTypeOf({
-        path: '/org',
-        routing: 'hash' as const,
-      }).not.toMatchTypeOf<OrganizationProfileComponentProps>();
-    });
-
     test('when routing is hash or virtual path must be present', () => {
       expectTypeOf({
         routing: 'hash' as const,

packages/react/src/components/__tests__/SignIn.test.tsx

@@ -19,18 +19,6 @@ describe('<SignIn/>', () => {
       }).toMatchTypeOf<SignInComponentProps>();
     });
 
-    test('when path is filled, routing must only have path as value', () => {
-      expectTypeOf({
-        path: '/sign-in',
-        routing: 'virtual' as const,
-      }).not.toMatchTypeOf<SignInComponentProps>();
-
-      expectTypeOf({
-        path: '/sign-in',
-        routing: 'hash' as const,
-      }).not.toMatchTypeOf<SignInComponentProps>();
-    });
-
     test('when routing is hash or virtual path must be present', () => {
       expectTypeOf({
         routing: 'hash' as const,

packages/react/src/components/__tests__/SignUp.test.tsx

@@ -19,18 +19,6 @@ describe('<SignUp/>', () => {
       }).toMatchTypeOf<SignUpComponentProps>();
     });
 
-    test('when path is filled, routing must only have path as value', () => {
-      expectTypeOf({
-        path: '/sign-up',
-        routing: 'virtual' as const,
-      }).not.toMatchTypeOf<SignUpComponentProps>();
-
-      expectTypeOf({
-        path: '/sign-up',
-        routing: 'hash' as const,
-      }).not.toMatchTypeOf<SignUpComponentProps>();
-    });
-
     test('when routing is hash or virtual path must be present', () => {
       expectTypeOf({
         routing: 'hash' as const,

packages/react/src/components/__tests__/UserProfile.test.tsx

@@ -19,18 +19,6 @@ describe('<UserProfile/>', () => {
       }).toMatchTypeOf<UserProfileComponentProps>();
     });
 
-    test('when path is filled, routing must only have path as value', () => {
-      expectTypeOf({
-        path: '/profile',
-        routing: 'virtual' as const,
-      }).not.toMatchTypeOf<UserProfileComponentProps>();
-
-      expectTypeOf({
-        path: '/profile',
-        routing: 'hash' as const,
-      }).not.toMatchTypeOf<UserProfileComponentProps>();
-    });
-
     test('when routing is hash or virtual path must be present', () => {
       expectTypeOf({
         routing: 'hash' as const,

packages/types/src/clerk.ts

@@ -890,9 +890,10 @@ export type SetActiveParams = {
 
 export type SetActive = (params: SetActiveParams) => Promise<void>;
 
-export type RoutingOptions =
-  | { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> }
-  | { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
+export type RoutingOptions = {
+  path?: string;
+  routing?: Exclude<RoutingStrategy, 'virtual'>;
+};
 
 export type SignInProps = RoutingOptions & {
   /**