Skip to content

chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

Merged
dimkl merged 6 commits into from
Nov 29, 2023
Merged

chore(types,clerk-react): Make routerPush / routerReplace both required or both optional #2227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
77f7291
chore(types): Use `Without` generic to resolve issues with `Omit` and…
dimkl Nov 28, 2023
638e388
chore(types): Make `routerPush` and `routerReplace` options both requ…
dimkl Nov 28, 2023
63f0310
chore(repo): Ignore test runner files and CHANGELOG.md from formatting
dimkl Nov 28, 2023
69b3cff
chore(repo): Add changeset
dimkl Nov 28, 2023
fb6e321
chore(repo): Update ui-retheme-changes-reminder to notify for files w…
dimkl Nov 29, 2023
495c3eb
Update .changeset/tiny-forks-sit.md
dimkl Nov 29, 2023
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
6 changes: 6 additions & 0 deletions .changeset/tiny-forks-sit.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.
8 changes: 7 additions & 1 deletion .github/workflows/ui-retheme-changes-reminder.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
- main
paths:
- 'packages/clerk-js/src/ui/**'

# files with matching `*.retheme.ts` retheme variant
- 'packages/localizations/src/en-US.ts'
- 'packages/localizations/src/index.ts'
- 'packages/types/src/appearance.ts'
- 'packages/types/src/clerk.ts'
- 'packages/types/src/index.ts'
- 'packages/types/src/localization.ts'
Comment on lines +9 to +15

@anagstefanagstefNov 29, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

💯

jobs:
check-changes:
runs-on: ubuntu-latest
Expand Down
4 changes: 3 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md
19 changes: 19 additions & 0 deletions packages/react/src/contexts/__tests__/ClerkProvider.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
});
});

describe('navigation options', () => {
it('expects both routerPush & routerReplace to pass', () => {
expectTypeOf({
publishableKey: 'test',
children: '',
routerPush: () => {},
routerReplace: () => {},
}).toMatchTypeOf<ClerkProviderProps>();
});

it('errors if one of routerPush / routerReplace is passed', () => {
expectTypeOf({
publishableKey: 'test',
children: '',
routerPush: () => {},
}).not.toMatchTypeOf<ClerkProviderProps>();
});
});
});
20 changes: 6 additions & 14 deletions packages/react/src/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
SignInRedirectOptions,
SignUpRedirectOptions,
UserResource,
Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
}
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
Clerk?: ClerkProp;
clerkJSUrl?: string;
clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
Clerk?: ClerkProp;
clerkJSUrl?: string;
clerkJSVariant?: 'headless' | '';
clerkJSVersion?: string;
sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
publishableKey?: string;
} & MultiDomainAndOrProxy & {
children: React.ReactNode;
};
children: React.ReactNode;
};

export interface BrowserClerkConstructor {
new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
updateClient: (client: ClientResource) => void;
}

Expand Down
22 changes: 20 additions & 2 deletions packages/types/src/clerk.retheme.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
* Navigation options used to replace or push history changes.
* Both `routerPush` & `routerReplace` OR none options should be passed.
*/
type ClerkOptionsNavigationFn =
| {
routerPush?: never;
routerReplace?: never;
}
| {
routerPush: (to: string) => Promise<unknown> | unknown;
routerReplace: (to: string) => Promise<unknown> | unknown;
};

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
appearance?: Appearance;
localization?: LocalizationResource;
/**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
};

sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
replace?: boolean;
Expand Down
29 changes: 20 additions & 9 deletions packages/types/src/clerk.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
appearance?: Appearance;
localization?: LocalizationResource;
/**
* Navigation
*/
routerPush?: (to: string) => Promise<unknown> | unknown;
routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
* Navigation options used to replace or push history changes.
* Both `routerPush` & `routerReplace` OR none options should be passed.
*/
type ClerkOptionsNavigationFn =
| {
routerPush?: never;
routerReplace?: never;
}
| {
routerPush: (to: string) => Promise<unknown> | unknown;
routerReplace: (to: string) => Promise<unknown> | unknown;
};

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
appearance?: Appearance;
localization?: LocalizationResource;
polling?: boolean;
selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
/** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
};

sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
replace?: boolean;
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
chore(types,clerk-react): Make `routerPush` / `routerReplace` both required or both optional by dimkl · Pull Request #2227 · clerk/javascript · GitHub
Skip to content
chore(types,clerk-react): Make routerPush / routerReplace both required or both optional#2227

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

 Merged

dimkl
merged 6 commits into

from

Nov 29, 2023
 Merged


chore(types,clerk-react): Make routerPush / routerReplace both required or both optional
#2227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
77f7291

chore(types): Use `Without` generic to resolve issues with `Omit` and…


dimkl Nov 28, 2023
638e388

chore(types): Make `routerPush` and `routerReplace` options both requ…


dimkl Nov 28, 2023
63f0310

chore(repo): Ignore test runner files and CHANGELOG.md from formatting


dimkl Nov 28, 2023
69b3cff

chore(repo): Add changeset


dimkl Nov 28, 2023
fb6e321

chore(repo): Update ui-retheme-changes-reminder to notify for files w…


dimkl Nov 29, 2023
495c3eb

Update .changeset/tiny-forks-sit.md


dimkl Nov 29, 2023

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


6 changes: 6 additions & 0 deletions
.changeset/tiny-forks-sit.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Update the TypeScript types of `<ClerkProvider />`. If you use the `routerPush` prop you're now required to also provide the `routerReplace` prop (or other way around). You can also not provide them at all since both props are optional.

8 changes: 7 additions & 1 deletion
.github/workflows/ui-retheme-changes-reminder.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,13 @@ on:
 - main
 paths:
 - 'packages/clerk-js/src/ui/**'

 # files with matching `*.retheme.ts` retheme variant
 - 'packages/localizations/src/en-US.ts'
 - 'packages/localizations/src/index.ts'
 - 'packages/types/src/appearance.ts'
 - 'packages/types/src/clerk.ts'
 - 'packages/types/src/index.ts'
 - 'packages/types/src/localization.ts'

Comment on lines

+9
 to 
+15

@anagstefanagstefNov 29, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

💯
jobs:
 check-changes:
 runs-on: ubuntu-latest
Expand Down

4 changes: 3 additions & 1 deletion
.prettierignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,4 +15,6 @@ dist
examples
node_modules
package-lock.json
playground
playground
packages/backend/tests/**/*.js
/**/CHANGELOG.md

19 changes: 19 additions & 0 deletions
packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -224,4 +224,23 @@ describe('ClerkProvider', () => {
 expectTypeOf({ publishableKey: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });

 describe('navigation options', () => {
 it('expects both routerPush & routerReplace to pass', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 routerReplace: () => {},
 }).toMatchTypeOf<ClerkProviderProps>();
 });

 it('errors if one of routerPush / routerReplace is passed', () => {
 expectTypeOf({
 publishableKey: 'test',
 children: '',
 routerPush: () => {},
 }).not.toMatchTypeOf<ClerkProviderProps>();
 });
 });
});

20 changes: 6 additions & 14 deletions
packages/react/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
 SignInRedirectOptions,
 SignUpRedirectOptions,
 UserResource,
 Without,
} from '@clerk/types';
import type React from 'react';

Expand All@@ -23,7 +24,7 @@ declare global {
 }
}

export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
Expand All@@ -37,19 +38,10 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 initialState?: InitialState;
};

// TODO(@dimkl): replacing it with the following make nextjs type tests fail
// `Exclude<IsomorphicClerkOptions, 'publishableKey'> & { publishableKey?: string }`
// find another way to reduce the duplication.
export type ClerkProviderOptionsWrapper = Omit<ClerkOptions, 'isSatellite'> & {
 Clerk?: ClerkProp;
 clerkJSUrl?: string;
 clerkJSVariant?: 'headless' | '';
 clerkJSVersion?: string;
 sdkMetadata?: SDKMetadata;
export type ClerkProviderOptionsWrapper = Without<IsomorphicClerkOptions, 'publishableKey'> & {
 publishableKey?: string;
} & MultiDomainAndOrProxy & {
 children: React.ReactNode;
 };
 children: React.ReactNode;
};

export interface BrowserClerkConstructor {
 new (publishableKey: string, options?: DomainOrProxyUrl): BrowserClerk;
Expand All@@ -75,7 +67,7 @@ export interface MountProps {
}

export interface HeadlessBrowserClerk extends Clerk {
 load: (opts?: Omit<ClerkOptions, 'isSatellite'>) => Promise<void>;
 load: (opts?: Without<ClerkOptions, 'isSatellite'>) => Promise<void>;
 updateClient: (client: ClientResource) => void;
}

Expand Down

22 changes: 20 additions & 2 deletions
packages/types/src/clerk.retheme.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,7 +495,25 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
Expand DownExpand Up@@ -535,7 +553,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down

29 changes: 20 additions & 9 deletions
packages/types/src/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -495,16 +495,27 @@ export type CustomNavigation = (to: string, options?: NavigateOptions) => Promis

export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;

export interface ClerkOptions {
 appearance?: Appearance;
 localization?: LocalizationResource;
 /**
 * Navigation
 */
 routerPush?: (to: string) => Promise<unknown> | unknown;
 routerReplace?: (to: string) => Promise<unknown> | unknown;
/**
 * Navigation options used to replace or push history changes.
 * Both `routerPush` & `routerReplace` OR none options should be passed.
 */
type ClerkOptionsNavigationFn =
 | {
 routerPush?: never;
 routerReplace?: never;
 }
 | {
 routerPush: (to: string) => Promise<unknown> | unknown;
 routerReplace: (to: string) => Promise<unknown> | unknown;
 };

type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
 routerDebug?: boolean;
};

export type ClerkOptions = ClerkOptionsNavigation & {
 appearance?: Appearance;
 localization?: LocalizationResource;
 polling?: boolean;
 selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
 /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
Expand DownExpand Up@@ -536,7 +547,7 @@ export interface ClerkOptions {
 };

 sdkMetadata?: SDKMetadata;
}
};

export interface NavigateOptions {
 replace?: boolean;
Expand Down