Merge branch 'main' of github.com:npmx-dev/npmx.dev into fix/infinite-api-call

Author: shamilkotta

app/components/Package/DownloadAnalytics.vue

@@ -19,26 +19,9 @@ const rootEl = shallowRef<HTMLElement | null>(null)
 
 const { width } = useElementSize(rootEl)
 
-const chartKey = ref(0)
-
-let chartRemountTimeoutId: ReturnType<typeof setTimeout> | null = null
-
 onMounted(() => {
   rootEl.value = document.documentElement
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
-
-  // If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
-  chartRemountTimeoutId = setTimeout(() => {
-    chartKey.value += 1
-    chartRemountTimeoutId = null
-  }, 10)
-})
-
-onBeforeUnmount(() => {
-  if (chartRemountTimeoutId !== null) {
-    clearTimeout(chartRemountTimeoutId)
-    chartRemountTimeoutId = null
-  }
 })
 
 const { colors } = useCssVariables(
@@ -705,12 +688,7 @@ const config = computed(() => {
     </div>
 
     <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy
-        :dataset="chartData.dataset"
-        :config="config"
-        class="[direction:ltr]"
-        :key="chartKey"
-      >
+      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
         <template #menuIcon="{ isOpen }">
           <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
           <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />

app/composables/useNpmRegistry.ts

@@ -9,6 +9,7 @@ import type {
   PackageVersionInfo,
 } from '#shared/types'
 import type { ReleaseType } from 'semver'
+import { mapWithConcurrency } from '#shared/utils/async'
 import { maxSatisfying, prerelease, major, minor, diff, gt, compare } from 'semver'
 import { isExactVersion } from '~/utils/versions'
 import { extractInstallScriptsInfo } from '~/utils/install-scripts'
@@ -546,34 +547,28 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
 
       // Fetch packuments and downloads in parallel
       const [packuments, downloads] = await Promise.all([
-        // Fetch packuments in parallel (with concurrency limit)
+        // Fetch packuments with concurrency limit
         (async () => {
-          const concurrency = 10
-          const results: MinimalPackument[] = []
-          for (let i = 0; i < packageNames.length; i += concurrency) {
-            const batch = packageNames.slice(i, i + concurrency)
-            const batchResults = await Promise.all(
-              batch.map(async name => {
-                try {
-                  const encoded = encodePackageName(name)
-                  const { data: pkg } = await cachedFetch<MinimalPackument>(
-                    `${NPM_REGISTRY}/${encoded}`,
-                    { signal },
-                  )
-                  return pkg
-                } catch {
-                  return null
-                }
-              }),
-            )
-            for (const pkg of batchResults) {
-              // Filter out any unpublished packages (missing dist-tags)
-              if (pkg && pkg['dist-tags']) {
-                results.push(pkg)
+          const results = await mapWithConcurrency(
+            packageNames,
+            async name => {
+              try {
+                const encoded = encodePackageName(name)
+                const { data: pkg } = await cachedFetch<MinimalPackument>(
+                  `${NPM_REGISTRY}/${encoded}`,
+                  { signal },
+                )
+                return pkg
+              } catch {
+                return null
               }
-            }
-          }
-          return results
+            },
+            10,
+          )
+          // Filter out any unpublished packages (missing dist-tags)
+          return results.filter(
+            (pkg): pkg is MinimalPackument => pkg !== null && !!pkg['dist-tags'],
+          )
         })(),
         // Fetch downloads in bulk
         fetchBulkDownloads(packageNames, { signal }),
@@ -772,23 +767,20 @@ export function useOutdatedDependencies(
       return
     }
 
-    const results: Record<string, OutdatedDependencyInfo> = {}
     const entries = Object.entries(deps)
-    const batchSize = 5
-
-    for (let i = 0; i < entries.length; i += batchSize) {
-      const batch = entries.slice(i, i + batchSize)
-      const batchResults = await Promise.all(
-        batch.map(async ([name, constraint]) => {
-          const info = await checkDependencyOutdated(cachedFetch, name, constraint)
-          return [name, info] as const
-        }),
-      )
+    const batchResults = await mapWithConcurrency(
+      entries,
+      async ([name, constraint]) => {
+        const info = await checkDependencyOutdated(cachedFetch, name, constraint)
+        return [name, info] as const
+      },
+      5,
+    )
 
-      for (const [name, info] of batchResults) {
-        if (info) {
-          results[name] = info
-        }
+    const results: Record<string, OutdatedDependencyInfo> = {}
+    for (const [name, info] of batchResults) {
+      if (info) {
+        results[name] = info
       }
     }
 

app/pages/about.vue

@@ -189,16 +189,23 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
               target="_blank"
               rel="noopener noreferrer"
               class="group relative"
-              :title="$t('about.contributors.view_profile', { name: contributor.login })"
+              :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
             >
-              <img
-                :src="`${contributor.avatar_url}&s=64`"
-                :alt="contributor.login"
-                width="32"
-                height="32"
-                class="w-8 h-8 rounded-full ring-2 ring-transparent group-hover:ring-accent transition-all duration-200"
-                loading="lazy"
-              />
+              <div class="relative flex items-center">
+                <img
+                  :src="`${contributor.avatar_url}&s=64`"
+                  :alt="contributor.login"
+                  width="32"
+                  height="32"
+                  class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out hover:scale-125 will-change-transform"
+                  loading="lazy"
+                />
+                <span
+                  class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
+                >
+                  @{{ contributor.login }}
+                </span>
+              </div>
             </a>
           </div>
         </div>

package.json

@@ -91,7 +91,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.27",
-    "vue-data-ui": "3.13.7"
+    "vue-data-ui": "3.14.0"
   },
   "devDependencies": {
     "@npm/types": "2.1.0",