feat: module replacements v3 by gameroman · Pull Request #2068 · npmx-dev/npmx.dev

gameroman · 2026-03-13T21:01:06Z

Module replacements v3

Description

Update module-replacements to v3
Update Compare/ReplacementSuggestion.vue, Package/Replacement.vue, npm/useReplacementDependencies.ts, useCompareReplacements.ts, useModuleReplacement.ts, package/[[org]]/[name].vue, replacements/[...pkg].get.ts accordingly
Remove "MDN" from locales
Update existing tests: a11y.spec.ts, composables/use-replacement-dependencies.spec.ts, composables/use-compare-replacements.spec.ts
Add new test fixture npm-registry/packuments/strip-ansi.json
Add new tests: e2e/compare-replacements.spec.ts, e2e/package-replacements.spec.ts

Screenshots

Simple

Native

Documented

Removal

Compare page

vercel · 2026-03-13T21:01:13Z

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Apr 5, 2026 2:47am
npmx.dev	Ready	Preview, Comment	Apr 5, 2026 2:47am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Apr 5, 2026 2:47am

codecov · 2026-03-13T21:04:57Z

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Compare/ReplacementSuggestion.vue	86.36%	2 Missing and 1 partial ⚠️
app/components/Package/Replacement.vue	85.71%	2 Missing and 1 partial ⚠️
app/composables/useModuleReplacement.ts	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

gameroman · 2026-03-29T20:49:05Z

gameroman · 2026-03-29T21:24:26Z

gameroman · 2026-03-29T22:39:24Z

joaopedrodcf

Hope you guys don't mind me trying to review the PR 🙏

app/components/Compare/ReplacementSuggestion.vue

joaopedrodcf · 2026-03-30T22:41:52Z

app/components/Compare/ReplacementSuggestion.vue

+            <code>{{ replacement.replacementModule }}</code>
+          </template>
+          <template #community>
+            <a


I think we should use NuxtLink but what do you think ?

I think NuxtLink is for internal links?

It also works for external links as far as I know

https://nuxt.com/docs/4.x/api/components/nuxt-link#external-routing

I've kept <a> as that what was there before

joaopedrodcf · 2026-03-30T22:47:48Z

app/pages/package/[[org]]/[name].vue

+          <PackageReplacement
+            v-if="moduleReplacement"
+            :mapping="moduleReplacement.mapping"
+            :replacement="moduleReplacement.replacement"
+          />


I think we always have to options parent fetchs and decides if renders or not or we put that logic inside the component and inside we have a v-if to not render html etc

Maybe you can even have a component packageReplacementIntegration that is responsible to fetch the replacement and the rendering the visual part

43081j · 2026-03-30T22:57:19Z

app/components/Package/Replacement.vue

 })
+
+const replacementDescription = useMarkdown(() => ({
+  text: (props.replacement as { description?: string }).description ?? '',


we should probably just have a shared function in this repo that computes the description:

function getReplacementDescription(replacement) { switch (replacement.type) { case 'documented': return undefined; default: return replacement.description; } }

Should that be in module-replacements itself since it might be useful for other consumers too or just here?

e18e/module-replacements#488

should this use the getReplacementDescription fn you added here?

43081j · 2026-03-30T22:58:10Z

app/composables/npm/useReplacementDependencies.ts

      try {
-        const replacement = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
+        const response = await $fetch<{
+          mapping: ModuleReplacementMapping


@danielroe iirc you said these types are inferred based on the route. is that true? does this not infer them because of the interpolation?

43081j · 2026-03-30T22:59:12Z

app/composables/useCompareReplacements.ts

-    replacements: readonly(replacements),
-    noDepSuggestions: readonly(noDepSuggestions),
-    infoSuggestions: readonly(infoSuggestions),
+    replacements,


are these still readonly? was that dropped on purpose?

as far as I can see seems by mistake,

It was intentional in e16308c because otherwise https://github.com/npmx-dev/npmx.dev/actions/runs/23078681163/job/67043682503 was failing

it should probably be fixed if possible. i.e. keep readonly and figure out why the type error happens

server/api/replacements/[...pkg].get.ts

i18n/locales/en.json

ghostdevv · 2026-04-05T02:51:18Z

app/composables/useCompareReplacements.ts

 /**
 * Replacement types that suggest "no dependency" (can be replaced with native code or inline).
 */
 const NO_DEP_REPLACEMENT_TYPES = ['native', 'simple'] as const


Suggested change

const NO_DEP_REPLACEMENT_TYPES = ['native', 'simple', 'removal'] as const

should this be in here now?

ghostdevv · 2026-04-05T02:52:30Z

app/components/Package/Replacement.vue

 })
+
+const replacementDescription = useMarkdown(() => ({
+  text: (props.replacement as { description?: string }).description ?? '',


should this use the getReplacementDescription fn you added here?

ghostdevv · 2026-04-05T02:53:26Z

server/api/replacements/[...pkg].get.ts

-const replacementMap = new Map<string, ModuleReplacement>(
-  all.moduleReplacements.map(r => [r.moduleName, r]),
+export default defineEventHandler(
+  (event): { mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null => {


is it intentional we only return the first replacement - now there can be multiple right?

Update module-replacements dependency to 3.0.0-beta.0

5ee3927

vercel bot deployed to Preview – docs.npmx.dev March 13, 2026 21:03 View deployment

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

Update [...pkg].get.ts

49dd770

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

wip

f276037

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

use a simpler approach

e528c90

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

revert

ad27978

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

gameroman added 2 commits March 13, 2026 21:55

wip

59ac18c

wip

6422b11

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

gameroman and others added 7 commits March 13, 2026 22:14

Update use-replacement-dependencies.spec.ts

3ecebf0

Update use-replacement-dependencies.spec.ts

7d4198b

Update use-replacement-dependencies.spec.ts

1e94e2d

Update use-replacement-dependencies.spec.ts

7ae1a63

Update Replacement.vue

8e8882b

[autofix.ci] apply automated fixes

1c72e05

Update Replacement.vue

a36b4ce

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

Update Replacement.vue

2464a08

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

gameroman added 2 commits March 13, 2026 23:18

update tests

d6f4b0b

Update use-compare-replacements.spec.ts

83102e3

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

Update use-compare-replacements.spec.ts

363aa2a

fix

06cf980

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

wip

3b01e5e

[autofix.ci] apply automated fixes

b1d49ce

gameroman and others added 4 commits March 29, 2026 23:17

use codeblock

ab45b57

[autofix.ci] apply automated fixes

1c35f17

fix

64d3d68

[autofix.ci] apply automated fixes

a36d2f3

gameroman and others added 5 commits March 29, 2026 23:48

use different strategy

08a3a90

wip

34082cb

[autofix.ci] apply automated fixes

d9d422a

wip

aab96cc

fix

02f622f

joaopedrodcf reviewed Mar 30, 2026

View reviewed changes

43081j reviewed Mar 30, 2026

View reviewed changes

server/api/replacements/[...pkg].get.ts Show resolved Hide resolved

43081j reviewed Mar 30, 2026

View reviewed changes

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

gameroman added 2 commits April 2, 2026 23:26

Merge branch 'main' into module-replacements-v3

e0fa80b

update message

fcb0088

gameroman mentioned this pull request Apr 2, 2026

feat: add getReplacementDescription util e18e/module-replacements#488

Closed

gameroman and others added 5 commits April 3, 2026 12:21

Merge branch 'npmx-dev:main' into module-replacements-v3

604ff27

add getReplacementDescription

ccc0b2f

fix

91e8420

Merge branch 'main' into module-replacements-v3

1edb531

[autofix.ci] apply automated fixes

14cb914

ghostdevv requested changes Apr 5, 2026

View reviewed changes


	const NO_DEP_REPLACEMENT_TYPES = ['native', 'simple', 'removal'] as const

Uh oh!

Conversation

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

Uh oh!

Module replacements v3

Description

Screenshots

Simple

Native

Documented

Removal

Compare page

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

gameroman commented Mar 29, 2026

Uh oh!

gameroman commented Mar 29, 2026

Uh oh!

gameroman commented Mar 29, 2026

Uh oh!

joaopedrodcf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gameroman commented Mar 13, 2026 •

edited

Loading

vercel bot commented Mar 13, 2026 •

edited

Loading

codecov bot commented Mar 13, 2026 •

edited

Loading