From e25381dfa358c0f7f8082a67936e4ee4a97c73f1 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Wed, 6 Nov 2024 15:47:30 -0800 Subject: [PATCH] fix(clerk-js): Replace generic ComponentContext with component-specific contexts (#4486) --- .changeset/poor-countries-count.md | 5 + .../CreateOrganization/CreateOrganization.tsx | 6 +- .../OrganizationProfile.tsx | 6 +- .../src/ui/components/SignIn/SignIn.tsx | 6 +- .../src/ui/components/SignUp/SignUp.tsx | 6 +- .../ui/components/UserProfile/UserProfile.tsx | 6 +- .../ui/components/UserVerification/index.tsx | 6 +- .../src/ui/components/Waitlist/Waitlist.tsx | 6 +- .../ui/contexts/ClerkUIComponentsContext.tsx | 180 +++++++++++++++--- packages/clerk-js/src/ui/portal/index.tsx | 72 +++---- packages/clerk-js/src/ui/types.ts | 2 + .../src/ui/utils/test/createFixtures.tsx | 35 ++-- 12 files changed, 242 insertions(+), 94 deletions(-) create mode 100644 .changeset/poor-countries-count.md diff --git a/.changeset/poor-countries-count.md b/.changeset/poor-countries-count.md new file mode 100644 index 0000000000..55ffcf3a07 --- /dev/null +++ b/.changeset/poor-countries-count.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Internal change to use component-specific context providers. This change does not impact consumers. diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx index 559555c0bd..214817620b 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx @@ -1,6 +1,6 @@ import type { CreateOrganizationModalProps } from '@clerk/types'; -import { ComponentContext, withCoreUserGuard } from '../../contexts'; +import { CreateOrganizationContext, withCoreUserGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { withCardStateProvider } from '../../elements'; import { Route, Switch } from '../../router'; @@ -37,11 +37,11 @@ export const CreateOrganizationModal = (props: CreateOrganizationModalProps): JS return ( - +
- + ); }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx index e540dacf64..116eb1f5d4 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx @@ -2,7 +2,7 @@ import { useOrganization } from '@clerk/shared/react'; import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types'; import React from 'react'; -import { ComponentContext, withCoreUserGuard } from '../../contexts'; +import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts'; import { Flow, localizationKeys } from '../../customizables'; import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements'; import { Route, Switch } from '../../router'; @@ -58,12 +58,12 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps): return ( - + {/*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 91b236f601..bef7b6e6eb 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx @@ -3,7 +3,7 @@ import type { SignInModalProps, SignInProps } from '@clerk/types'; import React from 'react'; import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; -import { ComponentContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts'; +import { SignInContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { ResetPassword } from './ResetPassword'; @@ -86,7 +86,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => { return ( - { routing='virtual' /> - + ); }; diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx index 0ae292691c..e231773fc8 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx @@ -3,7 +3,7 @@ import type { SignUpModalProps, SignUpProps } from '@clerk/types'; import React from 'react'; import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; -import { ComponentContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts'; +import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { SignUpContinue } from './SignUpContinue'; @@ -98,7 +98,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => { return ( - { routing='virtual' /> - + ); }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx index 0eef00cec5..ad641d35a5 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx @@ -1,7 +1,7 @@ import type { UserProfileModalProps, UserProfileProps } from '@clerk/types'; import React from 'react'; -import { ComponentContext, withCoreUserGuard } from '../../contexts'; +import { UserProfileContext, withCoreUserGuard } from '../../contexts'; import { Flow, localizationKeys } from '../../customizables'; import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements'; import { Route, Switch } from '../../router'; @@ -54,12 +54,12 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => { return ( - + {/*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 6a5d1d3863..964487cdef 100644 --- a/packages/clerk-js/src/ui/components/UserVerification/index.tsx +++ b/packages/clerk-js/src/ui/components/UserVerification/index.tsx @@ -1,7 +1,7 @@ import type { __experimental_UserVerificationModalProps, __experimental_UserVerificationProps } from '@clerk/types'; import React, { useEffect } from 'react'; -import { ComponentContext, withCoreSessionSwitchGuard } from '../../contexts'; +import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts'; import { Flow } from '../../customizables'; import { Route, Switch } from '../../router'; import { UserVerificationFactorOne } from './UserVerificationFactorOne'; @@ -37,7 +37,7 @@ const UserVerification: React.ComponentType<__experimental_UserVerificationProps const UserVerificationModal = (props: __experimental_UserVerificationModalProps): JSX.Element => { return ( - - + ); }; diff --git a/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx b/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx index b88a8f7e5d..398b4707e0 100644 --- a/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx +++ b/packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx @@ -1,7 +1,7 @@ import { useClerk } from '@clerk/shared/react'; import type { WaitlistModalProps } from '@clerk/types'; -import { ComponentContext, useWaitlistContext } from '../../contexts'; +import { useWaitlistContext, WaitlistContext } from '../../contexts'; import { Flow, localizationKeys } from '../../customizables'; import { Card, withCardStateProvider } from '../../elements'; import { Route, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; @@ -52,11 +52,11 @@ export const WaitlistModal = (props: WaitlistModalProps): JSX.Element => { return ( - +
- + ); }; diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx index 0eeba8e402..429887243d 100644 --- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx +++ b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx @@ -1,7 +1,13 @@ import { deprecatedObjectProperty } from '@clerk/shared/deprecated'; import { useClerk } from '@clerk/shared/react'; import { snakeToCamel } from '@clerk/shared/underscore'; -import type { HandleOAuthCallbackParams, OrganizationResource, UserResource } from '@clerk/types'; +import type { + HandleOAuthCallbackParams, + OrganizationResource, + UserButtonProps, + UserResource, + WaitlistProps, +} from '@clerk/types'; import React, { useCallback, useMemo } from 'react'; import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants'; @@ -13,7 +19,8 @@ import type { NavbarRoute } from '../elements'; import type { ParsedQueryString } from '../router'; import { useRouter } from '../router'; import type { - AvailableComponentCtx, + AvailableComponentName, + AvailableComponentProps, CreateOrganizationCtx, GoogleOneTapCtx, OrganizationListCtx, @@ -35,7 +42,72 @@ import { const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ }); -export const ComponentContext = React.createContext(null); +export function ComponentContextProvider({ + componentName, + props, + children, +}: { + componentName: AvailableComponentName; + props: AvailableComponentProps; + children: React.ReactNode; +}) { + switch (componentName) { + case 'SignIn': + return {children}; + case 'SignUp': + return {children}; + case 'UserProfile': + return {children}; + case 'UserVerification': + return ( + + {children} + + ); + case 'UserButton': + return ( + + {children} + + ); + case 'OrganizationSwitcher': + return ( + + {children} + + ); + case 'OrganizationList': + return ( + + {children} + + ); + case 'OrganizationProfile': + return ( + + {children} + + ); + case 'CreateOrganization': + return ( + + {children} + + ); + case 'GoogleOneTap': + return ( + {children} + ); + case 'Waitlist': + return ( + + {children} + + ); + default: + throw new Error(`Unknown component context: ${componentName}`); + } +} const getInitialValuesFromQueryParams = (queryString: string, params: string[]) => { const props: Record = {}; @@ -61,8 +133,10 @@ export type SignUpContextType = SignUpCtx & { waitlistUrl: string; }; +export const SignUpContext = React.createContext(null); + export const useSignUpContext = (): SignUpContextType => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as SignUpCtx; + const context = React.useContext(SignUpContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); const { queryParams, queryString } = useRouter(); @@ -74,6 +148,12 @@ export const useSignUpContext = (): SignUpContextType => { [], ); + if (!context || context.componentName !== 'SignUp') { + throw new Error('Clerk: useSignUpContext called outside of the mounted SignUp component.'); + } + + const { componentName, ...ctx } = context; + const redirectUrls = new RedirectUrls( options, { @@ -84,10 +164,6 @@ export const useSignUpContext = (): SignUpContextType => { queryParams, ); - if (componentName !== 'SignUp') { - throw new Error('Clerk: useSignUpContext called outside of the mounted SignUp component.'); - } - const afterSignUpUrl = clerk.buildUrlWithAuth(redirectUrls.getAfterSignUpUrl()); const afterSignInUrl = clerk.buildUrlWithAuth(redirectUrls.getAfterSignInUrl()); @@ -137,14 +213,22 @@ export type SignInContextType = SignInCtx & { waitlistUrl: string; }; +export const SignInContext = React.createContext(null); + export const useSignInContext = (): SignInContextType => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as SignInCtx; + const context = React.useContext(SignInContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); const { queryParams, queryString } = useRouter(); const options = useOptions(); const clerk = useClerk(); + if (context === null || context.componentName !== 'SignIn') { + throw new Error(`Clerk: useSignInContext called outside of the mounted SignIn component.`); + } + + const { componentName, ...ctx } = context; + const initialValuesFromQueryParams = useMemo( () => getInitialValuesFromQueryParams(queryString, SIGN_IN_INITIAL_VALUE_KEYS), [], @@ -160,10 +244,6 @@ export const useSignInContext = (): SignInContextType => { queryParams, ); - if (componentName !== 'SignIn') { - throw new Error('Clerk: useSignInContext called outside of the mounted SignIn component.'); - } - const afterSignInUrl = clerk.buildUrlWithAuth(redirectUrls.getAfterSignInUrl()); const afterSignUpUrl = clerk.buildUrlWithAuth(redirectUrls.getAfterSignUpUrl()); @@ -234,15 +314,19 @@ export type UserProfileContextType = UserProfileCtx & { pages: PagesType; }; +export const UserProfileContext = React.createContext(null); + export const useUserProfileContext = (): UserProfileContextType => { - const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as UserProfileCtx; + const context = React.useContext(UserProfileContext); const { queryParams } = useRouter(); const clerk = useClerk(); - if (componentName !== 'UserProfile') { + if (!context || context.componentName !== 'UserProfile') { throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.'); } + const { componentName, customPages, ...ctx } = context; + const pages = useMemo(() => { return createUserProfileCustomPages(customPages || [], clerk); }, [customPages]); @@ -258,30 +342,38 @@ export const useUserProfileContext = (): UserProfileContextType => { export type UserVerificationContextType = UserVerificationCtx; +export const UserVerificationContext = React.createContext(null); + export const useUserVerification = (): UserVerificationContextType => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as UserVerificationCtx; + const context = React.useContext(UserVerificationContext); - if (componentName !== 'UserVerification') { + if (!context || context.componentName !== 'UserVerification') { throw new Error('Clerk: useUserVerificationContext called outside of the mounted UserVerification component.'); } + const { componentName, ...ctx } = context; + return { ...ctx, componentName, }; }; +export const UserButtonContext = React.createContext(null); + export const useUserButtonContext = () => { - const { componentName, customMenuItems, ...ctx } = (React.useContext(ComponentContext) || {}) as UserButtonCtx; + const context = React.useContext(UserButtonContext); const clerk = useClerk(); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); const options = useOptions(); - if (componentName !== 'UserButton') { + if (!context || context.componentName !== 'UserButton') { throw new Error('Clerk: useUserButtonContext called outside of the mounted UserButton component.'); } + const { componentName, customMenuItems, ...ctx } = context; + const signInUrl = ctx.signInUrl || options.signInUrl || displayConfig.signInUrl; const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl; @@ -328,15 +420,19 @@ export const useUserButtonContext = () => { }; }; +export const OrganizationSwitcherContext = React.createContext(null); + export const useOrganizationSwitcherContext = () => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationSwitcherCtx; + const context = React.useContext(OrganizationSwitcherContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); - if (componentName !== 'OrganizationSwitcher') { + if (!context || context.componentName !== 'OrganizationSwitcher') { throw new Error('Clerk: useOrganizationSwitcherContext called outside OrganizationSwitcher.'); } + const { componentName, ...ctx } = context; + const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl; const afterLeaveOrganizationUrl = ctx.afterLeaveOrganizationUrl || displayConfig.afterLeaveOrganizationUrl; @@ -431,15 +527,19 @@ export const useOrganizationSwitcherContext = () => { }; }; +export const OrganizationListContext = React.createContext(null); + export const useOrganizationListContext = () => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as unknown as OrganizationListCtx; + const context = React.useContext(OrganizationListContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); - if (componentName !== 'OrganizationList') { + if (!context || context.componentName !== 'OrganizationList') { throw new Error('Clerk: useOrganizationListContext called outside OrganizationList.'); } + const { componentName, ...ctx } = context; + const afterCreateOrganizationUrl = ctx.afterCreateOrganizationUrl || displayConfig.afterCreateOrganizationUrl; const navigateAfterCreateOrganization = (organization: OrganizationResource) => { @@ -517,16 +617,20 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & { isGeneralPageRoot: boolean; }; +export const OrganizationProfileContext = React.createContext(null); + export const useOrganizationProfileContext = (): OrganizationProfileContextType => { - const { componentName, customPages, ...ctx } = (React.useContext(ComponentContext) || {}) as OrganizationProfileCtx; + const context = React.useContext(OrganizationProfileContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); const clerk = useClerk(); - if (componentName !== 'OrganizationProfile') { + if (!context || context.componentName !== 'OrganizationProfile') { throw new Error('Clerk: useOrganizationProfileContext called outside OrganizationProfile.'); } + const { componentName, customPages, ...ctx } = context; + const pages = useMemo(() => createOrganizationProfileCustomPages(customPages || [], clerk), [customPages]); const navigateAfterLeaveOrganization = () => @@ -548,15 +652,19 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType }; }; +export const CreateOrganizationContext = React.createContext(null); + export const useCreateOrganizationContext = () => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as CreateOrganizationCtx; + const context = React.useContext(CreateOrganizationContext); const { navigate } = useRouter(); const { displayConfig } = useEnvironment(); - if (componentName !== 'CreateOrganization') { + if (!context || context.componentName !== 'CreateOrganization') { throw new Error('Clerk: useCreateOrganizationContext called outside CreateOrganization.'); } + const { componentName, ...ctx } = context; + const navigateAfterCreateOrganization = (organization: OrganizationResource) => { if (typeof ctx.afterCreateOrganizationUrl === 'function') { return navigate(ctx.afterCreateOrganizationUrl(organization)); @@ -582,16 +690,20 @@ export const useCreateOrganizationContext = () => { }; }; +export const GoogleOneTapContext = React.createContext(null); + export const useGoogleOneTapContext = () => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx; + const context = React.useContext(GoogleOneTapContext); const options = useOptions(); const { displayConfig } = useEnvironment(); const { queryParams } = useRouter(); - if (componentName !== 'GoogleOneTap') { + if (!context || context.componentName !== 'GoogleOneTap') { throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.'); } + const { componentName, ...ctx } = context; + const generateCallbackUrls = useCallback( (returnBackUrl: string): HandleOAuthCallbackParams => { const redirectUrls = new RedirectUrls( @@ -671,11 +783,19 @@ export type WaitlistContextType = WaitlistCtx & { redirectUrl?: string; }; +export const WaitlistContext = React.createContext(null); + export const useWaitlistContext = (): WaitlistContextType => { - const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as WaitlistCtx; + const context = React.useContext(WaitlistContext); const { displayConfig } = useEnvironment(); const options = useOptions(); + if (!context || context.componentName !== 'Waitlist') { + throw new Error('Clerk: useWaitlistContext called outside Waitlist.'); + } + + const { componentName, ...ctx } = context; + let signInUrl = ctx.signInUrl || options.signInUrl || displayConfig.signInUrl; signInUrl = buildURL({ base: signInUrl }, { stringify: true }); diff --git a/packages/clerk-js/src/ui/portal/index.tsx b/packages/clerk-js/src/ui/portal/index.tsx index 426ade2f22..69850b4a69 100644 --- a/packages/clerk-js/src/ui/portal/index.tsx +++ b/packages/clerk-js/src/ui/portal/index.tsx @@ -5,55 +5,60 @@ import ReactDOM from 'react-dom'; import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants'; import { clerkErrorPathRouterMissingPath } from '../../core/errors'; import { normalizeRoutingOptions } from '../../utils/normalizeRoutingOptions'; -import { ComponentContext } from '../contexts'; +import { ComponentContextProvider } from '../contexts'; import { HashRouter, PathRouter, VirtualRouter } from '../router'; -import type { AvailableComponentCtx } from '../types'; +import type { AvailableComponentCtx, AvailableComponentName } from '../types'; type PortalProps> = { node: HTMLDivElement; component: React.FunctionComponent | React.ComponentClass; // Aligning this with props attributes of ComponentControls props?: PropsType & RoutingOptions; -} & Pick; +} & { componentName: AvailableComponentName }; -export class Portal extends React.PureComponent> { - render() { - const { props, component, componentName, node } = this.props; - const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props?.routing, path: props?.path }) }; - - const el = ( - - - {React.createElement(component, normalizedProps as PortalProps['props'])} - - - ); +export function Portal({ + props, + component, + componentName, + node, +}: PortalProps) { + const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props?.routing, path: props?.path }) }; - if (normalizedProps?.routing === 'path') { - if (!normalizedProps?.path) { - clerkErrorPathRouterMissingPath(componentName); - } + const el = ( + + + {React.createElement(component, normalizedProps as PortalProps['props'])} + + + ); - return ReactDOM.createPortal( - - {el} - , - node, - ); + if (normalizedProps?.routing === 'path') { + if (!normalizedProps?.path) { + clerkErrorPathRouterMissingPath(componentName); } - return ReactDOM.createPortal({el}, node); + return ReactDOM.createPortal( + + {el} + , + node, + ); } + + return ReactDOM.createPortal({el}, node); } type VirtualBodyRootPortalProps> = { component: React.FunctionComponent | React.ComponentClass; props?: PropsType; startPath: string; -} & Pick; +} & { componentName: AvailableComponentName }; export class VirtualBodyRootPortal extends React.PureComponent< VirtualBodyRootPortalProps @@ -73,9 +78,12 @@ export class VirtualBodyRootPortal extend return ReactDOM.createPortal( - + {React.createElement(component, props as PortalProps['props'])} - + , this.elRef, ); diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 04564ce52b..366358c2d7 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -106,3 +106,5 @@ export type AvailableComponentCtx = | OrganizationListCtx | GoogleOneTapCtx | WaitlistCtx; + +export type AvailableComponentName = AvailableComponentCtx['componentName']; diff --git a/packages/clerk-js/src/ui/utils/test/createFixtures.tsx b/packages/clerk-js/src/ui/utils/test/createFixtures.tsx index a1deee3431..6ce3783e8d 100644 --- a/packages/clerk-js/src/ui/utils/test/createFixtures.tsx +++ b/packages/clerk-js/src/ui/utils/test/createFixtures.tsx @@ -4,17 +4,21 @@ import React from 'react'; import { Clerk as ClerkCtor } from '../../../core/clerk'; import { Client, Environment } from '../../../core/resources'; -import { ComponentContext, CoreClerkContextWrapper, EnvironmentProvider, OptionsProvider } from '../../contexts'; +import { + ComponentContextProvider, + CoreClerkContextWrapper, + EnvironmentProvider, + OptionsProvider, +} from '../../contexts'; import { AppearanceProvider } from '../../customizables'; import { FlowMetadataProvider } from '../../elements'; import { RouteContext } from '../../router'; import { InternalThemeProvider } from '../../styledSystem'; +import type { AvailableComponentName, AvailableComponentProps } from '../../types'; import { createClientFixtureHelpers, createEnvironmentFixtureHelpers } from './fixtureHelpers'; import { createBaseClientJSON, createBaseEnvironmentJSON } from './fixtures'; import { mockClerkMethods, mockRouteContextValue } from './mockHelpers'; -type UnpackContext = NonNullable ? U : T>; - const createInitialStateConfigParam = (baseEnvironment: EnvironmentJSON, baseClient: ClientJSON) => { return { ...createEnvironmentFixtureHelpers(baseEnvironment), @@ -34,8 +38,8 @@ export const bindCreateFixtures = ( return { createFixtures: unboundCreateFixtures(componentName, mockOpts) }; }; -const unboundCreateFixtures = ['componentName']>( - componentName: N, +const unboundCreateFixtures = ( + componentName: AvailableComponentName, mockOpts?: { router?: Parameters[0]; }, @@ -75,7 +79,7 @@ const unboundCreateFixtures = [ options: optionsMock, }; - let componentContextProps: Partial & { componentName: N }>; + let componentContextProps: AvailableComponentProps; const props = { setProps: (props: typeof componentContextProps) => { componentContextProps = props; @@ -84,6 +88,19 @@ const unboundCreateFixtures = [ const MockClerkProvider = (props: any) => { const { children } = props; + + const componentsWithoutContext = ['UsernameSection', 'UserProfileSection']; + const contextWrappedChildren = !componentsWithoutContext.includes(componentName) ? ( + + {children} + + ) : ( + <>{children} + ); + return ( [ - - - {children} - - + {contextWrappedChildren}