chore(clerk-js): Refactor Clerk.#environment modifier to protected to use type assert

Author: dimkl

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

@@ -150,14 +150,15 @@ export class Clerk implements ClerkInterface {
   public telemetry: TelemetryCollector | undefined;
 
   protected internal_last_error: ClerkAPIError | null = null;
+  // converted to protected environment to support `updateEnvironment` type assertion
+  protected environment?: EnvironmentResource | null;
 
   #publishableKey: string = '';
   #domain: DomainOrProxyUrl['domain'];
   #proxyUrl: DomainOrProxyUrl['proxyUrl'];
   #authService: SessionCookieService | null = null;
   #broadcastChannel: LocalStorageBroadcastChannel<ClerkCoreBroadcastChannelEvent> | null = null;
   #componentControls?: ReturnType<MountComponentRenderer> | null;
-  #environment?: EnvironmentResource | null;
   //@ts-expect-error with being undefined even though it's not possible - related to issue with ts and error thrower
   #fapiClient: FapiClient;
   #instanceType?: InstanceType;
@@ -328,7 +329,7 @@ export class Clerk implements ClerkInterface {
 
   public openSignIn = (props?: SignInProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (sessionExistsAndSingleSessionModeEnabled(this, this.#environment)) {
+    if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotOpenSignInOrSignUp, {
           code: 'cannot_render_single_session_enabled',
@@ -348,7 +349,7 @@ export class Clerk implements ClerkInterface {
 
   public openSignUp = (props?: SignUpProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (sessionExistsAndSingleSessionModeEnabled(this, this.#environment)) {
+    if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotOpenSignInOrSignUp, {
           code: 'cannot_render_single_session_enabled',
@@ -388,7 +389,7 @@ export class Clerk implements ClerkInterface {
 
   public openOrganizationProfile = (props?: OrganizationProfileProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
           code: 'cannot_render_organizations_disabled',
@@ -416,7 +417,7 @@ export class Clerk implements ClerkInterface {
 
   public openCreateOrganization = (props?: CreateOrganizationProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
           code: 'cannot_render_organizations_disabled',
@@ -535,7 +536,7 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationProfile = (node: HTMLDivElement, props?: OrganizationProfileProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
           code: 'cannot_render_organizations_disabled',
@@ -575,7 +576,7 @@ export class Clerk implements ClerkInterface {
 
   public mountCreateOrganization = (node: HTMLDivElement, props?: CreateOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
           code: 'cannot_render_organizations_disabled',
@@ -606,7 +607,7 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationSwitcher = (node: HTMLDivElement, props?: OrganizationSwitcherProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
           code: 'cannot_render_organizations_disabled',
@@ -633,7 +634,7 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.#environment)) {
+    if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
           code: 'cannot_render_organizations_disabled',
@@ -842,17 +843,17 @@ export class Clerk implements ClerkInterface {
   }
 
   public buildUserProfileUrl(): string {
-    if (!this.#environment || !this.#environment.displayConfig) {
+    if (!this.environment || !this.environment.displayConfig) {
       return '';
     }
-    return this.buildUrlWithAuth(this.#environment.displayConfig.userProfileUrl);
+    return this.buildUrlWithAuth(this.environment.displayConfig.userProfileUrl);
   }
 
   public buildHomeUrl(): string {
-    if (!this.#environment || !this.#environment.displayConfig) {
+    if (!this.environment || !this.environment.displayConfig) {
       return '';
     }
-    return this.buildUrlWithAuth(this.#environment.displayConfig.homeUrl);
+    return this.buildUrlWithAuth(this.environment.displayConfig.homeUrl);
   }
 
   public buildAfterSignInUrl(): string {
@@ -872,17 +873,17 @@ export class Clerk implements ClerkInterface {
   }
 
   public buildCreateOrganizationUrl(): string {
-    if (!this.#environment || !this.#environment.displayConfig) {
+    if (!this.environment || !this.environment.displayConfig) {
       return '';
     }
-    return this.buildUrlWithAuth(this.#environment.displayConfig.createOrganizationUrl);
+    return this.buildUrlWithAuth(this.environment.displayConfig.createOrganizationUrl);
   }
 
   public buildOrganizationProfileUrl(): string {
-    if (!this.#environment || !this.#environment.displayConfig) {
+    if (!this.environment || !this.environment.displayConfig) {
       return '';
     }
-    return this.buildUrlWithAuth(this.#environment.displayConfig.organizationProfileUrl);
+    return this.buildUrlWithAuth(this.environment.displayConfig.organizationProfileUrl);
   }
 
   #redirectToSatellite = async (): Promise<unknown> => {
@@ -1015,11 +1016,11 @@ export class Clerk implements ClerkInterface {
     params: HandleOAuthCallbackParams = {},
     customNavigate?: (to: string) => Promise<unknown>,
   ): Promise<unknown> => {
-    if (!this.loaded || !this.#environment || !this.client) {
+    if (!this.loaded || !this.environment || !this.client) {
       return;
     }
     const { signIn, signUp } = this.client;
-    const { displayConfig } = this.#environment;
+    const { displayConfig } = this.environment;
     const { firstFactorVerification } = signIn;
     const { externalAccount } = signUp.verifications;
     const su = {
@@ -1205,7 +1206,7 @@ export class Clerk implements ClerkInterface {
     customNavigate,
     unsafeMetadata,
   }: AuthenticateWithMetamaskParams = {}): Promise<void> => {
-    if (!this.client || !this.#environment) {
+    if (!this.client || !this.environment) {
       return;
     }
 
@@ -1252,7 +1253,7 @@ export class Clerk implements ClerkInterface {
     Organization.get(organizationId);
 
   public updateEnvironment(environment: EnvironmentResource): asserts this is { environment: EnvironmentResource } {
-    this.#environment = environment;
+    this.environment = environment;
     this.#authService?.setEnvironment(environment);
   }
 
@@ -1292,16 +1293,16 @@ export class Clerk implements ClerkInterface {
   };
 
   get __unstable__environment(): EnvironmentResource | null | undefined {
-    return this.#environment;
+    return this.environment;
   }
 
   // TODO: Fix this properly
   // eslint-disable-next-line @typescript-eslint/require-await
   __unstable__setEnvironment = async (env: EnvironmentJSON) => {
-    this.#environment = new Environment(env);
+    this.environment = new Environment(env);
 
     if (Clerk.mountComponentRenderer) {
-      this.#componentControls = Clerk.mountComponentRenderer(this, this.#environment, this.#options);
+      this.#componentControls = Clerk.mountComponentRenderer(this, this.environment, this.#options);
     }
   };
 
@@ -1485,7 +1486,7 @@ export class Clerk implements ClerkInterface {
         }
 
         if (Clerk.mountComponentRenderer) {
-          this.#componentControls = Clerk.mountComponentRenderer(this, this.#environment as Environment, this.#options);
+          this.#componentControls = Clerk.mountComponentRenderer(this, this.environment as Environment, this.#options);
         }
 
         break;
@@ -1523,7 +1524,7 @@ export class Clerk implements ClerkInterface {
     // TODO: Add an auth service also for non standard browsers that will poll for the __session JWT but won't use cookies
 
     if (Clerk.mountComponentRenderer) {
-      this.#componentControls = Clerk.mountComponentRenderer(this, this.#environment, this.#options);
+      this.#componentControls = Clerk.mountComponentRenderer(this, this.environment, this.#options);
     }
 
     return true;
@@ -1632,10 +1633,10 @@ export class Clerk implements ClerkInterface {
   };
 
   #buildUrl = (key: 'signInUrl' | 'signUpUrl', params?: Record<string, string>): string => {
-    if (!key || !this.loaded || !this.#environment || !this.#environment.displayConfig) {
+    if (!key || !this.loaded || !this.environment || !this.environment.displayConfig) {
       return '';
     }
-    const signInOrUpUrl = this.#options[key] || this.#environment.displayConfig[key];
+    const signInOrUpUrl = this.#options[key] || this.environment.displayConfig[key];
     const redirectUrls = new RedirectUrls(this.#options, params);
     return this.buildUrlWithAuth(redirectUrls.appendPreservedPropsToUrl(signInOrUpUrl, params));
   };
@@ -1659,9 +1660,9 @@ export class Clerk implements ClerkInterface {
     }
 
     const userSignedIn = this.session;
-    const signInUrl = this.#options.signInUrl || this.#environment?.displayConfig.signInUrl;
+    const signInUrl = this.#options.signInUrl || this.environment?.displayConfig.signInUrl;
     const referrerIsSignInUrl = signInUrl && window.location.href.startsWith(signInUrl);
-    const signUpUrl = this.#options.signUpUrl || this.#environment?.displayConfig.signUpUrl;
+    const signUpUrl = this.#options.signUpUrl || this.environment?.displayConfig.signUpUrl;
     const referrerIsSignUpUrl = signUpUrl && window.location.href.startsWith(signUpUrl);
 
     // don't redirect if user is not signed in and referrer is sign in/up url