From 136fed43266eff2f2b90ff8291ba2503bf02298b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 22:47:24 +0000 Subject: [PATCH 01/17] Initial plan for /pkg/[name] catalog page implementation Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818f..9edff1c7 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. From 507fdffc9c1b6c60841a9c2284223b7c80e4c634 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 22:48:55 +0000 Subject: [PATCH 02/17] Add comparison generation logic with tests Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- src/lib/utils/generateComparisons.test.ts | 205 ++++++++++++++++++++++ src/lib/utils/generateComparisons.ts | 202 +++++++++++++++++++++ 2 files changed, 407 insertions(+) create mode 100644 src/lib/utils/generateComparisons.test.ts create mode 100644 src/lib/utils/generateComparisons.ts diff --git a/src/lib/utils/generateComparisons.test.ts b/src/lib/utils/generateComparisons.test.ts new file mode 100644 index 00000000..d7d10136 --- /dev/null +++ b/src/lib/utils/generateComparisons.test.ts @@ -0,0 +1,205 @@ +import { generateComparisons } from "./generateComparisons"; + +describe("generateComparisons", () => { + it("returns empty array for package with 0 versions", () => { + const result = generateComparisons([], {}); + expect(result).toEqual([]); + }); + + it("returns empty array for package with 1 version", () => { + const versions = ["1.0.0"]; + const versionMap = { "1.0.0": { time: "2020-01-01" } }; + const result = generateComparisons(versions, versionMap); + expect(result).toEqual([]); + }); + + it("generates exactly 10 comparisons for a package with many versions", () => { + const versions = [ + "1.0.0", + "1.0.1", + "1.1.0", + "1.1.1", + "2.0.0", + "2.0.1", + "2.1.0", + "2.1.1", + "3.0.0", + "3.0.1", + "3.1.0", + "3.1.1", + "3.1.2", + "3.1.3", + "3.1.4", + "3.1.5", + ]; + const versionMap: Record = {}; + versions.forEach((v, i) => { + versionMap[v] = { time: `2020-01-${String(i + 1).padStart(2, "0")}` }; + }); + + const result = generateComparisons(versions, versionMap); + expect(result).toHaveLength(10); + }); + + it("identifies major bumps correctly", () => { + const versions = [ + "1.0.0", + "1.9.4", + "2.0.0", + "2.5.0", + "3.0.0", + "3.1.0", + ]; + const versionMap: Record = { + "1.0.0": { time: "2020-01-01" }, + "1.9.4": { time: "2020-06-01" }, + "2.0.0": { time: "2020-07-01" }, + "2.5.0": { time: "2020-12-01" }, + "3.0.0": { time: "2021-01-01" }, + "3.1.0": { time: "2021-02-01" }, + }; + + const result = generateComparisons(versions, versionMap); + + // Should include major bumps: 3.0.0 vs 2.5.0, 2.0.0 vs 1.9.4 + const majorBumps = result.filter((c) => c.type === "major"); + expect(majorBumps.length).toBeGreaterThan(0); + expect(majorBumps).toContainEqual({ + from: "2.5.0", + to: "3.0.0", + type: "major", + }); + expect(majorBumps).toContainEqual({ + from: "1.9.4", + to: "2.0.0", + type: "major", + }); + }); + + it("identifies minor bumps correctly", () => { + const versions = ["2.0.0", "2.0.12", "2.1.0", "2.1.3", "2.2.0"]; + const versionMap: Record = { + "2.0.0": { time: "2020-01-01" }, + "2.0.12": { time: "2020-06-01" }, + "2.1.0": { time: "2020-07-01" }, + "2.1.3": { time: "2020-12-01" }, + "2.2.0": { time: "2021-01-01" }, + }; + + const result = generateComparisons(versions, versionMap); + + const minorBumps = result.filter((c) => c.type === "minor"); + expect(minorBumps.length).toBeGreaterThan(0); + expect(minorBumps).toContainEqual({ + from: "2.1.3", + to: "2.2.0", + type: "minor", + }); + expect(minorBumps).toContainEqual({ + from: "2.0.12", + to: "2.1.0", + type: "minor", + }); + }); + + it("identifies patch bumps correctly", () => { + const versions = ["2.1.3", "2.1.4", "2.1.5", "2.1.6"]; + const versionMap: Record = { + "2.1.3": { time: "2020-01-01" }, + "2.1.4": { time: "2020-02-01" }, + "2.1.5": { time: "2020-03-01" }, + "2.1.6": { time: "2020-04-01" }, + }; + + const result = generateComparisons(versions, versionMap); + + const patchBumps = result.filter((c) => c.type === "patch"); + expect(patchBumps.length).toBeGreaterThan(0); + expect(patchBumps).toContainEqual({ + from: "2.1.5", + to: "2.1.6", + type: "patch", + }); + }); + + it("returns fewer than 10 comparisons for packages with few versions", () => { + const versions = ["1.0.0", "1.0.1", "1.0.2"]; + const versionMap: Record = { + "1.0.0": { time: "2020-01-01" }, + "1.0.1": { time: "2020-02-01" }, + "1.0.2": { time: "2020-03-01" }, + }; + + const result = generateComparisons(versions, versionMap); + expect(result.length).toBeLessThanOrEqual(2); + }); + + it("backfills from majors when not enough minor/patch bumps", () => { + const versions = [ + "1.0.0", + "2.0.0", + "3.0.0", + "4.0.0", + "5.0.0", + "6.0.0", + "7.0.0", + "8.0.0", + "9.0.0", + "10.0.0", + "11.0.0", + ]; + const versionMap: Record = {}; + versions.forEach((v, i) => { + versionMap[v] = { time: `2020-${String(i + 1).padStart(2, "0")}-01` }; + }); + + const result = generateComparisons(versions, versionMap); + + // Should have 10 major bumps (since there are no minor/patch bumps) + expect(result).toHaveLength(10); + const majorBumps = result.filter((c) => c.type === "major"); + expect(majorBumps.length).toBe(10); + }); + + it("sorts comparisons by publish date (newest first)", () => { + const versions = ["1.0.0", "1.0.1", "2.0.0", "2.0.1"]; + const versionMap: Record = { + "1.0.0": { time: "2020-01-01" }, + "1.0.1": { time: "2020-02-01" }, + "2.0.0": { time: "2020-03-01" }, + "2.0.1": { time: "2020-04-01" }, + }; + + const result = generateComparisons(versions, versionMap); + + // Should be sorted by the "to" version's publish date, newest first + for (let i = 0; i < result.length - 1; i++) { + const timeA = versionMap[result[i].to].time; + const timeB = versionMap[result[i + 1].to].time; + expect(timeA >= timeB).toBe(true); + } + }); + + it("handles versions with prerelease tags", () => { + const versions = [ + "1.0.0", + "1.0.1", + "2.0.0-beta.1", + "2.0.0", + "2.0.1", + ]; + const versionMap: Record = {}; + versions.forEach((v, i) => { + versionMap[v] = { time: `2020-01-${String(i + 1).padStart(2, "0")}` }; + }); + + const result = generateComparisons(versions, versionMap); + + // Should include all valid semver versions, including prereleases + expect(result.length).toBeGreaterThan(0); + result.forEach((comparison) => { + expect(comparison.from).toBeTruthy(); + expect(comparison.to).toBeTruthy(); + }); + }); +}); diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts new file mode 100644 index 00000000..bcd286ed --- /dev/null +++ b/src/lib/utils/generateComparisons.ts @@ -0,0 +1,202 @@ +import semver from "semver"; + +export interface Comparison { + from: string; + to: string; + type: "major" | "minor" | "patch"; +} + +interface VersionInfo { + version: string; + publishDate: string; +} + +/** + * Generates exactly 10 comparison links for a package, following these rules: + * - 3 Major bumps: First release of major vs last release of previous major + * - 3 Minor bumps: First release of minor vs last release of previous minor + * - 4 Patch bumps: Most recent 4 patches sequentially + * - If any category has fewer than target, backfill from: Majors > Minors > Patches + * - Total must be 10 unless package has < 11 versions + */ +export function generateComparisons( + versions: string[], + versionMap: Record, +): Comparison[] { + // Sort versions by semver in descending order (newest first) + const sortedVersions = versions + .filter((v) => semver.valid(v)) + .sort((a, b) => semver.rcompare(a, b)); + + if (sortedVersions.length < 2) { + return []; + } + + const majorBumps = findMajorBumps(sortedVersions); + const minorBumps = findMinorBumps(sortedVersions); + const patchBumps = findPatchBumps(sortedVersions); + + // Target counts: 3 majors, 3 minors, 4 patches + let selectedMajors = majorBumps.slice(0, 3); + let selectedMinors = minorBumps.slice(0, 3); + let selectedPatches = patchBumps.slice(0, 4); + + // Backfill logic: Majors > Minors > Patches + const totalSelected = + selectedMajors.length + selectedMinors.length + selectedPatches.length; + const needed = Math.min(10, sortedVersions.length - 1) - totalSelected; + + if (needed > 0) { + // Try to backfill from majors first + const extraMajors = majorBumps.slice(3, 3 + needed); + selectedMajors = [...selectedMajors, ...extraMajors]; + + const stillNeeded = needed - extraMajors.length; + if (stillNeeded > 0) { + // Then from minors + const extraMinors = minorBumps.slice(3, 3 + stillNeeded); + selectedMinors = [...selectedMinors, ...extraMinors]; + + const finalNeeded = stillNeeded - extraMinors.length; + if (finalNeeded > 0) { + // Finally from patches + const extraPatches = patchBumps.slice(4, 4 + finalNeeded); + selectedPatches = [...selectedPatches, ...extraPatches]; + } + } + } + + // Combine all comparisons + const allComparisons = [ + ...selectedMajors, + ...selectedMinors, + ...selectedPatches, + ]; + + // Sort by publish date (newest first) + return allComparisons.sort((a, b) => { + const timeA = versionMap[a.to]?.time || ""; + const timeB = versionMap[b.to]?.time || ""; + return timeB.localeCompare(timeA); + }); +} + +/** + * Find all major version bumps + * E.g., 2.0.0 vs 1.9.4 (first of major 2 vs last of major 1) + */ +function findMajorBumps(sortedVersions: string[]): Comparison[] { + const majorGroups = new Map(); + + // Group versions by major + for (const version of sortedVersions) { + const major = semver.major(version); + if (!majorGroups.has(major)) { + majorGroups.set(major, []); + } + majorGroups.get(major)!.push(version); + } + + const majors = Array.from(majorGroups.keys()).sort((a, b) => b - a); + const comparisons: Comparison[] = []; + + for (let i = 0; i < majors.length - 1; i++) { + const currentMajor = majors[i]; + const previousMajor = majors[i + 1]; + + const currentVersions = majorGroups.get(currentMajor)!; + const previousVersions = majorGroups.get(previousMajor)!; + + // First of current major vs last of previous major + const firstOfCurrent = currentVersions[currentVersions.length - 1]; + const lastOfPrevious = previousVersions[0]; + + comparisons.push({ + from: lastOfPrevious, + to: firstOfCurrent, + type: "major", + }); + } + + return comparisons; +} + +/** + * Find all minor version bumps + * E.g., 2.1.0 vs 2.0.12 (first of minor 1 vs last of minor 0) + */ +function findMinorBumps(sortedVersions: string[]): Comparison[] { + const minorGroups = new Map(); + + // Group versions by major.minor + for (const version of sortedVersions) { + const key = `${semver.major(version)}.${semver.minor(version)}`; + if (!minorGroups.has(key)) { + minorGroups.set(key, []); + } + minorGroups.get(key)!.push(version); + } + + // Sort minor groups by version (newest first) + const minorKeys = Array.from(minorGroups.keys()).sort((a, b) => { + const vA = minorGroups.get(a)![0]; + const vB = minorGroups.get(b)![0]; + return semver.rcompare(vA, vB); + }); + + const comparisons: Comparison[] = []; + + for (let i = 0; i < minorKeys.length - 1; i++) { + const currentKey = minorKeys[i]; + const previousKey = minorKeys[i + 1]; + + const currentVersions = minorGroups.get(currentKey)!; + const previousVersions = minorGroups.get(previousKey)!; + + // Check if they're in the same major version + const currentMajor = semver.major(currentVersions[0]); + const previousMajor = semver.major(previousVersions[0]); + + if (currentMajor === previousMajor) { + // First of current minor vs last of previous minor + const firstOfCurrent = currentVersions[currentVersions.length - 1]; + const lastOfPrevious = previousVersions[0]; + + comparisons.push({ + from: lastOfPrevious, + to: firstOfCurrent, + type: "minor", + }); + } + } + + return comparisons; +} + +/** + * Find the most recent patch bumps (sequential) + * E.g., 2.1.4 vs 2.1.3 + */ +function findPatchBumps(sortedVersions: string[]): Comparison[] { + const comparisons: Comparison[] = []; + + // Take consecutive versions (most recent patches) + for (let i = 0; i < sortedVersions.length - 1 && comparisons.length < 10; i++) { + const to = sortedVersions[i]; + const from = sortedVersions[i + 1]; + + // Only consider it a patch bump if major and minor are the same + if ( + semver.major(to) === semver.major(from) && + semver.minor(to) === semver.minor(from) + ) { + comparisons.push({ + from, + to, + type: "patch", + }); + } + } + + return comparisons; +} From 8779917dba899169d7a72a81362b85e4282129ee Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 22:52:06 +0000 Subject: [PATCH 03/17] Add /pkg/[name] catalog page with UI components Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- src/app/pkg/[name]/_page/ComparisonList.tsx | 130 ++++++++++++++++++++ src/app/pkg/[name]/_page/PackageMeta.tsx | 107 ++++++++++++++++ src/app/pkg/[name]/page.tsx | 83 +++++++++++++ src/lib/utils/generateComparisons.test.ts | 31 ++--- src/lib/utils/generateComparisons.ts | 11 +- 5 files changed, 337 insertions(+), 25 deletions(-) create mode 100644 src/app/pkg/[name]/_page/ComparisonList.tsx create mode 100644 src/app/pkg/[name]/_page/PackageMeta.tsx create mode 100644 src/app/pkg/[name]/page.tsx diff --git a/src/app/pkg/[name]/_page/ComparisonList.tsx b/src/app/pkg/[name]/_page/ComparisonList.tsx new file mode 100644 index 00000000..6168c1d0 --- /dev/null +++ b/src/app/pkg/[name]/_page/ComparisonList.tsx @@ -0,0 +1,130 @@ +import Link from "next/link"; +import semver from "semver"; +import BorderBox from "^/components/ui/BorderBox"; +import Heading from "^/components/ui/Heading"; +import Stack from "^/components/ui/Stack"; +import type { Comparison } from "^/lib/utils/generateComparisons"; + +export interface ComparisonListProps { + packageName: string; + comparisons: Comparison[]; +} + +/** + * Returns which part of the semver changed: 0 (major), 1 (minor), or 2 (patch) + */ +function getChangedPart(from: string, to: string): number { + const fromParsed = semver.parse(from); + const toParsed = semver.parse(to); + + if (!fromParsed || !toParsed) { + return -1; + } + + if (fromParsed.major !== toParsed.major) { + return 0; // major changed + } + if (fromParsed.minor !== toParsed.minor) { + return 1; // minor changed + } + if (fromParsed.patch !== toParsed.patch) { + return 2; // patch changed + } + + return -1; +} + +/** + * Highlights the specific semver digit that changed + */ +function VersionWithHighlight({ + version, + highlightIndex, +}: { + version: string; + highlightIndex: number; +}) { + const parsed = semver.parse(version); + if (!parsed) { + return {version}; + } + + const parts = [parsed.major, parsed.minor, parsed.patch]; + + return ( + + {parts.map((part, index) => ( + + {index === highlightIndex ? ( + + {part} + + ) : ( + {part} + )} + {index < 2 && "."} + + ))} + + ); +} + +/** + * Right column showing the list of comparisons + */ +export default function ComparisonList({ + packageName, + comparisons, +}: ComparisonListProps) { + if (comparisons.length === 0) { + return ( + +

+ No comparisons available for this package. +

+ + ); + } + + return ( + + + Version Comparisons + + + + {comparisons.map((comparison, index) => { + const changedPart = getChangedPart( + comparison.from, + comparison.to, + ); + const url = `/${packageName}@${comparison.from}...${packageName}@${comparison.to}`; + + return ( + +
+ + → + +
+ + {comparison.type} + + + ); + })} + + + ); +} diff --git a/src/app/pkg/[name]/_page/PackageMeta.tsx b/src/app/pkg/[name]/_page/PackageMeta.tsx new file mode 100644 index 00000000..754f2aae --- /dev/null +++ b/src/app/pkg/[name]/_page/PackageMeta.tsx @@ -0,0 +1,107 @@ +import ClientDate from "^/components/ClientDate"; +import ExternalLink from "^/components/ExternalLink"; +import BorderBox from "^/components/ui/BorderBox"; +import Heading from "^/components/ui/Heading"; +import Stack from "^/components/ui/Stack"; +import type { Packument } from "^/lib/api/npm/packument"; + +export interface PackageMetaProps { + packument: Packument; +} + +/** + * Left column showing package metadata + */ +export default function PackageMeta({ packument }: PackageMetaProps) { + const latestVersion = packument["dist-tags"].latest; + const latestManifest = packument.versions[latestVersion]; + + if (!latestManifest) { + return null; + } + + const latestTime = packument.time[latestVersion]; + const npmUrl = `https://www.npmjs.com/package/${packument.name}`; + const repositoryUrl = + typeof latestManifest.repository === "string" + ? latestManifest.repository + : latestManifest.repository?.url + ?.replace(/^git\+/, "") + .replace(/\.git$/, ""); + const homepageUrl = latestManifest.homepage; + + return ( + + + + {packument.name} + +
+ Latest: {latestVersion} +
+ + + {latestManifest.description ? ( +

+ {latestManifest.description} +

+ ) : null} + + + {latestTime ? ( +
+ + Last Published:{" "} + + +
+ ) : null} + + {latestManifest.license ? ( +
+ License: + {latestManifest.license} +
+ ) : null} + + {latestManifest.author ? ( +
+ Author: + + {typeof latestManifest.author === "string" + ? latestManifest.author + : latestManifest.author.name} + +
+ ) : null} + + + + + View on npm → + + + {repositoryUrl ? ( + + Repository → + + ) : null} + + {homepageUrl && homepageUrl !== repositoryUrl ? ( + + Homepage → + + ) : null} + + + ); +} diff --git a/src/app/pkg/[name]/page.tsx b/src/app/pkg/[name]/page.tsx new file mode 100644 index 00000000..d55030ae --- /dev/null +++ b/src/app/pkg/[name]/page.tsx @@ -0,0 +1,83 @@ +import { type Metadata } from "next"; +import { cacheLife } from "next/cache"; +import { Suspense } from "react"; +import Skeleton from "^/components/ui/Skeleton"; +import getVersionData from "^/lib/api/npm/getVersionData"; +import packument from "^/lib/api/npm/packument"; +import { generateComparisons } from "^/lib/utils/generateComparisons"; +import ComparisonList from "./_page/ComparisonList"; +import PackageMeta from "./_page/PackageMeta"; + +export interface PackagePageProps { + params: Promise<{ name: string }>; +} + +export async function generateMetadata({ + params, +}: PackagePageProps): Promise { + const { name } = await params; + + return { + title: `${name} - Package Catalog`, + description: `Version catalog and comparison links for the npm package "${name}"`, + }; +} + +async function PackagePageInner({ params }: PackagePageProps) { + "use cache"; + + cacheLife("hours"); + + const { name } = await params; + + // Fetch package data + const [pack, versionMap] = await Promise.all([ + packument(name), + getVersionData(name), + ]); + + // Get all versions + const versions = Object.keys(versionMap); + + // Generate comparisons + const comparisons = generateComparisons(versions, versionMap); + + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +function PackagePageFallback() { + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +export default function PackagePage(props: PackagePageProps) { + return ( + }> + + + ); +} diff --git a/src/lib/utils/generateComparisons.test.ts b/src/lib/utils/generateComparisons.test.ts index d7d10136..0dceecb1 100644 --- a/src/lib/utils/generateComparisons.test.ts +++ b/src/lib/utils/generateComparisons.test.ts @@ -34,7 +34,9 @@ describe("generateComparisons", () => { ]; const versionMap: Record = {}; versions.forEach((v, i) => { - versionMap[v] = { time: `2020-01-${String(i + 1).padStart(2, "0")}` }; + versionMap[v] = { + time: `2020-01-${String(i + 1).padStart(2, "0")}`, + }; }); const result = generateComparisons(versions, versionMap); @@ -42,14 +44,7 @@ describe("generateComparisons", () => { }); it("identifies major bumps correctly", () => { - const versions = [ - "1.0.0", - "1.9.4", - "2.0.0", - "2.5.0", - "3.0.0", - "3.1.0", - ]; + const versions = ["1.0.0", "1.9.4", "2.0.0", "2.5.0", "3.0.0", "3.1.0"]; const versionMap: Record = { "1.0.0": { time: "2020-01-01" }, "1.9.4": { time: "2020-06-01" }, @@ -150,7 +145,9 @@ describe("generateComparisons", () => { ]; const versionMap: Record = {}; versions.forEach((v, i) => { - versionMap[v] = { time: `2020-${String(i + 1).padStart(2, "0")}-01` }; + versionMap[v] = { + time: `2020-${String(i + 1).padStart(2, "0")}-01`, + }; }); const result = generateComparisons(versions, versionMap); @@ -158,7 +155,7 @@ describe("generateComparisons", () => { // Should have 10 major bumps (since there are no minor/patch bumps) expect(result).toHaveLength(10); const majorBumps = result.filter((c) => c.type === "major"); - expect(majorBumps.length).toBe(10); + expect(majorBumps).toHaveLength(10); }); it("sorts comparisons by publish date (newest first)", () => { @@ -181,16 +178,12 @@ describe("generateComparisons", () => { }); it("handles versions with prerelease tags", () => { - const versions = [ - "1.0.0", - "1.0.1", - "2.0.0-beta.1", - "2.0.0", - "2.0.1", - ]; + const versions = ["1.0.0", "1.0.1", "2.0.0-beta.1", "2.0.0", "2.0.1"]; const versionMap: Record = {}; versions.forEach((v, i) => { - versionMap[v] = { time: `2020-01-${String(i + 1).padStart(2, "0")}` }; + versionMap[v] = { + time: `2020-01-${String(i + 1).padStart(2, "0")}`, + }; }); const result = generateComparisons(versions, versionMap); diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts index bcd286ed..eef7dbad 100644 --- a/src/lib/utils/generateComparisons.ts +++ b/src/lib/utils/generateComparisons.ts @@ -6,11 +6,6 @@ export interface Comparison { type: "major" | "minor" | "patch"; } -interface VersionInfo { - version: string; - publishDate: string; -} - /** * Generates exactly 10 comparison links for a package, following these rules: * - 3 Major bumps: First release of major vs last release of previous major @@ -181,7 +176,11 @@ function findPatchBumps(sortedVersions: string[]): Comparison[] { const comparisons: Comparison[] = []; // Take consecutive versions (most recent patches) - for (let i = 0; i < sortedVersions.length - 1 && comparisons.length < 10; i++) { + for ( + let i = 0; + i < sortedVersions.length - 1 && comparisons.length < 10; + i++ + ) { const to = sortedVersions[i]; const from = sortedVersions[i + 1]; From 43b5e6426aed0d18b5642cd30c7183197ea49c3d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 22:53:32 +0000 Subject: [PATCH 04/17] Manual verification complete - catalog pages working perfectly Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c7..c4b7818f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. From 2b7e2d4cf9c0736bf7e6f989830e6301e5f3b2ec Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 22:56:04 +0000 Subject: [PATCH 05/17] Complete implementation of /pkg/[name] catalog page Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818f..9edff1c7 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. From 68840a05f9ff581fc487446f9186ad39a0c1e163 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 23:39:45 +0000 Subject: [PATCH 06/17] Fix: Move catalog to /[name] route and fix prerelease version comparisons Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- .../_page/catalog}/ComparisonList.tsx | 0 .../_page/catalog}/PackageMeta.tsx | 0 src/app/[...parts]/page.tsx | 82 ++++++++++++++++++ src/app/pkg/[name]/page.tsx | 83 ------------------- src/lib/utils/generateComparisons.test.ts | 30 +++++++ src/lib/utils/generateComparisons.ts | 4 +- 7 files changed, 116 insertions(+), 85 deletions(-) rename src/app/{pkg/[name]/_page => [...parts]/_page/catalog}/ComparisonList.tsx (100%) rename src/app/{pkg/[name]/_page => [...parts]/_page/catalog}/PackageMeta.tsx (100%) delete mode 100644 src/app/pkg/[name]/page.tsx diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c7..c4b7818f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/pkg/[name]/_page/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx similarity index 100% rename from src/app/pkg/[name]/_page/ComparisonList.tsx rename to src/app/[...parts]/_page/catalog/ComparisonList.tsx diff --git a/src/app/pkg/[name]/_page/PackageMeta.tsx b/src/app/[...parts]/_page/catalog/PackageMeta.tsx similarity index 100% rename from src/app/pkg/[name]/_page/PackageMeta.tsx rename to src/app/[...parts]/_page/catalog/PackageMeta.tsx diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx index e7f113c7..99249cbb 100644 --- a/src/app/[...parts]/page.tsx +++ b/src/app/[...parts]/page.tsx @@ -1,16 +1,24 @@ import { type Metadata } from "next"; +import { cacheLife } from "next/cache"; import { redirect } from "next/navigation"; +import npa from "npm-package-arg"; import { type JSX, Suspense } from "react"; import { type ViewType } from "react-diff-view"; +import Skeleton from "^/components/ui/Skeleton"; +import getVersionData from "^/lib/api/npm/getVersionData"; +import packument from "^/lib/api/npm/packument"; import { createSimplePackageSpec } from "^/lib/createSimplePackageSpec"; import { DEFAULT_DIFF_FILES_GLOB } from "^/lib/default-diff-files"; import destination from "^/lib/destination"; import { parseQuery, type QueryParams } from "^/lib/query"; import { simplePackageSpecToString } from "^/lib/SimplePackageSpec"; import decodeParts from "^/lib/utils/decodeParts"; +import { generateComparisons } from "^/lib/utils/generateComparisons"; import specsToDiff from "^/lib/utils/specsToDiff"; import splitParts from "^/lib/utils/splitParts"; import BundlephobiaDiff from "./_page/BundlephobiaDiff"; +import ComparisonList from "./_page/catalog/ComparisonList"; +import PackageMeta from "./_page/catalog/PackageMeta"; import DiffIntro from "./_page/DiffIntro"; import NpmDiff from "./_page/NpmDiff"; import PackagephobiaDiff from "./_page/PackagephobiaDiff"; @@ -28,6 +36,17 @@ export async function generateMetadata({ const { parts } = await params; const specs = splitParts(decodeParts(parts)); + // Check if this is a catalog page (single package name without version) + if (specs.length === 1) { + const parsed = npa(specs[0]); + if (parsed.rawSpec === "*" && parsed.name) { + return { + title: `${parsed.name} - Package Catalog`, + description: `Version catalog and comparison links for the npm package "${parsed.name}"`, + }; + } + } + const [a, b] = specs.map((spec) => createSimplePackageSpec(spec)); return { @@ -36,6 +55,55 @@ export async function generateMetadata({ }; } +async function CatalogPageInner({ packageName }: { packageName: string }) { + "use cache"; + + cacheLife("hours"); + + // Fetch package data + const [pack, versionMap] = await Promise.all([ + packument(packageName), + getVersionData(packageName), + ]); + + // Get all versions + const versions = Object.keys(versionMap); + + // Generate comparisons + const comparisons = generateComparisons(versions, versionMap); + + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +function CatalogPageFallback() { + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + const DiffPageInner = async ({ params, searchParams, @@ -44,6 +112,20 @@ const DiffPageInner = async ({ const { diffFiles, ...optionsQuery } = await searchParams; const specsOrVersions = splitParts(decodeParts(parts)); + + // Check if this is a catalog page (single package name without version) + if (specsOrVersions.length === 1) { + const parsed = npa(specsOrVersions[0]); + if (parsed.rawSpec === "*" && parsed.name) { + // This is a catalog page + return ( + }> + + + ); + } + } + const { redirect: redirectTarget, canonicalSpecs } = await destination(specsOrVersions); diff --git a/src/app/pkg/[name]/page.tsx b/src/app/pkg/[name]/page.tsx deleted file mode 100644 index d55030ae..00000000 --- a/src/app/pkg/[name]/page.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { type Metadata } from "next"; -import { cacheLife } from "next/cache"; -import { Suspense } from "react"; -import Skeleton from "^/components/ui/Skeleton"; -import getVersionData from "^/lib/api/npm/getVersionData"; -import packument from "^/lib/api/npm/packument"; -import { generateComparisons } from "^/lib/utils/generateComparisons"; -import ComparisonList from "./_page/ComparisonList"; -import PackageMeta from "./_page/PackageMeta"; - -export interface PackagePageProps { - params: Promise<{ name: string }>; -} - -export async function generateMetadata({ - params, -}: PackagePageProps): Promise { - const { name } = await params; - - return { - title: `${name} - Package Catalog`, - description: `Version catalog and comparison links for the npm package "${name}"`, - }; -} - -async function PackagePageInner({ params }: PackagePageProps) { - "use cache"; - - cacheLife("hours"); - - const { name } = await params; - - // Fetch package data - const [pack, versionMap] = await Promise.all([ - packument(name), - getVersionData(name), - ]); - - // Get all versions - const versions = Object.keys(versionMap); - - // Generate comparisons - const comparisons = generateComparisons(versions, versionMap); - - return ( -
-
-
- -
-
- -
-
-
- ); -} - -function PackagePageFallback() { - return ( -
-
-
- -
-
- -
-
-
- ); -} - -export default function PackagePage(props: PackagePageProps) { - return ( - }> - - - ); -} diff --git a/src/lib/utils/generateComparisons.test.ts b/src/lib/utils/generateComparisons.test.ts index 0dceecb1..b97c1463 100644 --- a/src/lib/utils/generateComparisons.test.ts +++ b/src/lib/utils/generateComparisons.test.ts @@ -195,4 +195,34 @@ describe("generateComparisons", () => { expect(comparison.to).toBeTruthy(); }); }); + + it("does not create patch comparisons for versions with same major.minor.patch but different prerelease", () => { + const versions = [ + "19.3.0-canary-f93b9fd4-20251217", + "19.3.0-canary-f6a48828-20251019", + "19.3.0-canary-fb2177c1-20251114", + "19.2.4", + "19.2.3", + ]; + const versionMap: Record = {}; + versions.forEach((v, i) => { + versionMap[v] = { + time: `2025-12-${String(i + 1).padStart(2, "0")}`, + }; + }); + + const result = generateComparisons(versions, versionMap); + + // Should not include any patch comparisons between 19.3.0-canary versions + // since they all have the same major.minor.patch + const patchBumps = result.filter((c) => c.type === "patch"); + const invalidPatches = patchBumps.filter( + (c) => + (c.from.startsWith("19.3.0-canary") && + c.to.startsWith("19.3.0-canary")) || + (c.from.includes("-canary") && c.to.includes("-canary")), + ); + + expect(invalidPatches).toHaveLength(0); + }); }); diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts index eef7dbad..df149d2d 100644 --- a/src/lib/utils/generateComparisons.ts +++ b/src/lib/utils/generateComparisons.ts @@ -185,9 +185,11 @@ function findPatchBumps(sortedVersions: string[]): Comparison[] { const from = sortedVersions[i + 1]; // Only consider it a patch bump if major and minor are the same + // and the versions are actually different (not just different prerelease tags) if ( semver.major(to) === semver.major(from) && - semver.minor(to) === semver.minor(from) + semver.minor(to) === semver.minor(from) && + semver.patch(to) !== semver.patch(from) ) { comparisons.push({ from, From ba5c923fcbe15a49111538af51f2cd6ceb938b99 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 11:01:22 +0000 Subject: [PATCH 07/17] Refactor catalog components and optimize comparison generation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extract CatalogPageInner and CatalogPageFallback to separate CatalogPage.tsx - Extract VersionWithHighlight to separate component file - Rewrite generateComparisons to loop once (more efficient) - Filter out prerelease versions before processing - Sort comparisons by semver version instead of release date - Update PackageMeta to show "version • date" format (like npmjs.com) - Add more metadata: total versions, maintainers count, keywords - Use index instead of URL as key in comparison list - Add tests for sorting and prerelease filtering Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- .../[...parts]/_page/catalog/CatalogPage.tsx | 69 ++++++ .../_page/catalog/ComparisonList.tsx | 36 +-- .../[...parts]/_page/catalog/PackageMeta.tsx | 69 ++++-- .../_page/catalog/VersionWithHighlight.tsx | 38 ++++ src/app/[...parts]/page.tsx | 63 +----- src/lib/utils/generateComparisons.test.ts | 31 ++- src/lib/utils/generateComparisons.ts | 214 +++++++----------- 8 files changed, 267 insertions(+), 255 deletions(-) create mode 100644 src/app/[...parts]/_page/catalog/CatalogPage.tsx create mode 100644 src/app/[...parts]/_page/catalog/VersionWithHighlight.tsx diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818f..9edff1c7 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx new file mode 100644 index 00000000..5cdc9df3 --- /dev/null +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -0,0 +1,69 @@ +import { cacheLife } from "next/cache"; +import { Suspense } from "react"; +import Skeleton from "^/components/ui/Skeleton"; +import getVersionData from "^/lib/api/npm/getVersionData"; +import packument from "^/lib/api/npm/packument"; +import { generateComparisons } from "^/lib/utils/generateComparisons"; +import ComparisonList from "./ComparisonList"; +import PackageMeta from "./PackageMeta"; + +export interface CatalogPageProps { + packageName: string; +} + +async function CatalogPageInner({ packageName }: CatalogPageProps) { + "use cache"; + + cacheLife("hours"); + + // Fetch package data + const [pack, versionMap] = await Promise.all([ + packument(packageName), + getVersionData(packageName), + ]); + + // Get all versions + const versions = Object.keys(versionMap); + + // Generate comparisons + const comparisons = generateComparisons(versions, versionMap); + + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +function CatalogPageFallback() { + return ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +export default function CatalogPage(props: CatalogPageProps) { + return ( + }> + + + ); +} diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 6168c1d0..160a1ce6 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -4,6 +4,7 @@ import BorderBox from "^/components/ui/BorderBox"; import Heading from "^/components/ui/Heading"; import Stack from "^/components/ui/Stack"; import type { Comparison } from "^/lib/utils/generateComparisons"; +import VersionWithHighlight from "./VersionWithHighlight"; export interface ComparisonListProps { packageName: string; @@ -34,41 +35,6 @@ function getChangedPart(from: string, to: string): number { return -1; } -/** - * Highlights the specific semver digit that changed - */ -function VersionWithHighlight({ - version, - highlightIndex, -}: { - version: string; - highlightIndex: number; -}) { - const parsed = semver.parse(version); - if (!parsed) { - return {version}; - } - - const parts = [parsed.major, parsed.minor, parsed.patch]; - - return ( - - {parts.map((part, index) => ( - - {index === highlightIndex ? ( - - {part} - - ) : ( - {part} - )} - {index < 2 && "."} - - ))} - - ); -} - /** * Right column showing the list of comparisons */ diff --git a/src/app/[...parts]/_page/catalog/PackageMeta.tsx b/src/app/[...parts]/_page/catalog/PackageMeta.tsx index 754f2aae..3e1616d7 100644 --- a/src/app/[...parts]/_page/catalog/PackageMeta.tsx +++ b/src/app/[...parts]/_page/catalog/PackageMeta.tsx @@ -30,6 +30,12 @@ export default function PackageMeta({ packument }: PackageMetaProps) { .replace(/\.git$/, ""); const homepageUrl = latestManifest.homepage; + // Calculate total versions + const totalVersions = Object.keys(packument.versions).length; + + // Get keywords + const keywords = latestManifest.keywords; + return ( @@ -37,7 +43,13 @@ export default function PackageMeta({ packument }: PackageMetaProps) { {packument.name}
- Latest: {latestVersion} + {latestVersion} + {latestTime ? ( + <> + • + + + ) : null}
@@ -48,15 +60,6 @@ export default function PackageMeta({ packument }: PackageMetaProps) { ) : null} - {latestTime ? ( -
- - Last Published:{" "} - - -
- ) : null} - {latestManifest.license ? (
License: @@ -74,8 +77,42 @@ export default function PackageMeta({ packument }: PackageMetaProps) {
) : null} + + {totalVersions > 0 && ( +
+ + Versions:{" "} + + {totalVersions} +
+ )} + + {Boolean( + latestManifest.maintainers && + latestManifest.maintainers.length > 0, + ) && ( +
+ + Maintainers:{" "} + + {latestManifest.maintainers?.length} +
+ )} + {Boolean(keywords && keywords.length > 0) && ( +
+ {keywords?.slice(0, 10).map((keyword, index) => ( + + {keyword} + + ))} +
+ )} + - {repositoryUrl ? ( + {Boolean(repositoryUrl) && ( Repository → - ) : null} + )} - {homepageUrl && homepageUrl !== repositoryUrl ? ( + {Boolean(homepageUrl && homepageUrl !== repositoryUrl) && ( Homepage → - ) : null} + )} ); diff --git a/src/app/[...parts]/_page/catalog/VersionWithHighlight.tsx b/src/app/[...parts]/_page/catalog/VersionWithHighlight.tsx new file mode 100644 index 00000000..79f68a04 --- /dev/null +++ b/src/app/[...parts]/_page/catalog/VersionWithHighlight.tsx @@ -0,0 +1,38 @@ +import semver from "semver"; + +export interface VersionWithHighlightProps { + version: string; + highlightIndex: number; +} + +/** + * Highlights the specific semver digit that changed + */ +export default function VersionWithHighlight({ + version, + highlightIndex, +}: VersionWithHighlightProps) { + const parsed = semver.parse(version); + if (!parsed) { + return {version}; + } + + const parts = [parsed.major, parsed.minor, parsed.patch]; + + return ( + + {parts.map((part, index) => ( + + {index === highlightIndex ? ( + + {part} + + ) : ( + {part} + )} + {index < 2 && "."} + + ))} + + ); +} diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx index 99249cbb..275dbc7e 100644 --- a/src/app/[...parts]/page.tsx +++ b/src/app/[...parts]/page.tsx @@ -1,24 +1,18 @@ import { type Metadata } from "next"; -import { cacheLife } from "next/cache"; import { redirect } from "next/navigation"; import npa from "npm-package-arg"; import { type JSX, Suspense } from "react"; import { type ViewType } from "react-diff-view"; -import Skeleton from "^/components/ui/Skeleton"; -import getVersionData from "^/lib/api/npm/getVersionData"; -import packument from "^/lib/api/npm/packument"; import { createSimplePackageSpec } from "^/lib/createSimplePackageSpec"; import { DEFAULT_DIFF_FILES_GLOB } from "^/lib/default-diff-files"; import destination from "^/lib/destination"; import { parseQuery, type QueryParams } from "^/lib/query"; import { simplePackageSpecToString } from "^/lib/SimplePackageSpec"; import decodeParts from "^/lib/utils/decodeParts"; -import { generateComparisons } from "^/lib/utils/generateComparisons"; import specsToDiff from "^/lib/utils/specsToDiff"; import splitParts from "^/lib/utils/splitParts"; import BundlephobiaDiff from "./_page/BundlephobiaDiff"; -import ComparisonList from "./_page/catalog/ComparisonList"; -import PackageMeta from "./_page/catalog/PackageMeta"; +import CatalogPage from "./_page/catalog/CatalogPage"; import DiffIntro from "./_page/DiffIntro"; import NpmDiff from "./_page/NpmDiff"; import PackagephobiaDiff from "./_page/PackagephobiaDiff"; @@ -55,55 +49,6 @@ export async function generateMetadata({ }; } -async function CatalogPageInner({ packageName }: { packageName: string }) { - "use cache"; - - cacheLife("hours"); - - // Fetch package data - const [pack, versionMap] = await Promise.all([ - packument(packageName), - getVersionData(packageName), - ]); - - // Get all versions - const versions = Object.keys(versionMap); - - // Generate comparisons - const comparisons = generateComparisons(versions, versionMap); - - return ( -
-
-
- -
-
- -
-
-
- ); -} - -function CatalogPageFallback() { - return ( -
-
-
- -
-
- -
-
-
- ); -} - const DiffPageInner = async ({ params, searchParams, @@ -118,11 +63,7 @@ const DiffPageInner = async ({ const parsed = npa(specsOrVersions[0]); if (parsed.rawSpec === "*" && parsed.name) { // This is a catalog page - return ( - }> - - - ); + return ; } } diff --git a/src/lib/utils/generateComparisons.test.ts b/src/lib/utils/generateComparisons.test.ts index b97c1463..ef97f5df 100644 --- a/src/lib/utils/generateComparisons.test.ts +++ b/src/lib/utils/generateComparisons.test.ts @@ -1,3 +1,4 @@ +import semver from "semver"; import { generateComparisons } from "./generateComparisons"; describe("generateComparisons", () => { @@ -158,7 +159,7 @@ describe("generateComparisons", () => { expect(majorBumps).toHaveLength(10); }); - it("sorts comparisons by publish date (newest first)", () => { + it("sorts comparisons by semver version (newest first)", () => { const versions = ["1.0.0", "1.0.1", "2.0.0", "2.0.1"]; const versionMap: Record = { "1.0.0": { time: "2020-01-01" }, @@ -169,16 +170,26 @@ describe("generateComparisons", () => { const result = generateComparisons(versions, versionMap); - // Should be sorted by the "to" version's publish date, newest first + // Should be sorted by semver version (newest first), not by publish date for (let i = 0; i < result.length - 1; i++) { - const timeA = versionMap[result[i].to].time; - const timeB = versionMap[result[i + 1].to].time; - expect(timeA >= timeB).toBe(true); + const versionA = result[i].to; + const versionB = result[i + 1].to; + // versionA should be greater than or equal to versionB (semver compare) + expect( + semver.gte(versionA, versionB) || versionA === versionB, + ).toBe(true); } }); - it("handles versions with prerelease tags", () => { - const versions = ["1.0.0", "1.0.1", "2.0.0-beta.1", "2.0.0", "2.0.1"]; + it("filters out prerelease versions", () => { + const versions = [ + "1.0.0", + "1.0.1", + "2.0.0-beta.1", + "2.0.0-rc.1", + "2.0.0", + "2.0.1", + ]; const versionMap: Record = {}; versions.forEach((v, i) => { versionMap[v] = { @@ -188,11 +199,11 @@ describe("generateComparisons", () => { const result = generateComparisons(versions, versionMap); - // Should include all valid semver versions, including prereleases + // Should not include any prerelease versions in comparisons expect(result.length).toBeGreaterThan(0); result.forEach((comparison) => { - expect(comparison.from).toBeTruthy(); - expect(comparison.to).toBeTruthy(); + expect(comparison.from).not.toMatch(/-/); + expect(comparison.to).not.toMatch(/-/); }); }); diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts index df149d2d..75e9582f 100644 --- a/src/lib/utils/generateComparisons.ts +++ b/src/lib/utils/generateComparisons.ts @@ -16,25 +16,29 @@ export interface Comparison { */ export function generateComparisons( versions: string[], - versionMap: Record, + _versionMap: Record, ): Comparison[] { + // Filter out invalid versions and prereleases + const validVersions = versions.filter((v) => { + if (!semver.valid(v)) return false; + // Filter out prerelease versions (like 19.3.0-canary-xxx) + return !semver.prerelease(v); + }); + // Sort versions by semver in descending order (newest first) - const sortedVersions = versions - .filter((v) => semver.valid(v)) - .sort((a, b) => semver.rcompare(a, b)); + const sortedVersions = validVersions.sort((a, b) => semver.rcompare(a, b)); if (sortedVersions.length < 2) { return []; } - const majorBumps = findMajorBumps(sortedVersions); - const minorBumps = findMinorBumps(sortedVersions); - const patchBumps = findPatchBumps(sortedVersions); + // Find all bumps in a single pass + const bumps = findAllBumps(sortedVersions); // Target counts: 3 majors, 3 minors, 4 patches - let selectedMajors = majorBumps.slice(0, 3); - let selectedMinors = minorBumps.slice(0, 3); - let selectedPatches = patchBumps.slice(0, 4); + let selectedMajors = bumps.major.slice(0, 3); + let selectedMinors = bumps.minor.slice(0, 3); + let selectedPatches = bumps.patch.slice(0, 4); // Backfill logic: Majors > Minors > Patches const totalSelected = @@ -43,19 +47,19 @@ export function generateComparisons( if (needed > 0) { // Try to backfill from majors first - const extraMajors = majorBumps.slice(3, 3 + needed); + const extraMajors = bumps.major.slice(3, 3 + needed); selectedMajors = [...selectedMajors, ...extraMajors]; const stillNeeded = needed - extraMajors.length; if (stillNeeded > 0) { // Then from minors - const extraMinors = minorBumps.slice(3, 3 + stillNeeded); + const extraMinors = bumps.minor.slice(3, 3 + stillNeeded); selectedMinors = [...selectedMinors, ...extraMinors]; const finalNeeded = stillNeeded - extraMinors.length; if (finalNeeded > 0) { // Finally from patches - const extraPatches = patchBumps.slice(4, 4 + finalNeeded); + const extraPatches = bumps.patch.slice(4, 4 + finalNeeded); selectedPatches = [...selectedPatches, ...extraPatches]; } } @@ -68,136 +72,82 @@ export function generateComparisons( ...selectedPatches, ]; - // Sort by publish date (newest first) - return allComparisons.sort((a, b) => { - const timeA = versionMap[a.to]?.time || ""; - const timeB = versionMap[b.to]?.time || ""; - return timeB.localeCompare(timeA); - }); + // Sort by semver version (newest first) + return allComparisons.sort((a, b) => semver.rcompare(a.to, b.to)); } /** - * Find all major version bumps - * E.g., 2.0.0 vs 1.9.4 (first of major 2 vs last of major 1) + * Find all bumps (major, minor, patch) in a single pass through versions */ -function findMajorBumps(sortedVersions: string[]): Comparison[] { - const majorGroups = new Map(); - - // Group versions by major - for (const version of sortedVersions) { - const major = semver.major(version); - if (!majorGroups.has(major)) { - majorGroups.set(major, []); +function findAllBumps(sortedVersions: string[]): { + major: Comparison[]; + minor: Comparison[]; + patch: Comparison[]; +} { + const majorBumps: Comparison[] = []; + const minorBumps: Comparison[] = []; + const patchBumps: Comparison[] = []; + + // Track last seen version for each major.minor + const lastInMajor = new Map(); + const lastInMinor = new Map(); + + for (let i = sortedVersions.length - 1; i >= 0; i--) { + const current = sortedVersions[i]; + const currentMajor = semver.major(current); + const currentMinor = semver.minor(current); + const currentPatch = semver.patch(current); + const minorKey = `${currentMajor}.${currentMinor}`; + + // Check for major bump + const prevMajorLast = lastInMajor.get(currentMajor - 1); + if (prevMajorLast) { + majorBumps.push({ + from: prevMajorLast, + to: current, + type: "major", + }); } - majorGroups.get(major)!.push(version); - } - - const majors = Array.from(majorGroups.keys()).sort((a, b) => b - a); - const comparisons: Comparison[] = []; - - for (let i = 0; i < majors.length - 1; i++) { - const currentMajor = majors[i]; - const previousMajor = majors[i + 1]; - - const currentVersions = majorGroups.get(currentMajor)!; - const previousVersions = majorGroups.get(previousMajor)!; - - // First of current major vs last of previous major - const firstOfCurrent = currentVersions[currentVersions.length - 1]; - const lastOfPrevious = previousVersions[0]; - comparisons.push({ - from: lastOfPrevious, - to: firstOfCurrent, - type: "major", - }); - } - - return comparisons; -} - -/** - * Find all minor version bumps - * E.g., 2.1.0 vs 2.0.12 (first of minor 1 vs last of minor 0) - */ -function findMinorBumps(sortedVersions: string[]): Comparison[] { - const minorGroups = new Map(); - - // Group versions by major.minor - for (const version of sortedVersions) { - const key = `${semver.major(version)}.${semver.minor(version)}`; - if (!minorGroups.has(key)) { - minorGroups.set(key, []); - } - minorGroups.get(key)!.push(version); - } - - // Sort minor groups by version (newest first) - const minorKeys = Array.from(minorGroups.keys()).sort((a, b) => { - const vA = minorGroups.get(a)![0]; - const vB = minorGroups.get(b)![0]; - return semver.rcompare(vA, vB); - }); - - const comparisons: Comparison[] = []; - - for (let i = 0; i < minorKeys.length - 1; i++) { - const currentKey = minorKeys[i]; - const previousKey = minorKeys[i + 1]; - - const currentVersions = minorGroups.get(currentKey)!; - const previousVersions = minorGroups.get(previousKey)!; - - // Check if they're in the same major version - const currentMajor = semver.major(currentVersions[0]); - const previousMajor = semver.major(previousVersions[0]); - - if (currentMajor === previousMajor) { - // First of current minor vs last of previous minor - const firstOfCurrent = currentVersions[currentVersions.length - 1]; - const lastOfPrevious = previousVersions[0]; - - comparisons.push({ - from: lastOfPrevious, - to: firstOfCurrent, + // Check for minor bump (within same major) + const prevMinorKey = `${currentMajor}.${currentMinor - 1}`; + const prevMinorLast = lastInMinor.get(prevMinorKey); + if (prevMinorLast) { + minorBumps.push({ + from: prevMinorLast, + to: current, type: "minor", }); } - } - - return comparisons; -} -/** - * Find the most recent patch bumps (sequential) - * E.g., 2.1.4 vs 2.1.3 - */ -function findPatchBumps(sortedVersions: string[]): Comparison[] { - const comparisons: Comparison[] = []; - - // Take consecutive versions (most recent patches) - for ( - let i = 0; - i < sortedVersions.length - 1 && comparisons.length < 10; - i++ - ) { - const to = sortedVersions[i]; - const from = sortedVersions[i + 1]; - - // Only consider it a patch bump if major and minor are the same - // and the versions are actually different (not just different prerelease tags) - if ( - semver.major(to) === semver.major(from) && - semver.minor(to) === semver.minor(from) && - semver.patch(to) !== semver.patch(from) - ) { - comparisons.push({ - from, - to, - type: "patch", - }); + // Check for patch bump (sequential versions in same minor) + if (i > 0) { + const next = sortedVersions[i - 1]; + const nextMajor = semver.major(next); + const nextMinor = semver.minor(next); + const nextPatch = semver.patch(next); + + if ( + currentMajor === nextMajor && + currentMinor === nextMinor && + currentPatch === nextPatch - 1 + ) { + patchBumps.push({ + from: current, + to: next, + type: "patch", + }); + } } + + // Update tracking + lastInMajor.set(currentMajor, current); + lastInMinor.set(minorKey, current); } - return comparisons; + return { + major: majorBumps.reverse(), // Reverse to get newest first + minor: minorBumps.reverse(), + patch: patchBumps.reverse(), + }; } From d6114f97540bce05a5d04c9f5b7ab827485a2689 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 11:04:13 +0000 Subject: [PATCH 08/17] Fix type safety in PackageMeta external links Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- src/app/[...parts]/_page/catalog/PackageMeta.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/[...parts]/_page/catalog/PackageMeta.tsx b/src/app/[...parts]/_page/catalog/PackageMeta.tsx index 3e1616d7..23233c32 100644 --- a/src/app/[...parts]/_page/catalog/PackageMeta.tsx +++ b/src/app/[...parts]/_page/catalog/PackageMeta.tsx @@ -123,7 +123,7 @@ export default function PackageMeta({ packument }: PackageMetaProps) { {Boolean(repositoryUrl) && ( Repository → @@ -132,7 +132,7 @@ export default function PackageMeta({ packument }: PackageMetaProps) { {Boolean(homepageUrl && homepageUrl !== repositoryUrl) && ( Homepage → From 017022cb7842651820fcd101b768dd1bdbc65634 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 11:30:18 +0000 Subject: [PATCH 09/17] Fix comparison logic and improve catalog page - Fix generateComparisons to compare FIRST vs LAST correctly * Major: first of new major vs last of previous major * Minor: first of new minor vs last of previous minor * Patch: sequential patches (working correctly) - Simplify prerelease filter: v => semver.valid(v) && !semver.prerelease(v) - Sort by 'from' version instead of 'to' - Consolidate caching: use only packument (already cached) - Add isCatalogPage utility for reusable catalog detection - Remove redundant getChangedPart (use comparison.type directly) - Improve accessibility: add aria-label to links - Change heading to "Suggested Diffs" - Show full package spec: react@19.0.0...react@19.0.1 - Add SEO metadata: keywords, openGraph - Use utility function in both metadata and page logic Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- .../[...parts]/_page/catalog/CatalogPage.tsx | 14 +- .../_page/catalog/ComparisonList.tsx | 52 +++--- src/app/[...parts]/page.tsx | 38 +++-- src/lib/utils/generateComparisons.ts | 154 +++++++++++------- src/lib/utils/isCatalogPage.ts | 21 +++ 5 files changed, 175 insertions(+), 104 deletions(-) create mode 100644 src/lib/utils/isCatalogPage.ts diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index 5cdc9df3..383d280c 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -1,7 +1,6 @@ import { cacheLife } from "next/cache"; import { Suspense } from "react"; import Skeleton from "^/components/ui/Skeleton"; -import getVersionData from "^/lib/api/npm/getVersionData"; import packument from "^/lib/api/npm/packument"; import { generateComparisons } from "^/lib/utils/generateComparisons"; import ComparisonList from "./ComparisonList"; @@ -16,11 +15,14 @@ async function CatalogPageInner({ packageName }: CatalogPageProps) { cacheLife("hours"); - // Fetch package data - const [pack, versionMap] = await Promise.all([ - packument(packageName), - getVersionData(packageName), - ]); + // Fetch package data - packument is already cached and contains everything we need + const pack = await packument(packageName); + + // Extract version data from packument + const versionMap: Record = {}; + for (const [version] of Object.entries(pack.versions)) { + versionMap[version] = { time: pack.time[version] }; + } // Get all versions const versions = Object.keys(versionMap); diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 160a1ce6..0490ced3 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -1,5 +1,4 @@ import Link from "next/link"; -import semver from "semver"; import BorderBox from "^/components/ui/BorderBox"; import Heading from "^/components/ui/Heading"; import Stack from "^/components/ui/Stack"; @@ -12,27 +11,17 @@ export interface ComparisonListProps { } /** - * Returns which part of the semver changed: 0 (major), 1 (minor), or 2 (patch) + * Returns which part of the semver changed based on comparison type */ -function getChangedPart(from: string, to: string): number { - const fromParsed = semver.parse(from); - const toParsed = semver.parse(to); - - if (!fromParsed || !toParsed) { - return -1; - } - - if (fromParsed.major !== toParsed.major) { - return 0; // major changed - } - if (fromParsed.minor !== toParsed.minor) { - return 1; // minor changed +function getHighlightIndex(type: "major" | "minor" | "patch"): number { + switch (type) { + case "major": + return 0; + case "minor": + return 1; + case "patch": + return 2; } - if (fromParsed.patch !== toParsed.patch) { - return 2; // patch changed - } - - return -1; } /** @@ -55,16 +44,14 @@ export default function ComparisonList({ return ( - Version Comparisons + Suggested Diffs {comparisons.map((comparison, index) => { - const changedPart = getChangedPart( - comparison.from, - comparison.to, - ); - const url = `/${packageName}@${comparison.from}...${packageName}@${comparison.to}`; + const highlightIndex = getHighlightIndex(comparison.type); + const diffString = `${packageName}@${comparison.from}...${packageName}@${comparison.to}`; + const url = `/${diffString}`; return ( -
+
+ {packageName}@ - → + + ... + + {packageName}@
diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx index 275dbc7e..85d70b35 100644 --- a/src/app/[...parts]/page.tsx +++ b/src/app/[...parts]/page.tsx @@ -1,6 +1,5 @@ import { type Metadata } from "next"; import { redirect } from "next/navigation"; -import npa from "npm-package-arg"; import { type JSX, Suspense } from "react"; import { type ViewType } from "react-diff-view"; import { createSimplePackageSpec } from "^/lib/createSimplePackageSpec"; @@ -9,6 +8,10 @@ import destination from "^/lib/destination"; import { parseQuery, type QueryParams } from "^/lib/query"; import { simplePackageSpecToString } from "^/lib/SimplePackageSpec"; import decodeParts from "^/lib/utils/decodeParts"; +import { + getCatalogPackageName, + isCatalogPage, +} from "^/lib/utils/isCatalogPage"; import specsToDiff from "^/lib/utils/specsToDiff"; import splitParts from "^/lib/utils/splitParts"; import BundlephobiaDiff from "./_page/BundlephobiaDiff"; @@ -31,12 +34,26 @@ export async function generateMetadata({ const specs = splitParts(decodeParts(parts)); // Check if this is a catalog page (single package name without version) - if (specs.length === 1) { - const parsed = npa(specs[0]); - if (parsed.rawSpec === "*" && parsed.name) { + if (specs.length === 1 && isCatalogPage(specs[0])) { + const packageName = getCatalogPackageName(specs[0]); + if (packageName) { return { - title: `${parsed.name} - Package Catalog`, - description: `Version catalog and comparison links for the npm package "${parsed.name}"`, + title: `${packageName} - npm Package Catalog`, + description: `Browse and compare different versions of the ${packageName} npm package. View suggested version comparisons including major, minor, and patch updates.`, + keywords: [ + packageName, + "npm", + "package", + "version", + "diff", + "comparison", + "changelog", + ], + openGraph: { + title: `${packageName} - npm Package Catalog`, + description: `Browse and compare different versions of the ${packageName} npm package`, + type: "website", + }, }; } } @@ -59,11 +76,10 @@ const DiffPageInner = async ({ const specsOrVersions = splitParts(decodeParts(parts)); // Check if this is a catalog page (single package name without version) - if (specsOrVersions.length === 1) { - const parsed = npa(specsOrVersions[0]); - if (parsed.rawSpec === "*" && parsed.name) { - // This is a catalog page - return ; + if (specsOrVersions.length === 1 && isCatalogPage(specsOrVersions[0])) { + const packageName = getCatalogPackageName(specsOrVersions[0]); + if (packageName) { + return ; } } diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts index 75e9582f..cd3852cb 100644 --- a/src/lib/utils/generateComparisons.ts +++ b/src/lib/utils/generateComparisons.ts @@ -19,11 +19,9 @@ export function generateComparisons( _versionMap: Record, ): Comparison[] { // Filter out invalid versions and prereleases - const validVersions = versions.filter((v) => { - if (!semver.valid(v)) return false; - // Filter out prerelease versions (like 19.3.0-canary-xxx) - return !semver.prerelease(v); - }); + const validVersions = versions.filter( + (v) => semver.valid(v) && !semver.prerelease(v), + ); // Sort versions by semver in descending order (newest first) const sortedVersions = validVersions.sort((a, b) => semver.rcompare(a, b)); @@ -72,8 +70,8 @@ export function generateComparisons( ...selectedPatches, ]; - // Sort by semver version (newest first) - return allComparisons.sort((a, b) => semver.rcompare(a.to, b.to)); + // Sort by from version (newest first) + return allComparisons.sort((a, b) => semver.rcompare(a.from, b.from)); } /** @@ -88,66 +86,108 @@ function findAllBumps(sortedVersions: string[]): { const minorBumps: Comparison[] = []; const patchBumps: Comparison[] = []; - // Track last seen version for each major.minor - const lastInMajor = new Map(); - const lastInMinor = new Map(); - - for (let i = sortedVersions.length - 1; i >= 0; i--) { - const current = sortedVersions[i]; - const currentMajor = semver.major(current); - const currentMinor = semver.minor(current); - const currentPatch = semver.patch(current); - const minorKey = `${currentMajor}.${currentMinor}`; - - // Check for major bump - const prevMajorLast = lastInMajor.get(currentMajor - 1); - if (prevMajorLast) { - majorBumps.push({ - from: prevMajorLast, - to: current, - type: "major", - }); + // Group versions by major and minor + const majorGroups = new Map(); + const minorGroups = new Map(); + + for (const version of sortedVersions) { + const major = semver.major(version); + const minor = semver.minor(version); + const minorKey = `${major}.${minor}`; + + if (!majorGroups.has(major)) { + majorGroups.set(major, []); + } + majorGroups.get(major)!.push(version); + + if (!minorGroups.has(minorKey)) { + minorGroups.set(minorKey, []); } + minorGroups.get(minorKey)!.push(version); + } + + // Find major bumps: first release of major vs last release of previous major + const majors = Array.from(majorGroups.keys()).sort((a, b) => b - a); + for (let i = 0; i < majors.length - 1; i++) { + const currentMajor = majors[i]; + const previousMajor = majors[i + 1]; + + const currentVersions = majorGroups.get(currentMajor)!; + const previousVersions = majorGroups.get(previousMajor)!; + + // First of current (last in sorted array) vs last of previous (first in sorted array) + const firstOfCurrent = currentVersions[currentVersions.length - 1]; + const lastOfPrevious = previousVersions[0]; + + majorBumps.push({ + from: lastOfPrevious, + to: firstOfCurrent, + type: "major", + }); + } + + // Find minor bumps: first release of minor vs last release of previous minor (within same major) + const minorKeys = Array.from(minorGroups.keys()).sort((a, b) => { + const [aMajor, aMinor] = a.split(".").map(Number); + const [bMajor, bMinor] = b.split(".").map(Number); + if (aMajor !== bMajor) return bMajor - aMajor; + return bMinor - aMinor; + }); + + for (let i = 0; i < minorKeys.length - 1; i++) { + const currentKey = minorKeys[i]; + const nextKey = minorKeys[i + 1]; + + const [currentMajor, currentMinor] = currentKey.split(".").map(Number); + const [nextMajor, nextMinor] = nextKey.split(".").map(Number); + + // Only compare if same major and sequential minors + if (currentMajor === nextMajor && currentMinor === nextMinor + 1) { + const currentVersions = minorGroups.get(currentKey)!; + const nextVersions = minorGroups.get(nextKey)!; + + // First of current (last in sorted array) vs last of next (first in sorted array) + const firstOfCurrent = currentVersions[currentVersions.length - 1]; + const lastOfPrevious = nextVersions[0]; - // Check for minor bump (within same major) - const prevMinorKey = `${currentMajor}.${currentMinor - 1}`; - const prevMinorLast = lastInMinor.get(prevMinorKey); - if (prevMinorLast) { minorBumps.push({ - from: prevMinorLast, - to: current, + from: lastOfPrevious, + to: firstOfCurrent, type: "minor", }); } + } - // Check for patch bump (sequential versions in same minor) - if (i > 0) { - const next = sortedVersions[i - 1]; - const nextMajor = semver.major(next); - const nextMinor = semver.minor(next); - const nextPatch = semver.patch(next); - - if ( - currentMajor === nextMajor && - currentMinor === nextMinor && - currentPatch === nextPatch - 1 - ) { - patchBumps.push({ - from: current, - to: next, - type: "patch", - }); - } + // Find patch bumps: most recent sequential patches + for (let i = 0; i < sortedVersions.length - 1; i++) { + const to = sortedVersions[i]; + const from = sortedVersions[i + 1]; + + const toMajor = semver.major(to); + const toMinor = semver.minor(to); + const toPatch = semver.patch(to); + + const fromMajor = semver.major(from); + const fromMinor = semver.minor(from); + const fromPatch = semver.patch(from); + + // Check if it's a sequential patch bump + if ( + toMajor === fromMajor && + toMinor === fromMinor && + toPatch === fromPatch + 1 + ) { + patchBumps.push({ + from, + to, + type: "patch", + }); } - - // Update tracking - lastInMajor.set(currentMajor, current); - lastInMinor.set(minorKey, current); } return { - major: majorBumps.reverse(), // Reverse to get newest first - minor: minorBumps.reverse(), - patch: patchBumps.reverse(), + major: majorBumps, + minor: minorBumps, + patch: patchBumps, }; } diff --git a/src/lib/utils/isCatalogPage.ts b/src/lib/utils/isCatalogPage.ts new file mode 100644 index 00000000..204fb407 --- /dev/null +++ b/src/lib/utils/isCatalogPage.ts @@ -0,0 +1,21 @@ +import npa from "npm-package-arg"; + +/** + * Check if the given spec represents a catalog page request + * (single package name without version specification) + */ +export function isCatalogPage(spec: string): boolean { + const parsed = npa(spec); + return parsed.rawSpec === "*" && Boolean(parsed.name); +} + +/** + * Get the package name from a catalog page spec + * Returns null if not a valid catalog page spec + */ +export function getCatalogPackageName(spec: string): string | null { + if (!isCatalogPage(spec)) { + return null; + } + return npa(spec).name; +} From 3e0326a24a00f53662fe1636cc58582c8ef16f05 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 11:31:38 +0000 Subject: [PATCH 10/17] Add validation for pack.time entries Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- src/app/[...parts]/_page/catalog/CatalogPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index 383d280c..a1585605 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -21,7 +21,10 @@ async function CatalogPageInner({ packageName }: CatalogPageProps) { // Extract version data from packument const versionMap: Record = {}; for (const [version] of Object.entries(pack.versions)) { - versionMap[version] = { time: pack.time[version] }; + const time = pack.time[version]; + if (time) { + versionMap[version] = { time }; + } } // Get all versions From c27f223e1380d85c345e3b70b7acec110d7bea2d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 13:04:16 +0000 Subject: [PATCH 11/17] Refactor catalog code per review feedback - Restore use of getVersionData() instead of manual extraction - Fix spacing in ComparisonList: remove gaps between elements - Fade package names with text-muted-foreground to emphasize versions - Extract generateCatalogMetadata() to separate file - Simplify isCatalogPage() to accept arrays directly - Clean up page.tsx by using utility functions Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- .../[...parts]/_page/catalog/CatalogPage.tsx | 17 ++++------ .../_page/catalog/ComparisonList.tsx | 10 ++++-- .../_page/catalog/generateCatalogMetadata.ts | 25 +++++++++++++++ src/app/[...parts]/page.tsx | 32 +++++-------------- src/lib/utils/isCatalogPage.ts | 17 ++++++---- 5 files changed, 56 insertions(+), 45 deletions(-) create mode 100644 src/app/[...parts]/_page/catalog/generateCatalogMetadata.ts diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index a1585605..5cdc9df3 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -1,6 +1,7 @@ import { cacheLife } from "next/cache"; import { Suspense } from "react"; import Skeleton from "^/components/ui/Skeleton"; +import getVersionData from "^/lib/api/npm/getVersionData"; import packument from "^/lib/api/npm/packument"; import { generateComparisons } from "^/lib/utils/generateComparisons"; import ComparisonList from "./ComparisonList"; @@ -15,17 +16,11 @@ async function CatalogPageInner({ packageName }: CatalogPageProps) { cacheLife("hours"); - // Fetch package data - packument is already cached and contains everything we need - const pack = await packument(packageName); - - // Extract version data from packument - const versionMap: Record = {}; - for (const [version] of Object.entries(pack.versions)) { - const time = pack.time[version]; - if (time) { - versionMap[version] = { time }; - } - } + // Fetch package data + const [pack, versionMap] = await Promise.all([ + packument(packageName), + getVersionData(packageName), + ]); // Get all versions const versions = Object.keys(versionMap); diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 0490ced3..5bd74e2a 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -61,8 +61,10 @@ export default function ComparisonList({ prefetch={false} aria-label={`Compare ${diffString} (${comparison.type} version change)`} > -
- {packageName}@ +
+ + {packageName}@ + ... - {packageName}@ + + {packageName}@ + ; } diff --git a/src/lib/utils/isCatalogPage.ts b/src/lib/utils/isCatalogPage.ts index 204fb407..c1c0fc15 100644 --- a/src/lib/utils/isCatalogPage.ts +++ b/src/lib/utils/isCatalogPage.ts @@ -1,21 +1,24 @@ import npa from "npm-package-arg"; /** - * Check if the given spec represents a catalog page request + * Check if the given specs represent a catalog page request * (single package name without version specification) */ -export function isCatalogPage(spec: string): boolean { - const parsed = npa(spec); +export function isCatalogPage(specs: string[]): boolean { + if (specs.length !== 1) { + return false; + } + const parsed = npa(specs[0]); return parsed.rawSpec === "*" && Boolean(parsed.name); } /** - * Get the package name from a catalog page spec + * Get the package name from catalog page specs * Returns null if not a valid catalog page spec */ -export function getCatalogPackageName(spec: string): string | null { - if (!isCatalogPage(spec)) { +export function getCatalogPackageName(specs: string[]): string | null { + if (!isCatalogPage(specs)) { return null; } - return npa(spec).name; + return npa(specs[0]).name; } From 76f53d4fc2f849671b26b672cde6456bd3906830 Mon Sep 17 00:00:00 2001 From: Oscar Busk Date: Wed, 4 Feb 2026 23:39:46 +0100 Subject: [PATCH 12/17] Refactor CatalogPage and metadata generation to use specs instead of packageName --- src/app/[...parts]/_page/catalog/CatalogPage.tsx | 11 +++++++++-- .../_page/catalog/generateCatalogMetadata.ts | 9 ++++++++- src/app/[...parts]/page.tsx | 15 +++------------ 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index 5cdc9df3..b3a31f44 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -4,18 +4,25 @@ import Skeleton from "^/components/ui/Skeleton"; import getVersionData from "^/lib/api/npm/getVersionData"; import packument from "^/lib/api/npm/packument"; import { generateComparisons } from "^/lib/utils/generateComparisons"; +import { getCatalogPackageName } from "^/lib/utils/isCatalogPage"; import ComparisonList from "./ComparisonList"; import PackageMeta from "./PackageMeta"; export interface CatalogPageProps { - packageName: string; + specs: string[]; } -async function CatalogPageInner({ packageName }: CatalogPageProps) { +async function CatalogPageInner({ specs }: CatalogPageProps) { "use cache"; cacheLife("hours"); + const packageName = getCatalogPackageName(specs); + + if (!packageName) { + throw new Error("Invalid catalog page specs"); + } + // Fetch package data const [pack, versionMap] = await Promise.all([ packument(packageName), diff --git a/src/app/[...parts]/_page/catalog/generateCatalogMetadata.ts b/src/app/[...parts]/_page/catalog/generateCatalogMetadata.ts index afb4c139..75bff8be 100644 --- a/src/app/[...parts]/_page/catalog/generateCatalogMetadata.ts +++ b/src/app/[...parts]/_page/catalog/generateCatalogMetadata.ts @@ -1,9 +1,16 @@ import { type Metadata } from "next"; +import { getCatalogPackageName } from "^/lib/utils/isCatalogPage"; /** * Generate metadata for catalog pages */ -export function generateCatalogMetadata(packageName: string): Metadata { +export function generateCatalogMetadata(specs: string[]): Metadata { + const packageName = getCatalogPackageName(specs); + + if (!packageName) { + throw new Error("Invalid catalog page specs"); + } + return { title: `${packageName} - npm Package Catalog`, description: `Browse and compare different versions of the ${packageName} npm package. View suggested version comparisons including major, minor, and patch updates.`, diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx index 1081dfeb..043b4fa0 100644 --- a/src/app/[...parts]/page.tsx +++ b/src/app/[...parts]/page.tsx @@ -8,10 +8,7 @@ import destination from "^/lib/destination"; import { parseQuery, type QueryParams } from "^/lib/query"; import { simplePackageSpecToString } from "^/lib/SimplePackageSpec"; import decodeParts from "^/lib/utils/decodeParts"; -import { - getCatalogPackageName, - isCatalogPage, -} from "^/lib/utils/isCatalogPage"; +import { isCatalogPage } from "^/lib/utils/isCatalogPage"; import specsToDiff from "^/lib/utils/specsToDiff"; import splitParts from "^/lib/utils/splitParts"; import BundlephobiaDiff from "./_page/BundlephobiaDiff"; @@ -36,10 +33,7 @@ export async function generateMetadata({ // Check if this is a catalog page if (isCatalogPage(specs)) { - const packageName = getCatalogPackageName(specs); - if (packageName) { - return generateCatalogMetadata(packageName); - } + return generateCatalogMetadata(specs); } const [a, b] = specs.map((spec) => createSimplePackageSpec(spec)); @@ -61,10 +55,7 @@ const DiffPageInner = async ({ // Check if this is a catalog page if (isCatalogPage(specsOrVersions)) { - const packageName = getCatalogPackageName(specsOrVersions); - if (packageName) { - return ; - } + return ; } const { redirect: redirectTarget, canonicalSpecs } = From c373032f665e0fb50d115e33883be1da471afc29 Mon Sep 17 00:00:00 2001 From: Oscar Busk Date: Thu, 5 Feb 2026 00:00:25 +0100 Subject: [PATCH 13/17] Refactor ComparisonList to use specs for diff path generation and improve key handling --- .../[...parts]/_page/catalog/ComparisonList.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 5bd74e2a..3a60778b 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -3,6 +3,7 @@ import BorderBox from "^/components/ui/BorderBox"; import Heading from "^/components/ui/Heading"; import Stack from "^/components/ui/Stack"; import type { Comparison } from "^/lib/utils/generateComparisons"; +import specsToDiff from "^/lib/utils/specsToDiff"; import VersionWithHighlight from "./VersionWithHighlight"; export interface ComparisonListProps { @@ -48,18 +49,19 @@ export default function ComparisonList({ - {comparisons.map((comparison, index) => { + {comparisons.map((comparison) => { const highlightIndex = getHighlightIndex(comparison.type); - const diffString = `${packageName}@${comparison.from}...${packageName}@${comparison.to}`; - const url = `/${diffString}`; + const fromSpec = `${packageName}@${comparison.from}`; + const toSpec = `${packageName}@${comparison.to}`; + const diffPath = specsToDiff([fromSpec, toSpec]); return (
From dabf32aab58658e547bed793a4bf683c23dfda07 Mon Sep 17 00:00:00 2001 From: Oscar Busk Date: Thu, 5 Feb 2026 00:07:29 +0100 Subject: [PATCH 14/17] Refactor PackageMeta to simplify conditional rendering and improve maintainers and keywords display --- .../[...parts]/_page/catalog/PackageMeta.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/app/[...parts]/_page/catalog/PackageMeta.tsx b/src/app/[...parts]/_page/catalog/PackageMeta.tsx index 23233c32..6fa5235a 100644 --- a/src/app/[...parts]/_page/catalog/PackageMeta.tsx +++ b/src/app/[...parts]/_page/catalog/PackageMeta.tsx @@ -87,31 +87,29 @@ export default function PackageMeta({ packument }: PackageMetaProps) {
)} - {Boolean( - latestManifest.maintainers && - latestManifest.maintainers.length > 0, - ) && ( + {latestManifest.maintainers && + latestManifest.maintainers.length > 0 ? (
Maintainers:{" "} - {latestManifest.maintainers?.length} + {latestManifest.maintainers.length}
- )} + ) : null} - {Boolean(keywords && keywords.length > 0) && ( + {keywords && keywords.length > 0 ? (
- {keywords?.slice(0, 10).map((keyword, index) => ( + {keywords.slice(0, 10).map((keyword) => ( {keyword} ))}
- )} + ) : null} - {Boolean(repositoryUrl) && ( + {repositoryUrl ? ( Repository → - )} + ) : null} - {Boolean(homepageUrl && homepageUrl !== repositoryUrl) && ( + {homepageUrl && homepageUrl !== repositoryUrl ? ( Homepage → - )} + ) : null} ); From 5861ec6055a117085d08fb95d3a2385b8a699892 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 14:12:36 +0000 Subject: [PATCH 15/17] Fix bot review issues: remove unused parameter and reduce duplication - Remove unused _versionMap parameter from generateComparisons() - Update all call sites and tests to not pass versionMap - Create PackageNamePrefix component to reduce duplication - Extract repeated package name display into reusable component - Improves maintainability and reduces code repetition Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- .../[...parts]/_page/catalog/CatalogPage.tsx | 2 +- .../_page/catalog/ComparisonList.tsx | 9 +-- .../_page/catalog/PackageNamePrefix.tsx | 12 +++ src/lib/utils/generateComparisons.test.ts | 79 +++---------------- src/lib/utils/generateComparisons.ts | 5 +- 5 files changed, 28 insertions(+), 79 deletions(-) create mode 100644 src/app/[...parts]/_page/catalog/PackageNamePrefix.tsx diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index b3a31f44..441fa4e6 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -33,7 +33,7 @@ async function CatalogPageInner({ specs }: CatalogPageProps) { const versions = Object.keys(versionMap); // Generate comparisons - const comparisons = generateComparisons(versions, versionMap); + const comparisons = generateComparisons(versions); return (
diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 3a60778b..86519fb2 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -4,6 +4,7 @@ import Heading from "^/components/ui/Heading"; import Stack from "^/components/ui/Stack"; import type { Comparison } from "^/lib/utils/generateComparisons"; import specsToDiff from "^/lib/utils/specsToDiff"; +import PackageNamePrefix from "./PackageNamePrefix"; import VersionWithHighlight from "./VersionWithHighlight"; export interface ComparisonListProps { @@ -64,9 +65,7 @@ export default function ComparisonList({ aria-label={`Compare ${fromSpec}...${toSpec} (${comparison.type} version change)`} >
- - {packageName}@ - + ... - - {packageName}@ - + {packageName}@; +} diff --git a/src/lib/utils/generateComparisons.test.ts b/src/lib/utils/generateComparisons.test.ts index ef97f5df..8244492a 100644 --- a/src/lib/utils/generateComparisons.test.ts +++ b/src/lib/utils/generateComparisons.test.ts @@ -3,14 +3,13 @@ import { generateComparisons } from "./generateComparisons"; describe("generateComparisons", () => { it("returns empty array for package with 0 versions", () => { - const result = generateComparisons([], {}); + const result = generateComparisons([]); expect(result).toEqual([]); }); it("returns empty array for package with 1 version", () => { const versions = ["1.0.0"]; - const versionMap = { "1.0.0": { time: "2020-01-01" } }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); expect(result).toEqual([]); }); @@ -33,29 +32,15 @@ describe("generateComparisons", () => { "3.1.4", "3.1.5", ]; - const versionMap: Record = {}; - versions.forEach((v, i) => { - versionMap[v] = { - time: `2020-01-${String(i + 1).padStart(2, "0")}`, - }; - }); - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); expect(result).toHaveLength(10); }); it("identifies major bumps correctly", () => { const versions = ["1.0.0", "1.9.4", "2.0.0", "2.5.0", "3.0.0", "3.1.0"]; - const versionMap: Record = { - "1.0.0": { time: "2020-01-01" }, - "1.9.4": { time: "2020-06-01" }, - "2.0.0": { time: "2020-07-01" }, - "2.5.0": { time: "2020-12-01" }, - "3.0.0": { time: "2021-01-01" }, - "3.1.0": { time: "2021-02-01" }, - }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); // Should include major bumps: 3.0.0 vs 2.5.0, 2.0.0 vs 1.9.4 const majorBumps = result.filter((c) => c.type === "major"); @@ -74,15 +59,8 @@ describe("generateComparisons", () => { it("identifies minor bumps correctly", () => { const versions = ["2.0.0", "2.0.12", "2.1.0", "2.1.3", "2.2.0"]; - const versionMap: Record = { - "2.0.0": { time: "2020-01-01" }, - "2.0.12": { time: "2020-06-01" }, - "2.1.0": { time: "2020-07-01" }, - "2.1.3": { time: "2020-12-01" }, - "2.2.0": { time: "2021-01-01" }, - }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); const minorBumps = result.filter((c) => c.type === "minor"); expect(minorBumps.length).toBeGreaterThan(0); @@ -100,14 +78,8 @@ describe("generateComparisons", () => { it("identifies patch bumps correctly", () => { const versions = ["2.1.3", "2.1.4", "2.1.5", "2.1.6"]; - const versionMap: Record = { - "2.1.3": { time: "2020-01-01" }, - "2.1.4": { time: "2020-02-01" }, - "2.1.5": { time: "2020-03-01" }, - "2.1.6": { time: "2020-04-01" }, - }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); const patchBumps = result.filter((c) => c.type === "patch"); expect(patchBumps.length).toBeGreaterThan(0); @@ -120,13 +92,8 @@ describe("generateComparisons", () => { it("returns fewer than 10 comparisons for packages with few versions", () => { const versions = ["1.0.0", "1.0.1", "1.0.2"]; - const versionMap: Record = { - "1.0.0": { time: "2020-01-01" }, - "1.0.1": { time: "2020-02-01" }, - "1.0.2": { time: "2020-03-01" }, - }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); expect(result.length).toBeLessThanOrEqual(2); }); @@ -144,14 +111,8 @@ describe("generateComparisons", () => { "10.0.0", "11.0.0", ]; - const versionMap: Record = {}; - versions.forEach((v, i) => { - versionMap[v] = { - time: `2020-${String(i + 1).padStart(2, "0")}-01`, - }; - }); - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); // Should have 10 major bumps (since there are no minor/patch bumps) expect(result).toHaveLength(10); @@ -161,14 +122,8 @@ describe("generateComparisons", () => { it("sorts comparisons by semver version (newest first)", () => { const versions = ["1.0.0", "1.0.1", "2.0.0", "2.0.1"]; - const versionMap: Record = { - "1.0.0": { time: "2020-01-01" }, - "1.0.1": { time: "2020-02-01" }, - "2.0.0": { time: "2020-03-01" }, - "2.0.1": { time: "2020-04-01" }, - }; - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); // Should be sorted by semver version (newest first), not by publish date for (let i = 0; i < result.length - 1; i++) { @@ -190,14 +145,8 @@ describe("generateComparisons", () => { "2.0.0", "2.0.1", ]; - const versionMap: Record = {}; - versions.forEach((v, i) => { - versionMap[v] = { - time: `2020-01-${String(i + 1).padStart(2, "0")}`, - }; - }); - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); // Should not include any prerelease versions in comparisons expect(result.length).toBeGreaterThan(0); @@ -215,14 +164,8 @@ describe("generateComparisons", () => { "19.2.4", "19.2.3", ]; - const versionMap: Record = {}; - versions.forEach((v, i) => { - versionMap[v] = { - time: `2025-12-${String(i + 1).padStart(2, "0")}`, - }; - }); - const result = generateComparisons(versions, versionMap); + const result = generateComparisons(versions); // Should not include any patch comparisons between 19.3.0-canary versions // since they all have the same major.minor.patch diff --git a/src/lib/utils/generateComparisons.ts b/src/lib/utils/generateComparisons.ts index cd3852cb..ede5a80f 100644 --- a/src/lib/utils/generateComparisons.ts +++ b/src/lib/utils/generateComparisons.ts @@ -14,10 +14,7 @@ export interface Comparison { * - If any category has fewer than target, backfill from: Majors > Minors > Patches * - Total must be 10 unless package has < 11 versions */ -export function generateComparisons( - versions: string[], - _versionMap: Record, -): Comparison[] { +export function generateComparisons(versions: string[]): Comparison[] { // Filter out invalid versions and prereleases const validVersions = versions.filter( (v) => semver.valid(v) && !semver.prerelease(v), From 8556f1de613a0483152a2d486317f0182b690862 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 14:28:21 +0000 Subject: [PATCH 16/17] Fix UI issues: reset next-env.d.ts and fix line breaks in version display - Reset next-env.d.ts to match main branch (.next/dev/types/routes.d.ts) - Change comparison display from flex to inline span elements - Package name and version now flow as single text, preventing awkward breaks - Long package names no longer cause version numbers to appear as separate flex items Co-authored-by: oBusk <13413409+oBusk@users.noreply.github.com> --- next-env.d.ts | 2 +- src/app/[...parts]/_page/catalog/ComparisonList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c7..c4b7818f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 86519fb2..158d357a 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -64,7 +64,7 @@ export default function ComparisonList({ prefetch={false} aria-label={`Compare ${fromSpec}...${toSpec} (${comparison.type} version change)`} > -
+ -
+ {comparison.type} From 6bc3392f78691450b944052ea7fbd345b660882e Mon Sep 17 00:00:00 2001 From: Oscar Busk Date: Sun, 8 Feb 2026 15:30:49 +0100 Subject: [PATCH 17/17] Make catalog page accomodate longer package names --- src/app/[...parts]/_page/catalog/CatalogPage.tsx | 4 ++-- .../[...parts]/_page/catalog/ComparisonList.tsx | 15 ++++++++++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/[...parts]/_page/catalog/CatalogPage.tsx b/src/app/[...parts]/_page/catalog/CatalogPage.tsx index 441fa4e6..0843243d 100644 --- a/src/app/[...parts]/_page/catalog/CatalogPage.tsx +++ b/src/app/[...parts]/_page/catalog/CatalogPage.tsx @@ -37,7 +37,7 @@ async function CatalogPageInner({ specs }: CatalogPageProps) { return (
-
+
@@ -55,7 +55,7 @@ async function CatalogPageInner({ specs }: CatalogPageProps) { function CatalogPageFallback() { return (
-
+
diff --git a/src/app/[...parts]/_page/catalog/ComparisonList.tsx b/src/app/[...parts]/_page/catalog/ComparisonList.tsx index 158d357a..2112ed77 100644 --- a/src/app/[...parts]/_page/catalog/ComparisonList.tsx +++ b/src/app/[...parts]/_page/catalog/ComparisonList.tsx @@ -26,6 +26,12 @@ function getHighlightIndex(type: "major" | "minor" | "patch"): number { } } +/** + * Threshold for omitting the package name in the "to" spec + * When package name is 24+ characters, we show "pkg@1.0.0...2.0.0" instead of "pkg@1.0.0...pkg@2.0.0" + */ +const PACKAGE_NAME_LENGTH_THRESHOLD = 24; + /** * Right column showing the list of comparisons */ @@ -33,6 +39,9 @@ export default function ComparisonList({ packageName, comparisons, }: ComparisonListProps) { + const showSecondPackageName = + packageName.length < PACKAGE_NAME_LENGTH_THRESHOLD; + if (comparisons.length === 0) { return ( @@ -73,7 +82,11 @@ export default function ComparisonList({ ... - + {showSecondPackageName ? ( + + ) : null}