chore(clerk-js,types): Address PR comments

Author: dimkl

packages/clerk-js/README.md

@@ -44,7 +44,7 @@ There are two ways you can include ClerkJS in your project. You can either [impo
 npm install @clerk/clerk-js
 ```
 
-Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your [Frontend API](https://dashboard.clerk.com/last-active?path=api-keys) as a parameter.
+Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your [Publishable Key](https://dashboard.clerk.com/last-active?path=api-keys) as a parameter.
 
 ```js
 import Clerk from '@clerk/clerk-js';

packages/clerk-js/src/core/clerk.test.ts

@@ -133,6 +133,24 @@ describe('Clerk singleton', () => {
     eventBus.off(events.TokenUpdate);
   });
 
+  describe('initialize', () => {
+    it('should consider publishableKey readonly', () => {
+      const sut = new Clerk(productionPublishableKey);
+      expect(sut.publishableKey).toEqual(productionPublishableKey);
+
+      expect(() => {
+        // @ts-expect-error attempt to override getter field
+        sut.publishableKey = 'aloha';
+      }).toThrowError(/Cannot set property publishableKey of #<Clerk>/);
+    });
+
+    it('should throw when publishableKey is invalid', () => {
+      expect(() => {
+        new Clerk('invalidPK');
+      }).toThrowError(/The publishableKey passed to Clerk is invalid/);
+    });
+  });
+
   describe('.setActive', () => {
     const mockSession = {
       id: '1',

packages/clerk-js/src/core/clerk.ts

@@ -147,10 +147,10 @@ export default class Clerk implements ClerkInterface {
   public organization?: OrganizationResource | null;
   public user?: UserResource | null;
   public __internal_country?: string | null;
-  public readonly publishableKey: string = '';
 
   protected internal_last_error: ClerkAPIError | null = null;
 
+  #publishableKey: string = '';
   #domain: DomainOrProxyUrl['domain'];
   #proxyUrl: DomainOrProxyUrl['proxyUrl'];
   #authService: SessionCookieService | null = null;
@@ -168,6 +168,10 @@ export default class Clerk implements ClerkInterface {
   #options: ClerkOptions = {};
   #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
 
+  get publishableKey(): string {
+    return this.#publishableKey;
+  }
+
   get version(): string {
     return Clerk.version;
   }
@@ -239,7 +243,7 @@ export default class Clerk implements ClerkInterface {
       return errorThrower.throwInvalidPublishableKeyError({ key });
     }
 
-    this.publishableKey = key;
+    this.#publishableKey = key;
     this.#instanceType = publishableKey.instanceType;
 
     this.#fapiClient = createFapiClient(this);

packages/clerk-js/src/core/fapiClient.test.ts

@@ -3,7 +3,7 @@ import type { Clerk } from '@clerk/types';
 import createFapiClient from './fapiClient';
 
 const mockedClerkInstance = {
-  frontendApi: 'clerk.example.com', // publishableKey: 'pk_test_Y2xlcmsuZXhhbXBsZS5jb20k',
+  frontendApi: 'clerk.example.com',
   version: '42.0.0',
   session: {
     id: 'deadbeef',

packages/clerk-js/src/ui-retheme/components/UserButton/useMultisessionActions.tsx

@@ -64,8 +64,6 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     return signOut(opts.navigateAfterSignOut);
   };
 
-  // TODO: Fix this eslint error
-
   const handleSessionClicked = (session: ActiveSessionResource) => async () => {
     card.setLoading();
     return setActive({ session, beforeEmit: opts.navigateAfterSwitchSession }).finally(() => {

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

@@ -51,8 +51,6 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     return signOut(opts.navigateAfterSignOut);
   };
 
-  // TODO: Fix this eslint error
-
   const handleSessionClicked = (session: ActiveSessionResource) => async () => {
     card.setLoading();
     return setActive({ session, beforeEmit: opts.navigateAfterSwitchSession }).finally(() => {

packages/types/src/jwt.ts

@@ -6,12 +6,14 @@ export interface JWT {
   claims: JWTClaims;
 }
 
+type NonEmptyArray<T> = [T, ...T[]];
+
 // standard names https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1
 export interface JWTHeader {
   alg: string | Algorithm;
   typ?: string;
   cty?: string;
-  crit?: Array<string | Exclude<JWTHeader, 'crit'>>;
+  crit?: NonEmptyArray<Exclude<keyof JWTHeader, 'crit'>>;
   kid?: string;
   jku?: string;
   x5u?: string | string[];