From 0243403f9ff71bf1da164b1a4f5019d63445fdde Mon Sep 17 00:00:00 2001
From: Sokratis Vidros <sokratis.vidros@gmail.com>
Date: Fri, 25 Nov 2022 22:23:45 +0200
Subject: [PATCH] fix(clerk-js): Ensure #/ prefix for hashes

Ensure the #/ prefix in hashes when setting or deleting a hash query parameter so that ClerkJS Hash router works as expected.
---
 .../clerk-js/src/utils/__tests__/url.test.ts  | 19 +++++++++++--------
 packages/clerk-js/src/utils/url.ts            | 16 ++++++++++++++--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/clerk-js/src/utils/__tests__/url.test.ts b/packages/clerk-js/src/utils/__tests__/url.test.ts
index bfb18bc4d0..db5bc11715 100644
--- a/packages/clerk-js/src/utils/__tests__/url.test.ts
+++ b/packages/clerk-js/src/utils/__tests__/url.test.ts
@@ -310,10 +310,13 @@ describe('getSearchParameterFromHash(options)', () => {
 
 describe('setSearchParameterInHash(options)', () => {
   const testCases: Array<[string, string, string, string]> = [
-    ['#a-hash', 'foo', '42', 'a-hash?foo=42'],
-    ['a-hash', 'foo', '', 'a-hash?foo='],
-    ['#a-hash?foo=42', 'bar', '84', 'a-hash?foo=42&bar=84'],
-    ['#a-hash?foo=42', 'foo', '84', 'a-hash?foo=84'],
+    ['', 'foo', '42', '/?foo=42'],
+    ['#', 'foo', '42', '/?foo=42'],
+    ['#a-hash', 'foo', '42', '/a-hash?foo=42'],
+    ['a-hash', 'foo', '', '/a-hash?foo='],
+    ['#a-hash?foo=42', 'bar', '84', '/a-hash?foo=42&bar=84'],
+    ['#a-hash?foo=42', 'foo', '84', '/a-hash?foo=84'],
+    ['#/a-hash?foo=42', 'foo', '84', '/a-hash?foo=84'],
   ];
 
   test.each(testCases)(
@@ -332,10 +335,10 @@ describe('setSearchParameterInHash(options)', () => {
 
 describe('removeSearchParameterFromHash(options)', () => {
   const testCases: Array<[string, string, string | null]> = [
-    ['#random-hash', 'foo', 'random-hash'],
-    ['random-hash', 'foo', 'random-hash'],
-    ['#random-hash?foo=42', 'foo', 'random-hash'],
-    ['random-hash?foo=42&bar=84', 'bar', 'random-hash?foo=42'],
+    ['#random-hash', 'foo', '/random-hash'],
+    ['random-hash', 'foo', '/random-hash'],
+    ['#random-hash?foo=42', 'foo', '/random-hash'],
+    ['random-hash?foo=42&bar=84', 'bar', '/random-hash?foo=42'],
   ];
 
   test.each(testCases)('hash=(%s), paramName=(%s), expected value=(%s)', (hash, paramName, expectedParamValue) => {
diff --git a/packages/clerk-js/src/utils/url.ts b/packages/clerk-js/src/utils/url.ts
index aa9d2f8f98..05768a7d16 100644
--- a/packages/clerk-js/src/utils/url.ts
+++ b/packages/clerk-js/src/utils/url.ts
@@ -224,6 +224,10 @@ export const appendAsQueryParams = (
     const sameOrigin = base.origin === url.origin;
     params.append(camelToSnake(key), sameOrigin ? stripOrigin(url) : url + '');
   }
+
+  // The following line will prepend the hash with a `/`.
+  // This is required for ClerkJS Components Hash router to work as expected
+  // as it treats the hash as sub-path with its nested querystring parameters.
   return base + (params.toString() ? '#/?' + params.toString() : '');
 };
 
@@ -256,7 +260,11 @@ export function setSearchParameterInHash({
   const h = hash.startsWith('#') ? hash.substring(1) : hash;
   const dummyUrlForHash = new URL(h, DUMMY_URL_BASE);
   dummyUrlForHash.searchParams.set(paramName, paramValue);
-  return dummyUrlForHash.href.replace(DUMMY_URL_BASE, '').replace('/', '');
+
+  // The following line will prepend the hash with a `/`.
+  // This is required for ClerkJS Components Hash router to work as expected
+  // as it treats the hash as sub-path with its nested querystring parameters.
+  return dummyUrlForHash.href.replace(DUMMY_URL_BASE, '');
 }
 
 export function removeSearchParameterFromHash({
@@ -269,5 +277,9 @@ export function removeSearchParameterFromHash({
   const h = hash.startsWith('#') ? hash.substring(1) : hash;
   const dummyUrlForHash = new URL(h, DUMMY_URL_BASE);
   dummyUrlForHash.searchParams.delete(paramName);
-  return dummyUrlForHash.href.replace(DUMMY_URL_BASE, '').replace('/', '');
+
+  // The following line will prepend the hash with a `/`.
+  // This is required for ClerkJS Components Hash router to work as expected
+  // as it treats the hash as sub-path with its nested querystring parameters.
+  return dummyUrlForHash.href.replace(DUMMY_URL_BASE, '');
 }