Refactor: Extract npm package resolution into internal library

[Copilot]

The codebase mixed UI rendering with npm package resolution logic, with direct dependencies on npm-package-arg, pacote, and validate-npm-package-name scattered throughout server and client components.

Changes

Monorepo structure

• Created packages/npm-spec/ as internal workspace package
• Moved destination, canonicalSpec, versionsToSpecs logic to library
• Consolidated all npm package resolution dependencies in one place

Dependency isolation

• Website no longer directly depends on npm package resolution libraries
• Added @internal/npm-spec as workspace dependency
• Re-exported types (Packument, SimplePackageSpec) through library

Client-side compatibility

• Created parsePackageSpec.client.ts for browser-safe package parsing
• Replaced npa imports in client components with client-safe parser
• Updated next.config.ts to externalize library and transitive dependencies

Caching preservation

• Wrapped library's canonicalSpec with Next.js cache directives at callsite
• Library remains framework-agnostic

Before/After

// Before - direct dependency
import npa from "npm-package-arg";
import pacote from "pacote";

// After - through internal library
import { npa, canonicalSpec } from "@internal/npm-spec";

The library is marked private and never published - it exists solely to separate concerns within this monorepo.

Original prompt

I wish to do a major refactoring of the structure of this repo.

The issue is that the code includes a lot of logic for resolving NPM packages and specs, and requires packages like npm-package-arg, pacote and validate-npm-package-name for this purpose. This, to me, makes the structure hard to parse. The code combines rendering of UI with "backend" logic.

My suggestion is to convert the repository into a monorepo, shift the entire canonicalSpec logic into it's own library, and then use that library in the nextjs website package.json.

The goal is that the website does not directly depend on pacote, npm-package-arg, validate-npm-package-name, but instead on some local (never published!) library.

Created from VS Code.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
npm-diff	Error		Jan 14, 2026 0:35am