feat: add package scores display #914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

MhemedAbderrahmen wants to merge 7 commits into npmx-dev:main from MhemedAbderrahmen:feat/display-score

+200 −2

app/components/Package/ScoreBars.vue

-Original file line number
+Diff line change
@@ -0,0 +1,65 @@
+    <script setup lang="ts">
+    const props = defineProps<{
+      packageName: string
+    }>()
+    const { data: score, status } = usePackageScore(() => props.packageName)
+    const scoreMetrics = computed(() => {
+      if (!score.value) return []
+      return [
+        {
+          key: 'quality',
+          value: score.value.detail.quality * 100,
+          label: $t('package.scores.quality'),
+        },
+        {
+          key: 'popularity',
+          value: score.value.detail.popularity * 100,
+          label: $t('package.scores.popularity'),
+        },
+        {
+          key: 'maintenance',
+          value: score.value.detail.maintenance * 100,
+          label: $t('package.scores.maintenance'),
+        },
+      ]
+    })
+    function getScoreColor(percentage: number): string {
+      const hue = 25 + (percentage / 100) * (145 - 25)
+      return `oklch(0.55 0.12 ${hue})`
+    }
+    </script>
+    <template>
+      <CollapsibleSection id="scores" :title="$t('package.scores.title')">
+        <template #actions>
+          <TooltipApp :text="$t('package.scores.source')">
+            <span class="i-carbon:information w-3.5 h-3.5 text-fg-subtle" aria-hidden="true" />
+          </TooltipApp>
+        </template>
+        <div v-if="status === 'pending'" class="flex flex-col gap-2">
+          <div v-for="i in 3" :key="i" class="flex items-center gap-3">
+            <SkeletonInline class="w-24 h-3" />
+            <SkeletonInline class="flex-1 h-3 rounded-full" />
+            <SkeletonInline class="w-8 h-3" />
+          </div>
+        </div>
+        <div v-else-if="score" class="flex flex-col gap-2">
+          <div v-for="metric in scoreMetrics" :key="metric.key" class="flex items-center gap-3">
+            <span class="w-24 text-xs text-fg-subtle">{{ metric.label }}</span>
+            <div class="flex-1 h-1.5 bg-border-subtle rounded-full overflow-hidden">
+              <div
+                class="h-full rounded-full"
+                :style="{ width: `${metric.value}%`, background: getScoreColor(metric.value) }"
+              />
+            </div>
+            <span class="w-8 text-xs font-mono text-fg-muted text-right">
+              {{ Math.round(metric.value) }}%
+            </span>
+          </div>
+        </div>
+        <p v-else class="text-fg-subtle text-sm">{{ $t('package.scores.unavailable') }}</p>
+      </CollapsibleSection>
+    </template>

app/composables/npm/usePackageScore.ts

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    import type { NpmsScore } from '#server/api/registry/score/[...pkg].get'
+    export function usePackageScore(name: MaybeRefOrGetter<string>) {
+      return useLazyFetch<NpmsScore>(() => `/api/registry/score/${toValue(name)}`)
+    }

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -1188,6 +1188,9 @@ defineOgImageComponent('Package', { @@
               <!-- Download stats -->
               <PackageWeeklyDownloadStats :packageName :createdIso="pkg?.time?.created ?? null" />
+              <!-- Package scores -->
+              <PackageScoreBars :packageName />
               <!-- Playground links -->
               <PackagePlaygrounds
                 v-if="readmeData?.playgroundLinks?.length"
@@ Expand Down @@

i18n/locales/en.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -298,6 +298,14 @@ @@
           "download_file": "Download {fileType}",
           "toggle_annotator": "Toggle annotator"
         },
+        "scores": {
+          "title": "Scores",
+          "quality": "Quality",
+          "popularity": "Popularity",
+          "maintenance": "Maintenance",
+          "unavailable": "Score data unavailable",
+          "source": "Scores from npms.io"
+        },
         "install_scripts": {
           "title": "Install Scripts",
           "script_label": "(script)",
@@ Expand Down @@

lunaria/files/en-GB.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -298,6 +298,14 @@ @@
           "download_file": "Download {fileType}",
           "toggle_annotator": "Toggle annotator"
         },
+        "scores": {
+          "title": "Scores",
+          "quality": "Quality",
+          "popularity": "Popularity",
+          "maintenance": "Maintenance",
+          "unavailable": "Score data unavailable",
+          "source": "Scores from npms.io"
+        },
         "install_scripts": {
           "title": "Install Scripts",
           "script_label": "(script)",
@@ Expand Down @@

lunaria/files/en-US.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -298,6 +298,14 @@ @@
           "download_file": "Download {fileType}",
           "toggle_annotator": "Toggle annotator"
         },
+        "scores": {
+          "title": "Scores",
+          "quality": "Quality",
+          "popularity": "Popularity",
+          "maintenance": "Maintenance",
+          "unavailable": "Score data unavailable",
+          "source": "Scores from npms.io"
+        },
         "install_scripts": {
           "title": "Install Scripts",
           "script_label": "(script)",
@@ Expand Down @@

server/api/registry/badge/[type]/[...pkg].get.ts

-Original file line number
+Diff line change
@@ -1,15 +1,14 @@
     import * as v from 'valibot'
     import { createError, getRouterParam, getQuery, setHeader } from 'h3'
     import { PackageRouteParamsSchema } from '#shared/schemas/package'
-    import { CACHE_MAX_AGE_ONE_HOUR, ERROR_NPM_FETCH_FAILED } from '#shared/utils/constants'
+    import { CACHE_MAX_AGE_ONE_HOUR, ERROR_NPM_FETCH_FAILED, NPMS_API } from '#shared/utils/constants'
     import { fetchNpmPackage } from '#server/utils/npm'
     import { assertValidPackageName } from '#shared/utils/npm'
     import { handleApiError } from '#server/utils/error-handler'
     const NPM_DOWNLOADS_API = 'https://api.npmjs.org/downloads/point'
     const OSV_QUERY_API = 'https://api.osv.dev/v1/query'
     const BUNDLEPHOBIA_API = 'https://bundlephobia.com/api/size'
-    const NPMS_API = 'https://api.npms.io/v2/package'
     const QUERY_SCHEMA = v.object({
       color: v.optional(v.string()),
@@ Expand Down @@

server/api/registry/score/[...pkg].get.ts

-Original file line number
+Diff line change
@@ -0,0 +1,47 @@
+    import * as v from 'valibot'
+    import { PackageRouteParamsSchema } from '#shared/schemas/package'
+    import { CACHE_MAX_AGE_ONE_HOUR, NPMS_API } from '#shared/utils/constants'
+    export interface NpmsScore {
+      final: number
+      detail: {
+        quality: number
+        popularity: number
+        maintenance: number
+      }
+    }
+    export default defineCachedEventHandler(
+      async event => {
+        const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+        const { rawPackageName } = parsePackageParams(pkgParamSegments)
+        try {
+          const { packageName } = v.parse(PackageRouteParamsSchema, {
+            packageName: rawPackageName,
+          })
+          const response = await fetch(`${NPMS_API}/${encodeURIComponent(packageName)}`)
+          if (!response.ok) {
+            throw createError({ statusCode: response.status, message: 'Failed to fetch npms score' })
+          }
+          const data = await response.json()
+          return data.score as NpmsScore
+        } catch (error: unknown) {
+          handleApiError(error, {
+            statusCode: 502,
+            message: 'Failed to fetch package score from npms.io',
+          })
+        }
+      },
+      {
+        maxAge: CACHE_MAX_AGE_ONE_HOUR,
+        swr: true,
+        getKey: event => {
+          const pkg = getRouterParam(event, 'pkg') ?? ''
+          return `npms-score:${pkg}`
+        },
+      },
+    )

shared/utils/constants.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ export const NPMX_SITE = 'https://npmx.dev' @@
     export const BLUESKY_API = 'https://public.api.bsky.app/xrpc/'
     export const BLUESKY_COMMENTS_REQUEST = '/api/atproto/bluesky-comments'
     export const NPM_REGISTRY = 'https://registry.npmjs.org'
+    export const NPMS_API = 'https://api.npms.io/v2/package'
     export const ERROR_PACKAGE_ANALYSIS_FAILED = 'Failed to analyze package.'
     export const ERROR_PACKAGE_VERSION_AND_FILE_FAILED = 'Version and file path are required.'
     export const ERROR_PACKAGE_REQUIREMENTS_FAILED =
@@ Expand Down @@

test/nuxt/a11y.spec.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -123,6 +123,7 @@ import { @@
       PackageManagerSelect,
       PackageMetricsBadges,
       PackagePlaygrounds,
+      PackageScoreBars,
       PackageReplacement,
       PackageSkeleton,
       PackageSkillsCard,
@@ Expand Down Expand Up / @@ -1079,6 +1080,59 @@ describe('component accessibility audits', () => { @@
         })
       })
+      describe('PackageScoreBars', () => {
+        it('should have no accessibility violations with score data', async () => {
+          const component = await mountSuspended(PackageScoreBars, {
+            props: { packageName: 'vue' },
+            global: {
+              mocks: {
+                usePackageScore: () => ({
+                  data: ref({
+                    final: 0.85,
+                    detail: { quality: 0.82, popularity: 0.91, maintenance: 0.78 },
+                  }),
+                  status: ref('success'),
+                }),
+              },
+            },
+          })
+          const results = await runAxe(component)
+          expect(results.violations).toEqual([])
+        })
+        it('should have no accessibility violations in loading state', async () => {
+          const component = await mountSuspended(PackageScoreBars, {
+            props: { packageName: 'vue' },
+            global: {
+              mocks: {
+                usePackageScore: () => ({
+                  data: ref(null),
+                  status: ref('pending'),
+                }),
+              },
+            },
+          })
+          const results = await runAxe(component)
+          expect(results.violations).toEqual([])
+        })
+        it('should have no accessibility violations when unavailable', async () => {
+          const component = await mountSuspended(PackageScoreBars, {
+            props: { packageName: 'vue' },
+            global: {
+              mocks: {
+                usePackageScore: () => ({
+                  data: ref(null),
+                  status: ref('error'),
+                }),
+              },
+            },
+          })
+          const results = await runAxe(component)
+          expect(results.violations).toEqual([])
+        })
+      })
       describe('PackageAccessControls', () => {
         it('should have no accessibility violations', async () => {
           const component = await mountSuspended(PackageAccessControls, {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add package scores display #914

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

feat: add package scores display #914

Are you sure you want to change the base?

feat: add package scores display #914

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!