wip: more request deduplications

Author: OrbisK

app/components/ClaimPackageModal.vue

@@ -18,31 +18,33 @@ const {
   refreshState,
 } = useConnector()
 
-// Fetch name availability when modal opens
-const checkResult = shallowRef<CheckNameResult | null>(null)
-
-const isChecking = shallowRef(false)
 const isPublishing = shallowRef(false)
-const publishError = shallowRef<string | null>(null)
 const publishSuccess = shallowRef(false)
 
-async function checkAvailability() {
-  isChecking.value = true
-  publishError.value = null
-  try {
-    checkResult.value = await checkPackageName(props.packageName)
-  } catch (err) {
-    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_check')
-  } finally {
-    isChecking.value = false
-  }
-}
+const {
+  data: checkResult,
+  refresh: checkAvailability,
+  status,
+  error,
+} = useAsyncData(
+  (_nuxtApp, { signal }) => {
+    return checkPackageName(props.packageName, { signal })
+  },
+  { default: () => null, immediate: false },
+)
+
+const isChecking = computed(() => {
+  return status.value === 'pending'
+})
+
+const publishError = computed(() => {
+  return error.value instanceof Error ? error.value.message : $t('claim.modal.failed_to_check')
+})
 
 async function handleClaim() {
   if (!checkResult.value?.available || !isConnected.value) return
 
   isPublishing.value = true
-  publishError.value = null
 
   try {
     // Add the operation

app/composables/useNpmRegistry.ts

@@ -26,7 +26,10 @@ const packumentCache = new Map<string, Promise<Packument | null>>()
  * Uses bulk API for unscoped packages, parallel individual requests for scoped.
  * Note: npm bulk downloads API does not support scoped packages.
  */
-async function fetchBulkDownloads(packageNames: string[]): Promise<Map<string, number>> {
+async function fetchBulkDownloads(
+  packageNames: string[],
+  options: Parameters<typeof $fetch>[1] = {},
+): Promise<Map<string, number>> {
   const downloads = new Map<string, number>()
   if (packageNames.length === 0) return downloads
 
@@ -44,6 +47,7 @@ async function fetchBulkDownloads(packageNames: string[]): Promise<Map<string, n
         try {
           const response = await $fetch<Record<string, { downloads: number } | null>>(
             `${NPM_API}/downloads/point/last-week/${chunk.join(',')}`,
+            options,
           )
           for (const [name, data] of Object.entries(response)) {
             if (data?.downloads !== undefined) {
@@ -575,7 +579,7 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
           return results
         })(),
         // Fetch downloads in bulk
-        fetchBulkDownloads(packageNames),
+        fetchBulkDownloads(packageNames, { signal }),
       ])
 
       // Convert to search results with download data

app/utils/package-name.ts

@@ -72,13 +72,17 @@ export interface CheckNameResult {
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 
-export async function checkPackageExists(name: string): Promise<boolean> {
+export async function checkPackageExists(
+  name: string,
+  options: Parameters<typeof $fetch>[1] = {},
+): Promise<boolean> {
   try {
     const encodedName = name.startsWith('@')
       ? `@${encodeURIComponent(name.slice(1))}`
       : encodeURIComponent(name)
 
     await $fetch(`${NPM_REGISTRY}/${encodedName}`, {
+      ...options,
       method: 'HEAD',
     })
     return true
@@ -87,7 +91,10 @@ export async function checkPackageExists(name: string): Promise<boolean> {
   }
 }
 
-export async function findSimilarPackages(name: string): Promise<SimilarPackage[]> {
+export async function findSimilarPackages(
+  name: string,
+  options: Parameters<typeof $fetch>[1] = {},
+): Promise<SimilarPackage[]> {
   const normalized = normalizePackageName(name)
   const similar: SimilarPackage[] = []
 
@@ -99,7 +106,7 @@ export async function findSimilarPackages(name: string): Promise<SimilarPackage[
           description?: string
         }
       }>
-    }>(`${NPM_REGISTRY}/-/v1/search?text=${encodeURIComponent(name)}&size=20`)
+    }>(`${NPM_REGISTRY}/-/v1/search?text=${encodeURIComponent(name)}&size=20`, options)
 
     for (const obj of searchResponse.objects) {
       const pkgName = obj.package.name
@@ -153,7 +160,10 @@ export async function findSimilarPackages(name: string): Promise<SimilarPackage[
   }
 }
 
-export async function checkPackageName(name: string): Promise<CheckNameResult> {
+export async function checkPackageName(
+  name: string,
+  options: Parameters<typeof $fetch>[1] = {},
+): Promise<CheckNameResult> {
   const validation = validatePackageName(name)
   const valid = validation.validForNewPackages === true
 
@@ -177,8 +187,8 @@ export async function checkPackageName(name: string): Promise<CheckNameResult> {
 
   // Check if package exists and find similar packages in parallel
   const [exists, similarPackages] = await Promise.all([
-    checkPackageExists(name),
-    findSimilarPackages(name),
+    checkPackageExists(name, options),
+    findSimilarPackages(name, options),
   ])
 
   result.available = !exists