diff --git a/.changeset/smart-worms-collect.md b/.changeset/smart-worms-collect.md new file mode 100644 index 00000000000..d01e30dcbad --- /dev/null +++ b/.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. diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx index 488d5979ffd..116eb1f5d4b 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx +++ b/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> = - withCardStateProvider(_OrganizationProfile); - export const OrganizationProfileModal = (props: OrganizationProfileModalProps): JSX.Element => { const organizationProfileProps: OrganizationProfileCtx = { ...props, @@ -64,7 +61,7 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps): {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- +
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx index 4399a8678ca..a324270150a 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/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 = withCoreSessionSwitchGuard(SignInRoot); -const InternalSignIn: React.ComponentType> = 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? */}
- diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx index d4961f92f9e..430ae2f53a9 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx +++ b/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 = withCoreSessionSwitchGuard(SignUpRoutes); -const InternalSignUp: React.ComponentType> = 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? */}
- diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx index 767329334ba..ad641d35a5a 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx +++ b/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 ( @@ -42,10 +42,7 @@ const AuthenticatedRoutes = withCoreUserGuard(() => { ); }); -export const UserProfile: React.ComponentType = withCardStateProvider(_UserProfile); - -const InternalUserProfile: React.ComponentType> = - 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 => { {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- +
diff --git a/packages/clerk-js/src/ui/components/UserVerification/index.tsx b/packages/clerk-js/src/ui/components/UserVerification/index.tsx index 36524300a43..f00cd57fae9 100644 --- a/packages/clerk-js/src/ui/components/UserVerification/index.tsx +++ b/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> = +const UserVerification: React.ComponentType<__internal_UserVerificationProps> = withCoreSessionSwitchGuard(UserVerificationRoutes); const UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => { diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 5923047e840..e90ebfff249 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/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 & { +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 & { +export type UserProfileCtx = UserProfileProps & { componentName: 'UserProfile'; mode?: ComponentMode; }; -export type SignUpCtx = WithInternalRouting & { +export type SignUpCtx = SignUpProps & { componentName: 'SignUp'; mode?: ComponentMode; emailLinkRedirectUrl?: string; @@ -68,12 +67,12 @@ export type UserButtonCtx = UserButtonProps & { mode?: ComponentMode; }; -export type OrganizationProfileCtx = WithInternalRouting & { +export type OrganizationProfileCtx = OrganizationProfileProps & { componentName: 'OrganizationProfile'; mode?: ComponentMode; }; -export type CreateOrganizationCtx = WithInternalRouting & { +export type CreateOrganizationCtx = CreateOrganizationProps & { componentName: 'CreateOrganization'; mode?: ComponentMode; }; diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 846305d029b..474a0a279e6 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -831,10 +831,6 @@ type RouterFn = ( export type WithoutRouting = Omit; -export type WithInternalRouting = - | (Omit & { path: string | undefined; routing?: Extract }) - | (Omit & { path?: never; routing?: Extract }); - export type SignInInitialValues = { emailAddress?: string; phoneNumber?: string; @@ -896,7 +892,7 @@ export type SetActive = (params: SetActiveParams) => Promise; export type RoutingOptions = | { path: string | undefined; routing?: Extract } - | { path?: never; routing?: Extract }; + | { path?: never; routing?: Extract }; export type SignInProps = RoutingOptions & { /**