chore: prerender `/compare` page #1335

userquin · 2026-02-10T13:35:01Z

compare page comparing client only, and so this PR adding it with prerender: true:

added some client only to avoid hydration missmatch errors
added some skeletons
restore facets from url
added js required via useHead
tests changed

vercel · 2026-02-10T13:35:13Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 11:38pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 10, 2026 11:38pm
npmx-lunaria	Ignored		Feb 10, 2026 11:38pm

coderabbitai · 2026-02-10T13:37:08Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a static prerender route for "/compare" and refactors compare-related UI and data readiness. FacetSelector styling is simplified; FacetRow uses SkeletonInline for missing values; usePackageComparison introduces a suspense-aware readiness flag and returns nulls while not ready. compare.vue now guards package access, truncates long SEO titles, and wraps multiple interactive sections in ClientOnly with skeleton fallbacks; CompareLineChart is rendered conditionally when data exists. No exported API signatures were changed.

Possibly related PRs

feat: add charts to compare page #846 — also modifies app/pages/compare.vue to add/integrate the CompareLineChart/trends section.

Suggested labels

front

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is directly related to the changeset, explaining the addition of the compare page to routeRules with prerender: true.

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

✨ Finishing touches

🧪 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.}

codecov · 2026-02-10T13:37:24Z

Codecov Report

❌ Patch coverage is 83.33333% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/usePackageComparison.ts	83.33%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

userquin · 2026-02-10T14:08:42Z

uhmmm, what's happening here 🤔 ?

userquin · 2026-02-10T15:03:26Z

Trying to patch nuxt html validator, ignore option being ignored, check nuxt-modules/html-validator#768

No idea why css classes being reported as duplicated when checking /compare page (prerendered), I need to check what's the issue 🤔

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

nuxt.config.ts (1)
223-228: Extract the duplicated condition to a variable for maintainability.

The condition !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML) is duplicated between enabled and ignore. This creates maintenance burden and risk of the conditions diverging. Consider extracting to a descriptive variable.

Also, could you clarify why /compare needs to be ignored from validation when prerendering is enabled? If there's a known validation issue with the compare page, a brief comment would help future maintainers understand the intent.
♻️ Proposed refactor
+const shouldValidateHtml = !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML)
+
 export default defineNuxtConfig({
   // ... other config
 
   htmlValidator: {
-    enabled: !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML),
-    ignore:
-      !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML) ? ['/compare'] : undefined,
+    enabled: shouldValidateHtml,
+    // TODO: Add comment explaining why /compare is excluded from validation
+    ignore: shouldValidateHtml ? ['/compare'] : undefined,
     failOnError: true,
   },

nuxt.config.ts

pnpm-workspace.yaml

coderabbitai

Actionable comments posted: 1

patches/@nuxtjs__html-validator@2.1.0.patch

serhalp · 2026-02-10T15:29:50Z

nuxt.config.ts

  htmlValidator: {
    enabled: !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML),
+    ignore:
+      !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML) ? ['/compare'] : undefined,


what is this for? 👀

will be removed on next commit; I was trying to ignore that page, but it is a problem at CompareFacetSelector component (BaseButton now has some styles duplicated at CompareFacetSelector )

coderabbitai

Actionable comments posted: 1

coderabbitai · 2026-02-10T15:40:51Z

app/components/Compare/FacetSelector.vue

+          class="gap-1 px-1.5 rounded"
          :class="
            facet.comingSoon
              ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted border-border'
+                ? 'text-fg-muted bg-bg-muted'
                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'


⚠️ Potential issue | 🟡 Minor

Avoid a potential size shift between selected and unselected buttons.

Line 77 removes the border from the selected state while the unselected state still uses border colour classes; if ButtonBase doesn’t enforce a fixed border width, toggling could cause a subtle layout shift. Consider keeping a consistent border width (e.g., transparent border on selected).

Suggested tweak

- ? 'text-fg-muted bg-bg-muted' + ? 'text-fg-muted bg-bg-muted border border-transparent'

📝 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

class="gap-1 px-1.5 rounded"

:class="

facet.comingSoon

? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

: isFacetSelected(facet.id)

? 'text-fg-muted bg-bg-muted border-border'

? 'text-fg-muted bg-bg-muted'

: 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'

class="gap-1 px-1.5 rounded"

:class="

facet.comingSoon

? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

: isFacetSelected(facet.id)

? 'text-fg-muted bg-bg-muted border border-transparent'

: 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'

BaseButton has border border-border: html validator error => error Class "border-border" duplicated no-dup-class, and so, CI will fail

@userquin, thank you for the clarification! You're absolutely right—if ButtonBase already provides border border-border by default, then my suggestion to add border border-transparent would indeed duplicate the border class and fail the HTML validator.

Given that ButtonBase enforces a consistent border width across all states, there's no layout shift concern. The selected state uses the default border color from ButtonBase, while the unselected state simply overrides it with border-border-subtle. Your current implementation is correct.

I apologize for not considering the ButtonBase component's default styles when making my initial suggestion.

🐰

✏️ Learnings added

Learnt from: userquin Repo: npmx-dev/npmx.dev PR: 1335 File: app/components/Compare/FacetSelector.vue:72-78 Timestamp: 2026-02-10T15:47:33.467Z Learning: In the npmx.dev project, the `ButtonBase` component (app/components/ButtonBase.vue or similar) provides default `border border-border` styles. When styling ButtonBase instances, avoid adding duplicate `border` classes as this triggers the HTML validator error `no-dup-class` and fails CI.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used

Learnt from: skaldebane Repo: npmx-dev/npmx.dev PR: 760 File: app/components/Compare/FacetCard.vue:134-136 Timestamp: 2026-02-06T07:14:04.242Z Learning: In `app/components/Compare/FacetCard.vue`, the facet values use `dir="auto"` rather than `dir="ltr"` because the values are not always numbers/sizes and can contain mixed content types.

Learnt from: jellydeck Repo: npmx-dev/npmx.dev PR: 904 File: app/components/Package/Versions.vue:332-332 Timestamp: 2026-02-04T05:35:00.078Z Learning: In the npmx.dev project, focus-visible styling for buttons and select elements is applied globally via main.css using the rule: `button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }`. Therefore, individual buttons and selects don't need inline focus-visible utility classes like `focus-visible:outline-accent/70` added to them.

Learnt from: jellydeck Repo: npmx-dev/npmx.dev PR: 904 File: app/components/Package/AccessControls.vue:253-253 Timestamp: 2026-02-04T05:34:26.711Z Learning: In the npmx.dev project, focus-visible styling for button and select elements is applied globally via app/assets/main.css using `button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }`. Individual inline utility classes like `focus-visible:outline-accent/70` are not needed on these elements.

Learnt from: alexdln Repo: npmx-dev/npmx.dev PR: 838 File: app/pages/package/[...package].vue:445-449 Timestamp: 2026-02-03T13:59:33.392Z Learning: The copy button pattern in app/pages/package/[...package].vue may be made into a reusable component or pattern in the future, but currently it's acceptable to keep it inline with the CSS-only approach for smooth animations.

danielroe · 2026-02-10T15:57:54Z

this might leads to hydration mismatch unless we only perform data fetching on client-side. this will also mean the compare page will not work without JS (an acceptable trade-off). looks like there's also a hydration mismatch on main to investigate - can you have a look? 🙏

this will also be true for the search page, btw, but we do want that one to work without JS

# Conflicts: # nuxt.config.ts

coderabbitai

Actionable comments posted: 2

app/composables/usePackageComparison.ts

app/pages/compare.vue

github-actions · 2026-02-10T20:21:33Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
lunaria/files/en-GB.json	Localization changed, will be marked as complete. 🔄️
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

chore: add missing compare page at routeRules (prerender)

b1cd380

vercel bot deployed to Preview – npmx.dev February 10, 2026 13:37 View deployment

chore: patch nuxt html validator module

58d4796

userquin mentioned this pull request Feb 10, 2026

ignore option being ignored when prerendering nuxt-modules/html-validator#768

Open

5 tasks

vercel bot had a problem deploying to Preview – docs.npmx.dev February 10, 2026 15:02 Failure

vercel bot had a problem deploying to Preview – npmx.dev February 10, 2026 15:02 Failure

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

nuxt.config.ts Outdated Show resolved Hide resolved

pnpm-workspace.yaml Outdated Show resolved Hide resolved

userquin added 2 commits February 10, 2026 16:05

chore: add nuxt html validator patch

7df6416

chore: cleanup nuxt config file

746aa0c

vercel bot deployed to Preview – npmx.dev February 10, 2026 15:09 View deployment

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

patches/@nuxtjs__html-validator@2.1.0.patch Outdated Show resolved Hide resolved

chore: remove patch

d68c1da

vercel bot deployed to Preview – docs.npmx.dev February 10, 2026 15:26 View deployment

vercel bot deployed to Preview – npmx.dev February 10, 2026 15:26 View deployment

serhalp reviewed Feb 10, 2026

View reviewed changes

userquin added 2 commits February 10, 2026 16:34

chore: cleanup nuxt config file, remove ignore option

c4d9a4c

chore: cleanup duplicated classes at CompareFacetSelector

87e3b6d

vercel bot deployed to Preview – npmx.dev February 10, 2026 15:40 View deployment

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

userquin added 2 commits February 10, 2026 17:27

Merge branch 'main' into chore-add-compare-to-route-rules

f5c7eed

chore: add client only and restore facets from url

3e46cc8

vercel bot deployed to Preview – npmx.dev February 10, 2026 19:40 View deployment

Merge branch 'main' into chore-add-compare-to-route-rules

e977ff4

# Conflicts: # nuxt.config.ts

vercel bot deployed to Preview – npmx.dev February 10, 2026 19:42 View deployment

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

app/composables/usePackageComparison.ts Outdated Show resolved Hide resolved

app/pages/compare.vue Show resolved Hide resolved

chore: add JSRequired component

8314370

vercel bot deployed to Preview – npmx.dev February 10, 2026 20:22 View deployment

userquin added 2 commits February 10, 2026 21:36

chore: fix test:types

a81353c

chore: fix test:unit

3247cf5

vercel bot deployed to Preview – npmx.dev February 10, 2026 20:40 View deployment

chore: add JSRequired component test

60fdf4a

vercel bot deployed to Preview – npmx.dev February 10, 2026 21:02 View deployment

chore: fix test:nuxt

5afbf81

vercel bot deployed to Preview – npmx.dev February 10, 2026 22:17 View deployment

chore: fix usePackageComparison.ts

21b551d

vercel bot deployed to Preview – npmx.dev February 10, 2026 22:24 View deployment

chore: remove JSRequired component using useHead instead

78afaf0

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:33 View deployment

chore: apply coderabbitai suggestions

42a2f64

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:38 View deployment

danielroe changed the title ~~chore: add missing compare page at routeRules (prerender)~~ chore: prerender /compare page Feb 10, 2026

Uh oh!

chore: prerender /compare page #1335

Are you sure you want to change the base?

chore: prerender /compare page #1335

Uh oh!

Conversation

userquin commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

codecov bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

userquin commented Feb 10, 2026

Uh oh!

userquin commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

serhalp Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

userquin Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

userquin Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

userquin Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

danielroe commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

chore: prerender `/compare` page #1335

chore: prerender `/compare` page #1335

userquin commented Feb 10, 2026 •

edited

Loading

vercel bot commented Feb 10, 2026 •

edited

Loading

coderabbitai bot commented Feb 10, 2026 •

edited

Loading

codecov bot commented Feb 10, 2026 •

edited

Loading

userquin commented Feb 10, 2026 •

edited

Loading

coderabbitai bot Feb 10, 2026 •

edited

Loading

userquin Feb 10, 2026 •

edited

Loading

danielroe commented Feb 10, 2026 •

edited

Loading

github-actions bot commented Feb 10, 2026 •

edited

Loading