Introduce bundle on bundlewatch

Author: LauraBeatris

packages/clerk-js/bundlewatch.config.json

@@ -21,6 +21,7 @@
     { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "5KB" },
     { "path": "./dist/checkout*.js", "maxSize": "9KB" },
-    { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" }
+    { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },
+    { "path": "./dist/session-tasks*.js", "maxSize": "1KB" }
   ]
 }

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

@@ -27,7 +27,7 @@ export function navigateToTask(
   routeKey: keyof typeof SESSION_TASK_ROUTE_BY_KEY,
   { componentNavigationContext, globalNavigate, options, environment }: NavigateToTaskOptions,
 ) {
-  const taskRoute = `/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
+  const taskRoute = `/tasks/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
 
   if (componentNavigationContext) {
     return componentNavigationContext.navigate(componentNavigationContext.indexPath + routeKey);

packages/clerk-js/src/ui/common/redirects.ts

@@ -1,6 +1,5 @@
 import type { SessionTask } from '@clerk/types';
 
-import { SESSION_TASK_ROUTE_BY_KEY } from '../../core/sessionTasks';
 import { buildURL } from '../../utils/url';
 import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts';
 
@@ -45,7 +44,7 @@ export function buildSessionTaskRedirectUrl({
     routing,
     baseUrl,
     path,
-    endpoint: `/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`,
+    endpoint: '/tasks',
     authQueryString: null,
   });
 }

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

@@ -6,7 +6,7 @@ import { useCallback, useEffect } from 'react';
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask';
 import { Route, Switch, useRouter } from '../../router';
-import { LazyOrganizationSelectionTask } from './lazySessionTasks';
+import { LazyOrganizationSelectionTask } from './lazyTasks';
 import { usePreloadTasks } from './usePreloadTasks';
 
 function SessionTaskRoutes(): JSX.Element {
@@ -24,18 +24,20 @@ function SessionTaskRoutes(): JSX.Element {
  */
 export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
   usePreloadTasks();
+
   const { __experimental_nextTask, session, telemetry } = useClerk();
   const { navigate } = useRouter();
 
-  telemetry?.record(eventComponentMounted('SessionTask', { task: session?.currentTask?.key as string }));
+  const task = session?.currentTask;
 
   useEffect(() => {
-    if (session?.currentTask) {
+    if (task) {
+      telemetry?.record(eventComponentMounted('SessionTask', { task: task.key }));
       return;
     }
 
     void navigate(redirectUrlComplete);
-  }, [session?.currentTask, navigate, redirectUrlComplete]);
+  }, [task, telemetry, navigate, redirectUrlComplete]);
 
   const nextTask = useCallback(
     () => __experimental_nextTask({ redirectUrlComplete }),

packages/clerk-js/src/ui/components/SessionTasks/lazySessionTasks.ts packages/clerk-js/src/ui/components/SessionTasks/lazyTasks.ts

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 
 export const preloadOrganizationSelectionTask = () =>
-  import(/* webpackChunkName:  "session-tasks"*/ './OrganizationSelectionTask');
+  import(/* webpackChunkName: "session-tasks"*/ './OrganizationSelectionTask');
 
 const LazyOrganizationSelectionTask = lazy(() =>
   import(/* webpackChunkName: "session-tasks"*/ './OrganizationSelectionTask').then(module => ({

packages/clerk-js/src/ui/components/SessionTasks/usePreloadTasks.ts

@@ -1,5 +1,6 @@
 import { useEnvironment } from '../../../ui/contexts';
-import { preloadOrganizationSelectionTask } from './lazySessionTasks';
+import { useFetch } from '../../../ui/hooks';
+import { preloadOrganizationSelectionTask } from './lazyTasks';
 
 /**
  * Preloads tasks based on the environment settings
@@ -9,6 +10,6 @@ export function usePreloadTasks() {
   const { organizationSettings } = useEnvironment();
 
   if (organizationSettings.forceOrganizationSelection) {
-    void preloadOrganizationSelectionTask();
+    void useFetch(preloadOrganizationSelectionTask, 'preloadComponent', { staleTime: Infinity });
   }
 }