fix: pass name/version separately in comparison grid

[danielroe]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 6, 2026 2:49pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The ComparisonGrid component's data structure has been refactored to replace a single header field with separate name and version fields within the ComparisonGridColumn interface. The component's template was updated to use these new properties for rendering links, titles, and display text. The parent compare page component was modified to construct gridColumns and gridHeaders using the new name and version properties instead of the previous header-based approach. Corresponding test files were updated to reflect the new API shape, including modifications to test helper functions and component prop configurations.

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The pull request has no description provided by the author, only a PR title.	Add a detailed pull request description explaining the rationale behind refactoring the ComparisonGrid component to use separate name and version fields instead of a single header field.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/comparison-grid-headers

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

test/nuxt/components/compare/ComparisonGrid.spec.ts (1)

5-10: cols() helper will misbehave with scoped package names.

header.split('@') on a scoped package like @vue/compiler-sfc@3.0.0 yields ['', 'vue/compiler-sfc', '3.0.0'], so name becomes '' and version becomes 'vue/compiler-sfc'. No current test exercises this path, but it's a latent trap if scoped-package tests are added later.

🔧 Suggested safer split

 function cols(...headers: string[]) {
   return headers.map(header => {
-    const [name, version] = header.split('@')
-    return { name: name!, version }
+    const atIndex = header.lastIndexOf('@')
+    if (atIndex > 0) {
+      return { name: header.slice(0, atIndex), version: header.slice(atIndex + 1) }
+    }
+    return { name: header, version: undefined }
   })
 }

[coderabbitai]

⚠️ 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">

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!