From 9ae5337f97073b877c1a24630bb2ebabea44d699 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Tue, 12 Dec 2023 16:25:17 +0200 Subject: [PATCH 01/15] chore(clerk-react): Restrcture errors to separate module /errors module --- packages/react/src/components/uiComponents.tsx | 2 +- packages/react/src/components/withClerk.tsx | 2 +- packages/react/src/components/withSession.tsx | 2 +- packages/react/src/components/withUser.tsx | 2 +- packages/react/src/contexts/ClerkProvider.tsx | 2 +- packages/react/src/contexts/assertHelpers.ts | 2 +- packages/react/src/{errors.ts => errors/messages.ts} | 0 packages/react/src/hooks/useAuth.ts | 2 +- packages/react/src/index.ts | 8 +++++++- packages/react/src/isomorphicClerk.ts | 2 +- packages/react/src/utils/childrenUtils.tsx | 2 +- packages/react/src/utils/useCustomPages.tsx | 2 +- 12 files changed, 17 insertions(+), 11 deletions(-) rename packages/react/src/{errors.ts => errors/messages.ts} (100%) diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index 2a8f23165d7..ce9033f9014 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -18,7 +18,7 @@ import { organizationProfilePageRenderedError, userProfileLinkRenderedError, userProfilePageRenderedError, -} from '../errors'; +} from '../errors/messages'; import type { MountProps, OrganizationProfileLinkProps, diff --git a/packages/react/src/components/withClerk.tsx b/packages/react/src/components/withClerk.tsx index c8f0a0f5668..31813f2df4d 100644 --- a/packages/react/src/components/withClerk.tsx +++ b/packages/react/src/components/withClerk.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; import { LoadedGuarantee } from '../contexts/StructureContext'; -import { hocChildrenNotAFunctionError } from '../errors'; +import { hocChildrenNotAFunctionError } from '../errors/messages'; import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider'; import { errorThrower } from '../utils'; diff --git a/packages/react/src/components/withSession.tsx b/packages/react/src/components/withSession.tsx index 276269beb5f..e14c12999ed 100644 --- a/packages/react/src/components/withSession.tsx +++ b/packages/react/src/components/withSession.tsx @@ -2,7 +2,7 @@ import type { SessionResource } from '@clerk/types'; import React from 'react'; import { useSessionContext } from '../contexts/SessionContext'; -import { hocChildrenNotAFunctionError } from '../errors'; +import { hocChildrenNotAFunctionError } from '../errors/messages'; import { errorThrower } from '../utils'; export const withSession =

( diff --git a/packages/react/src/components/withUser.tsx b/packages/react/src/components/withUser.tsx index 87d3aeece79..947894e9c32 100644 --- a/packages/react/src/components/withUser.tsx +++ b/packages/react/src/components/withUser.tsx @@ -2,7 +2,7 @@ import type { UserResource } from '@clerk/types'; import React from 'react'; import { useUserContext } from '../contexts/UserContext'; -import { hocChildrenNotAFunctionError } from '../errors'; +import { hocChildrenNotAFunctionError } from '../errors/messages'; import { errorThrower } from '../utils'; export const withUser =

(Component: React.ComponentType

, displayName?: string) => { diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index 0867ce47437..0865853087f 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/packages/react/src/contexts/ClerkProvider.tsx @@ -1,7 +1,7 @@ import { isPublishableKey } from '@clerk/shared/keys'; import React from 'react'; -import { multipleClerkProvidersError } from '../errors'; +import { multipleClerkProvidersError } from '../errors/messages'; import type { ClerkProviderProps } from '../types'; import { __internal__setErrorThrowerOptions, errorThrower, withMaxAllowedInstancesGuard } from '../utils'; import { ClerkContextProvider } from './ClerkContextProvider'; diff --git a/packages/react/src/contexts/assertHelpers.ts b/packages/react/src/contexts/assertHelpers.ts index 3d5d4ae6127..26c946af9b1 100644 --- a/packages/react/src/contexts/assertHelpers.ts +++ b/packages/react/src/contexts/assertHelpers.ts @@ -1,4 +1,4 @@ -import { noClerkProviderError, noGuaranteedLoadedError } from '../errors'; +import { noClerkProviderError, noGuaranteedLoadedError } from '../errors/messages'; import { errorThrower } from '../utils'; export function assertWrappedByClerkProvider(contextVal: unknown): asserts contextVal { diff --git a/packages/react/src/errors.ts b/packages/react/src/errors/messages.ts similarity index 100% rename from packages/react/src/errors.ts rename to packages/react/src/errors/messages.ts diff --git a/packages/react/src/hooks/useAuth.ts b/packages/react/src/hooks/useAuth.ts index 661d69b5778..304041d69db 100644 --- a/packages/react/src/hooks/useAuth.ts +++ b/packages/react/src/hooks/useAuth.ts @@ -9,7 +9,7 @@ import { useCallback } from 'react'; import { useAuthContext } from '../contexts/AuthContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; -import { invalidStateError, useAuthHasRequiresRoleOrPermission } from '../errors'; +import { invalidStateError, useAuthHasRequiresRoleOrPermission } from '../errors/messages'; import { errorThrower } from '../utils'; import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider'; import { createGetToken, createSignOut } from './utils'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 2af4a3a6cea..bc62e7d027e 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -2,7 +2,13 @@ import './polyfills'; export * from './components'; export * from './contexts'; -export { EmailLinkErrorCode, isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from './errors'; +export { + EmailLinkErrorCode, + isClerkAPIResponseError, + isEmailLinkError, + isKnownError, + isMetamaskError, +} from './errors/messages'; export * from './hooks'; export { useEmailLink } from './hooks/useEmailLink'; export type { diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 98c2a29cb5c..9405854d362 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -36,7 +36,7 @@ import type { Without, } from '@clerk/types'; -import { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors'; +import { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors/messages'; import type { BrowserClerk, BrowserClerkConstructor, diff --git a/packages/react/src/utils/childrenUtils.tsx b/packages/react/src/utils/childrenUtils.tsx index 1afc87fc7e6..cbc5dd63de4 100644 --- a/packages/react/src/utils/childrenUtils.tsx +++ b/packages/react/src/utils/childrenUtils.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { multipleChildrenInButtonComponent } from '../errors'; +import { multipleChildrenInButtonComponent } from '../errors/messages'; import { errorThrower } from './errorThrower'; export const assertSingleChild = diff --git a/packages/react/src/utils/useCustomPages.tsx b/packages/react/src/utils/useCustomPages.tsx index 7037a4751c0..cdc7de795ff 100644 --- a/packages/react/src/utils/useCustomPages.tsx +++ b/packages/react/src/utils/useCustomPages.tsx @@ -9,7 +9,7 @@ import { UserProfileLink, UserProfilePage, } from '../components/uiComponents'; -import { customLinkWrongProps, customPagesIgnoredComponent, customPageWrongProps } from '../errors'; +import { customLinkWrongProps, customPagesIgnoredComponent, customPageWrongProps } from '../errors/messages'; import type { UserProfilePageProps } from '../types'; import type { UseCustomElementPortalParams, UseCustomElementPortalReturn } from './useCustomElementPortal'; import { useCustomElementPortal } from './useCustomElementPortal'; From f56123dce5572fb692952b9e455e258e3588b97c Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Tue, 12 Dec 2023 16:30:41 +0200 Subject: [PATCH 02/15] chore(clerk-react): Move errorThrower.ts to /errors path --- packages/react/src/components/withClerk.tsx | 2 +- packages/react/src/components/withSession.tsx | 2 +- packages/react/src/components/withUser.tsx | 2 +- packages/react/src/contexts/ClerkProvider.tsx | 3 ++- packages/react/src/contexts/assertHelpers.ts | 2 +- packages/react/src/{utils => errors}/errorThrower.ts | 0 packages/react/src/hooks/useAssertWrappedByClerkProvider.ts | 2 +- packages/react/src/hooks/useAuth.ts | 2 +- packages/react/src/isomorphicClerk.ts | 3 ++- packages/react/src/utils/childrenUtils.tsx | 2 +- packages/react/src/utils/index.ts | 1 - packages/react/src/utils/loadClerkJsScript.ts | 2 +- packages/react/src/utils/useMaxAllowedInstancesGuard.tsx | 2 +- 13 files changed, 13 insertions(+), 12 deletions(-) rename packages/react/src/{utils => errors}/errorThrower.ts (100%) diff --git a/packages/react/src/components/withClerk.tsx b/packages/react/src/components/withClerk.tsx index 31813f2df4d..6e92604e771 100644 --- a/packages/react/src/components/withClerk.tsx +++ b/packages/react/src/components/withClerk.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; import { LoadedGuarantee } from '../contexts/StructureContext'; +import { errorThrower } from '../errors/errorThrower'; import { hocChildrenNotAFunctionError } from '../errors/messages'; import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider'; -import { errorThrower } from '../utils'; export const withClerk =

( Component: React.ComponentType

, diff --git a/packages/react/src/components/withSession.tsx b/packages/react/src/components/withSession.tsx index e14c12999ed..5b77cffa25f 100644 --- a/packages/react/src/components/withSession.tsx +++ b/packages/react/src/components/withSession.tsx @@ -2,8 +2,8 @@ import type { SessionResource } from '@clerk/types'; import React from 'react'; import { useSessionContext } from '../contexts/SessionContext'; +import { errorThrower } from '../errors/errorThrower'; import { hocChildrenNotAFunctionError } from '../errors/messages'; -import { errorThrower } from '../utils'; export const withSession =

( Component: React.ComponentType

, diff --git a/packages/react/src/components/withUser.tsx b/packages/react/src/components/withUser.tsx index 947894e9c32..63f68adf689 100644 --- a/packages/react/src/components/withUser.tsx +++ b/packages/react/src/components/withUser.tsx @@ -2,8 +2,8 @@ import type { UserResource } from '@clerk/types'; import React from 'react'; import { useUserContext } from '../contexts/UserContext'; +import { errorThrower } from '../errors/errorThrower'; import { hocChildrenNotAFunctionError } from '../errors/messages'; -import { errorThrower } from '../utils'; export const withUser =

(Component: React.ComponentType

, displayName?: string) => { displayName = displayName || Component.displayName || Component.name || 'Component'; diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index 0865853087f..f7522ba19aa 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/packages/react/src/contexts/ClerkProvider.tsx @@ -1,9 +1,10 @@ import { isPublishableKey } from '@clerk/shared/keys'; import React from 'react'; +import { __internal__setErrorThrowerOptions, errorThrower } from '../errors/errorThrower'; import { multipleClerkProvidersError } from '../errors/messages'; import type { ClerkProviderProps } from '../types'; -import { __internal__setErrorThrowerOptions, errorThrower, withMaxAllowedInstancesGuard } from '../utils'; +import { withMaxAllowedInstancesGuard } from '../utils'; import { ClerkContextProvider } from './ClerkContextProvider'; import { StructureContext, StructureContextStates } from './StructureContext'; diff --git a/packages/react/src/contexts/assertHelpers.ts b/packages/react/src/contexts/assertHelpers.ts index 26c946af9b1..a0d52150dcf 100644 --- a/packages/react/src/contexts/assertHelpers.ts +++ b/packages/react/src/contexts/assertHelpers.ts @@ -1,5 +1,5 @@ +import { errorThrower } from '../errors/errorThrower'; import { noClerkProviderError, noGuaranteedLoadedError } from '../errors/messages'; -import { errorThrower } from '../utils'; export function assertWrappedByClerkProvider(contextVal: unknown): asserts contextVal { if (!contextVal) { diff --git a/packages/react/src/utils/errorThrower.ts b/packages/react/src/errors/errorThrower.ts similarity index 100% rename from packages/react/src/utils/errorThrower.ts rename to packages/react/src/errors/errorThrower.ts diff --git a/packages/react/src/hooks/useAssertWrappedByClerkProvider.ts b/packages/react/src/hooks/useAssertWrappedByClerkProvider.ts index 1fad233ec66..1781a1c8ed4 100644 --- a/packages/react/src/hooks/useAssertWrappedByClerkProvider.ts +++ b/packages/react/src/hooks/useAssertWrappedByClerkProvider.ts @@ -1,6 +1,6 @@ import { useAssertWrappedByClerkProvider as useSharedAssertWrappedByClerkProvider } from '@clerk/shared/react'; -import { errorThrower } from '../utils'; +import { errorThrower } from '../errors/errorThrower'; export const useAssertWrappedByClerkProvider = (source: string): void => { useSharedAssertWrappedByClerkProvider(() => { diff --git a/packages/react/src/hooks/useAuth.ts b/packages/react/src/hooks/useAuth.ts index 304041d69db..3a0ff00ea96 100644 --- a/packages/react/src/hooks/useAuth.ts +++ b/packages/react/src/hooks/useAuth.ts @@ -9,8 +9,8 @@ import { useCallback } from 'react'; import { useAuthContext } from '../contexts/AuthContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; +import { errorThrower } from '../errors/errorThrower'; import { invalidStateError, useAuthHasRequiresRoleOrPermission } from '../errors/messages'; -import { errorThrower } from '../utils'; import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider'; import { createGetToken, createSignOut } from './utils'; diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 9405854d362..c5cbb5ebdfb 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -36,6 +36,7 @@ import type { Without, } from '@clerk/types'; +import { errorThrower } from './errors/errorThrower'; import { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors/messages'; import type { BrowserClerk, @@ -45,7 +46,7 @@ import type { HeadlessBrowserClerkConstructor, IsomorphicClerkOptions, } from './types'; -import { errorThrower, isConstructor, loadClerkJsScript } from './utils'; +import { isConstructor, loadClerkJsScript } from './utils'; const SDK_METADATA = { name: PACKAGE_NAME, version: PACKAGE_VERSION }; diff --git a/packages/react/src/utils/childrenUtils.tsx b/packages/react/src/utils/childrenUtils.tsx index cbc5dd63de4..7207ac23290 100644 --- a/packages/react/src/utils/childrenUtils.tsx +++ b/packages/react/src/utils/childrenUtils.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { errorThrower } from '../errors/errorThrower'; import { multipleChildrenInButtonComponent } from '../errors/messages'; -import { errorThrower } from './errorThrower'; export const assertSingleChild = (children: React.ReactNode) => diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts index 04a02b30856..c65c5835502 100644 --- a/packages/react/src/utils/index.ts +++ b/packages/react/src/utils/index.ts @@ -1,5 +1,4 @@ export * from './childrenUtils'; -export * from './errorThrower'; export * from './isConstructor'; export { loadClerkJsScript } from './loadClerkJsScript'; export * from './useMaxAllowedInstancesGuard'; diff --git a/packages/react/src/utils/loadClerkJsScript.ts b/packages/react/src/utils/loadClerkJsScript.ts index c6dab5f282b..2c7113e65b3 100644 --- a/packages/react/src/utils/loadClerkJsScript.ts +++ b/packages/react/src/utils/loadClerkJsScript.ts @@ -3,8 +3,8 @@ import { loadScript } from '@clerk/shared/loadScript'; import { isValidProxyUrl, proxyUrlToAbsoluteURL } from '@clerk/shared/proxy'; import { addClerkPrefix } from '@clerk/shared/url'; +import { errorThrower } from '../errors/errorThrower'; import type { IsomorphicClerkOptions } from '../types'; -import { errorThrower } from './errorThrower'; import { isDevOrStagingUrl } from './isDevOrStageUrl'; import { versionSelector } from './versionSelector'; diff --git a/packages/react/src/utils/useMaxAllowedInstancesGuard.tsx b/packages/react/src/utils/useMaxAllowedInstancesGuard.tsx index 5e3c7161058..bc78e8496f0 100644 --- a/packages/react/src/utils/useMaxAllowedInstancesGuard.tsx +++ b/packages/react/src/utils/useMaxAllowedInstancesGuard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { errorThrower } from './errorThrower'; +import { errorThrower } from '../errors/errorThrower'; const counts = new Map(); From a8010dca372a81e109d3a23a888411e12572ac12 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Tue, 12 Dec 2023 17:30:39 +0200 Subject: [PATCH 03/15] chore(clerk-react): Introduce /internal subpath and export `setErrorThrowerOptions` --- packages/chrome-extension/src/ClerkProvider.tsx | 6 +----- .../src/__snapshots__/exports.test.ts.snap | 1 - packages/chrome-extension/src/index.ts | 4 ++++ packages/expo/src/ClerkProvider.tsx | 6 +----- packages/expo/src/index.ts | 4 ++++ .../src/GatsbyClerkProvider.tsx | 4 +--- packages/gatsby-plugin-clerk/src/index.ts | 4 ++++ packages/nextjs/src/pages/ClerkProvider.tsx | 7 ++++--- packages/react/.gitignore | 2 ++ packages/react/jest.config.js | 8 +++++++- packages/react/package.json | 15 +++++++++++++-- packages/react/src/contexts/ClerkProvider.tsx | 8 ++------ packages/react/src/contexts/index.ts | 2 +- packages/react/src/errors/errorThrower.ts | 7 +------ packages/react/src/index.ts | 3 +++ packages/react/src/internal.ts | 12 ++++++++++++ packages/react/subpaths.mjs | 8 ++++++++ packages/react/tsconfig.json | 1 + packages/react/tsup.config.ts | 4 ++-- packages/remix/src/errorThrower.ts | 9 ++------- packages/remix/src/index.ts | 4 ++++ 21 files changed, 77 insertions(+), 42 deletions(-) create mode 100644 packages/react/.gitignore create mode 100644 packages/react/src/internal.ts create mode 100644 packages/react/subpaths.mjs diff --git a/packages/chrome-extension/src/ClerkProvider.tsx b/packages/chrome-extension/src/ClerkProvider.tsx index a243a34b622..01d27ce92f5 100644 --- a/packages/chrome-extension/src/ClerkProvider.tsx +++ b/packages/chrome-extension/src/ClerkProvider.tsx @@ -1,6 +1,6 @@ import { Clerk } from '@clerk/clerk-js'; import type { ClerkProp, ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react'; -import { __internal__setErrorThrowerOptions, ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react'; +import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react'; import React from 'react'; import { buildClerk } from './singleton'; @@ -11,10 +11,6 @@ Clerk.sdkMetadata = { version: PACKAGE_VERSION, }; -__internal__setErrorThrowerOptions({ - packageName: '@clerk/chrome-extension', -}); - type WebSSOClerkProviderCustomProps = | { syncSessionWithTab?: false; diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap index a8554f210c6..499c5e3e7e0 100644 --- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap +++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap @@ -31,7 +31,6 @@ exports[`public exports should not include a breaking change 1`] = ` "WithClerk", "WithSession", "WithUser", - "__internal__setErrorThrowerOptions", "isClerkAPIResponseError", "isEmailLinkError", "isKnownError", diff --git a/packages/chrome-extension/src/index.ts b/packages/chrome-extension/src/index.ts index da7fbe97acb..1a134cf1f5f 100644 --- a/packages/chrome-extension/src/index.ts +++ b/packages/chrome-extension/src/index.ts @@ -3,3 +3,7 @@ export type { StorageCache } from './utils/storage'; // The order matters since we want override @clerk/clerk-react ClerkProvider export { ClerkProvider } from './ClerkProvider'; + +// Override Clerk React error thrower to show that errors come from @clerk/chrome-extension +import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/expo/src/ClerkProvider.tsx b/packages/expo/src/ClerkProvider.tsx index 0802497a1dc..c7a5e3fef8d 100644 --- a/packages/expo/src/ClerkProvider.tsx +++ b/packages/expo/src/ClerkProvider.tsx @@ -1,7 +1,7 @@ import './polyfills'; import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react'; -import { __internal__setErrorThrowerOptions, ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react'; +import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react'; import React from 'react'; import type { TokenCache } from './cache'; @@ -9,10 +9,6 @@ import { MemoryTokenCache } from './cache'; import { isReactNative } from './runtime'; import { buildClerk } from './singleton'; -__internal__setErrorThrowerOptions({ - packageName: '@clerk/expo', -}); - export type ClerkProviderProps = ClerkReactProviderProps & { tokenCache?: TokenCache; }; diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index 187f187982c..5906699eec9 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -31,3 +31,7 @@ export { clerk as Clerk } from './singleton'; export * from './ClerkProvider'; export * from './useOAuth'; + +// Override Clerk React error thrower to show that errors come from @clerk/clerk-expo +import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx index 50de7845722..6f0c6a4b33f 100644 --- a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx +++ b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx @@ -1,12 +1,10 @@ import type { ClerkProviderProps } from '@clerk/clerk-react'; -import { __internal__setErrorThrowerOptions, ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; +import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; import { navigate } from 'gatsby'; import React from 'react'; import { SDK_METADATA, TELEMETRY_DEBUG, TELEMETRY_DISABLED } from './constants'; -__internal__setErrorThrowerOptions({ packageName: 'gatsby-plugin-clerk' }); - export type GatsbyClerkProviderProps = { clerkState: any; } & ClerkProviderProps; diff --git a/packages/gatsby-plugin-clerk/src/index.ts b/packages/gatsby-plugin-clerk/src/index.ts index db76ee4c692..e75d696c860 100644 --- a/packages/gatsby-plugin-clerk/src/index.ts +++ b/packages/gatsby-plugin-clerk/src/index.ts @@ -1 +1,5 @@ export * from '@clerk/clerk-react'; + +// Override Clerk React error thrower to show that errors come from gatsby-plugin-clerk +import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/nextjs/src/pages/ClerkProvider.tsx b/packages/nextjs/src/pages/ClerkProvider.tsx index 78444777c2c..da44482dd51 100644 --- a/packages/nextjs/src/pages/ClerkProvider.tsx +++ b/packages/nextjs/src/pages/ClerkProvider.tsx @@ -1,4 +1,6 @@ -import { __internal__setErrorThrowerOptions, ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; +import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; +// Override Clerk React error thrower to show that errors come from @clerk/nextjs +import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; import { useRouter } from 'next/router'; import React from 'react'; @@ -7,8 +9,7 @@ import { useSafeLayoutEffect } from '../client-boundary/useSafeLayoutEffect'; import type { NextClerkProviderProps } from '../types'; import { invalidateNextRouterCache } from '../utils/invalidateNextRouterCache'; import { mergeNextClerkPropsWithEnv } from '../utils/mergeNextClerkPropsWithEnv'; - -__internal__setErrorThrowerOptions({ packageName: '@clerk/nextjs' }); +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); export function ClerkProvider({ children, ...props }: NextClerkProviderProps): JSX.Element { const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props; diff --git a/packages/react/.gitignore b/packages/react/.gitignore new file mode 100644 index 00000000000..5b45b89ce31 --- /dev/null +++ b/packages/react/.gitignore @@ -0,0 +1,2 @@ +/*/ +!/src/ diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js index 383e9448c5a..0b8ddf1fa50 100644 --- a/packages/react/jest.config.js +++ b/packages/react/jest.config.js @@ -1,4 +1,4 @@ -const { name } = require('./package.json'); +const { name, version } = require('./package.json'); module.exports = { displayName: name.replace('@clerk', ''), @@ -15,4 +15,10 @@ module.exports = { testRegex: ['/ui/.*/__tests__/.*.test.[jt]sx?$', '/.*.test.[jt]sx?$'], testPathIgnorePatterns: ['/node_modules/'], + + globals: { + __DEV__: true, + PACKAGE_NAME: name, + PACKAGE_VERSION: version, + }, }; diff --git a/packages/react/package.json b/packages/react/package.json index cb8d40f24f7..b9f653e9f6a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -33,15 +33,26 @@ "default": "./dist/index.js" } }, + "./internal": { + "import": { + "types": "./dist/internal.d.mts", + "default": "./dist/internal.mjs" + }, + "require": { + "types": "./dist/internal.d.ts", + "default": "./dist/internal.js" + } + }, "./package.json": "./package.json" }, "main": "./dist/index.js", - "types": "./dist/index.d.ts", "files": [ - "dist" + "dist", + "internal" ], "scripts": { "build": "tsup", + "postbuild": "node ../../scripts/subpath-workaround.mjs react", "clean": "rimraf ./dist", "dev": "tsup --watch", "dev:publish": "npm run dev -- --env.publish", diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index f7522ba19aa..0acd5837ca0 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/packages/react/src/contexts/ClerkProvider.tsx @@ -1,17 +1,13 @@ import { isPublishableKey } from '@clerk/shared/keys'; import React from 'react'; -import { __internal__setErrorThrowerOptions, errorThrower } from '../errors/errorThrower'; +import { errorThrower } from '../errors/errorThrower'; import { multipleClerkProvidersError } from '../errors/messages'; import type { ClerkProviderProps } from '../types'; import { withMaxAllowedInstancesGuard } from '../utils'; import { ClerkContextProvider } from './ClerkContextProvider'; import { StructureContext, StructureContextStates } from './StructureContext'; -__internal__setErrorThrowerOptions({ - packageName: '@clerk/clerk-react', -}); - function ClerkProviderBase(props: ClerkProviderProps): JSX.Element { const { initialState, children, ...restIsomorphicClerkOptions } = props; const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions; @@ -40,4 +36,4 @@ const ClerkProvider = withMaxAllowedInstancesGuard(ClerkProviderBase, 'ClerkProv ClerkProvider.displayName = 'ClerkProvider'; -export { ClerkProvider, __internal__setErrorThrowerOptions }; +export { ClerkProvider }; diff --git a/packages/react/src/contexts/index.ts b/packages/react/src/contexts/index.ts index 29e060d3843..aebcfc5ad9b 100644 --- a/packages/react/src/contexts/index.ts +++ b/packages/react/src/contexts/index.ts @@ -1 +1 @@ -export { ClerkProvider, __internal__setErrorThrowerOptions } from './ClerkProvider'; +export { ClerkProvider } from './ClerkProvider'; diff --git a/packages/react/src/errors/errorThrower.ts b/packages/react/src/errors/errorThrower.ts index c3c328d1cbf..bfec13632d2 100644 --- a/packages/react/src/errors/errorThrower.ts +++ b/packages/react/src/errors/errorThrower.ts @@ -1,10 +1,5 @@ -import type { ErrorThrowerOptions } from '@clerk/shared/error'; import { buildErrorThrower } from '@clerk/shared/error'; const errorThrower = buildErrorThrower({ packageName: '@clerk/clerk-react' }); -function __internal__setErrorThrowerOptions(options: ErrorThrowerOptions) { - errorThrower.setMessages(options).setPackageName(options); -} - -export { errorThrower, __internal__setErrorThrowerOptions }; +export { errorThrower }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index bc62e7d027e..e84963aa422 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -21,3 +21,6 @@ export type { WithSessionProp, WithUserProp, } from './types'; + +import { setErrorThrowerOptions } from './internal'; +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts new file mode 100644 index 00000000000..ab50b88bf5a --- /dev/null +++ b/packages/react/src/internal.ts @@ -0,0 +1,12 @@ +import type { ErrorThrowerOptions } from '@clerk/shared/error'; + +import { errorThrower } from './errors/errorThrower'; + +/** + * Overrides options of the internal errorThrower (eg setting packageName prefix). + * + * @internal + */ +export function setErrorThrowerOptions(options: ErrorThrowerOptions) { + errorThrower.setMessages(options).setPackageName(options); +} diff --git a/packages/react/subpaths.mjs b/packages/react/subpaths.mjs new file mode 100644 index 00000000000..7006d9dc13d --- /dev/null +++ b/packages/react/subpaths.mjs @@ -0,0 +1,8 @@ +// This file is a helper for the "subpath-workaround.mjs" script +// We have to polyfill our "exports" subpaths :cry: + +export const subpathNames = ['internal']; + +export const subpathFoldersBarrel = []; + +export const ignoredFolders = []; diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index be04afbdc58..01630db0209 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -4,6 +4,7 @@ "declaration": true, "declarationMap": false, "esModuleInterop": true, + "emitDeclarationOnly": true, "importHelpers": true, "isolatedModules": true, "jsx": "react", diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts index e2b4da48307..5c421ca49a4 100644 --- a/packages/react/tsup.config.ts +++ b/packages/react/tsup.config.ts @@ -12,14 +12,14 @@ export default defineConfig(overrideOptions => { return { entry: { index: 'src/index.ts', + internal: 'src/internal.ts', }, - onSuccess: shouldPublish ? 'npm run publish:local' : undefined, + onSuccess: shouldPublish ? 'tsc && npm run publish:local' : 'tsc', format: ['cjs', 'esm'], bundle: true, clean: true, minify: false, sourcemap: true, - dts: true, external: ['react', 'react-dom'], define: { PACKAGE_NAME: `"${name}"`, diff --git a/packages/remix/src/errorThrower.ts b/packages/remix/src/errorThrower.ts index a7f17471d05..339b52dc6e3 100644 --- a/packages/remix/src/errorThrower.ts +++ b/packages/remix/src/errorThrower.ts @@ -1,10 +1,5 @@ -import type { ErrorThrowerOptions } from '@clerk/shared/error'; import { buildErrorThrower } from '@clerk/shared/error'; -const errorThrower = buildErrorThrower({ packageName: '@clerk/remix' }); +const errorThrower = buildErrorThrower({ packageName: PACKAGE_NAME }); -function __internal__setErrorThrowerOptions(options: ErrorThrowerOptions) { - errorThrower.setMessages(options).setPackageName(options); -} - -export { errorThrower, __internal__setErrorThrowerOptions }; +export { errorThrower }; diff --git a/packages/remix/src/index.ts b/packages/remix/src/index.ts index c1c5739ae89..d2afdeedcba 100644 --- a/packages/remix/src/index.ts +++ b/packages/remix/src/index.ts @@ -1,3 +1,7 @@ import './globalPolyfill'; export * from './client'; + +// Override Clerk React error thrower to show that errors come from @clerk/remix +import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; +setErrorThrowerOptions({ packageName: PACKAGE_NAME }); From b09be52534462c07d68eb972fd2a0735c13be72b Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Tue, 12 Dec 2023 21:32:41 +0200 Subject: [PATCH 04/15] chore(*): Move MultisessionAppSupport to @clerk/clerk-react/internal subpath --- .../chrome-extension/src/__snapshots__/exports.test.ts.snap | 1 - packages/expo/src/index.ts | 3 ++- packages/nextjs/src/client-boundary/controlComponents.ts | 3 ++- packages/react/src/components/index.ts | 1 - packages/react/src/internal.ts | 2 ++ 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap index 499c5e3e7e0..ee956ed1f80 100644 --- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap +++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap @@ -8,7 +8,6 @@ exports[`public exports should not include a breaking change 1`] = ` "ClerkProvider", "CreateOrganization", "EmailLinkErrorCode", - "MultisessionAppSupport", "OrganizationList", "OrganizationProfile", "OrganizationSwitcher", diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index 5906699eec9..a7c554e0e60 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -2,7 +2,6 @@ export { ClerkLoaded, ClerkLoading, EmailLinkErrorCode, - MultisessionAppSupport, SignedIn, SignedOut, WithClerk, @@ -27,6 +26,8 @@ export { withUser, } from '@clerk/clerk-react'; +export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; + export { clerk as Clerk } from './singleton'; export * from './ClerkProvider'; diff --git a/packages/nextjs/src/client-boundary/controlComponents.ts b/packages/nextjs/src/client-boundary/controlComponents.ts index 58eec00a1fa..293cf61a266 100644 --- a/packages/nextjs/src/client-boundary/controlComponents.ts +++ b/packages/nextjs/src/client-boundary/controlComponents.ts @@ -10,7 +10,8 @@ export { RedirectToSignUp, RedirectToUserProfile, AuthenticateWithRedirectCallback, - MultisessionAppSupport, RedirectToCreateOrganization, RedirectToOrganizationProfile, } from '@clerk/clerk-react'; + +export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 439452bb52f..db2f0051450 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -19,7 +19,6 @@ export { RedirectToSignUp, RedirectToUserProfile, AuthenticateWithRedirectCallback, - MultisessionAppSupport, RedirectToCreateOrganization, RedirectToOrganizationProfile, } from './controlComponents'; diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts index ab50b88bf5a..58a7c56ae18 100644 --- a/packages/react/src/internal.ts +++ b/packages/react/src/internal.ts @@ -10,3 +10,5 @@ import { errorThrower } from './errors/errorThrower'; export function setErrorThrowerOptions(options: ErrorThrowerOptions) { errorThrower.setMessages(options).setPackageName(options); } + +export { MultisessionAppSupport } from './components/controlComponents'; From 8957d7d6e9951c2e3d97c0e72c65a2da74af4f05 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Tue, 12 Dec 2023 21:37:55 +0200 Subject: [PATCH 05/15] chore(clerk-react): Introduce /errors subpath and export errors --- packages/react/package.json | 13 ++++++++++++- packages/react/src/errors/errors.ts | 7 +++++++ packages/react/subpaths.mjs | 2 +- packages/react/tsup.config.ts | 1 + 4 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/errors/errors.ts diff --git a/packages/react/package.json b/packages/react/package.json index b9f653e9f6a..1099c63bc38 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -43,12 +43,23 @@ "default": "./dist/internal.js" } }, + "./errors": { + "import": { + "types": "./dist/errors.d.mts", + "default": "./dist/errors.mjs" + }, + "require": { + "types": "./dist/errors.d.ts", + "default": "./dist/errors.js" + } + }, "./package.json": "./package.json" }, "main": "./dist/index.js", "files": [ "dist", - "internal" + "internal", + "errors" ], "scripts": { "build": "tsup", diff --git a/packages/react/src/errors/errors.ts b/packages/react/src/errors/errors.ts new file mode 100644 index 00000000000..e67bef13332 --- /dev/null +++ b/packages/react/src/errors/errors.ts @@ -0,0 +1,7 @@ +export { + isClerkAPIResponseError, + isEmailLinkError, + isKnownError, + isMetamaskError, + EmailLinkErrorCode, +} from '@clerk/shared/error'; diff --git a/packages/react/subpaths.mjs b/packages/react/subpaths.mjs index 7006d9dc13d..089b80cdf3a 100644 --- a/packages/react/subpaths.mjs +++ b/packages/react/subpaths.mjs @@ -1,7 +1,7 @@ // This file is a helper for the "subpath-workaround.mjs" script // We have to polyfill our "exports" subpaths :cry: -export const subpathNames = ['internal']; +export const subpathNames = ['internal', 'errors']; export const subpathFoldersBarrel = []; diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts index 5c421ca49a4..550e054182b 100644 --- a/packages/react/tsup.config.ts +++ b/packages/react/tsup.config.ts @@ -13,6 +13,7 @@ export default defineConfig(overrideOptions => { entry: { index: 'src/index.ts', internal: 'src/internal.ts', + errors: 'src/errors/errors.ts', }, onSuccess: shouldPublish ? 'tsc && npm run publish:local' : 'tsc', format: ['cjs', 'esm'], From ba34bec978017769002144dedc0c2d50b707bbd4 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Wed, 13 Dec 2023 01:37:52 +0200 Subject: [PATCH 06/15] chore(clerk-react,nextjs,clerk-expo): Drop public withUser, WithUser, withClerk, WithClerk, withSession, WithSession --- packages/expo/src/index.ts | 7 +-- packages/nextjs/src/client-boundary/hooks.ts | 8 ---- packages/nextjs/src/index.ts | 10 +--- packages/react/src/components/index.ts | 2 - packages/react/src/components/withSession.tsx | 47 ------------------- packages/react/src/components/withUser.tsx | 44 ----------------- packages/react/src/index.ts | 5 +- packages/react/src/types.ts | 6 --- 8 files changed, 4 insertions(+), 125 deletions(-) delete mode 100644 packages/react/src/components/withSession.tsx delete mode 100644 packages/react/src/components/withUser.tsx diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index a7c554e0e60..70c4d03d4f5 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -4,9 +4,6 @@ export { EmailLinkErrorCode, SignedIn, SignedOut, - WithClerk, - WithSession, - WithUser, isClerkAPIResponseError, isEmailLinkError, isKnownError, @@ -21,9 +18,6 @@ export { useSignIn, useSignUp, useUser, - withClerk, - withSession, - withUser, } from '@clerk/clerk-react'; export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; @@ -35,4 +29,5 @@ export * from './useOAuth'; // Override Clerk React error thrower to show that errors come from @clerk/clerk-expo import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; + setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/nextjs/src/client-boundary/hooks.ts b/packages/nextjs/src/client-boundary/hooks.ts index 3384164c893..5434c57e681 100644 --- a/packages/nextjs/src/client-boundary/hooks.ts +++ b/packages/nextjs/src/client-boundary/hooks.ts @@ -1,9 +1,6 @@ 'use client'; export { - WithClerk, - WithSession, - WithUser, useAuth, useClerk, useEmailLink, @@ -14,13 +11,8 @@ export { useSignIn, useSignUp, useUser, - withClerk, - withSession, - withUser, } from '@clerk/clerk-react'; -export type { WithClerkProp, WithSessionProp, WithUserProp } from '@clerk/clerk-react'; - export { EmailLinkErrorCode, isClerkAPIResponseError, diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts index 038b6e2f519..622e4ccff24 100644 --- a/packages/nextjs/src/index.ts +++ b/packages/nextjs/src/index.ts @@ -39,9 +39,6 @@ export { */ export { EmailLinkErrorCode, - WithClerk, - WithSession, - WithUser, isClerkAPIResponseError, isEmailLinkError, isKnownError, @@ -56,13 +53,8 @@ export { useSignIn, useSignUp, useUser, - withClerk, - withSession, - withUser, } from './client-boundary/hooks'; -export type { WithClerkProp, WithSessionProp, WithUserProp } from './client-boundary/hooks'; - /** * Conditionally export components that exhibit different behavior * when used in /app vs /pages. @@ -89,7 +81,7 @@ export const ClerkProvider = ComponentsModule.ClerkProvider as ServerComponentsS export const SignedIn = ComponentsModule.SignedIn as ServerComponentsServerModuleTypes['SignedIn']; export const SignedOut = ComponentsModule.SignedOut as ServerComponentsServerModuleTypes['SignedOut']; -export const Protect = ComponentsModule.Protect as ServerComponentsServerModuleTypes['Protect']; +export const Protect = ComponentsModule.Protect; export const auth = ServerHelperModule.auth as ServerHelpersServerModuleTypes['auth']; export const currentUser = ServerHelperModule.currentUser as ServerHelpersServerModuleTypes['currentUser']; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index db2f0051450..3f143d35dd4 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -24,8 +24,6 @@ export { } from './controlComponents'; export * from './withClerk'; -export * from './withUser'; -export * from './withSession'; export * from './SignInButton'; export * from './SignUpButton'; diff --git a/packages/react/src/components/withSession.tsx b/packages/react/src/components/withSession.tsx deleted file mode 100644 index 5b77cffa25f..00000000000 --- a/packages/react/src/components/withSession.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { SessionResource } from '@clerk/types'; -import React from 'react'; - -import { useSessionContext } from '../contexts/SessionContext'; -import { errorThrower } from '../errors/errorThrower'; -import { hocChildrenNotAFunctionError } from '../errors/messages'; - -export const withSession =

( - Component: React.ComponentType

, - displayName?: string, -) => { - displayName = displayName || Component.displayName || Component.name || 'Component'; - Component.displayName = displayName; - const HOC: React.FC> = (props: Omit) => { - const session = useSessionContext(); - - if (!session) { - return null; - } - - return ( - - ); - }; - - HOC.displayName = `withSession(${displayName})`; - return HOC; -}; - -export const WithSession: React.FC<{ - children: (session: SessionResource) => React.ReactNode; -}> = ({ children }) => { - const session = useSessionContext(); - - if (typeof children !== 'function') { - errorThrower.throw(hocChildrenNotAFunctionError); - } - - if (!session) { - return null; - } - - return <>{children(session)}; -}; diff --git a/packages/react/src/components/withUser.tsx b/packages/react/src/components/withUser.tsx deleted file mode 100644 index 63f68adf689..00000000000 --- a/packages/react/src/components/withUser.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { UserResource } from '@clerk/types'; -import React from 'react'; - -import { useUserContext } from '../contexts/UserContext'; -import { errorThrower } from '../errors/errorThrower'; -import { hocChildrenNotAFunctionError } from '../errors/messages'; - -export const withUser =

(Component: React.ComponentType

, displayName?: string) => { - displayName = displayName || Component.displayName || Component.name || 'Component'; - Component.displayName = displayName; - const HOC: React.FC> = (props: Omit) => { - const user = useUserContext(); - - if (!user) { - return null; - } - - return ( - - ); - }; - - HOC.displayName = `withUser(${displayName})`; - return HOC; -}; - -export const WithUser: React.FC<{ - children: (user: UserResource) => React.ReactNode; -}> = ({ children }) => { - const user = useUserContext(); - - if (typeof children !== 'function') { - errorThrower.throw(hocChildrenNotAFunctionError); - } - - if (!user) { - return null; - } - - return <>{children(user)}; -}; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index e84963aa422..1bf9ca9a73c 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,5 +1,7 @@ import './polyfills'; +import { setErrorThrowerOptions } from './internal'; + export * from './components'; export * from './contexts'; export { @@ -18,9 +20,6 @@ export type { ClerkProviderOptionsWrapper, ClerkProviderProps, WithClerkProp, - WithSessionProp, - WithUserProp, } from './types'; -import { setErrorThrowerOptions } from './internal'; setErrorThrowerOptions({ packageName: PACKAGE_NAME }); diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index d88e9fe0f37..fa52248638a 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -7,10 +7,8 @@ import type { LoadedClerk, MultiDomainAndOrProxy, SDKMetadata, - SessionResource, SignInRedirectOptions, SignUpRedirectOptions, - UserResource, Without, } from '@clerk/types'; import type React from 'react'; @@ -53,10 +51,6 @@ export interface HeadlessBrowserClerkConstructor { export type WithClerkProp = T & { clerk: LoadedClerk }; -export type WithUserProp = T & { user: UserResource }; - -export type WithSessionProp = T & { session: SessionResource }; - // Clerk object export interface MountProps { mount: (node: HTMLDivElement, props: any) => void; From 789cb01cee773b6513f2c1647916f1177ede3d4c Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Wed, 13 Dec 2023 01:38:16 +0200 Subject: [PATCH 07/15] chore(clerk-react): Drop StructureContext and related errors --- .../src/components/controlComponents.tsx | 3 +- packages/react/src/components/withClerk.tsx | 13 +++---- packages/react/src/contexts/ClerkProvider.tsx | 15 ++++---- .../react/src/contexts/StructureContext.tsx | 36 ------------------- packages/react/src/contexts/assertHelpers.ts | 8 +---- packages/react/src/errors/messages.ts | 3 -- 6 files changed, 13 insertions(+), 65 deletions(-) delete mode 100644 packages/react/src/contexts/StructureContext.tsx diff --git a/packages/react/src/components/controlComponents.tsx b/packages/react/src/components/controlComponents.tsx index de4111bb3fa..900b00cc574 100644 --- a/packages/react/src/components/controlComponents.tsx +++ b/packages/react/src/components/controlComponents.tsx @@ -9,7 +9,6 @@ import React from 'react'; import { useAuthContext } from '../contexts/AuthContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; import { useSessionContext } from '../contexts/SessionContext'; -import { LoadedGuarantee } from '../contexts/StructureContext'; import { useAuth } from '../hooks'; import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider'; import type { RedirectToSignInProps, RedirectToSignUpProps, WithClerkProp } from '../types'; @@ -42,7 +41,7 @@ export const ClerkLoaded = ({ children }: React.PropsWithChildren): JSX if (!isomorphicClerk.loaded) { return null; } - return {children}; + return <>{children}; }; export const ClerkLoading = ({ children }: React.PropsWithChildren): JSX.Element | null => { diff --git a/packages/react/src/components/withClerk.tsx b/packages/react/src/components/withClerk.tsx index 6e92604e771..54ff7be47cc 100644 --- a/packages/react/src/components/withClerk.tsx +++ b/packages/react/src/components/withClerk.tsx @@ -2,7 +2,6 @@ import type { LoadedClerk, Without } from '@clerk/types'; import React from 'react'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; -import { LoadedGuarantee } from '../contexts/StructureContext'; import { errorThrower } from '../errors/errorThrower'; import { hocChildrenNotAFunctionError } from '../errors/messages'; import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider'; @@ -23,12 +22,10 @@ export const withClerk =

( } return ( - - - + ); }; HOC.displayName = `withClerk(${displayName})`; @@ -48,5 +45,5 @@ export const WithClerk: React.FC<{ return null; } - return {children(clerk as unknown as LoadedClerk)}; + return <>{children(clerk as unknown as LoadedClerk)}; }; diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index 0acd5837ca0..62262d8e8ce 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/packages/react/src/contexts/ClerkProvider.tsx @@ -6,7 +6,6 @@ import { multipleClerkProvidersError } from '../errors/messages'; import type { ClerkProviderProps } from '../types'; import { withMaxAllowedInstancesGuard } from '../utils'; import { ClerkContextProvider } from './ClerkContextProvider'; -import { StructureContext, StructureContextStates } from './StructureContext'; function ClerkProviderBase(props: ClerkProviderProps): JSX.Element { const { initialState, children, ...restIsomorphicClerkOptions } = props; @@ -21,14 +20,12 @@ function ClerkProviderBase(props: ClerkProviderProps): JSX.Element { } return ( - - - {children} - - + + {children} + ); } diff --git a/packages/react/src/contexts/StructureContext.tsx b/packages/react/src/contexts/StructureContext.tsx deleted file mode 100644 index 4a3923d9e23..00000000000 --- a/packages/react/src/contexts/StructureContext.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -import { assertWrappedByClerkProvider } from './assertHelpers'; - -export interface StructureContextValue { - guaranteedLoaded: boolean; -} - -export const StructureContextStates = Object.freeze({ - noGuarantees: Object.freeze({ - guaranteedLoaded: false, - }), - guaranteedLoaded: Object.freeze({ - guaranteedLoaded: true, - }), -}); - -export const StructureContext = React.createContext(undefined); - -StructureContext.displayName = 'StructureContext'; - -const useStructureContext = (): StructureContextValue => { - const structureCtx = React.useContext(StructureContext); - assertWrappedByClerkProvider(structureCtx); - return structureCtx; -}; - -export const LoadedGuarantee: React.FC> = ({ children }) => { - const structure = useStructureContext(); - if (structure.guaranteedLoaded) { - return <>{children}; - } - return ( - {children} - ); -}; diff --git a/packages/react/src/contexts/assertHelpers.ts b/packages/react/src/contexts/assertHelpers.ts index a0d52150dcf..0c02aae05b8 100644 --- a/packages/react/src/contexts/assertHelpers.ts +++ b/packages/react/src/contexts/assertHelpers.ts @@ -1,14 +1,8 @@ import { errorThrower } from '../errors/errorThrower'; -import { noClerkProviderError, noGuaranteedLoadedError } from '../errors/messages'; +import { noClerkProviderError } from '../errors/messages'; export function assertWrappedByClerkProvider(contextVal: unknown): asserts contextVal { if (!contextVal) { errorThrower.throw(noClerkProviderError); } } - -export function assertClerkLoadedGuarantee(guarantee: unknown, hookName: string): asserts guarantee { - if (!guarantee) { - errorThrower.throw(noGuaranteedLoadedError(hookName)); - } -} diff --git a/packages/react/src/errors/messages.ts b/packages/react/src/errors/messages.ts index 6f94acf99b9..2f0c3711e4b 100644 --- a/packages/react/src/errors/messages.ts +++ b/packages/react/src/errors/messages.ts @@ -8,9 +8,6 @@ export { export const noClerkProviderError = 'You must wrap your application in a component.'; -export const noGuaranteedLoadedError = (hookName: string) => - `You're calling ${hookName} before there's a guarantee the client has been loaded. Call ${hookName} from a child of , , or , or use the withClerk() HOC.`; - export const multipleClerkProvidersError = "You've added multiple components in your React component tree. Wrap your components in a single ."; From 0d17493b5d822b445bcfd4d6a44baeadc8d1c3e4 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 12:04:09 +0200 Subject: [PATCH 08/15] fix(clerk-react): Drop `WithClerkProp` exported type --- packages/react/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 1bf9ca9a73c..9353ab196dc 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -19,7 +19,6 @@ export type { HeadlessBrowserClerk, ClerkProviderOptionsWrapper, ClerkProviderProps, - WithClerkProp, } from './types'; setErrorThrowerOptions({ packageName: PACKAGE_NAME }); From c73cf91252e7b2a78bf1c9b324ace523133f5d45 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 15:10:34 +0200 Subject: [PATCH 09/15] chore(repo): Add changeset --- .changeset/mighty-bulldogs-try.md | 33 +++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 .changeset/mighty-bulldogs-try.md diff --git a/.changeset/mighty-bulldogs-try.md b/.changeset/mighty-bulldogs-try.md new file mode 100644 index 00000000000..2f93d3a73ad --- /dev/null +++ b/.changeset/mighty-bulldogs-try.md @@ -0,0 +1,33 @@ +--- +'gatsby-plugin-clerk': major +'@clerk/chrome-extension': major +'@clerk/nextjs': major +'@clerk/clerk-react': major +'@clerk/remix': major +'@clerk/clerk-expo': major +--- + +- Introduce `@clerk/clerk-react/errors` and `@clerk/clerk-react/internal` subpath exports to expose some internal utilities. Eg + ```typescript + // Before + import { __internal__setErrorThrowerOptions } from '@clerk/clerk-react'; + // After + import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; + + // Before + import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError, EmailLinkErrorCode } from '@clerk/clerk-react'; + // After + import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError, EmailLinkErrorCode } from '@clerk/clerk-react/errors'; + + // Before + import { MultisessionAppSupport } from '@clerk/clerk-react'; + // After + import { MultisessionAppSupport } from '@clerk/clerk-react/internal'; + ``` +- Drop from the `@clerk/clerk-react` and all other clerk-react wrapper packages: + - `__internal__setErrorThrowerOptions` internal utility (moved to /internal subpath) + - `WithClerkProp` type + - `MultisessionAppSupport` component (moved to /internal subpath) +- Drop `StructureContext` and related errors to reduce to reduce code complexity since it seems that it was not being used. +- Drop `withUser`, `WithUser`, `withClerk` HOFs and `WithClerk`, `withSession`, `WithSession` HOCs from the `@clerk/clerk-react` + to reduce the export surface since it's trivial to implement if needed. From 4b528653688fea3619bf6caaf736dbd42d9dd680 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 15:16:58 +0200 Subject: [PATCH 10/15] chore(clerk-react): Fix tsup configuration for type generation Actions: - Use `tsc` on success to produce types - Use `emitDeclarationOnly: true` - Replace `d.mts` with `d.ts` types in package.json - Move `setErrorThrowerOptions` definition from `/internal` to `errors.ts` Why: - Enabling `dts` was causing build issues with controlComponents inferred type in `@clerk/remix` package - Emitting declarations only is used to avoid tampering the bundled code which is configured as part of tsup - Using `d.ts` files for types is set because `d.mts` are not generated since we disabled dts option and the generated `d.mts` are the same as `d.ts` files based on some comparisons - Moving the `setErrorThrowerOptions` was done to simplify the dependency tree --- packages/react/package.json | 6 +++--- packages/react/src/errors/errorThrower.ts | 10 ++++++++++ packages/react/src/index.ts | 2 +- packages/react/src/internal.ts | 14 +------------- packages/react/tsup.config.ts | 6 +----- 5 files changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 1099c63bc38..e81fc42c53d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -25,7 +25,7 @@ "exports": { ".": { "import": { - "types": "./dist/index.d.mts", + "types": "./dist/index.d.ts", "default": "./dist/index.mjs" }, "require": { @@ -35,7 +35,7 @@ }, "./internal": { "import": { - "types": "./dist/internal.d.mts", + "types": "./dist/internal.d.ts", "default": "./dist/internal.mjs" }, "require": { @@ -45,7 +45,7 @@ }, "./errors": { "import": { - "types": "./dist/errors.d.mts", + "types": "./dist/errors.d.ts", "default": "./dist/errors.mjs" }, "require": { diff --git a/packages/react/src/errors/errorThrower.ts b/packages/react/src/errors/errorThrower.ts index bfec13632d2..5fdf015d52c 100644 --- a/packages/react/src/errors/errorThrower.ts +++ b/packages/react/src/errors/errorThrower.ts @@ -1,5 +1,15 @@ +import type { ErrorThrowerOptions } from '@clerk/shared/error'; import { buildErrorThrower } from '@clerk/shared/error'; const errorThrower = buildErrorThrower({ packageName: '@clerk/clerk-react' }); export { errorThrower }; + +/** + * Overrides options of the internal errorThrower (eg setting packageName prefix). + * + * @internal + */ +export function setErrorThrowerOptions(options: ErrorThrowerOptions) { + errorThrower.setMessages(options).setPackageName(options); +} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9353ab196dc..e89b6b33eb6 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,6 +1,6 @@ import './polyfills'; -import { setErrorThrowerOptions } from './internal'; +import { setErrorThrowerOptions } from './errors/errorThrower'; export * from './components'; export * from './contexts'; diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts index 58a7c56ae18..618de019b63 100644 --- a/packages/react/src/internal.ts +++ b/packages/react/src/internal.ts @@ -1,14 +1,2 @@ -import type { ErrorThrowerOptions } from '@clerk/shared/error'; - -import { errorThrower } from './errors/errorThrower'; - -/** - * Overrides options of the internal errorThrower (eg setting packageName prefix). - * - * @internal - */ -export function setErrorThrowerOptions(options: ErrorThrowerOptions) { - errorThrower.setMessages(options).setPackageName(options); -} - +export { setErrorThrowerOptions } from './errors/errorThrower'; export { MultisessionAppSupport } from './components/controlComponents'; diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts index 550e054182b..0eb0d6fdcc7 100644 --- a/packages/react/tsup.config.ts +++ b/packages/react/tsup.config.ts @@ -10,11 +10,7 @@ export default defineConfig(overrideOptions => { const shouldPublish = !!overrideOptions.env?.publish; return { - entry: { - index: 'src/index.ts', - internal: 'src/internal.ts', - errors: 'src/errors/errors.ts', - }, + entry: ['src/index.ts', 'src/internal.ts', 'src/errors/errors.ts'], onSuccess: shouldPublish ? 'tsc && npm run publish:local' : 'tsc', format: ['cjs', 'esm'], bundle: true, From ade1d3aedff4e4b00d066e018d2fd763565f205e Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 17:00:43 +0200 Subject: [PATCH 11/15] chore(*): Rename /errors subpath to /error in clerk/clerk-react and drop EmailLinkErrorCode export --- .changeset/mighty-bulldogs-try.md | 9 +++++---- packages/expo/src/index.ts | 6 +----- packages/nextjs/src/client-boundary/hooks.ts | 8 +------- packages/nextjs/src/index.ts | 1 - packages/react/package.json | 12 ++++++------ packages/react/src/error.ts | 1 + packages/react/src/errors/errors.ts | 7 ------- packages/react/src/errors/messages.ts | 8 -------- packages/react/src/index.ts | 8 +------- packages/react/subpaths.mjs | 2 +- packages/react/tsup.config.ts | 6 +++++- 11 files changed, 21 insertions(+), 47 deletions(-) create mode 100644 packages/react/src/error.ts delete mode 100644 packages/react/src/errors/errors.ts diff --git a/.changeset/mighty-bulldogs-try.md b/.changeset/mighty-bulldogs-try.md index 2f93d3a73ad..fcef8839c96 100644 --- a/.changeset/mighty-bulldogs-try.md +++ b/.changeset/mighty-bulldogs-try.md @@ -7,7 +7,7 @@ '@clerk/clerk-expo': major --- -- Introduce `@clerk/clerk-react/errors` and `@clerk/clerk-react/internal` subpath exports to expose some internal utilities. Eg +- Introduce `@clerk/clerk-react/error` and `@clerk/clerk-react/internal` subpath exports to expose some internal utilities. Eg ```typescript // Before import { __internal__setErrorThrowerOptions } from '@clerk/clerk-react'; @@ -15,9 +15,9 @@ import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; // Before - import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError, EmailLinkErrorCode } from '@clerk/clerk-react'; + import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react'; // After - import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError, EmailLinkErrorCode } from '@clerk/clerk-react/errors'; + import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; // Before import { MultisessionAppSupport } from '@clerk/clerk-react'; @@ -28,6 +28,7 @@ - `__internal__setErrorThrowerOptions` internal utility (moved to /internal subpath) - `WithClerkProp` type - `MultisessionAppSupport` component (moved to /internal subpath) -- Drop `StructureContext` and related errors to reduce to reduce code complexity since it seems that it was not being used. + - `EmailLinkErrorCode` enum +- Drop `StructureContext` and related error to reduce to reduce code complexity since it seems that it was not being used. - Drop `withUser`, `WithUser`, `withClerk` HOFs and `WithClerk`, `withSession`, `WithSession` HOCs from the `@clerk/clerk-react` to reduce the export surface since it's trivial to implement if needed. diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index 70c4d03d4f5..6aaa596beb8 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -1,13 +1,8 @@ export { ClerkLoaded, ClerkLoading, - EmailLinkErrorCode, SignedIn, SignedOut, - isClerkAPIResponseError, - isEmailLinkError, - isKnownError, - isMetamaskError, useAuth, useClerk, useEmailLink, @@ -20,6 +15,7 @@ export { useUser, } from '@clerk/clerk-react'; +export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; export { clerk as Clerk } from './singleton'; diff --git a/packages/nextjs/src/client-boundary/hooks.ts b/packages/nextjs/src/client-boundary/hooks.ts index 5434c57e681..00492cf690b 100644 --- a/packages/nextjs/src/client-boundary/hooks.ts +++ b/packages/nextjs/src/client-boundary/hooks.ts @@ -13,10 +13,4 @@ export { useUser, } from '@clerk/clerk-react'; -export { - EmailLinkErrorCode, - isClerkAPIResponseError, - isEmailLinkError, - isKnownError, - isMetamaskError, -} from '@clerk/clerk-react'; +export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts index 622e4ccff24..75a27b87139 100644 --- a/packages/nextjs/src/index.ts +++ b/packages/nextjs/src/index.ts @@ -38,7 +38,6 @@ export { * If you do, app router will break. */ export { - EmailLinkErrorCode, isClerkAPIResponseError, isEmailLinkError, isKnownError, diff --git a/packages/react/package.json b/packages/react/package.json index e81fc42c53d..695fbb149db 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -43,14 +43,14 @@ "default": "./dist/internal.js" } }, - "./errors": { + "./error": { "import": { - "types": "./dist/errors.d.ts", - "default": "./dist/errors.mjs" + "types": "./dist/error.d.ts", + "default": "./dist/error.mjs" }, "require": { - "types": "./dist/errors.d.ts", - "default": "./dist/errors.js" + "types": "./dist/error.d.ts", + "default": "./dist/error.js" } }, "./package.json": "./package.json" @@ -59,7 +59,7 @@ "files": [ "dist", "internal", - "errors" + "error" ], "scripts": { "build": "tsup", diff --git a/packages/react/src/error.ts b/packages/react/src/error.ts new file mode 100644 index 00000000000..e5f95a3b9c0 --- /dev/null +++ b/packages/react/src/error.ts @@ -0,0 +1 @@ +export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/shared/error'; diff --git a/packages/react/src/errors/errors.ts b/packages/react/src/errors/errors.ts deleted file mode 100644 index e67bef13332..00000000000 --- a/packages/react/src/errors/errors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { - isClerkAPIResponseError, - isEmailLinkError, - isKnownError, - isMetamaskError, - EmailLinkErrorCode, -} from '@clerk/shared/error'; diff --git a/packages/react/src/errors/messages.ts b/packages/react/src/errors/messages.ts index 2f0c3711e4b..42e2ac81368 100644 --- a/packages/react/src/errors/messages.ts +++ b/packages/react/src/errors/messages.ts @@ -1,11 +1,3 @@ -export { - EmailLinkErrorCode, - isClerkAPIResponseError, - isEmailLinkError, - isKnownError, - isMetamaskError, -} from '@clerk/shared/error'; - export const noClerkProviderError = 'You must wrap your application in a component.'; export const multipleClerkProvidersError = diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index e89b6b33eb6..3d900e88ad5 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,13 +4,7 @@ import { setErrorThrowerOptions } from './errors/errorThrower'; export * from './components'; export * from './contexts'; -export { - EmailLinkErrorCode, - isClerkAPIResponseError, - isEmailLinkError, - isKnownError, - isMetamaskError, -} from './errors/messages'; + export * from './hooks'; export { useEmailLink } from './hooks/useEmailLink'; export type { diff --git a/packages/react/subpaths.mjs b/packages/react/subpaths.mjs index 089b80cdf3a..2fa70708e96 100644 --- a/packages/react/subpaths.mjs +++ b/packages/react/subpaths.mjs @@ -1,7 +1,7 @@ // This file is a helper for the "subpath-workaround.mjs" script // We have to polyfill our "exports" subpaths :cry: -export const subpathNames = ['internal', 'errors']; +export const subpathNames = ['internal', 'error']; export const subpathFoldersBarrel = []; diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts index 0eb0d6fdcc7..4279fd66510 100644 --- a/packages/react/tsup.config.ts +++ b/packages/react/tsup.config.ts @@ -10,7 +10,11 @@ export default defineConfig(overrideOptions => { const shouldPublish = !!overrideOptions.env?.publish; return { - entry: ['src/index.ts', 'src/internal.ts', 'src/errors/errors.ts'], + entry: { + index: 'src/index.ts', + internal: 'src/internal.ts', + error: 'src/error.ts', + }, onSuccess: shouldPublish ? 'tsc && npm run publish:local' : 'tsc', format: ['cjs', 'esm'], bundle: true, From 2bf5f19adb5b449fe7ba1f3b4000959acd39ae83 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Wed, 13 Dec 2023 19:19:43 +0200 Subject: [PATCH 12/15] chore(integration): Rename error to errors and fix "The inferred type of X cannot be named without a reference to Y" TS issue: https://github.com/microsoft/TypeScript/issues/47663 --- .changeset/mighty-bulldogs-try.md | 6 +++--- packages/expo/src/index.ts | 2 +- packages/nextjs/src/client-boundary/hooks.ts | 2 +- packages/nextjs/src/pages/ClerkProvider.tsx | 1 - .../nextjs/src/utils/mergeNextClerkPropsWithEnv.ts | 3 ++- packages/react/package.json | 12 ++++++------ packages/react/src/{error.ts => errors.ts} | 0 packages/react/subpaths.mjs | 5 ++++- packages/react/tsup.config.ts | 5 +++-- packages/remix/src/client/RemixOptionsContext.tsx | 2 +- 10 files changed, 21 insertions(+), 17 deletions(-) rename packages/react/src/{error.ts => errors.ts} (100%) diff --git a/.changeset/mighty-bulldogs-try.md b/.changeset/mighty-bulldogs-try.md index fcef8839c96..eb9d1bbbb01 100644 --- a/.changeset/mighty-bulldogs-try.md +++ b/.changeset/mighty-bulldogs-try.md @@ -7,7 +7,7 @@ '@clerk/clerk-expo': major --- -- Introduce `@clerk/clerk-react/error` and `@clerk/clerk-react/internal` subpath exports to expose some internal utilities. Eg +- Introduce `@clerk/clerk-react/errors` and `@clerk/clerk-react/internal` subpath exports to expose some internal utilities. Eg ```typescript // Before import { __internal__setErrorThrowerOptions } from '@clerk/clerk-react'; @@ -17,7 +17,7 @@ // Before import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react'; // After - import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; + import { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/errors'; // Before import { MultisessionAppSupport } from '@clerk/clerk-react'; @@ -29,6 +29,6 @@ - `WithClerkProp` type - `MultisessionAppSupport` component (moved to /internal subpath) - `EmailLinkErrorCode` enum -- Drop `StructureContext` and related error to reduce to reduce code complexity since it seems that it was not being used. +- Drop `StructureContext` and related errors to reduce to reduce code complexity since it seems that it was not being used. - Drop `withUser`, `WithUser`, `withClerk` HOFs and `WithClerk`, `withSession`, `WithSession` HOCs from the `@clerk/clerk-react` to reduce the export surface since it's trivial to implement if needed. diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index 6aaa596beb8..c8eeddee369 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -15,7 +15,7 @@ export { useUser, } from '@clerk/clerk-react'; -export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; +export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/errors'; export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; export { clerk as Clerk } from './singleton'; diff --git a/packages/nextjs/src/client-boundary/hooks.ts b/packages/nextjs/src/client-boundary/hooks.ts index 00492cf690b..7d5283fbcac 100644 --- a/packages/nextjs/src/client-boundary/hooks.ts +++ b/packages/nextjs/src/client-boundary/hooks.ts @@ -13,4 +13,4 @@ export { useUser, } from '@clerk/clerk-react'; -export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/error'; +export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/errors'; diff --git a/packages/nextjs/src/pages/ClerkProvider.tsx b/packages/nextjs/src/pages/ClerkProvider.tsx index da44482dd51..d8624455162 100644 --- a/packages/nextjs/src/pages/ClerkProvider.tsx +++ b/packages/nextjs/src/pages/ClerkProvider.tsx @@ -41,7 +41,6 @@ export function ClerkProvider({ children, ...props }: NextClerkProviderProps): J return ( - {/*@ts-expect-error*/} ) => { +// @ts-ignore - https://github.com/microsoft/TypeScript/issues/47663 +export const mergeNextClerkPropsWithEnv = (props: Omit): any => { return { ...props, publishableKey: props.publishableKey || process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY || '', diff --git a/packages/react/package.json b/packages/react/package.json index 695fbb149db..e81fc42c53d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -43,14 +43,14 @@ "default": "./dist/internal.js" } }, - "./error": { + "./errors": { "import": { - "types": "./dist/error.d.ts", - "default": "./dist/error.mjs" + "types": "./dist/errors.d.ts", + "default": "./dist/errors.mjs" }, "require": { - "types": "./dist/error.d.ts", - "default": "./dist/error.js" + "types": "./dist/errors.d.ts", + "default": "./dist/errors.js" } }, "./package.json": "./package.json" @@ -59,7 +59,7 @@ "files": [ "dist", "internal", - "error" + "errors" ], "scripts": { "build": "tsup", diff --git a/packages/react/src/error.ts b/packages/react/src/errors.ts similarity index 100% rename from packages/react/src/error.ts rename to packages/react/src/errors.ts diff --git a/packages/react/subpaths.mjs b/packages/react/subpaths.mjs index 2fa70708e96..a9b97cb58ff 100644 --- a/packages/react/subpaths.mjs +++ b/packages/react/subpaths.mjs @@ -1,7 +1,10 @@ +import packageJson from './package.json' assert { type: 'json' }; // This file is a helper for the "subpath-workaround.mjs" script // We have to polyfill our "exports" subpaths :cry: -export const subpathNames = ['internal', 'error']; +export const subpathNames = Object.keys(packageJson.exports) + .filter(k => k.startsWith('./') && k !== './' && k !== './package.json') + .map(k => k.replace('./', '')); export const subpathFoldersBarrel = []; diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts index 4279fd66510..6ed467a3bcf 100644 --- a/packages/react/tsup.config.ts +++ b/packages/react/tsup.config.ts @@ -13,9 +13,10 @@ export default defineConfig(overrideOptions => { entry: { index: 'src/index.ts', internal: 'src/internal.ts', - error: 'src/error.ts', + errors: 'src/errors.ts', }, - onSuccess: shouldPublish ? 'tsc && npm run publish:local' : 'tsc', + dts: true, + onSuccess: shouldPublish ? 'npm run publish:local' : undefined, format: ['cjs', 'esm'], bundle: true, clean: true, diff --git a/packages/remix/src/client/RemixOptionsContext.tsx b/packages/remix/src/client/RemixOptionsContext.tsx index 93defa3f62b..4e4f39b7550 100644 --- a/packages/remix/src/client/RemixOptionsContext.tsx +++ b/packages/remix/src/client/RemixOptionsContext.tsx @@ -7,7 +7,7 @@ type ClerkRemixContextValue = Partial> const ClerkRemixOptionsCtx = React.createContext<{ value: ClerkRemixContextValue } | undefined>(undefined); ClerkRemixOptionsCtx.displayName = 'ClerkRemixOptionsCtx'; -const useClerkRemixOptions = () => { +const useClerkRemixOptions = (): ClerkRemixContextValue => { const ctx = React.useContext(ClerkRemixOptionsCtx) as { value: ClerkRemixContextValue }; return ctx.value; }; From 4ea2d22504c0006b98db2d1b08372a50bc2d9a8c Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 19:59:42 +0200 Subject: [PATCH 13/15] chore(clerk-expo,nextjs): Drop internal MultisessionAppSupport export --- packages/expo/src/index.ts | 1 - packages/nextjs/src/client-boundary/controlComponents.ts | 2 -- packages/nextjs/src/index.ts | 1 - 3 files changed, 4 deletions(-) diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts index c8eeddee369..3e3eeb04815 100644 --- a/packages/expo/src/index.ts +++ b/packages/expo/src/index.ts @@ -16,7 +16,6 @@ export { } from '@clerk/clerk-react'; export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from '@clerk/clerk-react/errors'; -export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; export { clerk as Clerk } from './singleton'; diff --git a/packages/nextjs/src/client-boundary/controlComponents.ts b/packages/nextjs/src/client-boundary/controlComponents.ts index 293cf61a266..9cf3881e2f3 100644 --- a/packages/nextjs/src/client-boundary/controlComponents.ts +++ b/packages/nextjs/src/client-boundary/controlComponents.ts @@ -13,5 +13,3 @@ export { RedirectToCreateOrganization, RedirectToOrganizationProfile, } from '@clerk/clerk-react'; - -export { MultisessionAppSupport } from '@clerk/clerk-react/internal'; diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts index 75a27b87139..ba69ff2efa7 100644 --- a/packages/nextjs/src/index.ts +++ b/packages/nextjs/src/index.ts @@ -6,7 +6,6 @@ export { AuthenticateWithRedirectCallback, ClerkLoaded, ClerkLoading, - MultisessionAppSupport, RedirectToCreateOrganization, RedirectToOrganizationProfile, RedirectToSignIn, From b8092889d4af11063d22e3d6d5b6dc23397f39e2 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 13 Dec 2023 20:04:37 +0200 Subject: [PATCH 14/15] chore(chrome-extension): Fix tests --- .../src/__snapshots__/exports.test.ts.snap | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap index ee956ed1f80..41c4f086171 100644 --- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap +++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap @@ -7,7 +7,6 @@ exports[`public exports should not include a breaking change 1`] = ` "ClerkLoading", "ClerkProvider", "CreateOrganization", - "EmailLinkErrorCode", "OrganizationList", "OrganizationProfile", "OrganizationSwitcher", @@ -28,12 +27,6 @@ exports[`public exports should not include a breaking change 1`] = ` "UserButton", "UserProfile", "WithClerk", - "WithSession", - "WithUser", - "isClerkAPIResponseError", - "isEmailLinkError", - "isKnownError", - "isMetamaskError", "useAuth", "useClerk", "useEmailLink", @@ -45,7 +38,5 @@ exports[`public exports should not include a breaking change 1`] = ` "useSignUp", "useUser", "withClerk", - "withSession", - "withUser", ] `; From 00e342a12c04ebe7d36a7cb92138fcdeb848b3d2 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Thu, 14 Dec 2023 01:26:53 +0200 Subject: [PATCH 15/15] fix(clerk-react): Use mts files for package.json[exports][imports] --- packages/react/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index e81fc42c53d..1099c63bc38 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -25,7 +25,7 @@ "exports": { ".": { "import": { - "types": "./dist/index.d.ts", + "types": "./dist/index.d.mts", "default": "./dist/index.mjs" }, "require": { @@ -35,7 +35,7 @@ }, "./internal": { "import": { - "types": "./dist/internal.d.ts", + "types": "./dist/internal.d.mts", "default": "./dist/internal.mjs" }, "require": { @@ -45,7 +45,7 @@ }, "./errors": { "import": { - "types": "./dist/errors.d.ts", + "types": "./dist/errors.d.mts", "default": "./dist/errors.mjs" }, "require": {