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

packages/clerk-js/package.json

@@ -53,6 +53,7 @@
     "@clerk/localizations": "2.8.1",
     "@clerk/shared": "2.6.2",
     "@clerk/types": "4.19.0",
+    "@clerk/ui": "^0.1.8",
     "@coinbase/wallet-sdk": "4.0.4",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",

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

@@ -15,6 +15,7 @@ import {
   stripScheme,
 } from '@clerk/shared';
 import { logger } from '@clerk/shared/logger';
+import type { ClerkHostRouter } from '@clerk/shared/router';
 import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
 import type {
   __experimental_UserVerificationModalProps,
@@ -65,6 +66,7 @@ import type {
 } from '@clerk/types';
 
 import type { MountComponentRenderer } from '../ui/Components';
+import { UI } from '../ui/new';
 import {
   ALLOWED_PROTOCOLS,
   buildURL,
@@ -147,6 +149,8 @@ const defaultOptions: ClerkOptions = {
 };
 
 export class Clerk implements ClerkInterface {
+  // @ts-expect-error -- TODO: ensure defined
+  public ui: UI;
   public static mountComponentRenderer?: MountComponentRenderer;
 
   public static version: string = __PKG_VERSION__;
@@ -182,6 +186,7 @@ export class Clerk implements ClerkInterface {
   #options: ClerkOptions = {};
   #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
   #touchThrottledUntil = 0;
+  #router: ClerkHostRouter;
 
   get publishableKey(): string {
     return this.#publishableKey;
@@ -308,6 +313,11 @@ export class Clerk implements ClerkInterface {
       });
     }
 
+    // @ts-expect-error -- TODO: type
+    this.#router = this.#options.router;
+    // @ts-expect-error -- TODO: type
+    this.ui = new UI({ router: this.#options.router, clerk: this, options: this.#options });
+
     this.#options.allowedRedirectOrigins = createAllowedRedirectOrigins(
       this.#options.allowedRedirectOrigins,
       this.frontendApi,
@@ -496,15 +506,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.experimental?.newComponents) {
+      this.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));
   };
 
@@ -550,15 +564,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.experimental?.newComponents) {
+      this.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,99 @@
+import { createDeferredPromise } from '@clerk/shared';
+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 { ComponentType, ReactNode } from 'react';
+
+import type { init } from './renderer';
+import type { ComponentDefinition } from './types';
+
+type $TODO = any;
+
+export class UI {
+  router: ClerkHostRouter;
+  clerk: LoadedClerk;
+  options: ClerkOptions;
+  componentRegistry = new Map<string, ComponentDefinition>();
+
+  #rendererPromise?: ReturnType<typeof createDeferredPromise>;
+  #renderer?: ReturnType<typeof init>;
+  #wrapper: ComponentType<{ children: ReactNode }>;
+
+  constructor({ router, clerk, options }: { router: ClerkHostRouter; 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,
+        })),
+    });
+
+    this.#wrapper = ({ children }) => {
+      return (
+        <ClerkInstanceContext.Provider value={{ value: this.clerk }}>
+          <OptionsContext.Provider value={this.options}>
+            <ClerkHostRouterContext.Provider value={this.router}>{children}</ClerkHostRouterContext.Provider>
+          </OptionsContext.Provider>
+        </ClerkInstanceContext.Provider>
+      );
+    };
+  }
+
+  // Mount a component from the registry
+  mount(componentName: string, node: HTMLElement, props: $TODO) {
+    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 }) => {
+      this.#renderer = init({
+        wrapper: this.#wrapper,
+      });
+      this.#rendererPromise?.resolve();
+    });
+
+    return this.#rendererPromise.promise;
+  }
+}

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

@@ -0,0 +1,63 @@
+// TODO: don't import here
+import '@clerk/ui/styles.css';
+
+import type { ElementType } 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';
+
+// 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,6 @@
+import type { ComponentType } from 'react';
+
+export interface ComponentDefinition {
+  type: 'component' | 'modal';
+  load: () => Promise<{ default: ComponentType }>;
+}

packages/clerk-js/webpack.config.js

@@ -26,6 +26,7 @@ const variantToSourceFile = {
 
 /** @returns { import('webpack').Configuration } */
 const common = ({ mode }) => {
+  /** @type { import('webpack').Configuration } */
   return {
     mode,
     resolve: {
@@ -77,9 +78,27 @@ const common = ({ mode }) => {
             name: 'vendors',
             priority: -10,
           },
+          commonNew: {
+            minChunks: 2,
+            name: 'common-new',
+            chunks(chunk) {
+              return chunk.name?.startsWith('rebuild--');
+            },
+            priority: 0,
+          },
+          react: {
+            chunks: 'all',
+            test: /[\\/]node_modules[\\/](react-dom|scheduler)[\\/]/,
+            name: 'framework',
+            priority: 40,
+            enforce: true,
+          },
         },
       },
     },
+    experiments: {
+      css: true,
+    },
   };
 };
 
@@ -164,6 +183,8 @@ const commonForProd = () => {
           new TerserPlugin({
             terserOptions: {
               compress: {
+                unused: true,
+                dead_code: true,
                 passes: 2,
               },
               mangle: {

packages/elements/src/internals/constants/index.ts

@@ -51,6 +51,7 @@ export const ERROR_CODES = {
 export const ROUTING = {
   path: 'path',
   virtual: 'virtual',
+  hash: 'hash',
 } as const;
 
 export type ROUTING = (typeof ROUTING)[keyof typeof ROUTING];

packages/elements/src/internals/machines/third-party/third-party.actors.ts

@@ -74,7 +74,7 @@ export const handleRedirectCallback = fromCallback<AnyEventObject, HandleRedirec
 
     // @ts-expect-error - Clerk types are incomplete
     // TODO: Update local Clerk types
-    const loadedClerk = clerk.clerkjs as LoadedClerk;
+    const loadedClerk = (clerk.clerkjs ?? clerk) as LoadedClerk;
 
     void loadedClerk.handleRedirectCallback(
       {

packages/nextjs/src/app-router/client/ClerkProvider.tsx

@@ -2,7 +2,7 @@
 import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
 import type { ClerkHostRouter } from '@clerk/shared/router';
 import { ClerkHostRouterContext } from '@clerk/shared/router';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import React, { useEffect, useTransition } from 'react';
 
 import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEffect';
@@ -34,9 +34,6 @@ export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
  */
 export const useNextRouter = (): ClerkHostRouter => {
   const router = useRouter();
-  const pathname = usePathname();
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
-  const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
 
   // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
   // preserve internal state between steps.
@@ -52,8 +49,8 @@ export const useNextRouter = (): ClerkHostRouter => {
     shallowPush(path: string) {
       canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
     },
-    pathname: () => pathname,
-    searchParams: () => searchParams,
+    pathname: () => window.location.pathname,
+    searchParams: () => new URLSearchParams(window.location.search),
   };
 };
 
@@ -113,6 +110,8 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => {
 
   const mergedProps = mergeNextClerkPropsWithEnv({
     ...props,
+    // @ts-expect-error -- TODO: type
+    router: clerkRouter,
     routerPush: push,
     routerReplace: replace,
   });