feat: add WASM label by gameroman · Pull Request #2154 · npmx-dev/npmx.dev

gameroman · 2026-03-19T21:17:14Z

🔗 Linked issue

📚 Description

Adds a tag if a package is WASM only

fix: Update CONTRIBUTING.md i18n: add `package.metrics.wasm` key

vercel · 2026-03-19T21:17:18Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 20, 2026 1:52am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 20, 2026 1:52am
npmx-lunaria	Ignored		Mar 20, 2026 1:52am

github-actions · 2026-03-19T21:17:58Z

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
i18n/locales/en.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.

codecov · 2026-03-19T21:24:55Z

Codecov Report

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

Files with missing lines	Patch %	Lines
shared/utils/package-analysis.ts	0.00%	2 Missing and 1 partial ⚠️
app/components/Package/MetricsBadges.vue	93.33%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-19T21:33: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 WebAssembly support: introduces a new wasm ModuleFormat and updates detectModuleFormat to return wasm when a package main ends with .wasm; updates Package/MetricsBadges.vue to render a WASM badge when detected (adjusting ESM/CJS badge rendering and loading states); adds package.metrics.wasm to English locales and the i18n schema; adds a unit test for .wasm detection; updates CONTRIBUTING.md i18n command examples to prefix scripts with pnpm vp run.

Possibly related PRs

fix: detect esm only pkg w/ main and module fields #1494: Modifies shared/utils/package-analysis.ts (ModuleFormat and detectModuleFormat), directly related to the wasm detection change.
fix(ui): improve MetricsBadges skeleton alignment #929: Touches app/components/Package/MetricsBadges.vue and badge-rendering logic that overlaps with the WASM badge changes.

Suggested reviewers

danielroe
ghostdevv

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is related to the changeset, providing context about adding a WASM badge label.
Linked Issues check	✅ Passed	The pull request successfully implements all coding requirements from issue `#2117`: detects WASM-only packages, adds WASM badge rendering logic, updates i18n translations, and includes unit tests.
Out of Scope Changes check	✅ Passed	All changes are directly related to adding WASM label support; the CONTRIBUTING.md update reflects standard documentation maintenance and is minimal in scope.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Tip

CodeRabbit can use oxc to improve the quality of JavaScript and TypeScript code reviews.

Add a configuration file to your project to customize how CodeRabbit runs oxc.

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (2)

CONTRIBUTING.md (1)

463-466: Query: Are these documentation changes within scope?

These changes simplify the i18n commands table by removing several entries and shortening descriptions. Whilst this may improve readability, it seems unrelated to the PR's stated objective of adding a WASM label. Were these changes intentional cleanup work, or were they made accidentally?

If intentional, consider moving documentation-focused changes to a separate PR to maintain clear change history and make reviews more focused.
test/unit/shared/utils/package-analysis.spec.ts (1)
126-128: Add an exports-only WASM test case to lock expected behaviour.

The new test covers main, but not packages that declare only exports with a .wasm entrypoint.
🧪 Suggested additional test
   it('detects WASM from main field', () => {
     expect(detectModuleFormat({ main: 'main.wasm' })).toBe('wasm')
   })
+
+  it('detects WASM from exports-only entrypoint', () => {
+    expect(
+      detectModuleFormat({
+        exports: {
+          '.': './main.wasm',
+        },
+      }),
+    ).toBe('wasm')
+  })
As per coding guidelines: **/*.{test,spec}.{ts,tsx}: Write unit tests for core functionality using vitest.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 997eac39-0654-4a11-b8cb-a98fb06c3f32

📥 Commits

Reviewing files that changed from the base of the PR and between 230b7c7 and 50bc140.

📒 Files selected for processing (6)

CONTRIBUTING.md
app/components/Package/MetricsBadges.vue
i18n/locales/en.json
i18n/schema.json
shared/utils/package-analysis.ts
test/unit/shared/utils/package-analysis.spec.ts

CONTRIBUTING.md

i18n/locales/en.json

shared/utils/package-analysis.ts

gameroman · 2026-03-19T22:33:56Z

@coderabbitai should I add an e2e test?

coderabbitai · 2026-03-19T22:34:57Z

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

Let me check the existing e2e tests to give you a concrete recommendation.

🏁 Script executed:

#!/bin/bash
# List all e2e test files
fd -e ts -e tsx --full-path 'e2e' .

# Check for any existing badge or metrics-related e2e tests
rg -n "badge|metrics|esm|cjs|MetricsBadge" --type=ts -l

# Show one example e2e test for context
fd -e ts -e tsx --full-path 'e2e' . --exec head -60 {}

Length of output: 29914

@gameroman: It's not strictly necessary for this PR, but it depends on how far you want to go. Here's the breakdown:

Why you probably don't need one right now:

The core detection logic (detectModuleFormat → 'wasm') is already covered by the new unit test in test/unit/shared/utils/package-analysis.spec.ts.
Looking at the existing e2e suite, no e2e test currently covers the metrics badges UI (ESM / CJS / Types) in MetricsBadges.vue — so adding one exclusively for WASM would be inconsistent with the current testing strategy.
test/e2e/badge.spec.ts tests the SVG API badge endpoints, not the UI component.

Why you might want one anyway:

An e2e test would validate the full rendering pipeline — that isWasm correctly drives the conditional v-if/v-else in the template, the tooltip text renders, and the i18n key (package.metrics.wasm) resolves correctly.
It would catch regressions that a unit test won't (e.g. a broken analysis composable wiring in the component).

If you do add one, it would go in test/e2e/ using Playwright + nuxt/test-utils, and you'd need a new fixture for a known WASM-only package (like the example from issue #2117) in test/fixtures/. A minimal test might look like:

// test/e2e/metrics-badges.spec.ts
import { expect, test } from './test-utils'

test.describe('MetricsBadges – WASM', () => {
  test('/package/<wasm-pkg> → shows WASM badge', async ({ page, goto }) => {
    await goto('/package/<wasm-pkg>', { waitUntil: 'domcontentloaded' })

    // WASM badge should be visible
    await expect(page.locator('[data-testid="wasm-badge"]')).toBeVisible()

    // ESM / CJS badges should NOT be shown alongside WASM
    await expect(page.locator('[data-testid="esm-badge"]')).not.toBeVisible()
  })
})

(You'd need to add data-testid attributes to the badges in MetricsBadges.vue and create the fixture.)

Bottom line: skip it for now unless the team has a policy of e2e-testing new badge types. The unit test is the right place for the detection logic, and a component-level Nuxt test (test/nuxt/) would be a lighter-weight middle ground if you want UI rendering coverage without a full fixture.

🧠 Learnings used

Learnt from: CR
Repo: npmx-dev/npmx.dev PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-03T10:09:38.777Z
Learning: Applies to **/e2e/**/*.{test,spec}.{ts,tsx} : Write end-to-end tests using Playwright and `nuxt/test-utils`

coderabbitai

🧹 Nitpick comments (1)

test/nuxt/components/Package/MetricsBadges.spec.ts (1)
18-32: Tighten the dual-format assertion set.

Consider also asserting that WASM is not rendered in this case, so the test verifies both presence and exclusion paths.
Suggested tweak
   const text = wrapper.text()
   expect(text).toContain('Types')
   expect(text).toContain('ESM')
   expect(text).toContain('CJS')
+  expect(text).not.toContain('WASM')

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6d29b9cc-86a7-4471-b243-1e1aaa331054

📥 Commits

Reviewing files that changed from the base of the PR and between e7e433a and 6f43544.

📒 Files selected for processing (5)

test/nuxt/components/Package/LikeCard.spec.ts
test/nuxt/components/Package/MetricsBadges.spec.ts
test/nuxt/components/Package/Sidebar.spec.ts
test/nuxt/components/Package/Versions.spec.ts
test/nuxt/components/Package/WeeklyDownloadStats.spec.ts

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

test/nuxt/components/Package/MetricsBadges.spec.ts (2)
13-16: Consider adding mock cleanup between tests.

The mockUsePackageAnalysis mock is not being reset between tests, which could lead to test pollution if additional tests are added. Consider clearing the mock in the afterEach hook.
🧹 Suggested improvement for mock cleanup
-  afterEach(() => wrapper?.unmount())
+  afterEach(() => {
+    wrapper?.unmount()
+    vi.clearAllMocks()
+  })
18-46: Good test coverage for the new WASM feature.

The tests effectively validate both the existing badge rendering (Types, ESM, CJS) and the new WASM badge. The test structure is clear and follows Vitest best practices.

For more comprehensive coverage, you could optionally consider adding tests for:

Loading states (when status is 'pending' or 'error')

Other module formats ('esm', 'cjs', 'none')

The types property variations (e.g., kind: 'external', kind: 'none')

However, the current tests adequately cover the primary objective of this PR.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bf8fca50-d32a-4911-9258-0abad7558174

📥 Commits

Reviewing files that changed from the base of the PR and between 6f43544 and 6c9ad6f.

📒 Files selected for processing (1)

test/nuxt/components/Package/MetricsBadges.spec.ts

test/nuxt/components/Package/MetricsBadges.spec.ts

gameroman added 4 commits March 19, 2026 20:51

test: add wasm case for detectModuleFormat

cdec07a

feat: add wasm detection

7f5bd74

chore: format files

b9623a9

feat: add WASM badge

39216c3

fix: Update CONTRIBUTING.md i18n: add `package.metrics.wasm` key

vercel bot had a problem deploying to Preview – npmx.dev March 19, 2026 21:18 Failure

gameroman and others added 2 commits March 19, 2026 21:20

fix

d6ff6b4

[autofix.ci] apply automated fixes

50bc140

vercel bot deployed to Preview – npmx.dev March 19, 2026 21:25 View deployment

gameroman marked this pull request as ready for review March 19, 2026 21:28

coderabbitai bot reviewed Mar 19, 2026

View reviewed changes

CONTRIBUTING.md Outdated Show resolved Hide resolved

i18n/locales/en.json Outdated Show resolved Hide resolved

shared/utils/package-analysis.ts Show resolved Hide resolved

Update en.json

02632fb

vercel bot deployed to Preview – npmx.dev March 19, 2026 22:28 View deployment

gameroman and others added 2 commits March 19, 2026 22:29

Update CONTRIBUTING.md

d68ab3b

[autofix.ci] apply automated fixes

e7e433a

vercel bot deployed to Preview – npmx.dev March 19, 2026 22:33 View deployment

test: add MetricsBadges component test

6f43544

vercel bot deployed to Preview – npmx.dev March 19, 2026 23:00 View deployment

coderabbitai bot reviewed Mar 19, 2026

View reviewed changes

fix: use mockNuxtImport

6c9ad6f

vercel bot deployed to Preview – npmx.dev March 19, 2026 23:06 View deployment

coderabbitai bot reviewed Mar 19, 2026

View reviewed changes

test/nuxt/components/Package/MetricsBadges.spec.ts Show resolved Hide resolved

Update MetricsBadges.spec.ts

cfb7e42

vercel bot deployed to Preview – npmx.dev March 19, 2026 23:12 View deployment

Update MetricsBadges.spec.ts

728f110

vercel bot deployed to Preview – npmx.dev March 19, 2026 23:19 View deployment

Merge branch 'main' into analysis-wasm

1116152

vercel bot deployed to Preview – npmx.dev March 20, 2026 01:52 View deployment

Uh oh!

Conversation

gameroman commented Mar 19, 2026

🔗 Linked issue

📚 Description

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gameroman commented Mar 19, 2026

Uh oh!

coderabbitai bot commented Mar 19, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 19, 2026 •

edited

Loading

github-actions bot commented Mar 19, 2026 •

edited

Loading

codecov bot commented Mar 19, 2026 •

edited

Loading

coderabbitai bot commented Mar 19, 2026 •

edited

Loading