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 sign-up-flow.test.ts",
     "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

@@ -37,7 +37,10 @@ function SignUpStartInternal(): JSX.Element {
   const clerk = useClerk();
   const status = useLoadingStatus();
   const signUp = useCoreSignUp();
-  const { showOptionalFields } = useAppearance().parsedLayout;
+  const appearance = useAppearance();
+  const { showOptionalFields } = appearance.parsedLayout;
+  console.log('[SignUpStart] useAppearance().parsedLayout', JSON.stringify(appearance.parsedLayout));
+  console.log('[SignUpStart] showOptionalFields', showOptionalFields);
   const { userSettings, authConfig } = useEnvironment();
   const { navigate } = useRouter();
   const { attributes } = userSettings;
@@ -439,7 +442,6 @@ function SignUpStartInternal(): JSX.Element {
                     legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
                   />
                 )}
-                hello there
                 {shouldShowForm && (
                   <SignUpForm
                     handleSubmit={handleSubmit}

packages/ui/src/customizables/AppearanceContext.tsx

@@ -11,11 +11,20 @@ const [AppearanceContext, useAppearance] = createContextAndHook<AppearanceContex
 type AppearanceProviderProps = React.PropsWithChildren<AppearanceCascade>;
 
 const AppearanceProvider = (props: AppearanceProviderProps) => {
+  console.log('[AppearanceProvider] rendering with props:', {
+    globalAppearance: JSON.stringify(props.globalAppearance),
+    appearance: JSON.stringify(props.appearance),
+    appearanceKey: props.appearanceKey,
+  });
+
   const ctxValue = useDeepEqualMemo(() => {
+    console.log('[AppearanceProvider] useDeepEqualMemo factory called');
     const value = parseAppearance(props);
-
+    console.log('[AppearanceProvider] parsed value.parsedLayout:', JSON.stringify(value.parsedLayout));
     return { value };
-  }, [props.appearance, props.globalAppearance]);
+  }, [props.appearance, props.globalAppearance, props.appearanceKey]);
+
+  console.log('[AppearanceProvider] ctxValue.value.parsedLayout:', JSON.stringify(ctxValue.value.parsedLayout));
 
   return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;
 };

packages/ui/src/customizables/parseAppearance.ts

@@ -68,16 +68,27 @@ const defaultCaptchaOptions: ParsedCaptcha = {
  */
 export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance => {
   const { globalAppearance, appearance: componentAppearance, appearanceKey } = cascade;
+  console.log('[parseAppearance] globalAppearance', JSON.stringify(globalAppearance));
+  console.log('[parseAppearance] componentAppearance', JSON.stringify(componentAppearance));
+  console.log('[parseAppearance] appearanceKey', appearanceKey);
 
   const appearanceList: Appearance[] = [];
   [globalAppearance, globalAppearance?.[appearanceKey as PublicAppearanceTopLevelKey], componentAppearance].forEach(a =>
     expand(a, appearanceList),
   );
 
+  console.log('[parseAppearance] appearanceList length', appearanceList.length);
+  console.log(
+    '[parseAppearance] appearanceList layouts',
+    appearanceList.map(a => JSON.stringify(a?.layout)),
+  );
+
   const parsedInternalTheme = parseVariables(appearanceList);
   const parsedLayout = parseLayout(appearanceList);
   const parsedCaptcha = parseCaptcha(appearanceList);
 
+  console.log('[parseAppearance] parsedLayout', JSON.stringify(parsedLayout));
+
   if (
     !appearanceList.find(a => {
       //@ts-expect-error not public api