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

.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

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
-    { "path": "./dist/clerk.browser.js", "maxSize": "64.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.1.2",
     "@clerk/shared": "2.9.0",
     "@clerk/types": "4.25.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/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;
+  }
+}

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

@@ -0,0 +1,87 @@
+// TODO: don't import here
+import '@clerk/ui/styles.css';
+
+import { ClerkInstanceContext, OptionsContext } from '@clerk/shared/react';
+import type { ClerkHostRouter } from '@clerk/shared/router';
+import { ClerkHostRouterContext } from '@clerk/shared/router';
+import type { ClerkOptions, LoadedClerk } from '@clerk/types';
+import type { ElementType, ReactNode } from 'react';
+import { createElement, lazy } from 'react';
+import { createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+import type { ComponentDefinition } from './types';
+
+const ROOT_ELEMENT_ID = 'clerk-components-new';
+
+export function wrapperInit({
+  clerk,
+  options,
+  router,
+}: {
+  clerk: LoadedClerk;
+  options: ClerkOptions;
+  router: ClerkHostRouter;
+}) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <ClerkInstanceContext.Provider value={{ value: clerk }}>
+        <OptionsContext.Provider value={options}>
+          <ClerkHostRouterContext.Provider value={router}>{children}</ClerkHostRouterContext.Provider>
+        </OptionsContext.Provider>
+      </ClerkInstanceContext.Provider>
+    );
+  };
+}
+
+// Initializes the react renderer
+export function init({ wrapper }: { wrapper: ElementType }) {
+  const renderedComponents = new Map<HTMLElement, [ElementType, Record<string, any>]>();
+  let rootElement = document.getElementById(ROOT_ELEMENT_ID);
+
+  if (!rootElement) {
+    rootElement = document.createElement('div');
+    rootElement.setAttribute('id', 'clerk-components');
+    document.body.appendChild(rootElement);
+  }
+
+  const root = createRoot(rootElement);
+
+  // (re-)renders the render wrapper, rendering any components present in the `renderedComponents` map.
+  // React's render function retains state, so it's safe to call multiple times as additional components are mounted and unmounted.
+  function render() {
+    root.render(
+      createElement(
+        wrapper,
+        null,
+        Array.from(renderedComponents.entries()).map(([node, [element, props]]) =>
+          createPortal(createElement(element, props), node),
+        ),
+      ),
+    );
+  }
+
+  function mount(element: ElementType, props: any, node: HTMLElement) {
+    renderedComponents.set(node, [element, props]);
+    render();
+  }
+
+  function unmount(node: HTMLElement) {
+    if (!renderedComponents.has(node)) {
+      return;
+    }
+
+    renderedComponents.delete(node);
+    render();
+  }
+
+  function createElementFromComponentDefinition(componentDefinition: ComponentDefinition) {
+    return lazy(componentDefinition.load);
+  }
+
+  return {
+    mount,
+    unmount,
+    createElementFromComponentDefinition,
+  };
+}

packages/clerk-js/src/ui/new/types.ts

@@ -0,0 +1,12 @@
+import type { SignInProps, SignUpProps } from '@clerk/types';
+import type { ComponentType } from 'react';
+
+export interface ComponentDefinition {
+  type: 'component' | 'modal';
+  load: () => Promise<{ default: ComponentType }>;
+}
+
+export type ClerkNewComponents = {
+  SignIn: SignInProps;
+  SignUp: SignUpProps;
+};