Merge branch 'jrad/ui-prop-cleanup' into jrad/js-prop-bundling

Author: jacekradko

.changeset/shiny-owls-dance.md

@@ -17,3 +17,5 @@ import { ui } from '@clerk/ui';
   ...
 </ClerkProvider>
 ```
+
+**Migration note**: If you were previously using the internal `clerkUiCtor` prop, migrate to the new `ui` prop by importing `ui` from `@clerk/ui`.

.github/actions/verdaccio/action.yml

@@ -69,8 +69,30 @@ runs:
           sleep 2
         done
         pnpm config set $(echo ${{ inputs.registry }} | sed -E 's/https?://')/:_authToken secretToken
-        # Verify proxy is working by trying to fetch a known package
-        pnpm view semver > /dev/null 2>&1 || echo "Warning: Could not fetch semver package, proxy might not be working"
+
+        # Verify proxy is working by testing multiple packages with retries
+        # These packages are known transitive dependencies that have caused CI failures
+        test_packages=("semver" "browserslist" "update-browserslist-db")
+        max_retries=3
+        retry_delay=2
+
+        for pkg in "${test_packages[@]}"; do
+          echo "Verifying proxy can fetch: $pkg"
+          for attempt in $(seq 1 $max_retries); do
+            if pnpm view "$pkg" version > /dev/null 2>&1; then
+              echo "✓ Successfully fetched $pkg"
+              break
+            fi
+            if [ $attempt -eq $max_retries ]; then
+              echo "✗ Failed to fetch $pkg after $max_retries attempts"
+              echo "Proxy verification failed - this may cause integration test failures"
+              exit 1
+            fi
+            echo "  Attempt $attempt failed, retrying in ${retry_delay}s..."
+            sleep $retry_delay
+          done
+        done
+        echo "Proxy verification complete - all test packages accessible"
 
     - name: Print published Clerk package versions
       shell: bash

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,14 +1,13 @@
 import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/react';
-import type { Ui } from '@clerk/react/internal';
-import { ClerkUi } from '@clerk/ui/entry';
+import { ui } from '@clerk/ui';
 import React from 'react';
 
 import { createClerkClient } from '../internal/clerk';
 import type { StorageCache } from '../internal/utils/storage';
 
-type ChromeExtensionClerkProviderProps<TUi extends Ui = Ui> = ClerkReactProviderProps<TUi> & {
+type ChromeExtensionClerkProviderProps = ClerkReactProviderProps & {
   /**
    * @experimental
    * @description Enables the listener to sync host cookies on changes.
@@ -18,7 +17,7 @@ type ChromeExtensionClerkProviderProps<TUi extends Ui = Ui> = ClerkReactProvider
   syncHost?: string;
 };
 
-export function ClerkProvider<TUi extends Ui = Ui>(props: ChromeExtensionClerkProviderProps<TUi>): JSX.Element | null {
+export function ClerkProvider(props: ChromeExtensionClerkProviderProps): JSX.Element | null {
   const { children, storageCache, syncHost, __experimental_syncHostListener, ...rest } = props;
   const { publishableKey = '' } = props;
 
@@ -36,7 +35,7 @@ export function ClerkProvider<TUi extends Ui = Ui>(props: ChromeExtensionClerkPr
     <ClerkReactProvider
       {...rest}
       Clerk={clerkInstance}
-      clerkUICtor={ClerkUi}
+      ui={ui}
       standardBrowser={!syncHost}
     >
       {children}

packages/nextjs/src/utils/clerk-script.tsx

@@ -38,7 +38,7 @@ function ClerkScript(props: ClerkScriptProps) {
 }
 
 export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) {
-  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, prefetchUI } = useClerkNextOptions();
+  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, prefetchUI, ui } = useClerkNextOptions();
   const { domain, proxyUrl } = useClerk();
 
   if (!publishableKey) {
@@ -68,8 +68,9 @@ export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] })
           but doesn't execute it, avoiding race conditions with __clerkSharedModules
           registration (which happens when React code runs @clerk/ui/register).
           When loadClerkUIScript() later adds a <script> tag, the browser uses the
-          cached resource and executes it without re-downloading. */}
-      {prefetchUI !== false && (
+          cached resource and executes it without re-downloading.
+          Skip preload when ui prop is passed - the bundled UI will be used instead. */}
+      {prefetchUI !== false && !ui && (
         <link
           rel='preload'
           href={clerkUIScriptUrl(opts)}