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

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: alexcarpenter

.changeset/silent-ducks-wait.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Remove `'virtual'` from the `routing` option. The `'virtual'` value is only used internally and should not be part of the public API.

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 type { OrganizationProfileModalProps, OrganizationProfileProps, WithInternalRouting } from '@clerk/types';
 import React from 'react';
+import type { 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,9 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
 
 export const OrganizationProfile = withCardStateProvider(_OrganizationProfile);
 
+const InternalOrganizationProfile: React.ComponentType<WithInternalRouting<OrganizationProfileProps>> =
+  withCardStateProvider(_OrganizationProfile);
+
 export const OrganizationProfileModal = (props: OrganizationProfileModalProps): JSX.Element => {
   const organizationProfileProps: OrganizationProfileCtx = {
     ...props,
@@ -61,7 +64,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,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import type { SignInModalProps, SignInProps } from '@clerk/types';
+import type { SignInModalProps, SignInProps, WithInternalRouting } from '@clerk/types';
 import React from 'react';
 
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
@@ -165,6 +165,8 @@ SignInRoutes.displayName = 'SignIn';
 
 export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoot);
 
+const InternalSignIn: React.ComponentType<WithInternalRouting<SignInProps>> = withCoreSessionSwitchGuard(SignInRoot);
+
 export const SignInModal = (props: SignInModalProps): JSX.Element => {
   const signInProps = {
     signUpUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-up`,
@@ -184,7 +186,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,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import type { SignUpModalProps, SignUpProps } from '@clerk/types';
+import type { SignUpModalProps, SignUpProps, WithInternalRouting } from '@clerk/types';
 import React from 'react';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
@@ -89,6 +89,8 @@ SignUpRoutes.displayName = 'SignUp';
 
 export const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);
 
+const InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>> = withCoreSessionSwitchGuard(SignUpRoutes);
+
 export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
   const signUpProps = {
     signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,
@@ -108,7 +110,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

@@ -1,4 +1,4 @@
-import type { UserProfileModalProps, UserProfileProps } from '@clerk/types';
+import type { UserProfileModalProps, UserProfileProps, WithInternalRouting } from '@clerk/types';
 import React from 'react';
 
 import { UserProfileContext, withCoreUserGuard } from '../../contexts';
@@ -10,7 +10,7 @@ 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<WithInternalRouting<UserProfileProps>> =
+  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,4 +1,8 @@
-import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/types';
+import type {
+  __internal_UserVerificationModalProps,
+  __internal_UserVerificationProps,
+  WithInternalRouting,
+} from '@clerk/types';
 import React, { useEffect } from 'react';
 
 import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';
@@ -31,7 +35,7 @@ function UserVerificationRoutes(): JSX.Element {
 
 UserVerificationRoutes.displayName = 'UserVerification';
 
-const UserVerification: React.ComponentType<__internal_UserVerificationProps> =
+const UserVerification: React.ComponentType<WithInternalRouting<__internal_UserVerificationProps>> =
   withCoreSessionSwitchGuard(UserVerificationRoutes);
 
 const UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => {

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

@@ -10,6 +10,7 @@ import type {
   UserButtonProps,
   UserProfileProps,
   WaitlistProps,
+  WithInternalRouting,
 } from '@clerk/types';
 
 export type {
@@ -40,22 +41,22 @@ export type AvailableComponentProps =
 
 type ComponentMode = 'modal' | 'mounted';
 
-export type SignInCtx = SignInProps & {
+export type SignInCtx = WithInternalRouting<SignInProps> & {
   componentName: 'SignIn';
   mode?: ComponentMode;
 };
 
-export type UserVerificationCtx = __internal_UserVerificationProps & {
+export type UserVerificationCtx = WithInternalRouting<__internal_UserVerificationProps> & {
   componentName: 'UserVerification';
   mode?: ComponentMode;
 };
 
-export type UserProfileCtx = UserProfileProps & {
+export type UserProfileCtx = WithInternalRouting<UserProfileProps> & {
   componentName: 'UserProfile';
   mode?: ComponentMode;
 };
 
-export type SignUpCtx = SignUpProps & {
+export type SignUpCtx = WithInternalRouting<SignUpProps> & {
   componentName: 'SignUp';
   mode?: ComponentMode;
   emailLinkRedirectUrl?: string;
@@ -67,12 +68,12 @@ export type UserButtonCtx = UserButtonProps & {
   mode?: ComponentMode;
 };
 
-export type OrganizationProfileCtx = OrganizationProfileProps & {
+export type OrganizationProfileCtx = WithInternalRouting<OrganizationProfileProps> & {
   componentName: 'OrganizationProfile';
   mode?: ComponentMode;
 };
 
-export type CreateOrganizationCtx = CreateOrganizationProps & {
+export type CreateOrganizationCtx = WithInternalRouting<CreateOrganizationProps> & {
   componentName: 'CreateOrganization';
   mode?: ComponentMode;
 };

packages/types/src/clerk.ts

@@ -831,6 +831,10 @@ type RouterFn = (
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
+export type WithInternalRouting<T> =
+  | (Omit<T, 'routing' | 'path'> & { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> })
+  | (Omit<T, 'routing' | 'path'> & { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> });
+
 export type SignInInitialValues = {
   emailAddress?: string;
   phoneNumber?: string;
@@ -892,7 +896,7 @@ export type SetActive = (params: SetActiveParams) => Promise<void>;
 
 export type RoutingOptions =
   | { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> }
-  | { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
+  | { path?: never; routing?: Extract<RoutingStrategy, 'hash'> };
 
 export type SignInProps = RoutingOptions & {
   /**