chore(clerk-js): Apply changes to PathRouter for retheme directory (#…

…2222) * chore(clerk-js): Apply changes to PathRouter for retheme directory * fix(types): Add NavigationOptions in retheme --------- Co-authored-by: Dimitris Klouvas <[email protected]>
clerk · Nov 28, 2023 · 950f4b2 · 950f4b2
1 parent af56f51
commit 950f4b2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/soft-swans-swim.md b/.changeset/soft-swans-swim.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx b/packages/clerk-js/src/ui.retheme/router/PathRouter.tsx
@@ -1,3 +1,4 @@
+import type { NavigateOptions } from '@clerk/types';
 import React from 'react';
 
 import { hasUrlInFragment, mergeFragmentIntoUrl, stripOrigin } from '../../utils';
@@ -18,12 +19,12 @@ export const PathRouter = ({ basePath, preservedParams, children }: PathRouterPr
     throw new Error('Clerk: Missing navigate option.');
   }
 
-  const internalNavigate = (toURL: URL | string | undefined) => {
+  const internalNavigate = (toURL: URL | string | undefined, options?: NavigateOptions) => {
     if (!toURL) {
       return;
     }
     // Only send the path
-    return navigate(stripOrigin(toURL));
+    return navigate(stripOrigin(toURL), options);
   };
 
   const getPath = () => {
@@ -38,7 +39,7 @@ export const PathRouter = ({ basePath, preservedParams, children }: PathRouterPr
     const convertHashToPath = async () => {
       if (hasUrlInFragment(window.location.hash)) {
         const url = mergeFragmentIntoUrl(new URL(window.location.href));
-        await internalNavigate(url.href);
+        await internalNavigate(url.href, { replace: true });
         setStripped(true);
       }
     };

diff --git a/packages/types/src/clerk.retheme.ts b/packages/types/src/clerk.retheme.ts
@@ -498,14 +498,15 @@ export type BuildUrlWithAuthParams = {
 
 // TODO: Make sure Isomorphic Clerk navigate can work with the correct type:
 // (to: string) => Promise<unknown>
-export type CustomNavigation = (to: string) => Promise<unknown> | void;
+export type CustomNavigation = (to: string, options?: NavigateOptions) => Promise<unknown> | void;
 
 export type ClerkThemeOptions = DeepSnakeToCamel<DeepPartial<DisplayThemeJSON>>;
 
 export interface ClerkOptions {
   appearance?: Appearance;
   localization?: LocalizationResource;
-  navigate?: (to: string) => Promise<unknown> | unknown;
+  routerPush?: (to: string) => Promise<unknown> | unknown;
+  routerReplace?: (to: string) => Promise<unknown> | unknown;
   polling?: boolean;
   selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
   /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
@@ -539,6 +540,10 @@ export interface ClerkOptions {
   sdkMetadata?: SDKMetadata;
 }
 
+export interface NavigateOptions {
+  replace?: boolean;
+}
+
 export interface Resources {
   client: ClientResource;
   session?: ActiveSessionResource | null;