chore(*): Drop export and replace IsomorphicClerkOptions with ClerkPr…

…oviderOptionsWrapper

packages/expo/src/ClerkProvider.tsx

@@ -27,6 +27,7 @@ export function ClerkProvider(props: ClerkProviderProps): JSX.Element {
       // See JS-598 for additional context.
       key={key}
       {...rest}
+      publishableKey={key}
       Clerk={buildClerk({ key, tokenCache })}
       standardBrowser={!isReactNative()}
     >

packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderProps } from '@clerk/clerk-react';
 import {
   __internal__setErrorThrowerOptions,
   ClerkLoaded,
@@ -15,9 +15,8 @@ const SDK_METADATA = {
 __internal__setErrorThrowerOptions({ packageName: 'gatsby-plugin-clerk' });
 
 export type GatsbyClerkProviderProps = {
-  children: React.ReactNode;
   clerkState: any;
-} & IsomorphicClerkOptions;
+} & ClerkProviderProps;
 
 export function ClerkProvider({ children, ...rest }: GatsbyClerkProviderProps) {
   const { clerkState, ...restProps } = rest;

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -1,12 +1,12 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 import type { InitialState } from '@clerk/types';
 import React from 'react';
 
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { ClientClerkProvider } from '../client/ClerkProvider';
 import { initialState } from './auth';
 
-type NextAppClerkProviderProps = React.PropsWithChildren<IsomorphicClerkOptions>;
+type NextAppClerkProviderProps = ClerkProviderOptionsWrapper;
 
 export function ClerkProvider(props: NextAppClerkProviderProps) {
   const { children, ...rest } = props;

packages/nextjs/src/types.ts

@@ -1,8 +1,6 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
-import type React from 'react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 
 export type NextClerkProviderProps = {
-  children: React.ReactNode;
   /**
    * If set to true, the NextJS middleware will be invoked
    * every time the client-side auth state changes (sign-out, sign-in, organization switch etc.).
@@ -12,4 +10,4 @@ export type NextClerkProviderProps = {
    * @default true
    */
   __unstable_invokeMiddlewareOnAuthStateChange?: boolean;
-} & IsomorphicClerkOptions;
+} & ClerkProviderOptionsWrapper;

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,9 +1,8 @@
 import { isPublishableKey } from '@clerk/shared/keys';
-import type { InitialState } from '@clerk/types';
 import React from 'react';
 
 import { multipleClerkProvidersError } from '../errors';
-import type { IsomorphicClerkOptions } from '../types';
+import type { ClerkProviderProps } from '../types';
 import { __internal__setErrorThrowerOptions, errorThrower, withMaxAllowedInstancesGuard } from '../utils';
 import { ClerkContextProvider } from './ClerkContextProvider';
 import { StructureContext, StructureContextStates } from './StructureContext';
@@ -12,11 +11,6 @@ __internal__setErrorThrowerOptions({
   packageName: '@clerk/clerk-react',
 });
 
-export type ClerkProviderProps = IsomorphicClerkOptions & {
-  children: React.ReactNode;
-  initialState?: InitialState;
-};
-
 function ClerkProviderBase(props: ClerkProviderProps): JSX.Element {
   const { initialState, children, ...restIsomorphicClerkOptions } = props;
   const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;

packages/react/src/contexts/index.ts

@@ -1,2 +1 @@
 export { ClerkProvider, __internal__setErrorThrowerOptions } from './ClerkProvider';
-export type { ClerkProviderProps } from './ClerkProvider';

packages/react/src/index.ts

@@ -9,7 +9,8 @@ export type {
   BrowserClerk,
   ClerkProp,
   HeadlessBrowserClerk,
-  IsomorphicClerkOptions,
+  ClerkProviderOptionsWrapper,
+  ClerkProviderProps,
   WithClerkProp,
   WithSessionProp,
   WithUserProp,

packages/react/src/isomorphicClerk.ts

@@ -128,7 +128,7 @@ export class IsomorphicClerk {
 
   constructor(options: IsomorphicClerkOptions) {
     const { Clerk = null, publishableKey } = options || {};
-    this.#publishableKey = publishableKey || '';
+    this.#publishableKey = publishableKey;
     this.#proxyUrl = options?.proxyUrl;
     this.#domain = options?.domain;
     this.options = options;

packages/react/src/types.ts

@@ -3,6 +3,7 @@ import type {
   ClerkOptions,
   ClientResource,
   DomainOrProxyUrl,
+  InitialState,
   LoadedClerk,
   MultiDomainAndOrProxy,
   SDKMetadata,
@@ -28,9 +29,28 @@ export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
   clerkJSVariant?: 'headless' | '';
   clerkJSVersion?: string;
   sdkMetadata?: SDKMetadata;
-  publishableKey?: string;
+  publishableKey: string;
 } & MultiDomainAndOrProxy;
 
+export type ClerkProviderProps = IsomorphicClerkOptions & {
+  children: React.ReactNode;
+  initialState?: InitialState;
+};
+
+// TODO(@dimkl): replacing it with the following make nextjs type tests fail
+//   `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
+// find another way to reduce the duplication.
+export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
+  Clerk?: ClerkProp;
+  clerkJSUrl?: string;
+  clerkJSVariant?: 'headless' | '';
+  clerkJSVersion?: string;
+  sdkMetadata?: SDKMetadata;
+  publishableKey?: string;
+} & MultiDomainAndOrProxy & {
+    children: React.ReactNode;
+  };
+
 export interface BrowserClerkConstructor {
   new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
 }

packages/remix/src/client/RemixClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
 import React from 'react';
 
@@ -15,9 +15,8 @@ const SDK_METADATA = {
 };
 
 export type RemixClerkProviderProps = {
-  children: React.ReactNode;
   clerkState: ClerkState;
-} & IsomorphicClerkOptions;
+} & ClerkProviderOptionsWrapper;
 
 /**
  * Remix hydration errors should not stop Clerk navigation from working, as the components mount only after

packages/remix/src/client/types.ts

@@ -1,6 +1,5 @@
-import type { IsomorphicClerkOptions } from '@clerk/clerk-react';
+import type { ClerkProviderOptionsWrapper } from '@clerk/clerk-react';
 import type { InitialState } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
 
 export type ClerkState = {
   __type: 'clerkState';
@@ -26,4 +25,4 @@ export type WithClerkState<U = any> = {
   clerkState: { __type: 'clerkState' };
 };
 
-export type RemixClerkProviderProps = PropsWithChildren<IsomorphicClerkOptions>;
+export type RemixClerkProviderProps = ClerkProviderOptionsWrapper;