feat(clerk-js): Render @clerk/ui (#4114)

Co-authored-by: Alex Carpenter <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Co-authored-by: Nikos Douvlis <[email protected]>
Co-authored-by: panteliselef <[email protected]>
Co-authored-by: Jacek Radko <[email protected]>

.changeset/late-kiwis-warn.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Remove @clerk/clerk-react as a dev depedency. Move @clerk/shared to depedencies (previously devDepedencies).

.changeset/nervous-guests-guess.md

@@ -0,0 +1,9 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/elements": minor
+"@clerk/nextjs": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+---
+
+Add experimental support for new UI components

.changeset/unlucky-steaks-protect.md

@@ -0,0 +1,5 @@
+---
+"@clerk/types": patch
+---
+
+Fix `SignInProps`/`SignUpProps` `__experimental` type to allow for arbitrary properties

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
-    { "path": "./dist/clerk.browser.js", "maxSize": "65.5kB" },
-    { "path": "./dist/clerk.headless.js", "maxSize": "43kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "68kB" },
+    { "path": "./dist/clerk.headless.js", "maxSize": "44kB" },
     { "path": "./dist/ui-common*.js", "maxSize": "86KB" },
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "58KB" },
@@ -15,6 +15,6 @@
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
-    { "path": "./dist/onetap*.js", "maxSize": "1KB" }
+    { "path": "./dist/onetap*.js", "maxSize": "2KB" }
   ]
 }

packages/clerk-js/package.json

@@ -53,6 +53,7 @@
     "@clerk/localizations": "3.3.0",
     "@clerk/shared": "2.9.2",
     "@clerk/types": "4.26.0",
+    "@clerk/ui": "0.1.9",
     "@coinbase/wallet-sdk": "4.0.4",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",

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

@@ -37,6 +37,7 @@ import type {
   HandleOAuthCallbackParams,
   InstanceType,
   ListenerCallback,
+  LoadedClerk,
   NavigateOptions,
   OrganizationListProps,
   OrganizationProfileProps,
@@ -64,6 +65,7 @@ import type {
 } from '@clerk/types';
 
 import type { MountComponentRenderer } from '../ui/Components';
+import { UI } from '../ui/new';
 import {
   ALLOWED_PROTOCOLS,
   buildURL,
@@ -145,7 +147,12 @@ 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__;
@@ -317,6 +324,14 @@ export class Clerk implements ClerkInterface {
     } else {
       this.#loaded = await this.#loadInNonStandardBrowser();
     }
+
+    if (clerkIsLoaded(this)) {
+      this.__experimental_ui = new UI({
+        router: this.#options.__experimental_router,
+        clerk: this,
+        options: this.#options,
+      });
+    }
   };
 
   public signOut: SignOut = async (callbackOrOptions?: SignOutCallback | SignOutOptions, options?: SignOutOptions) => {
@@ -495,15 +510,19 @@ export class Clerk implements ClerkInterface {
   };
 
   public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
-    this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted({ preloadHint: 'SignIn' }).then(controls =>
-      controls.mountComponent({
-        name: 'SignIn',
-        appearanceKey: 'signIn',
-        node,
-        props,
-      }),
-    );
+    if (props && 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.telemetry?.record(eventPrebuiltComponentMounted('SignIn', props));
   };
 
@@ -517,15 +536,19 @@ export class Clerk implements ClerkInterface {
   };
 
   public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
-    this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted({ preloadHint: 'SignUp' }).then(controls =>
-      controls.mountComponent({
-        name: 'SignUp',
-        appearanceKey: 'signUp',
-        node,
-        props,
-      }),
-    );
+    if (props && 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.telemetry?.record(eventPrebuiltComponentMounted('SignUp', props));
   };
 

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

@@ -0,0 +1,4 @@
+declare module '@clerk/ui/styles.css' {
+  const content: string;
+  export default content;
+}

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

@@ -0,0 +1,98 @@
+import { createDeferredPromise } from '@clerk/shared';
+import type { ClerkHostRouter } from '@clerk/shared/router';
+import type { ClerkOptions, LoadedClerk } from '@clerk/types';
+
+import type { init } from './renderer';
+import type { ClerkNewComponents, ComponentDefinition } from './types';
+
+function assertRouter(router: ClerkHostRouter | undefined): asserts router is ClerkHostRouter {
+  if (!router) {
+    throw new Error(`Clerk: Attempted to use functionality that requires the "router" option to be provided to Clerk.`);
+  }
+}
+
+export class UI {
+  router?: ClerkHostRouter;
+  clerk: LoadedClerk;
+  options: ClerkOptions;
+  componentRegistry = new Map<string, ComponentDefinition>();
+
+  #rendererPromise?: ReturnType<typeof createDeferredPromise>;
+  #renderer?: ReturnType<typeof init>;
+
+  constructor({
+    router,
+    clerk,
+    options,
+  }: {
+    router: ClerkHostRouter | undefined;
+    clerk: LoadedClerk;
+    options: ClerkOptions;
+  }) {
+    this.router = router;
+    this.clerk = clerk;
+    this.options = options;
+
+    // register components
+    this.register('SignIn', {
+      type: 'component',
+      load: () =>
+        import(/* webpackChunkName: "rebuild--sign-in" */ '@clerk/ui/sign-in').then(({ SignIn }) => ({
+          default: SignIn,
+        })),
+    });
+    this.register('SignUp', {
+      type: 'component',
+      load: () =>
+        import(/* webpackChunkName: "rebuild--sign-up" */ '@clerk/ui/sign-up').then(({ SignUp }) => ({
+          default: SignUp,
+        })),
+    });
+  }
+
+  // Mount a component from the registry
+  mount<C extends keyof ClerkNewComponents>(componentName: C, node: HTMLElement, props: ClerkNewComponents[C]): void {
+    const component = this.componentRegistry.get(componentName);
+    if (!component) {
+      throw new Error(`clerk/ui: Unable to find component definition for ${componentName}`);
+    }
+
+    // immediately start loading the component
+    component.load();
+
+    this.renderer()
+      .then(() => {
+        this.#renderer?.mount(this.#renderer.createElementFromComponentDefinition(component), props, node);
+      })
+      .catch(err => {
+        console.error(`clerk/ui: Error mounting component ${componentName}:`, err);
+      });
+  }
+
+  unmount(node: HTMLElement) {
+    this.#renderer?.unmount(node);
+  }
+
+  // Registers a component for rendering later
+  register(componentName: string, componentDefinition: ComponentDefinition) {
+    this.componentRegistry.set(componentName, componentDefinition);
+  }
+
+  renderer() {
+    if (this.#rendererPromise) {
+      return this.#rendererPromise.promise;
+    }
+
+    this.#rendererPromise = createDeferredPromise();
+
+    import('./renderer').then(({ init, wrapperInit }) => {
+      assertRouter(this.router);
+      this.#renderer = init({
+        wrapper: wrapperInit({ clerk: this.clerk, options: this.options, router: this.router }),
+      });
+      this.#rendererPromise?.resolve();
+    });
+
+    return this.#rendererPromise.promise;
+  }
+}