Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(clerk-react): Support for fallback prop #4723

Merged
merged 13 commits into from
Dec 20, 2024
Merged

feat(clerk-react): Support for fallback prop #4723

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8441ba5
Support for fallback prop
BRKalow Dec 5, 2024
d78aa6b
Refactor implementation to live outside of ClerkHostRenderer
BRKalow Dec 9, 2024
ec8fa36
Adds fallback prop to remaining components
BRKalow Dec 10, 2024
c2f8a49
Adds changeset
BRKalow Dec 10, 2024
e10c5e4
Adds simple tests for sign in fallback, and cleans up prop types of c…
BRKalow Dec 10, 2024
67e8e2e
render UserProfile fallback
alexcarpenter Dec 10, 2024
a2b3f14
merges with main
BRKalow Dec 17, 2024
044001a
remove unused WithClerk component
BRKalow Dec 17, 2024
2853620
Adds fallback to integration test cases
BRKalow Dec 17, 2024
4c605ee
adds component test file
BRKalow Dec 18, 2024
747b28e
Update .changeset/serious-stingrays-learn.md
BRKalow Dec 20, 2024
87495b6
Expand component test suite
BRKalow Dec 20, 2024
952b536
Merge branch 'main' into brk.feat/fallback-prop
BRKalow Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions integration/templates/next-app-router/src/app/sign-in/[[...catchall]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default function Page() {
routing={'path'}
path={'/sign-in'}
signUpUrl={'/sign-up'}
fallback={<>Loading sign in</>}
/>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions integration/templates/react-vite/src/sign-in/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default function Page() {
<SignIn
path={'/sign-in'}
signUpUrl={'/sign-up'}
fallback={<>Loading sign in</>}
/>
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions integration/tests/sign-in-flow.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f
await app.teardown();
});

test('sign in supports fallback', async ({ page, context }) => {
const u = createTestUtils({ app, page, context });
await u.page.goToRelative('/sign-in');
await expect(u.page.getByText('Loading sign in')).toBeVisible();
});

test('sign in with email and password', async ({ page, context }) => {
const u = createTestUtils({ app, page, context });
await u.po.signIn.goTo();
Expand Down
10 changes: 5 additions & 5 deletions packages/nextjs/src/client-boundary/uiComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
SignUp as BaseSignUp,
UserProfile as BaseUserProfile,
} from '@clerk/clerk-react';
import type { OrganizationProfileProps, SignInProps, SignUpProps, UserProfileProps } from '@clerk/types';
import type { ComponentProps } from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥇

import React from 'react';

import { useEnforceCorrectRoutingProps } from './hooks/useEnforceRoutingProps';
Expand All @@ -29,7 +29,7 @@ export {
// Also the `typeof BaseUserProfile` is used to resolve the following error:
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
export const UserProfile: typeof BaseUserProfile = Object.assign(
(props: UserProfileProps) => {
(props: ComponentProps<typeof BaseUserProfile>) => {
return <BaseUserProfile {...useEnforceCorrectRoutingProps('UserProfile', props)} />;
},
{ ...BaseUserProfile },
Expand All @@ -40,16 +40,16 @@ export const UserProfile: typeof BaseUserProfile = Object.assign(
// Also the `typeof BaseOrganizationProfile` is used to resolved the following error:
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
(props: OrganizationProfileProps) => {
(props: ComponentProps<typeof BaseOrganizationProfile>) => {
return <BaseOrganizationProfile {...useEnforceCorrectRoutingProps('OrganizationProfile', props)} />;
},
{ ...BaseOrganizationProfile },
);

export const SignIn = (props: SignInProps) => {
export const SignIn = (props: ComponentProps<typeof BaseSignIn>) => {
return <BaseSignIn {...useEnforceCorrectRoutingProps('SignIn', props, false)} />;
};

export const SignUp = (props: SignUpProps) => {
export const SignUp = (props: ComponentProps<typeof BaseSignUp>) => {
return <BaseSignUp {...useEnforceCorrectRoutingProps('SignUp', props, false)} />;
};
Loading