feat(elements): Remove direct reliance on next and clerk-react #4064
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 0967c8a The changes in this PR will be included in the next version bump. This PR includes changesets to release 15 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
brkalow
commented
Sep 4, 2024
brkalow
force-pushed
the
brk.feat/elements-remove-deps
branch
from
cd8caf3 to
c5c5c9b
Compare
brkalow
commented
Sep 4, 2024
Comment on lines
+7
to
+15
| // TODO: remove reliance on next-specific variables here | ||
| export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess( | ||
| () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL, | ||
| '/sign-in', | ||
| ); | ||
| export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess( | ||
| () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL, | ||
| '/sign-up', | ||
| ); |
There was a problem hiding this comment.
This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.
brkalow
commented
Sep 4, 2024
Comment on lines
+28
to
+58
| // The version that Next added support for the window.history.pushState and replaceState APIs. | ||
| // ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate | ||
| export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0'; | ||
|
|
||
| /** | ||
| * Clerk router integration with Next.js's router. | ||
| */ | ||
| export const useNextRouter = (): ClerkHostRouter => { | ||
| const router = useRouter(); | ||
| const pathname = usePathname(); | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment. | ||
| const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams(); | ||
|
|
||
| // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to | ||
| // preserve internal state between steps. | ||
| const canUseWindowHistoryAPIs = | ||
| typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION; | ||
|
|
||
| return { | ||
| mode: 'path', | ||
| name: 'NextRouter', | ||
| push: (path: string) => router.push(path), | ||
| replace: (path: string) => | ||
| canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path), | ||
| shallowPush(path: string) { | ||
| canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {}); | ||
| }, | ||
| pathname: () => pathname, | ||
| searchParams: () => searchParams, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
I've shifted the useNextRouter() hook from elements into the Next SDK.
brkalow
commented
Sep 4, 2024
| router?: ClerkHostRouter; | ||
| }) { | ||
| const clerkRouter = createClerkRouter(router, basePath); | ||
| const hostRouter = useClerkHostRouter(); |
There was a problem hiding this comment.
pull host router by default from the provider.
brkalow
commented
Sep 4, 2024
Comment on lines
-97
to
-99
| "@clerk/clerk-react": "^5.0.0", | ||
| "@clerk/shared": "^2.0.0", | ||
| "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc", |
tmilewski
approved these changes
Sep 4, 2024
wobsoriano
pushed a commit
that referenced
this pull request
Feb 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Removes the direct dependency and reliance on next and clerk-react from
@cerk/elements. This is a step to allowing elements to render in clerk-js. Also introducesClerkHostRouterContextinto@clerk/next'sClerkProvider. Elements will pull the router from the context.Checklist
npm testruns as expected.npm run buildruns as expected.Type of change