refactor: extract and use util to parse package name

Author: serhalp

app/composables/useCommandPalettePackageCommands.ts

@@ -31,14 +31,12 @@ export function useCommandPalettePackageCommands(
       const resolvedContext = toValue(context)
       if (!resolvedContext?.resolvedVersion) return []
 
-      const splitName = resolvedContext.packageName.split('/')
-      const [firstSegment, secondSegment] = splitName
-      if (!firstSegment) return []
+      const { org, name } = splitPackageName(resolvedContext.packageName)
+      if (!name) return []
 
-      const isScopedPackage = splitName.length === 2 && !!secondSegment
-      const docsPath: [string, ...string[]] = isScopedPackage
-        ? [firstSegment, secondSegment, 'v', resolvedContext.resolvedVersion]
-        : [firstSegment, 'v', resolvedContext.resolvedVersion]
+      const docsPath: [string, ...string[]] = org
+        ? [org, name, 'v', resolvedContext.resolvedVersion]
+        : [name, 'v', resolvedContext.resolvedVersion]
       const docsLink = {
         name: 'docs' as const,
         params: {
@@ -48,8 +46,8 @@ export function useCommandPalettePackageCommands(
       const codeLink = {
         name: 'code' as const,
         params: {
-          org: isScopedPackage ? firstSegment : undefined,
-          packageName: isScopedPackage ? secondSegment : firstSegment,
+          org: org || undefined,
+          packageName: name,
           version: resolvedContext.resolvedVersion,
           filePath: '',
         },

app/utils/package-name.ts

@@ -2,6 +2,13 @@ import validatePackageName from 'validate-npm-package-name'
 import { NPM_REGISTRY } from '#shared/utils/constants'
 import { encodePackageName } from '#shared/utils/npm'
 
+export function splitPackageName(packageName: string): { org: string; name: string } {
+  const [org = '', name = ''] = packageName.startsWith('@')
+    ? packageName.split('/')
+    : ['', packageName]
+  return { org, name }
+}
+
 /**
  * Normalize a package name for comparison by removing common variations.
  * This aims to mirror npm's typosquatting detection algorithm.

app/utils/router.ts

@@ -1,11 +1,12 @@
 import type { RouteLocationRaw } from 'vue-router'
+import { splitPackageName } from '~/utils/package-name'
 
 export function packageRoute(
   packageName: string,
   version?: string | null,
   hash?: string,
 ): RouteLocationRaw {
-  const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
+  const { org, name } = splitPackageName(packageName)
 
   if (version) {
     return {
@@ -34,7 +35,7 @@ export function diffRoute(
   fromVersion: string,
   toVersion: string,
 ): RouteLocationRaw {
-  const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
+  const { org, name } = splitPackageName(packageName)
 
   return {
     name: 'diff',