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

Co-authored-by: Bryce Kalow <bryce@clerk.dev>

Author: alexcarpenter

.changeset/smart-worms-collect.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Reverts [#4977](https://github.com/clerk/javascript/pull/4977)
+
+Marks virtual routing as deprecated.

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

@@ -1,16 +1,16 @@
 import { useOrganization } from '@clerk/shared/react';
-import type { OrganizationProfileModalProps, OrganizationProfileProps, WithInternalRouting } from '@clerk/types';
+import type { OrganizationProfileModalProps, OrganizationProfileProps } 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 = () => {
+const _OrganizationProfile = (_: OrganizationProfileProps) => {
   const { organization } = useOrganization();
 
   if (!organization) {
@@ -48,9 +48,6 @@ 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,
@@ -64,7 +61,7 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps):
       <OrganizationProfileContext.Provider value={organizationProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <InternalOrganizationProfile {...organizationProfileProps} />
+          <OrganizationProfile {...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, WithInternalRouting } from '@clerk/types';
+import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
@@ -166,8 +166,6 @@ 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`,
@@ -187,7 +185,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => {
       >
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <InternalSignIn
+          <SignIn
             {...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, WithInternalRouting } from '@clerk/types';
+import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
@@ -89,8 +89,6 @@ 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`,
@@ -110,7 +108,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
       >
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <InternalSignUp
+          <SignUp
             {...signUpProps}
             routing='virtual'
           />

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

@@ -1,4 +1,4 @@
-import type { UserProfileModalProps, UserProfileProps, WithInternalRouting } from '@clerk/types';
+import type { UserProfileModalProps, UserProfileProps } 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 = () => {
+const _UserProfile = (_: UserProfileProps) => {
   return (
     <Flow.Root flow='userProfile'>
       <Flow.Part>
@@ -42,10 +42,7 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
   );
 });
 
-export const UserProfile: React.ComponentType<UserProfileProps> = withCardStateProvider(_UserProfile);
-
-const InternalUserProfile: React.ComponentType<WithInternalRouting<UserProfileProps>> =
-  withCardStateProvider(_UserProfile);
+export const UserProfile = withCardStateProvider(_UserProfile);
 
 export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
   const userProfileProps: UserProfileCtx = {
@@ -60,7 +57,7 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
       <UserProfileContext.Provider value={userProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
-          <InternalUserProfile {...userProfileProps} />
+          <UserProfile {...userProfileProps} />
         </div>
       </UserProfileContext.Provider>
     </Route>

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

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

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

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

packages/types/src/clerk.ts

@@ -831,10 +831,6 @@ 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;
@@ -896,7 +892,7 @@ export type SetActive = (params: SetActiveParams) => Promise<void>;
 
 export type RoutingOptions =
   | { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> }
-  | { path?: never; routing?: Extract<RoutingStrategy, 'hash'> };
+  | { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
 
 export type SignInProps = RoutingOptions & {
   /**