From 44e98f24f009d0a8efde8369de89071bf6921d08 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:47:20 -0800 Subject: [PATCH] feat(clerk-js): Replace ComponentContext with component-specific contexts --- .../CreateOrganization/CreateOrganization.tsx | 6 +- .../OrganizationProfile.tsx | 6 +- .../ui/components/UserVerification/index.tsx | 6 +- .../src/ui/components/Waitlist/Waitlist.tsx | 6 +- .../ui/contexts/ClerkUIComponentsContext.tsx | 147 ++++++++++++++---- packages/clerk-js/src/ui/portal/index.tsx | 23 +-- packages/clerk-js/src/ui/types.ts | 2 + .../src/ui/utils/test/createFixtures.tsx | 34 ++-- 8 files changed, 165 insertions(+), 65 deletions(-) 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/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 1ce81c775b..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,26 +42,70 @@ import { const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ }); -export const ComponentContext = React.createContext(null); - -export function componentContextWrapper({ componentName }: { componentName: 'SignIn' }): typeof SignInContext; -export function componentContextWrapper({ componentName }: { componentName: 'SignUp' }): typeof SignUpContext; -export function componentContextWrapper({ componentName }: { componentName: 'UserProfile' }): typeof UserProfileContext; -export function componentContextWrapper({ componentName }: { componentName: string }): typeof ComponentContext; -export function componentContextWrapper({ +export function ComponentContextProvider({ componentName, + props, + children, }: { - componentName: string; -}): typeof SignInContext | typeof SignUpContext | typeof UserProfileContext | typeof ComponentContext { + componentName: AvailableComponentName; + props: AvailableComponentProps; + children: React.ReactNode; +}) { switch (componentName) { case 'SignIn': - return SignInContext; + return {children}; case 'SignUp': - return SignUpContext; + return {children}; case 'UserProfile': - return UserProfileContext; + 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: - return ComponentContext; + throw new Error(`Unknown component context: ${componentName}`); } } @@ -291,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; @@ -361,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; @@ -464,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) => { @@ -550,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 = () => @@ -581,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)); @@ -615,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( @@ -704,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 862ce3ce26..69850b4a69 100644 --- a/packages/clerk-js/src/ui/portal/index.tsx +++ b/packages/clerk-js/src/ui/portal/index.tsx @@ -5,16 +5,16 @@ import ReactDOM from 'react-dom'; import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants'; import { clerkErrorPathRouterMissingPath } from '../../core/errors'; import { normalizeRoutingOptions } from '../../utils/normalizeRoutingOptions'; -import { ComponentContext, componentContextWrapper } 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 function Portal({ props, @@ -24,13 +24,15 @@ export function Portal({ }: PortalProps) { const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props?.routing, path: props?.path }) }; - const ComponentContextProvider = componentContextWrapper({ componentName }); const el = ( - + {React.createElement(component, normalizedProps as PortalProps['props'])} - + ); if (normalizedProps?.routing === 'path') { @@ -56,7 +58,7 @@ type VirtualBodyRootPortalProps | React.ComponentClass; props?: PropsType; startPath: string; -} & Pick; +} & { componentName: AvailableComponentName }; export class VirtualBodyRootPortal extends React.PureComponent< VirtualBodyRootPortalProps @@ -76,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 303900c2a9..1692abeb50 100644 --- a/packages/clerk-js/src/ui/utils/test/createFixtures.tsx +++ b/packages/clerk-js/src/ui/utils/test/createFixtures.tsx @@ -5,22 +5,21 @@ import React from 'react'; import { Clerk as ClerkCtor } from '../../../core/clerk'; import { Client, Environment } from '../../../core/resources'; import { - ComponentContext, - componentContextWrapper, + ComponentContextProvider, CoreClerkContextWrapper, EnvironmentProvider, + GoogleOneTapContext, 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), @@ -40,8 +39,8 @@ export const bindCreateFixtures = ( return { createFixtures: unboundCreateFixtures(componentName, mockOpts) }; }; -const unboundCreateFixtures = ['componentName']>( - componentName: N, +const unboundCreateFixtures = ( + componentName: AvailableComponentName, mockOpts?: { router?: Parameters[0]; }, @@ -81,7 +80,7 @@ const unboundCreateFixtures = [ options: optionsMock, }; - let componentContextProps: Partial & { componentName: N }>; + let componentContextProps: AvailableComponentProps; const props = { setProps: (props: typeof componentContextProps) => { componentContextProps = props; @@ -91,24 +90,31 @@ const unboundCreateFixtures = [ const MockClerkProvider = (props: any) => { const { children } = props; - const ContextProvider = componentContextWrapper({ componentName }); + const componentsWithoutContext = ['UsernameSection', 'UserProfileSection']; + const contextWrappedChildren = !componentsWithoutContext.includes(componentName) ? ( + + {children} + + ) : ( + <>{children} + ); + return ( new Map() }} > - + - - - {children} - - + {contextWrappedChildren}