feat: add dependents page for package reverse-dep lookup#2306
feat: add dependents page for package reverse-dep lookup#2306thealxlabs wants to merge 2 commits intonpmx-dev:mainfrom
Conversation
Adds /package/<name>/dependents showing which packages list this one as a dependency, using the npm search API's dependencies: text filter. - New server API at /api/registry/dependents/[...pkg] (paginated, cached) - New page at /package/[[org]]/[name]/dependents.vue - Dependents tab added to the package navigation header - i18n keys for the new page and nav label
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
📝 WalkthroughWalkthroughThis pull request introduces a new "Dependents" feature that allows users to browse packages that depend on a given package. The implementation includes a new page component for viewing dependent packages with pagination support, an API route that queries npm registry for packages matching a dependency filter, navigation updates to the package header, and corresponding internationalisation translations. The feature is documented in the README as now supported. Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 63a5831b-bd7b-47d6-96ae-3fa11e42147d
📒 Files selected for processing (6)
README.mdapp/components/Package/Header.vueapp/pages/package/[[org]]/[name]/dependents.vuei18n/locales/en.jsoni18n/schema.jsonserver/api/registry/dependents/[...pkg].get.ts
| {{ $t('common.previous') }} | ||
| </ButtonBase> | ||
| <span class="text-sm text-fg-muted font-mono"> {{ page + 1 }} / {{ totalPages }} </span> | ||
| <ButtonBase variant="secondary" :disabled="page >= totalPages - 1" @click="nextPage"> | ||
| {{ $t('common.next') }} |
There was a problem hiding this comment.
Pagination labels use non-existent i18n keys.
common.previous and common.next are not defined; this will render raw keys instead of labels.
🧩 Suggested key fix
- {{ $t('common.previous') }}
+ {{ $t('filters.pagination.previous') }}
@@
- {{ $t('common.next') }}
+ {{ $t('filters.pagination.next') }}📝 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.
| {{ $t('common.previous') }} | |
| </ButtonBase> | |
| <span class="text-sm text-fg-muted font-mono"> {{ page + 1 }} / {{ totalPages }} </span> | |
| <ButtonBase variant="secondary" :disabled="page >= totalPages - 1" @click="nextPage"> | |
| {{ $t('common.next') }} | |
| {{ $t('filters.pagination.previous') }} | |
| </ButtonBase> | |
| <span class="text-sm text-fg-muted font-mono"> {{ page + 1 }} / {{ totalPages }} </span> | |
| <ButtonBase variant="secondary" :disabled="page >= totalPages - 1" `@click`="nextPage"> | |
| {{ $t('filters.pagination.next') }} |
| const page = Number(query.page ?? 0) | ||
| const size = Math.min(Number(query.size ?? 20), 50) |
There was a problem hiding this comment.
Normalise and clamp page/size before both fetch params and cache key.
Negative/NaN/decimal values currently pass through, which can produce invalid offsets and cache-key fragmentation for equivalent effective queries.
🔧 Suggested normalisation
- const page = Number(query.page ?? 0)
- const size = Math.min(Number(query.size ?? 20), 50)
+ const rawPage = Number(query.page ?? 0)
+ const rawSize = Number(query.size ?? 20)
+ const page = Number.isFinite(rawPage) ? Math.max(0, Math.trunc(rawPage)) : 0
+ const size = Number.isFinite(rawSize) ? Math.min(50, Math.max(1, Math.trunc(rawSize))) : 20
@@
getKey: event => {
const pkg = getRouterParam(event, 'pkg') ?? ''
const query = getQuery(event)
- return `dependents:${pkg}:${query.page ?? 0}:${query.size ?? 20}`
+ const keyPage = Number.isFinite(Number(query.page)) ? Math.max(0, Math.trunc(Number(query.page))) : 0
+ const keySize = Number.isFinite(Number(query.size))
+ ? Math.min(50, Math.max(1, Math.trunc(Number(query.size))))
+ : 20
+ return `dependents:${pkg}:${keyPage}:${keySize}`
},Also applies to: 46-49
graphieros
added
the
automation
graphieros
left a comment
graphieros
left a comment
There was a problem hiding this comment.
While AI tools can be helpful for coding assistance, our project requires genuine human involvement. We've outlined this clearly in our contribution guidelines.
If you're genuinely interested in contributing to npmx.dev:
Engage with the community first (issues, discussions). A PR should be linked to an existing issue.
Understand the codebase and what we actually need
Submit thoughtful, individual PRs with your own descriptions
Follow up on feedback and participate in reviews
Use AI as a tool to assist you, not replace you
Mass-generated PRs like these won't be accepted. We welcome real contributions from developers who want to be part of our community.
Please acknowledge by answering this comment, in your own words.
2 participants
Adds
/package/<name>/dependents— a tab showing which packages list a given package as a dependency.What changed
GET /api/registry/dependents/[...pkg]queries the npm search API using thedependencies:text filter and returns paginated results (cached 5 min)app/pages/package/[[org]]/[name]/dependents.vuewith loading, empty, error, and paginated result statesTest
Visit
/package/nuxt/dependentsor/package/vue/dependents— should show packages that depend on it with pagination.