refactor(shared): centralize url template parsing

.changeset/url-template-parser.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': minor
+'@clerk/ui': patch
+---
+
+Add `createDynamicParamParser` and `populateParamFromObject` to `@clerk/shared/url` for resolving `:property` placeholders in URL templates.

packages/shared/src/__tests__/url.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it, test } from 'vitest';
 import {
   addClerkPrefix,
   cleanDoubleSlashes,
+  createDynamicParamParser,
   getClerkJsMajorVersionOrTag,
   getScriptUrl,
   joinURL,
@@ -252,3 +253,29 @@ describe('cleanDoubleSlashes', () => {
     expect(cleanDoubleSlashes()).toBe('');
   });
 });
+
+describe('createDynamicParamParser', () => {
+  const entity = {
+    foo: 'foo_string',
+    bar: 'bar_string',
+  };
+
+  const testCases = [
+    [':foo', entity, 'foo_string'],
+    ['/:foo', entity, '/foo_string'],
+    ['/some/:bar/any', entity, '/some/bar_string/any'],
+    ['/:notValid', entity, '/:notValid'],
+  ] as const;
+
+  it.each(testCases)(
+    'replaces the dynamic param with the value assigned to the key inside the object. Url=(%s), Object=(%s), result=(%s)',
+    (urlWithParam, obj, result) => {
+      expect(
+        createDynamicParamParser({ regex: /:(\w+)/ })({
+          urlWithParam,
+          entity: obj,
+        }),
+      ).toEqual(result);
+    },
+  );
+});

packages/shared/src/url.ts

@@ -219,3 +219,20 @@ export function joinURL(base: string, ...input: string[]): string {
 // Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3
 const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
 export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url);
+
+export const createDynamicParamParser =
+  ({ regex }: { regex: RegExp }) =>
+  <T extends Record<any, any>>({ urlWithParam, entity }: { urlWithParam: string; entity: T }) => {
+    const match = regex.exec(urlWithParam);
+
+    if (match) {
+      const key = match[1];
+      if (key in entity) {
+        const value = entity[key] as string;
+        return urlWithParam.replace(match[0], value);
+      }
+    }
+    return urlWithParam;
+  };
+
+export const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ });

packages/ui/src/contexts/utils.ts

@@ -1,7 +1,7 @@
 import { clerkCoreErrorContextProviderNotFound } from '@clerk/shared/internal/clerk-js/errors';
 import { snakeToCamel } from '@clerk/shared/underscore';
 
-import { createDynamicParamParser } from '../utils/dynamicParamParser';
+export { populateParamFromObject } from '@clerk/shared/url';
 
 export function assertContextExists(contextVal: unknown, providerName: string): asserts contextVal {
   if (!contextVal) {
@@ -20,5 +20,3 @@ export function getInitialValuesFromQueryParams(queryString: string, params: str
 
   return props;
 }
-
-export const populateParamFromObject = createDynamicParamParser({ regex: /:(\w+)/ });

packages/ui/src/mosaic/features/user-button/user-button.model.tsx

@@ -9,8 +9,8 @@ import type {
   UserProfileModalProps,
   UserResource,
 } from '@clerk/shared/types';
+import { populateParamFromObject } from '@clerk/shared/url';
 
-import { populateParamFromObject } from '../../../contexts/utils';
 import { useOrganizationListInView } from '../../../hooks/useOrganizationListInView';
 import { useMosaicEnvironment } from '../../hooks/useMosaicEnvironment';
 import { useMosaicRouter } from '../../hooks/useMosaicRouter';