Skip to content

Commit 9fc30a8

Browse files
LauraBeatrisLauraBeatris
committed
Remove experimental flag with routing refactoring
1 parent 4d9f1ee commit 9fc30a8

File tree

12 files changed

+49
-77
lines changed

12 files changed

+49
-77
lines changed

‎integration/templates/next-app-router/src/app/layout.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
2424
persistClient: process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT
2525
? process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT === 'true'
2626
: undefined,
27-
// `experimental.withSessionTasks` will be removed soon in favor of checking via environment response
28-
withSessionTasks: true,
2927
}}
3028
>
3129
<html lang='en'>

‎packages/clerk-js/src/core/clerk.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1086,7 +1086,7 @@ export class Clerk implements ClerkInterface {
10861086
}
10871087

10881088
if (newSession?.currentTask) {
1089-
await navigateToTask(session.currentTask, {
1089+
await navigateToTask(session.currentTask.key, {
10901090
globalNavigate: this.navigate,
10911091
componentNavigationContext: this.#componentNavigationContext,
10921092
options: this.#options,
@@ -1109,7 +1109,7 @@ export class Clerk implements ClerkInterface {
11091109
}
11101110

11111111
if (session.status === 'pending') {
1112-
await navigateToTask(session.currentTask, {
1112+
await navigateToTask(session.currentTask.key, {
11131113
options: this.#options,
11141114
environment: this.environment,
11151115
globalNavigate: this.navigate,

‎packages/clerk-js/src/core/sessionTasks.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ interface NavigateToTaskOptions {
2424
* @internal
2525
*/
2626
export function navigateToTask(
27-
task: SessionTask,
27+
routeKey: keyof typeof SESSION_TASK_ROUTE_BY_KEY,
2828
{ componentNavigationContext, globalNavigate, options, environment }: NavigateToTaskOptions,
2929
) {
30-
const taskRoute = `/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`;
30+
const taskRoute = `/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
3131

3232
if (componentNavigationContext) {
33-
return componentNavigationContext.navigate(componentNavigationContext.indexPath + taskRoute);
33+
return componentNavigationContext.navigate(componentNavigationContext.indexPath + routeKey);
3434
}
3535

3636
const signInUrl = options['signInUrl'] || environment.displayConfig.signInUrl;

‎packages/clerk-js/src/ui/components/SessionTask/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/clerk-js/src/ui/components/SessionTask/SessionTask.tsx renamed to ‎packages/clerk-js/src/ui/components/SessionTasks/SessionTasks.tsx

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,39 @@ import { eventComponentMounted } from '@clerk/shared/telemetry';
33
import type { SessionTask } from '@clerk/types';
44
import { useCallback, useEffect } from 'react';
55

6+
import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
67
import { OrganizationListContext } from '../../contexts';
78
import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask';
8-
import { useRouter } from '../../router';
9+
import { Route, Switch, useRouter } from '../../router';
910
import { OrganizationList } from '../OrganizationList';
1011

11-
interface SessionTaskProps {
12-
task: SessionTask['key'];
13-
redirectUrlComplete: string;
12+
// TODO -> Lazy load individual routes per environment config
13+
function SessionTaskRoutes(): JSX.Element {
14+
return (
15+
<Switch>
16+
<Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
17+
<OrganizationListContext.Provider
18+
value={{
19+
componentName: 'OrganizationList',
20+
skipInvitationScreen: true,
21+
}}
22+
>
23+
<OrganizationList />
24+
</OrganizationListContext.Provider>
25+
</Route>
26+
</Switch>
27+
);
1428
}
1529

16-
const ContentRegistry: Record<SessionTask['key'], React.ComponentType> = {
17-
org: () => (
18-
<OrganizationListContext.Provider
19-
value={{
20-
componentName: 'OrganizationList',
21-
skipInvitationScreen: true,
22-
}}
23-
>
24-
<OrganizationList />
25-
</OrganizationListContext.Provider>
26-
),
27-
};
28-
2930
/**
3031
* @internal
3132
*/
32-
export function SessionTask({ task, redirectUrlComplete }: SessionTaskProps): React.ReactNode {
33-
const { session, telemetry, __experimental_nextTask } = useClerk();
33+
export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
34+
const { __experimental_nextTask, session, telemetry } = useClerk();
3435
const { navigate } = useRouter();
3536

37+
telemetry?.record(eventComponentMounted('SessionTask', { task: session?.currentTask?.key as string }));
38+
3639
useEffect(() => {
3740
if (session?.currentTask) {
3841
return;
@@ -41,18 +44,14 @@ export function SessionTask({ task, redirectUrlComplete }: SessionTaskProps): Re
4144
void navigate(redirectUrlComplete);
4245
}, [session?.currentTask, navigate, redirectUrlComplete]);
4346

44-
telemetry?.record(eventComponentMounted('SessionTask', { task }));
45-
4647
const nextTask = useCallback(
4748
() => __experimental_nextTask({ redirectUrlComplete }),
4849
[__experimental_nextTask, redirectUrlComplete],
4950
);
5051

51-
const Content = ContentRegistry[task];
52-
5352
return (
5453
<SessionTaskContext.Provider value={{ nextTask }}>
55-
<Content />
54+
<SessionTaskRoutes />
5655
</SessionTaskContext.Provider>
5756
);
5857
}

‎packages/clerk-js/src/ui/components/SessionTasks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './SessionTasks';

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

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from '../../contexts';
1616
import { Flow } from '../../customizables';
1717
import { useFetch } from '../../hooks';
18-
import { preloadSessionTask, SessionTask } from '../../lazyModules/components';
18+
import { preloadSessionTasks, SessionTasks } from '../../lazyModules/components';
1919
import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
2020
import {
2121
LazySignUpContinue,
@@ -130,14 +130,12 @@ function SignInRoutes(): JSX.Element {
130130
>
131131
<LazySignUpVerifyPhone />
132132
</Route>
133-
{signInContext.withSessionTasks && (
134-
<Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
135-
<SessionTask
136-
task='org'
137-
redirectUrlComplete={signInContext.afterSignUpUrl}
138-
/>
139-
</Route>
140-
)}
133+
<Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
134+
<SessionTasks
135+
task='org'
136+
redirectUrlComplete={signInContext.afterSignUpUrl}
137+
/>
138+
</Route>
141139
<Route index>
142140
<LazySignUpContinue />
143141
</Route>
@@ -147,14 +145,9 @@ function SignInRoutes(): JSX.Element {
147145
</Route>
148146
</Route>
149147
)}
150-
{signInContext.withSessionTasks && (
151-
<Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
152-
<SessionTask
153-
task='org'
154-
redirectUrlComplete={signInContext.afterSignInUrl}
155-
/>
156-
</Route>
157-
)}
148+
<Route path='tasks'>
149+
<SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
150+
</Route>
158151
<Route index>
159152
<SignInStart />
160153
</Route>
@@ -170,7 +163,7 @@ const usePreloadSignUp = (enabled = false) =>
170163
useFetch(enabled ? preloadSignUp : undefined, 'preloadComponent', { staleTime: Infinity });
171164

172165
const usePreloadSessionTask = (enabled = false) =>
173-
useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity });
166+
useFetch(enabled ? preloadSessionTasks : undefined, 'preloadComponent', { staleTime: Infinity });
174167

175168
function SignInRoot() {
176169
const { __internal_setComponentNavigationContext } = useClerk();
@@ -193,9 +186,6 @@ function SignInRoot() {
193186
*/
194187
usePreloadSignUp(signInContext.isCombinedFlow);
195188

196-
// `experimental.withSessionTasks` will be removed soon in favor of checking via environment response
197-
usePreloadSessionTask(signInContext.withSessionTasks);
198-
199189
React.useEffect(() => {
200190
return __internal_setComponentNavigationContext?.({ indexPath, navigate });
201191
}, [indexPath, navigate]);

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

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

5-
import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
65
import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
76
import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
87
import { Flow } from '../../customizables';
98
import { useFetch } from '../../hooks';
10-
import { preloadSessionTask, SessionTask } from '../../lazyModules/components';
9+
import { preloadSessionTasks, SessionTasks } from '../../lazyModules/components';
1110
import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
1211
import { SignUpContinue } from './SignUpContinue';
1312
import { SignUpSSOCallback } from './SignUpSSOCallback';
@@ -16,7 +15,7 @@ import { SignUpVerifyEmail } from './SignUpVerifyEmail';
1615
import { SignUpVerifyPhone } from './SignUpVerifyPhone';
1716

1817
const usePreloadSessionTask = (enabled = false) =>
19-
useFetch(enabled ? preloadSessionTask : undefined, 'preloadComponent', { staleTime: Infinity });
18+
useFetch(enabled ? preloadSessionTasks : undefined, 'preloadComponent', { staleTime: Infinity });
2019

2120
function RedirectToSignUp() {
2221
const clerk = useClerk();
@@ -31,9 +30,6 @@ function SignUpRoutes(): JSX.Element {
3130
const { navigate, indexPath } = useRouter();
3231
const signUpContext = useSignUpContext();
3332

34-
// `experimental.withSessionTasks` will be removed soon in favor of checking via environment response
35-
usePreloadSessionTask(signUpContext.withSessionTasks);
36-
3733
React.useEffect(() => {
3834
return __internal_setComponentNavigationContext?.({ indexPath, navigate });
3935
}, [indexPath, navigate]);
@@ -89,14 +85,9 @@ function SignUpRoutes(): JSX.Element {
8985
<SignUpContinue />
9086
</Route>
9187
</Route>
92-
{signUpContext.withSessionTasks && (
93-
<Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
94-
<SessionTask
95-
task='org'
96-
redirectUrlComplete={signUpContext.afterSignUpUrl}
97-
/>
98-
</Route>
99-
)}
88+
<Route path='tasks'>
89+
<SessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />
90+
</Route>
10091
<Route index>
10192
<SignUpStart />
10293
</Route>

‎packages/clerk-js/src/ui/contexts/components/SignIn.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export type SignInContextType = SignInCtx & {
3232
emailLinkRedirectUrl: string;
3333
ssoCallbackUrl: string;
3434
isCombinedFlow: boolean;
35-
withSessionTasks: boolean;
3635
};
3736

3837
export const SignInContext = createContext<SignInCtx | null>(null);
@@ -145,6 +144,5 @@ export const useSignInContext = (): SignInContextType => {
145144
initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
146145
authQueryString,
147146
isCombinedFlow,
148-
withSessionTasks: !!options.experimental?.withSessionTasks,
149147
};
150148
};

‎packages/clerk-js/src/ui/contexts/components/SignUp.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export type SignUpContextType = SignUpCtx & {
3131
isCombinedFlow: boolean;
3232
emailLinkRedirectUrl: string;
3333
ssoCallbackUrl: string;
34-
withSessionTasks: boolean;
3534
};
3635

3736
export const SignUpContext = createContext<SignUpCtx | null>(null);
@@ -139,6 +138,5 @@ export const useSignUpContext = (): SignUpContextType => {
139138
initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
140139
authQueryString,
141140
isCombinedFlow,
142-
withSessionTasks: !!options.experimental?.withSessionTasks,
143141
};
144142
};

0 commit comments

Comments
 (0)