refactor: move duplicated repositoryUrl in composable

Author: MatteoGabriele

app/components/OgImage/Package.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { joinURL } from 'ufo'
-
 const props = withDefaults(
   defineProps<{
     name: string
@@ -38,16 +36,7 @@ const { data: pkg, refresh: refreshPkg } = usePackage(
 )
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
-const repositoryUrl = computed(() => {
-  const repo = displayVersion.value?.repository
-  if (!repo?.url) return null
-  let url = normalizeGitUrl(repo.url)
-  // append `repository.directory` for monorepo packages
-  if (repo.directory) {
-    url = joinURL(`${url}/tree/HEAD`, repo.directory)
-  }
-  return url
-})
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
 
 const { data: likes, refresh: refreshLikes } = useFetch(() => `/api/social/likes/${name.value}`, {
   default: () => ({ totalLikes: 0, userHasLiked: false }),

app/composables/useRepositoryUrl.ts

@@ -0,0 +1,41 @@
+import { joinURL } from 'ufo'
+
+function normalizeGitUrl(url: string): string {
+  return url
+    .replace(/^git\+/, '')
+    .replace(/^git:\/\//, 'https://')
+    .replace(/\.git$/, '')
+    .replace(/^ssh:\/\/git@github\.com/, 'https://github.com')
+    .replace(/^git@github\.com:/, 'https://github.com/')
+}
+
+type RequestedVersion = SlimPackument['requestedVersion'] | null
+
+type UseRepositoryUrlReturn = {
+  repositoryUrl: ComputedRef<string | null>
+}
+
+export function useRepositoryUrl(
+  requestedVersion: MaybeRefOrGetter<RequestedVersion>,
+): UseRepositoryUrlReturn {
+  const repositoryUrl = computed<string | null>(() => {
+    const repo = toValue(requestedVersion)?.repository
+
+    if (!repo?.url) {
+      return null
+    }
+
+    let url = normalizeGitUrl(repo.url)
+
+    // append `repository.directory` for monorepo packages
+    if (repo.directory) {
+      url = joinURL(`${url}/tree/HEAD`, repo.directory)
+    }
+
+    return url
+  })
+
+  return {
+    repositoryUrl,
+  }
+}

app/pages/package/[[org]]/[name].vue

@@ -12,7 +12,6 @@ import type {
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
-import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
@@ -399,16 +398,7 @@ const totalDepsCount = computed(() => {
   return null
 })
 
-const repositoryUrl = computed(() => {
-  const repo = displayVersion.value?.repository
-  if (!repo?.url) return null
-  let url = normalizeGitUrl(repo.url)
-  // append `repository.directory` for monorepo packages
-  if (repo.directory) {
-    url = joinURL(`${url}/tree/HEAD`, repo.directory)
-  }
-  return url
-})
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
 
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
@@ -454,15 +444,6 @@ const fundingUrl = computed(() => {
   return typeof funding === 'string' ? funding : funding.url
 })
 
-function normalizeGitUrl(url: string): string {
-  return url
-    .replace(/^git\+/, '')
-    .replace(/^git:\/\//, 'https://')
-    .replace(/\.git$/, '')
-    .replace(/^ssh:\/\/git@github\.com/, 'https://github.com')
-    .replace(/^git@github\.com:/, 'https://github.com/')
-}
-
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {