From 265a880874cea0bf65379723c643fb6f40d1e6e6 Mon Sep 17 00:00:00 2001 From: George Desipris Date: Wed, 15 Nov 2023 20:41:32 +0200 Subject: [PATCH] fix(repo): Address PR comments --- packages/clerk-js/src/core/clerk.ts | 5 +- .../src/GatsbyClerkProvider.tsx | 1 + .../src/app-beta/client/ClerkProvider.tsx | 71 ------------------- .../src/app-router/client/ClerkProvider.tsx | 2 +- .../app-router/client/useAwaitableNavigate.ts | 15 ++-- .../remix/src/client/RemixClerkProvider.tsx | 1 + .../remix/src/client/useAwaitableNavigate.tsx | 5 +- playground/vite-react-ts/src/App.tsx | 1 + 8 files changed, 18 insertions(+), 83 deletions(-) delete mode 100644 packages/nextjs/src/app-beta/client/ClerkProvider.tsx diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 31a52580683..1a6b8c20fb1 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -29,7 +29,7 @@ import type { HandleOAuthCallbackParams, InstanceType, ListenerCallback, - OrganizationListProps, + NavigateOptions, OrganizationListProps, OrganizationProfileProps, OrganizationResource, OrganizationSwitcherProps, @@ -50,8 +50,7 @@ import type { UnsubscribeCallback, UserButtonProps, UserProfileProps, - UserResource, -} from '@clerk/types'; + UserResource } from '@clerk/types'; import type { MountComponentRenderer } from '~ui/Components'; diff --git a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx index 49d637650cd..9b438f6e135 100644 --- a/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx +++ b/packages/gatsby-plugin-clerk/src/GatsbyClerkProvider.tsx @@ -26,6 +26,7 @@ export function ClerkProvider({ children, ...rest }: GatsbyClerkProviderProps) { return ( navigate(to)} + replace={to => navigate(to, { replace: true })} initialState={__clerk_ssr_state || {}} sdkMetadata={SDK_METADATA} {...restProps} diff --git a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx b/packages/nextjs/src/app-beta/client/ClerkProvider.tsx deleted file mode 100644 index b0ac59baeb2..00000000000 --- a/packages/nextjs/src/app-beta/client/ClerkProvider.tsx +++ /dev/null @@ -1,71 +0,0 @@ -'use client'; -import { deprecated } from '@clerk/shared/deprecated'; - -deprecated( - '@clerk/nextjs/app-beta', - 'Use imports from `@clerk/nextjs` instead.\nFor more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware', -); -// !!! Note the import from react -import type { ClerkProviderProps } from '@clerk/clerk-react'; -import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; -import { usePathname, useRouter } from 'next/navigation'; -import React, { useCallback, useEffect } from 'react'; - -declare global { - export interface Window { - __clerk_nav_await: Array<(value: void) => void>; - __clerk_nav: (to: string) => Promise; - } -} - -/** - * @deprecated Use imports from `@clerk/nextjs` instead. - * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware - */ -export const useAwaitableNavigate = () => { - // eslint-disable-next-line @typescript-eslint/unbound-method - const { push, refresh } = useRouter(); - const pathname = usePathname(); - - useEffect(() => { - window.__clerk_nav = (to: string) => { - return new Promise(res => { - window.__clerk_nav_await.push(res); - if (to === pathname) { - refresh(); - } else { - push(to); - } - }); - }; - }, [pathname]); - - useEffect(() => { - if (typeof window.__clerk_nav_await === 'undefined') { - window.__clerk_nav_await = []; - } - window.__clerk_nav_await.forEach(resolve => resolve()); - window.__clerk_nav_await = []; - }); - - return useCallback((to: string) => { - return window.__clerk_nav(to); - }, []); -}; - -/** - * @deprecated Use imports from `@clerk/nextjs` instead. - * For more details, consult the middleware documentation: https://clerk.com/docs/nextjs/middleware - */ -export function ClerkProvider(props: ClerkProviderProps) { - const navigate = useAwaitableNavigate(); - const router = useRouter(); - - return ( - router.replace(to)} - {...props} - /> - ); -} diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx index 677a6cfa7fd..71382260664 100644 --- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx @@ -34,7 +34,7 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => { }; }, []); - const mergedProps = mergeNextClerkPropsWithEnv({ ...props, push: navigate }); + const mergedProps = mergeNextClerkPropsWithEnv({ ...props, push: navigate, replace: to => router.replace(to) }); return ( {/*// @ts-ignore*/} diff --git a/packages/nextjs/src/app-router/client/useAwaitableNavigate.ts b/packages/nextjs/src/app-router/client/useAwaitableNavigate.ts index 6bb1fba12c0..f1f45509ff2 100644 --- a/packages/nextjs/src/app-router/client/useAwaitableNavigate.ts +++ b/packages/nextjs/src/app-router/client/useAwaitableNavigate.ts @@ -3,9 +3,11 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { useCallback, useEffect } from 'react'; +type NavigateFunction = ReturnType['push']; + declare global { interface Window { - __clerk_nav_ref: (to: string) => any; + __clerk_nav_ref: NavigateFunction; __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined; } } @@ -15,13 +17,14 @@ export const useAwaitableNavigate = () => { const { push } = useRouter(); const pathname = usePathname(); const params = useSearchParams(); - // eslint-disable-next-line @typescript-eslint/restrict-plus-operands + const urlKey = pathname + params.toString(); useEffect(() => { - window.__clerk_nav_ref = (to: string) => { + // eslint-disable-next-line @typescript-eslint/no-misused-promises + window.__clerk_nav_ref = (to, opts) => { if (to === window.location.href.replace(window.location.origin, '')) { - push(to); + push(to, opts); return Promise.resolve(); } @@ -43,7 +46,7 @@ export const useAwaitableNavigate = () => { window.__clerk_nav_resolves_ref = []; }); - return useCallback((to: string) => { - return window.__clerk_nav_ref(to); + return useCallback((to, opts) => { + return window.__clerk_nav_ref(to, opts); }, []); }; diff --git a/packages/remix/src/client/RemixClerkProvider.tsx b/packages/remix/src/client/RemixClerkProvider.tsx index 3e4f4e2b446..bf61d27a90e 100644 --- a/packages/remix/src/client/RemixClerkProvider.tsx +++ b/packages/remix/src/client/RemixClerkProvider.tsx @@ -83,6 +83,7 @@ export function ClerkProvider({ children, ...rest }: RemixClerkProviderProps): J awaitableNavigateRef.current?.(to)} + replace={(to: string) => awaitableNavigateRef.current?.(to, { replace: true })} initialState={__clerk_ssr_state} sdkMetadata={SDK_METADATA} {...mergedProps} diff --git a/packages/remix/src/client/useAwaitableNavigate.tsx b/packages/remix/src/client/useAwaitableNavigate.tsx index 3998e664c54..ec82716f5d5 100644 --- a/packages/remix/src/client/useAwaitableNavigate.tsx +++ b/packages/remix/src/client/useAwaitableNavigate.tsx @@ -1,5 +1,6 @@ import { useLocation, useNavigate } from '@remix-run/react'; import React from 'react'; +import type { NavigateOptions } from 'react-router'; type Resolve = (value?: unknown) => void; @@ -18,10 +19,10 @@ export const useAwaitableNavigate = () => { resolveAll(); }, [location]); - return (to: string) => { + return (to: string, opts?: NavigateOptions) => { return new Promise(res => { resolveFunctionsRef.current.push(res); - navigate(to); + navigate(to, opts); }); }; }; diff --git a/playground/vite-react-ts/src/App.tsx b/playground/vite-react-ts/src/App.tsx index b8d8840eb7e..1e47a212be1 100644 --- a/playground/vite-react-ts/src/App.tsx +++ b/playground/vite-react-ts/src/App.tsx @@ -68,6 +68,7 @@ function ClerkProviderWithRoutes() { navigate(to)} + replace={to => navigate(to, {replace: true} )} >