Skip to content

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

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.

Sign up for GitHub

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

Merged
danielroe merged 1 commit into from
Feb 6, 2026
+18 −21
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions app/components/Compare/ComparisonGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -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">
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

v-for key col.name may not be unique when comparing different versions of the same package.

If a user compares e.g. lodash@4.17.20 vs lodash@4.17.21, both columns would have col.name === 'lodash', causing a Vue key collision warning and potential rendering issues. Consider using a composite key that includes the version.

🔧 Suggested fix 
-        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
+        <div v-for="col in columns" :key="col.version ? `${col.name}@${col.version}` : col.name" class="comparison-cell comparison-cell-header">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
<div v-for="col in columns" :key="col.version ? `${col.name}@${col.version}` : 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
Expand Down
12 changes: 5 additions & 7 deletions app/pages/compare.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
}),
Expand All @@ -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: () =>
Expand Down
6 changes: 3 additions & 3 deletions test/nuxt/a11y.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
Expand All @@ -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>',
Expand All @@ -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: {
Expand Down
5 changes: 4 additions & 1 deletion test/nuxt/components/compare/ComparisonGrid.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Loading