feat(ui): display all engines in Compatibility section and make common ones pretty

[wojtekmaj]

This PR makes Compatibility section more generic, making it display any engine that is actually set in packument. On top of that, it makes the list prettier by not displaying raw machine-oriented data but icons and labels for most popular engines.

Before (1):

https://npmx.dev/package/rollup

After (1):

Before (2):

(nothing to display)

https://npmx.dev/package/react-jsx-parser

After (2):

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 9:24am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 9:24am
npmx-lunaria	Ignored		Feb 5, 2026 9:24am

[coderabbitai]

📝 Walkthrough

Walkthrough

The Compatibility.vue component's engines prop is changed from a fixed { node?: string; npm?: string } shape to Record<string, string>. The component adds engineNames and engineIcons mappings plus getName and getIcon helpers, and introduces a computed sortedEngines to produce a stable alphabetical list. Rendering is refactored from two hardcoded engine blocks to a dynamic v-for over sortedEngines, showing an icon, human-friendly name and version for each engine. The collapsible section now renders when there is at least one engine entry (sortedEngines.length).

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, detailing how the Compatibility section was made generic to display any engine with improved visual presentation using icons and labels.

_{✏️ 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

---

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

[Copilot]

Pull request overview

This PR enhances the Compatibility section to display all engine requirements from package.json (not just node and npm), and adds icons and friendly labels for common engines (bun, node, npm).

Changes:

• Changed the engines prop type from a specific interface with node? and npm? to a generic Record<string, string> to support any engine
• Added mapping objects for engine names and icons with fallbacks for unknown engines
• Replaced hardcoded node/npm display with a dynamic v-for loop that renders all engines
• Added icons to each engine entry for better visual presentation

[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!