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.

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) => {

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, '');
 }