Skip to content

Commit f7780c8

Browse files
jacekradkojacekradko
authored
feat(shared,ui): Remove virtual routing option (#7466)
1 parent cd66224 commit f7780c8

File tree

13 files changed

+101
-69
lines changed

13 files changed

+101
-69
lines changed

‎.changeset/silent-ducks-wait.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@clerk/ui': patch
3+
'@clerk/shared': patch
4+
---
5+
6+
Remove `virtual` from the `routing` option. The `virtual` value is only used internally and should not be part of the public API.

‎packages/shared/src/types/clerk.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1344,7 +1344,7 @@ export type SetActive = (setActiveParams: SetActiveParams) => Promise<void>;
13441344

13451345
export type RoutingOptions =
13461346
| { path: string | undefined; routing?: Extract<RoutingStrategy, 'path'> }
1347-
| { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
1347+
| { path?: never; routing?: Extract<RoutingStrategy, 'hash'> };
13481348

13491349
export type SignInProps = RoutingOptions & {
13501350
/**

‎packages/ui/src/components/OrganizationProfile/index.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@ import { useOrganization } from '@clerk/shared/react';
22
import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/shared/types';
33
import React from 'react';
44

5-
import { withCardStateProvider } from '@/ui/elements/contexts';
6-
import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
7-
import { ProfileCard } from '@/ui/elements/ProfileCard';
5+
import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '@/constants';
6+
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '@/contexts';
7+
import { Flow, localizationKeys } from '@/customizables';
8+
import { withCardStateProvider } from '@/elements/contexts';
9+
import { NavbarMenuButtonRow } from '@/elements/Navbar';
10+
import { ProfileCard } from '@/elements/ProfileCard';
11+
import type { WithInternalRouting } from '@/internal';
12+
import { Route, Switch } from '@/router';
13+
import type { OrganizationProfileCtx } from '@/types';
814

9-
import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
10-
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
11-
import { Flow, localizationKeys } from '../../customizables';
12-
import { Route, Switch } from '../../router';
13-
import type { OrganizationProfileCtx } from '../../types';
1415
import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
1516
import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
1617

17-
const _OrganizationProfile = (_: OrganizationProfileProps) => {
18+
const OrganizationProfileInternal = () => {
1819
const { organization } = useOrganization();
1920

2021
if (!organization) {
@@ -55,7 +56,11 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
5556
);
5657
});
5758

58-
export const OrganizationProfile = withCardStateProvider(_OrganizationProfile);
59+
export const OrganizationProfile: React.ComponentType<OrganizationProfileProps> =
60+
withCardStateProvider(OrganizationProfileInternal);
61+
62+
const InternalOrganizationProfile: React.ComponentType<WithInternalRouting<OrganizationProfileProps>> =
63+
withCardStateProvider(OrganizationProfileInternal);
5964

6065
export const OrganizationProfileModal = (props: OrganizationProfileModalProps): JSX.Element => {
6166
const organizationProfileProps: OrganizationProfileCtx = {
@@ -70,7 +75,7 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps):
7075
<OrganizationProfileContext.Provider value={organizationProfileProps}>
7176
{/*TODO: Used by InvisibleRootBox, can we simplify? */}
7277
<div>
73-
<OrganizationProfile {...organizationProfileProps} />
78+
<InternalOrganizationProfile {...organizationProfileProps} />
7479
</div>
7580
</OrganizationProfileContext.Provider>
7681
</Route>

‎packages/ui/src/components/SignIn/SignInFactorTwoAlternativeMethods.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import type { SignInFactor } from '@clerk/shared/types';
1+
import type { SignInSecondFactor } from '@clerk/shared/types';
22
import React from 'react';
33

4-
import { ArrowBlockButton } from '@/ui/elements/ArrowBlockButton';
5-
import { Card } from '@/ui/elements/Card';
6-
import { Header } from '@/ui/elements/Header';
7-
import { backupCodePrefFactorComparator } from '@/ui/utils/factorSorting';
8-
import { formatSafeIdentifier } from '@/ui/utils/formatSafeIdentifier';
4+
import { useCoreSignIn } from '@/contexts';
5+
import type { LocalizationKey } from '@/customizables';
6+
import { Col, descriptors, Flow, localizationKeys } from '@/customizables';
7+
import { ArrowBlockButton } from '@/elements/ArrowBlockButton';
8+
import { Card } from '@/elements/Card';
9+
import { useCardState } from '@/elements/contexts';
10+
import { Header } from '@/elements/Header';
11+
import { backupCodePrefFactorComparator } from '@/utils/factorSorting';
12+
import { formatSafeIdentifier } from '@/utils/formatSafeIdentifier';
913

10-
import { useCoreSignIn } from '../../contexts';
11-
import type { LocalizationKey } from '../../customizables';
12-
import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
13-
import { useCardState } from '../../elements/contexts';
1414
import { HavingTrouble } from './HavingTrouble';
1515

1616
export type AlternativeMethodsProps = {
1717
onBackLinkClick: React.MouseEventHandler | undefined;
18-
onFactorSelected: (factor: SignInFactor) => void;
18+
onFactorSelected: (factor: SignInSecondFactor) => void;
1919
};
2020

2121
export const SignInFactorTwoAlternativeMethods = (props: AlternativeMethodsProps) => {
@@ -93,7 +93,7 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
9393
);
9494
};
9595

96-
export function getButtonLabel(factor: SignInFactor): LocalizationKey {
96+
export function getButtonLabel(factor: SignInSecondFactor): LocalizationKey {
9797
switch (factor.strategy) {
9898
case 'phone_code':
9999
return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {
@@ -112,6 +112,7 @@ export function getButtonLabel(factor: SignInFactor): LocalizationKey {
112112
identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
113113
});
114114
default:
115-
throw new Error(`Invalid sign in strategy: "${factor.strategy}"`);
115+
((_: never) => _)(factor);
116+
throw new Error('Invalid sign in strategy');
116117
}
117118
}

‎packages/ui/src/components/SignIn/index.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@ import { useClerk } from '@clerk/shared/react';
22
import type { SignInModalProps, SignInProps } from '@clerk/shared/types';
33
import React from 'react';
44

5-
import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '@/ui/common/EmailLinkCompleteFlowCard';
5+
import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '@/common/EmailLinkCompleteFlowCard';
66
import {
77
SignInContext,
88
SignUpContext,
99
useSignInContext,
1010
useSignUpContext,
1111
withCoreSessionSwitchGuard,
12-
} from '@/ui/contexts';
13-
import { Flow } from '@/ui/customizables';
14-
import { useFetch } from '@/ui/hooks';
15-
import { usePreloadTasks } from '@/ui/hooks/usePreloadTasks';
16-
import { SessionTasks as LazySessionTasks } from '@/ui/lazyModules/components';
17-
import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '@/ui/router';
18-
import type { SignUpCtx } from '@/ui/types';
12+
} from '@/contexts';
13+
import { Flow } from '@/customizables';
14+
import { useFetch } from '@/hooks';
15+
import { usePreloadTasks } from '@/hooks/usePreloadTasks';
16+
import type { WithInternalRouting } from '@/internal';
17+
import { SessionTasks as LazySessionTasks } from '@/lazyModules/components';
18+
import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '@/router';
19+
import type { SignUpCtx } from '@/types';
1920
import { normalizeRoutingOptions } from '@/utils/normalizeRoutingOptions';
2021

2122
import {
@@ -195,6 +196,8 @@ SignInRoutes.displayName = 'SignIn';
195196

196197
export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoot);
197198

199+
const InternalSignIn: React.ComponentType<WithInternalRouting<SignInProps>> = withCoreSessionSwitchGuard(SignInRoot);
200+
198201
export const SignInModal = (props: SignInModalProps): JSX.Element => {
199202
const signInProps = {
200203
signUpUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-up`,
@@ -214,7 +217,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => {
214217
>
215218
{/*TODO: Used by InvisibleRootBox, can we simplify? */}
216219
<div>
217-
<SignIn
220+
<InternalSignIn
218221
{...signInProps}
219222
routing='virtual'
220223
/>

‎packages/ui/src/components/SignUp/index.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import { useClerk } from '@clerk/shared/react';
22
import type { SignUpModalProps, SignUpProps } from '@clerk/shared/types';
33
import React from 'react';
44

5-
import { usePreloadTasks } from '@/ui/hooks/usePreloadTasks';
5+
import { SignUpEmailLinkFlowComplete } from '@/common/EmailLinkCompleteFlowCard';
6+
import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '@/contexts';
7+
import { Flow } from '@/customizables';
8+
import { usePreloadTasks } from '@/hooks/usePreloadTasks';
9+
import type { WithInternalRouting } from '@/internal';
10+
import { SessionTasks as LazySessionTasks } from '@/lazyModules/components';
11+
import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '@/router';
612

7-
import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
8-
import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
9-
import { Flow } from '../../customizables';
10-
import { SessionTasks as LazySessionTasks } from '../../lazyModules/components';
11-
import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
1213
import { SignUpContinue } from './SignUpContinue';
1314
import { SignUpEnterpriseConnections } from './SignUpEnterpriseConnections';
1415
import { SignUpSSOCallback } from './SignUpSSOCallback';
@@ -101,6 +102,8 @@ SignUpRoutes.displayName = 'SignUp';
101102

102103
export const SignUp: React.ComponentType<SignUpProps> = withCoreSessionSwitchGuard(SignUpRoutes);
103104

105+
const InternalSignUp: React.ComponentType<WithInternalRouting<SignUpProps>> = withCoreSessionSwitchGuard(SignUpRoutes);
106+
104107
export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
105108
const signUpProps = {
106109
signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`,
@@ -120,7 +123,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
120123
>
121124
{/*TODO: Used by InvisibleRootBox, can we simplify? */}
122125
<div>
123-
<SignUp
126+
<InternalSignUp
124127
{...signUpProps}
125128
routing='virtual'
126129
/>

‎packages/ui/src/components/UserProfile/index.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import type { UserProfileModalProps, UserProfileProps } from '@clerk/shared/types';
22
import React from 'react';
33

4-
import { withCardStateProvider } from '@/ui/elements/contexts';
5-
import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
6-
import { ProfileCard } from '@/ui/elements/ProfileCard';
4+
import { USER_PROFILE_CARD_SCROLLBOX_ID } from '@/constants';
5+
import { UserProfileContext, withCoreUserGuard } from '@/contexts';
6+
import { Flow, localizationKeys } from '@/customizables';
7+
import { withCardStateProvider } from '@/elements/contexts';
8+
import { NavbarMenuButtonRow } from '@/elements/Navbar';
9+
import { ProfileCard } from '@/elements/ProfileCard';
10+
import type { WithInternalRouting } from '@/internal';
11+
import { Route, Switch } from '@/router';
12+
import type { UserProfileCtx } from '@/types';
713

8-
import { USER_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
9-
import { UserProfileContext, withCoreUserGuard } from '../../contexts';
10-
import { Flow, localizationKeys } from '../../customizables';
11-
import { Route, Switch } from '../../router';
12-
import type { UserProfileCtx } from '../../types';
1314
import { UserProfileNavbar } from './UserProfileNavbar';
1415
import { UserProfileRoutes } from './UserProfileRoutes';
1516
import { VerificationSuccessPage } from './VerifyWithLink';
1617

17-
const _UserProfile = (_: UserProfileProps) => {
18+
const _UserProfile = () => {
1819
return (
1920
<Flow.Root flow='userProfile'>
2021
<Flow.Part>
@@ -49,7 +50,10 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
4950
);
5051
});
5152

52-
export const UserProfile = withCardStateProvider(_UserProfile);
53+
export const UserProfile: React.ComponentType<UserProfileProps> = withCardStateProvider(_UserProfile);
54+
55+
const InternalUserProfile: React.ComponentType<WithInternalRouting<UserProfileProps>> =
56+
withCardStateProvider(_UserProfile);
5357

5458
export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
5559
const userProfileProps: UserProfileCtx = {
@@ -64,7 +68,7 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
6468
<UserProfileContext.Provider value={userProfileProps}>
6569
{/*TODO: Used by InvisibleRootBox, can we simplify? */}
6670
<div>
67-
<UserProfile {...userProfileProps} />
71+
<InternalUserProfile {...userProfileProps} />
6872
</div>
6973
</UserProfileContext.Provider>
7074
</Route>

‎packages/ui/src/components/UserVerification/UserVerificationFactorTwo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { SessionVerificationResource, SessionVerificationSecondFactor } from '@clerk/shared/types';
2-
import React, { useEffect, useMemo } from 'react';
2+
import { useEffect, useMemo } from 'react';
33

4-
import { withCardStateProvider } from '@/ui/elements/contexts';
5-
import { LoadingCard } from '@/ui/elements/LoadingCard';
4+
import { withCardStateProvider } from '@/elements/contexts';
5+
import { LoadingCard } from '@/elements/LoadingCard';
6+
import { useRouter } from '@/router';
67

7-
import { useRouter } from '../../router';
88
import { useSecondFactorSelection } from '../SignIn/useSecondFactorSelection';
99
import { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';
1010
import { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';

‎packages/ui/src/components/UserVerification/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/shared/types';
22
import React, { useEffect } from 'react';
33

4-
import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';
5-
import { Flow } from '../../customizables';
6-
import { Route, Switch } from '../../router';
4+
import { UserVerificationContext, withCoreSessionSwitchGuard } from '@/contexts';
5+
import { Flow } from '@/customizables';
6+
import type { WithInternalRouting } from '@/internal';
7+
import { Route, Switch } from '@/router';
8+
79
import { UserVerificationFactorOne } from './UserVerificationFactorOne';
810
import { UserVerificationFactorTwo } from './UserVerificationFactorTwo';
911
import { useUserVerificationSession } from './useUserVerificationSession';
@@ -31,7 +33,7 @@ function UserVerificationRoutes(): JSX.Element {
3133

3234
UserVerificationRoutes.displayName = 'UserVerification';
3335

34-
const UserVerification: React.ComponentType<__internal_UserVerificationProps> =
36+
const UserVerification: React.ComponentType<WithInternalRouting<__internal_UserVerificationProps>> =
3537
withCoreSessionSwitchGuard(UserVerificationRoutes);
3638

3739
const UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => {

‎packages/ui/src/customizables/parseAppearance.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export type ParsedInternalTheme = InternalTheme;
2020
export type ParsedOptions = Required<Options>;
2121
export type ParsedCaptcha = Required<CaptchaAppearanceOptions>;
2222

23-
type PublicAppearanceTopLevelKey = keyof Omit<
24-
Appearance,
25-
'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'
23+
type PublicAppearanceTopLevelKey = Exclude<
24+
keyof Appearance,
25+
keyof Theme | 'captcha' | 'cssLayerName' | 'elements' | 'layout' | 'theme' | 'variables'
2626
>;
2727

2828
export type AppearanceCascade = {

0 commit comments

Comments
 (0)