Merge branch 'main' into elef/sdk-1627-userprofile-menubuttons-have-no-labels

Author: panteliselef

.changeset/good-paws-wonder.md

@@ -0,0 +1,5 @@
+---
+'@clerk/elements': patch
+---
+
+Widen optional peerDependency of `next` to include `>=15.0.0-rc`. This way you can use Next.js 15 with Clerk Elements without your package manager complaining. Also allow React 19.

.changeset/serious-turtles-rhyme.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/ci.yml

@@ -129,7 +129,7 @@ jobs:
 
     strategy:
       matrix:
-        test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements']
+        test-name: [ 'generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements' ]
         test-project: ['chrome']
 
     steps:

integration/presets/longRunningApps.ts

@@ -28,7 +28,7 @@ export const createLongRunningApps = () => {
 
   return {
     getByPattern: (patterns: Array<string | (typeof configs)[number]['id']>) => {
-      const res = new Set(...patterns.map(pattern => apps.filter(app => idMatchesPattern(app.id, pattern))));
+      const res = new Set(patterns.map(pattern => apps.filter(app => idMatchesPattern(app.id, pattern))).flat());
       if (!res.size) {
         const availableIds = configs.map(c => `\n- ${c.id}`).join('');
         throw new Error(`Could not find long running app with id ${patterns}. The available ids are: ${availableIds}`);

integration/templates/next-app-router/src/app/hash/sign-in/[[...page]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <SignIn routing={'hash'} />
+    </div>
+  );
+}

integration/testUtils/testAgainstRunningApps.ts

@@ -10,6 +10,7 @@ import { parseEnvOptions } from '../scripts';
 
 type RunningAppsParams = {
   withEnv?: EnvironmentConfig | EnvironmentConfig[];
+  withPattern?: string[];
 };
 
 /**
@@ -20,24 +21,28 @@ type RunningAppsParams = {
  */
 const runningApps = (params: RunningAppsParams = {}) => {
   const withEnv = [params.withEnv].flat().filter(Boolean);
+  const withPattern = (params.withPattern || []).flat().filter(Boolean);
   const { appIds, appUrl, appPk, appSk, clerkApiUrl } = parseEnvOptions();
+
   if (appIds.length) {
     // if appIds are provided, we only return the apps with the given ids
     const filter = app => (withEnv.length ? withEnv.includes(app.env) : true);
-    return appConfigs.longRunningApps.getByPattern(appIds).filter(filter);
+    return appConfigs.longRunningApps.getByPattern(withPattern.length ? withPattern : appIds).filter(filter);
   }
+
   // if no appIds are provided, it means that the user is running an app manually
   // so, we return the app with the given env
   const env = environmentConfig()
     .setId('tempEnv')
     .setEnvVariable('private', 'CLERK_SECRET_KEY', appSk)
     .setEnvVariable('private', 'CLERK_API_URL', clerkApiUrl)
     .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', appPk);
+
   return [longRunningApplication({ id: 'standalone', env, serverUrl: appUrl, config: applicationConfig() })];
 };
 
-export const testAgainstRunningApps =
-  (runningAppsParams: RunningAppsParams) => (title: string, cb: (p: { app: Application }) => void) => {
+export function testAgainstRunningApps(runningAppsParams: RunningAppsParams) {
+  return (title: string, cb: (p: { app: Application }) => void) => {
     test.describe(title, () => {
       runningApps(runningAppsParams).forEach(app => {
         test.describe(`${app.name}`, () => {
@@ -46,3 +51,4 @@ export const testAgainstRunningApps =
       });
     });
   };
+}

integration/tests/navigation.test.ts

@@ -1,70 +1,13 @@
 import { test } from '@playwright/test';
 
-import type { Application } from '../models/application';
-import { appConfigs } from '../presets';
 import type { FakeUser } from '../testUtils';
-import { createTestUtils } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
 
-test.describe('navigation modes @generic', () => {
+testAgainstRunningApps({ withPattern: ['next.appRouter.withEmailCodes'] })('navigation modes @generic', ({ app }) => {
   test.describe.configure({ mode: 'serial' });
-  let app: Application;
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
-    app = await appConfigs.next.appRouter
-      .clone()
-      .addFile(
-        'src/app/provider.tsx',
-        () => `'use client'
-import { ClerkProvider } from "@clerk/nextjs";
-
-export function Provider({ children }: { children: any }) {
-  return (
-    <ClerkProvider>
-      {children}
-    </ClerkProvider>
-  )
-}`,
-      )
-      .addFile(
-        'src/app/layout.tsx',
-        () => `import './globals.css';
-import { Inter } from 'next/font/google';
-import { Provider } from './provider';
-
-const inter = Inter({ subsets: ['latin'] });
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <Provider>
-      <html lang='en'>
-        <body className={inter.className}>{children}</body>
-      </html>
-    </Provider>
-  );
-}`,
-      )
-      .addFile(
-        'src/app/hash/sign-in/page.tsx',
-        () => `
-import { SignIn } from '@clerk/nextjs';
-
-export default function Page() {
-  return (
-    <SignIn routing="hash" />
-  );
-}`,
-      )
-      .commit();
-    await app.setup();
-    await app.withEnv(appConfigs.envs.withEmailCodes);
-    await app.dev();
-
     const m = createTestUtils({ app });
     fakeUser = m.services.users.createFakeUser();
     await m.services.users.createBapiUser(fakeUser);
@@ -105,7 +48,7 @@ export default function Page() {
     await u.po.expect.toBeSignedIn();
   });
 
-  test('sign in with path routing navigates to previous page', async ({ page, context }) => {
+  test.skip('sign in with path routing navigates to previous page', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.waitForMounted();

package.json

@@ -36,7 +36,7 @@
     "test:integration:deployment:nextjs": "DEBUG=1 npx playwright test --config integration/playwright.deployments.config.ts",
     "test:integration:elements": "E2E_APP_ID=elements.* npm run test:integration:base -- --grep @elements",
     "test:integration:express": "E2E_APP_ID=express.* npm run test:integration:base -- --grep @express",
-    "test:integration:generic": "E2E_APP_ID=react.vite.* npm run test:integration:base -- --grep @generic",
+    "test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes npm run test:integration:base -- --grep @generic",
     "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* npm run test:integration:base -- --grep @nextjs",
     "test:integration:quickstart": "E2E_APP_ID=quickstart.* npm run test:integration:base -- --grep @quickstart",
     "test:integration:remix": "echo 'placeholder'",

packages/elements/package.json

@@ -95,9 +95,9 @@
   "peerDependencies": {
     "@clerk/clerk-react": "^5.0.0",
     "@clerk/shared": "^2.0.0",
-    "next": "^13.5.4 || ^14.0.3",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",
+    "react": "^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "next": {

packages/elements/src/index.ts

@@ -1,6 +1,5 @@
-// TODO: Add link to docs
 throw new Error(`No exports are available from the top-level "@clerk/elements" package.
 Use specific subpath imports instead, e.g. "@clerk/elements/sign-in".
 
 Find all available exports in the documentation:
-https://clerk.com/docs`);
+https://clerk.com/docs/elements/overview`);