fix: pass name/version separately in comparison grid (#1098)

Author: danielroe

app/components/Compare/ComparisonGrid.vue

@@ -2,8 +2,8 @@
 import type { ModuleReplacement } from 'module-replacements'
 
 export interface ComparisonGridColumn {
-  /** Display text (e.g. "lodash@4.17.21") */
-  header: string
+  name: string
+  version?: string
   /** Module replacement data for this package (if available) */
   replacement?: ModuleReplacement | null
 }
@@ -38,18 +38,14 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
         <div class="comparison-label" />
 
         <!-- Package columns -->
-        <div
-          v-for="col in columns"
-          :key="col.header"
-          class="comparison-cell comparison-cell-header"
-        >
+        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
           <span class="inline-flex items-center gap-1.5 truncate">
             <NuxtLink
-              :to="packageRoute(col.header)"
+              :to="packageRoute(col.name, col.version)"
               class="link-subtle font-mono text-sm font-medium text-fg truncate"
-              :title="col.header"
+              :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.header }}
+              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
             </NuxtLink>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span

app/pages/compare.vue

@@ -47,13 +47,9 @@ const gridColumns = computed(() =>
     .filter(({ pkg }) => pkg !== NO_DEPENDENCY_ID)
     .map(({ pkg, originalIndex }) => {
       const data = packagesData.value?.[originalIndex]
-      const header = data
-        ? data.package.version
-          ? `${data.package.name}@${data.package.version}`
-          : data.package.name
-        : pkg
       return {
-        header,
+        name: data?.package.name || pkg,
+        version: data?.package.version,
         replacement: replacements.value.get(pkg) ?? null,
       }
     }),
@@ -78,7 +74,9 @@ const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoadin
 const canCompare = computed(() => packages.value.length >= 2)
 
 // Extract headers from columns for facet rows
-const gridHeaders = computed(() => gridColumns.value.map(col => col.header))
+const gridHeaders = computed(() =>
+  gridColumns.value.map(col => (col.version ? `${col.name}@${col.version}` : col.name)),
+)
 
 useSeoMeta({
   title: () =>

test/nuxt/a11y.spec.ts

@@ -1613,7 +1613,7 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations with 2 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ header: 'vue' }, { header: 'react' }],
+          columns: [{ name: 'vue' }, { name: 'react' }],
         },
         slots: {
           default: '<div>Grid content</div>',
@@ -1626,7 +1626,7 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations with 3 columns', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ header: 'vue' }, { header: 'react' }, { header: 'angular' }],
+          columns: [{ name: 'vue' }, { name: 'react' }, { name: 'angular' }],
         },
         slots: {
           default: '<div>Grid content</div>',
@@ -1639,7 +1639,7 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations with no-dependency column', async () => {
       const component = await mountSuspended(CompareComparisonGrid, {
         props: {
-          columns: [{ header: 'vue' }, { header: 'react' }],
+          columns: [{ name: 'vue' }, { name: 'react' }],
           showNoDependency: true,
         },
         slots: {

test/nuxt/components/compare/ComparisonGrid.spec.ts

@@ -3,7 +3,10 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import ComparisonGrid from '~/components/Compare/ComparisonGrid.vue'
 
 function cols(...headers: string[]) {
-  return headers.map(header => ({ header }))
+  return headers.map(header => {
+    const [name, version] = header.split('@')
+    return { name: name!, version }
+  })
 }
 
 describe('ComparisonGrid', () => {