debug generic

Author: nikosdouvlis

.github/workflows/ci.yml

@@ -296,22 +296,21 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-name:
-          [
+        test-name: [
             "generic",
-            "express",
-            "ap-flows",
-            "localhost",
-            "sessions",
-            "sessions:staging",
-            "handshake",
-            "handshake:staging",
-            "astro",
-            "tanstack-react-start",
-            "vue",
-            "nuxt",
-            "react-router",
-            "custom",
+            # "express",
+            # "ap-flows",
+            # "localhost",
+            # "sessions",
+            # "sessions:staging",
+            # "handshake",
+            # "handshake:staging",
+            # "astro",
+            # "tanstack-react-start",
+            # "vue",
+            # "nuxt",
+            # "react-router",
+            # "custom",
           ]
         test-project: ["chrome"]
         include:

integration/templates/react-vite/src/main.tsx

@@ -35,6 +35,9 @@ const Root = () => {
       routerPush={(to: string) => navigate(to)}
       routerReplace={(to: string) => navigate(to, { replace: true })}
       appearance={{
+        colors: {
+          colorPrimary: 'red',
+        },
         layout: {
           showOptionalFields: true,
         },
@@ -45,6 +48,7 @@ const Root = () => {
           : undefined,
       }}
     >
+      is this the correct app?
       <Outlet />
     </ClerkProvider>
   );

package.json

@@ -40,7 +40,7 @@
     "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts",
     "test:integration:expo-web:disabled": "E2E_APP_ID=expo.expo-web pnpm test:integration:base --grep @expo-web",
     "test:integration:express": "E2E_DEBUG=1 E2E_DEBUG=1 E2E_APP_ID=express.* pnpm test:integration:base --grep @express",
-    "test:integration:generic": "E2E_DEBUG=1 E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes* pnpm test:integration:base --grep @generic",
+    "test:integration:generic": "E2E_DEBUG=1 E2E_APP_ID=react.vite.withEmailCodes pnpm test:integration:base --grep @generic",
     "test:integration:handshake": "DISABLE_WEB_SECURITY=true E2E_APP_1_ENV_KEY=sessions-prod-1 E2E_SESSIONS_APP_1_HOST=multiple-apps-e2e.clerk.app pnpm test:integration:base --grep @handshake",
     "test:integration:handshake:staging": "DISABLE_WEB_SECURITY=true E2E_APP_1_ENV_KEY=clerkstage-sessions-prod-1 E2E_SESSIONS_APP_1_HOST=clerkstage-sessions-prod-1-e2e.clerk.app pnpm test:integration:base --grep @handshake",
     "test:integration:localhost": "pnpm test:integration:base --grep @localhost",

packages/ui/src/Components.tsx

@@ -17,14 +17,13 @@ import type {
   UserProfileProps,
   WaitlistProps,
 } from '@clerk/shared/types';
-
-import type { Appearance } from './internal/appearance';
 import { createDeferredPromise } from '@clerk/shared/utils';
 import React, { Suspense } from 'react';
 
 import type { AppearanceCascade } from './customizables/parseAppearance';
 // NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size
 import { useClerkModalStateParams } from './hooks/useClerkModalStateParams';
+import type { Appearance } from './internal/appearance';
 import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
@@ -293,6 +292,10 @@ const Components = (props: ComponentsProps) => {
     impersonationFab: false,
   });
 
+  console.log('props.options.appearance', JSON.stringify(props.options.appearance));
+  console.log('props.options', JSON.stringify(props.options));
+  console.log('state.appearance', JSON.stringify(state.appearance));
+
   const {
     googleOneTapModal,
     signInModal,

packages/ui/src/components/SignUp/SignUpStart.tsx

@@ -439,7 +439,6 @@ function SignUpStartInternal(): JSX.Element {
                     legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
                   />
                 )}
-                hello there
                 {shouldShowForm && (
                   <SignUpForm
                     handleSubmit={handleSubmit}

packages/ui/src/customizables/AppearanceContext.tsx

@@ -15,7 +15,7 @@ const AppearanceProvider = (props: AppearanceProviderProps) => {
     const value = parseAppearance(props);
 
     return { value };
-  }, [props.appearance, props.globalAppearance]);
+  }, [props.appearance, props.globalAppearance, props.appearanceKey]);
 
   return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;
 };

packages/ui/src/customizables/parseAppearance.ts

@@ -68,6 +68,9 @@ const defaultCaptchaOptions: ParsedCaptcha = {
  */
 export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance => {
   const { globalAppearance, appearance: componentAppearance, appearanceKey } = cascade;
+  console.log('globalAppearance', globalAppearance);
+  console.log('componentAppearance', componentAppearance);
+  console.log('appearanceKey', appearanceKey);
 
   const appearanceList: Appearance[] = [];
   [globalAppearance, globalAppearance?.[appearanceKey as PublicAppearanceTopLevelKey], componentAppearance].forEach(a =>