feat(clerk-js): Improve DX for headless import

"import Clerk from @clerk/clerk-js/headless"

instead of

"import Clerk from @clerk/clerk-js/dist/headless"

packages/clerk-js/headless/index.d.ts

@@ -0,0 +1,4 @@
+import Clerk from '../dist/types/src/index.headless';
+
+export default Clerk;
+export * from '../dist/types/src/index.headless';

packages/clerk-js/headless/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.headless');

packages/expo/src/ClerkProvider.tsx

@@ -14,25 +14,13 @@ export type ClerkProviderProps = ClerkReactProviderProps & {
 };
 
 export function ClerkProvider(props: ClerkProviderProps): JSX.Element {
-  const { children, tokenCache, hotload, ...rest } = props;
+  const { children, tokenCache, ...rest } = props;
   const frontendApi = props.frontendApi || process.env.CLERK_FRONTEND_API || '';
 
-  const clerkRef = React.useRef<ReturnType<typeof buildClerk> | null>(null);
-
-  function getClerk() {
-    if (clerkRef.current === null && !hotload) {
-      clerkRef.current = buildClerk({
-        frontendApi,
-        tokenCache,
-      });
-    }
-    return clerkRef.current;
-  }
-
   return (
     <ClerkReactProvider
       {...rest}
-      Clerk={getClerk()}
+      Clerk={buildClerk({ frontendApi, tokenCache })}
       standardBrowser={!isReactNative()}
     >
       {children}

packages/expo/src/index.ts

@@ -25,4 +25,6 @@ export {
   MagicLinkErrorCode,
 } from '@clerk/clerk-react';
 
+export { clerk as Clerk } from './singleton';
+
 export * from './ClerkProvider';

packages/expo/src/singleton.ts

@@ -1,24 +1,23 @@
-// @ts-ignore
-import Clerk from '@clerk/clerk-js/dist/clerk.headless';
 import type { FapiRequestInit, FapiResponse } from '@clerk/clerk-js/dist/types/src/core/fapiClient';
-import type { ClerkProp } from '@clerk/clerk-react';
+import Clerk from '@clerk/clerk-js/headless';
+import type { HeadlessBrowserClerk } from '@clerk/clerk-react';
 
 import { getToken as getTokenFromMemory, saveToken as saveTokenInMemory, TokenCache } from './cache';
 
 const KEY = '__clerk_client_jwt';
 
-export let clerk: ClerkProp;
+export let clerk: HeadlessBrowserClerk;
 
 type BuildClerkOptions = {
   frontendApi: string;
   tokenCache?: TokenCache;
 };
 
 export function buildClerk({ frontendApi, tokenCache }: BuildClerkOptions): ClerkProp {
-  const getToken = (tokenCache && tokenCache.getToken) ?? getTokenFromMemory;
-  const saveToken = (tokenCache && tokenCache.saveToken) ?? saveTokenInMemory;
-
   if (!clerk) {
+    const getToken = (tokenCache && tokenCache.getToken) ?? getTokenFromMemory;
+    const saveToken = (tokenCache && tokenCache.saveToken) ?? saveTokenInMemory;
+
     clerk = new Clerk(frontendApi);
 
     if (!tokenCache) {

packages/react/src/index.ts

@@ -1,7 +1,7 @@
 export * from './contexts';
 export * from './components';
 export * from './hooks';
-export type { ClerkProp } from './types';
+export type { BrowserClerk, ClerkProp, HeadlessBrowserClerk } from './types';
 export { isMagicLinkError, MagicLinkErrorCode } from './errors';
 export { useMagicLink } from './hooks/useMagicLink';
 

packages/react/src/types.ts

@@ -28,9 +28,12 @@ export interface MountProps {
   props?: any;
 }
 
-export interface BrowserClerk extends Clerk {
+export interface HeadlessBrowserClerk extends Clerk {
   load: (opts?: ClerkOptions) => Promise<void>;
   updateClient: (client: ClientResource) => void;
+}
+
+export interface BrowserClerk extends HeadlessBrowserClerk {
   onComponentsReady: Promise<void>;
   components: any;
 }