[wip] chore(clerk-js): Export Tasks as experimental component for custom flows

.changeset/silent-terms-flow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/react': patch
+---
+
+Expose `__experimental_Tasks` component for after-auth custom flows out of `SignIn/SignUp` components

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

@@ -1037,6 +1037,29 @@ export class Clerk implements ClerkInterface {
     );
   };
 
+  public mountTasks = (node: HTMLDivElement): void => {
+    this.assertComponentsReady(this.#componentControls);
+
+    void this.#componentControls.ensureMounted({ preloadHint: '__experimental_Tasks' }).then(controls =>
+      controls.mountComponent({
+        name: '__experimental_Tasks',
+        appearanceKey: 'tasks',
+        node,
+      }),
+    );
+
+    this.telemetry?.record(eventPrebuiltComponentMounted('__experimental_Tasks'));
+  };
+
+  public unmountTasks = (node: HTMLDivElement): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls =>
+      controls.unmountComponent({
+        node,
+      }),
+    );
+  };
+
   /**
    * `setActive` can be used to set the active session and/or organization.
    */

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

@@ -1,6 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
-import type { SessionTask } from '@clerk/types';
 import { useCallback, useContext, useEffect } from 'react';
 
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
@@ -36,7 +35,7 @@ const SessionTasksStart = withCardStateProvider(() => {
   );
 });
 
-function SessionTaskRoutes(): JSX.Element {
+function SessionTasksRoutes(): JSX.Element {
   return (
     <Switch>
       <Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
@@ -56,10 +55,7 @@ function SessionTaskRoutes(): JSX.Element {
   );
 }
 
-/**
- * @internal
- */
-export function SessionTask(): JSX.Element {
+export function __experimental_Tasks(): JSX.Element {
   const clerk = useClerk();
   const { navigate } = useRouter();
   const signInContext = useContext(SignInContext);
@@ -86,7 +82,7 @@ export function SessionTask(): JSX.Element {
 
   return (
     <SessionTasksContext.Provider value={{ nextTask, redirectUrlComplete }}>
-      <SessionTaskRoutes />
+      <SessionTasksRoutes />
     </SessionTasksContext.Provider>
   );
 }

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

@@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components';
+import { __experimental_Tasks as LazyTasks } from '../../../ui/lazyModules/components';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import {
@@ -131,7 +131,7 @@ function SignInRoutes(): JSX.Element {
                 <LazySignUpVerifyPhone />
               </Route>
               <Route path='tasks'>
-                <LazySessionTasks />
+                <LazyTasks />
               </Route>
               <Route index>
                 <LazySignUpContinue />
@@ -143,7 +143,7 @@ function SignInRoutes(): JSX.Element {
           </Route>
         )}
         <Route path='tasks'>
-          <LazySessionTasks />
+          <LazyTasks />
         </Route>
         <Route index>
           <SignInStart />

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

@@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
-import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components';
+import { __experimental_Tasks as LazyTasks } from '../../../ui/lazyModules/components';
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
@@ -85,7 +85,7 @@ function SignUpRoutes(): JSX.Element {
           </Route>
         </Route>
         <Route path='tasks'>
-          <LazySessionTasks />
+          <LazyTasks />
         </Route>
         <Route index>
           <SignUpStart />

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -102,8 +102,8 @@ export const PlanDetails = lazy(() =>
   componentImportPaths.PlanDetails().then(module => ({ default: module.PlanDetails })),
 );
 
-export const SessionTasks = lazy(() =>
-  componentImportPaths.SessionTasks().then(module => ({ default: module.SessionTask })),
+export const __experimental_Tasks = lazy(() =>
+  componentImportPaths.SessionTasks().then(module => ({ default: module.__experimental_Tasks })),
 );
 
 export const preloadComponent = async (component: unknown) => {
@@ -133,6 +133,7 @@ export const ClerkComponents = {
   PricingTable,
   Checkout,
   PlanDetails,
+  __experimental_Tasks,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/react/src/components/index.ts

@@ -10,6 +10,7 @@ export {
   GoogleOneTap,
   Waitlist,
   PricingTable,
+  __experimental_Tasks,
 } from './uiComponents';
 
 export {

packages/react/src/components/uiComponents.tsx

@@ -600,3 +600,31 @@ export const PricingTable = withClerk(
   },
   { component: 'PricingTable', renderWhileLoading: true },
 );
+
+export const __experimental_Tasks = withClerk(
+  ({ clerk, component, fallback, ...props }: WithClerkProp<FallbackProp>) => {
+    const mountingStatus = useWaitForComponentMount(component);
+    const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded;
+
+    const rendererRootProps = {
+      ...(shouldShowFallback && fallback && { style: { display: 'none' } }),
+    };
+
+    return (
+      <>
+        {shouldShowFallback && fallback}
+        {clerk.loaded && (
+          <ClerkHostRenderer
+            component={component}
+            mount={clerk.mountTasks}
+            unmount={clerk.unmountTasks}
+            updateProps={(clerk as any).__unstable__updateProps}
+            props={props}
+            rootProps={rendererRootProps}
+          />
+        )}
+      </>
+    );
+  },
+  { component: '__experimental_Tasks', renderWhileLoading: true },
+);

packages/react/src/isomorphicClerk.ts

@@ -131,6 +131,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountMethodCalls = new Map<MethodName<BrowserClerk>, MethodCallback>();
   private premountWaitlistNodes = new Map<HTMLDivElement, WaitlistProps | undefined>();
   private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();
+  private premountTasksNodes = new Map<HTMLDivElement, undefined>();
   // A separate Map of `addListener` method calls to handle multiple listeners.
   private premountAddListenerCalls = new Map<
     ListenerCallback,
@@ -1050,6 +1051,22 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  mountTasks = (node: HTMLDivElement) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.mountTasks(node);
+    } else {
+      this.premountTasksNodes.set(node, undefined);
+    }
+  };
+
+  unmountTasks = (node: HTMLDivElement) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.unmountTasks(node);
+    } else {
+      this.premountTasksNodes.delete(node);
+    }
+  };
+
   addListener = (listener: ListenerCallback): UnsubscribeCallback => {
     if (this.clerkjs) {
       return this.clerkjs.addListener(listener);

packages/types/src/appearance.ts

@@ -867,4 +867,8 @@ export type Appearance<T = Theme> = T & {
    * Theme overrides that only apply to the `<Checkout />` component
    */
   checkout?: T;
+  /**
+   * Theme overrides that only apply to the `<Tasks />` component
+   */
+  tasks?: T;
 };

packages/types/src/clerk.ts

@@ -458,6 +458,20 @@ export interface Clerk {
    */
   unmountPricingTable: (targetNode: HTMLDivElement) => void;
 
+  /**
+   * Mounts tasks component at the target element.
+   * @param targetNode Target node to mount the Tasks component.
+   * @param props configuration parameters.
+   */
+  mountTasks: (targetNode: HTMLDivElement) => void;
+  /**
+   * Unmount tasks component from the target element.
+   * If there is no component mounted at the target node, results in a noop.
+   *
+   * @param targetNode Target node to unmount the Tasks component from.
+   */
+  unmountTasks: (targetNode: HTMLDivElement) => void;
+
   /**
    * Register a listener that triggers a callback each time important Clerk resources are changed.
    * Allows to hook up at different steps in the sign up, sign in processes.