chore(clerk-js): Remove new UI renderer (#4950)

Author: brkalow

.changeset/little-rivers-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Remove unused, experimental code for a new UI component rendering path.

packages/clerk-js/jest.setup.ts

@@ -35,7 +35,6 @@ if (typeof window !== 'undefined') {
 
   global.__PKG_NAME__ = '';
   global.__PKG_VERSION__ = '';
-  global.BUILD_ENABLE_NEW_COMPONENTS = '';
 
   //@ts-expect-error
   global.IntersectionObserver = class IntersectionObserver {

packages/clerk-js/rspack.config.js

@@ -50,7 +50,6 @@ const common = ({ mode, disableRHC = false }) => {
          */
         __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
-        BUILD_ENABLE_NEW_COMPONENTS: JSON.stringify(process.env.BUILD_ENABLE_NEW_COMPONENTS),
       }),
       new rspack.EnvironmentPlugin({
         CLERK_ENV: mode,

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

@@ -34,7 +34,6 @@ import type {
   InstanceType,
   JoinWaitlistParams,
   ListenerCallback,
-  LoadedClerk,
   NavigateOptions,
   OrganizationListProps,
   OrganizationProfileProps,
@@ -68,7 +67,6 @@ import type {
 } from '@clerk/types';
 
 import type { MountComponentRenderer } from '../ui/Components';
-import { UI } from '../ui/new';
 import {
   ALLOWED_PROTOCOLS,
   buildURL,
@@ -155,12 +153,7 @@ const defaultOptions: ClerkOptions = {
   signUpForceRedirectUrl: undefined,
 };
 
-function clerkIsLoaded(clerk: ClerkInterface): clerk is LoadedClerk {
-  return !!clerk.client;
-}
-
 export class Clerk implements ClerkInterface {
-  public __experimental_ui?: UI;
   public static mountComponentRenderer?: MountComponentRenderer;
 
   public static version: string = __PKG_VERSION__;
@@ -353,16 +346,6 @@ export class Clerk implements ClerkInterface {
     } else {
       this.#loaded = await this.#loadInNonStandardBrowser();
     }
-
-    if (BUILD_ENABLE_NEW_COMPONENTS) {
-      if (clerkIsLoaded(this)) {
-        this.__experimental_ui = new UI({
-          router: this.#options.__experimental_router,
-          clerk: this,
-          options: this.#options,
-        });
-      }
-    }
   };
 
   #isCombinedSignInOrUpFlow(): boolean {
@@ -578,19 +561,15 @@ export class Clerk implements ClerkInterface {
   };
 
   public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
-    if (props?.__experimental?.newComponents && this.__experimental_ui) {
-      this.__experimental_ui.mount('SignIn', node, props);
-    } else {
-      this.assertComponentsReady(this.#componentControls);
-      void this.#componentControls.ensureMounted({ preloadHint: 'SignIn' }).then(controls =>
-        controls.mountComponent({
-          name: 'SignIn',
-          appearanceKey: 'signIn',
-          node,
-          props,
-        }),
-      );
-    }
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted({ preloadHint: 'SignIn' }).then(controls =>
+      controls.mountComponent({
+        name: 'SignIn',
+        appearanceKey: 'signIn',
+        node,
+        props,
+      }),
+    );
     this.telemetry?.record(
       eventPrebuiltComponentMounted('SignIn', {
         ...props,
@@ -609,19 +588,15 @@ export class Clerk implements ClerkInterface {
   };
 
   public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
-    if (props?.__experimental?.newComponents && this.__experimental_ui) {
-      this.__experimental_ui.mount('SignUp', node, props);
-    } else {
-      this.assertComponentsReady(this.#componentControls);
-      void this.#componentControls.ensureMounted({ preloadHint: 'SignUp' }).then(controls =>
-        controls.mountComponent({
-          name: 'SignUp',
-          appearanceKey: 'signUp',
-          node,
-          props,
-        }),
-      );
-    }
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted({ preloadHint: 'SignUp' }).then(controls =>
+      controls.mountComponent({
+        name: 'SignUp',
+        appearanceKey: 'signUp',
+        node,
+        props,
+      }),
+    );
     this.telemetry?.record(eventPrebuiltComponentMounted('SignUp', props));
   };
 

packages/clerk-js/src/global.d.ts

@@ -8,7 +8,6 @@ declare module '*.svg' {
   export default value;
 }
 
-declare const BUILD_ENABLE_NEW_COMPONENTS: string;
 declare const __PKG_NAME__: string;
 declare const __PKG_VERSION__: string;
 declare const __DEV__: boolean;

packages/clerk-js/src/ui/new/index.tsx

@@ -2,7 +2,6 @@
   "extends": ["//"],
   "tasks": {
     "build": {
-      "env": ["BUILD_ENABLE_NEW_COMPONENTS"],
       "inputs": [
         "*.d.ts",
         "headless/**",

packages/clerk-js/src/ui/new/renderer.tsx

@@ -31,7 +31,6 @@ import type {
   SignUpFallbackRedirectUrl,
   SignUpForceRedirectUrl,
 } from './redirects';
-import type { ClerkHostRouter } from './router';
 import type { ActiveSessionResource } from './session';
 import type { SessionVerificationLevel } from './sessionVerification';
 import type { SignInResource } from './signIn';
@@ -776,11 +775,6 @@ export type ClerkOptions = ClerkOptionsNavigation &
      * After a developer has claimed their instance created by Keyless mode, they can use this URL to find their instance's keys
      */
     __internal_copyInstanceKeysUrl?: string;
-
-    /**
-     * [EXPERIMENTAL] Provide the underlying host router, required for the new experimental UI components.
-     */
-    __experimental_router?: ClerkHostRouter;
   };
 
 export interface NavigateOptions {