improve npm packages

Boshen · Boshen · commit 0052a8be3090 · 2025-09-16T12:43:22.000+08:00
diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
@@ -5,7 +5,7 @@ import Layout from './components/Layout';
 // Lazy load all page components for code-splitting
 const DashboardPage = lazy(() => import('./pages/DashboardPage'));
 const MinificationBenchmarksPage = lazy(() => import('./pages/MinificationBenchmarksPage'));
-const NpmDownloadsPage = lazy(() => import('./pages/NpmDownloadsPage'));
+const NpmPackagesPage = lazy(() => import('./pages/NpmPackagesPage'));
 const RolldownStatsPage = lazy(() => import('./pages/RolldownStatsPage'));
 const DependentsPage = lazy(() => import('./pages/DependentsPage'));
 
@@ -45,10 +45,10 @@ function App() {
           }
         />
         <Route
-          path='npm-downloads'
+          path='npm-packages'
           element={
             <Suspense fallback={<PageLoader />}>
-              <NpmDownloadsPage />
+              <NpmPackagesPage />
             </Suspense>
           }
         />
diff --git a/apps/dashboard/src/NpmDownloads.tsx b/apps/dashboard/src/NpmDownloads.tsx
diff --git a/apps/dashboard/src/NpmPackages.tsx b/apps/dashboard/src/NpmPackages.tsx
@@ -0,0 +1,31 @@
+import { PackageDownloadsList } from './components/npm/PackageDownloadsList';
+
+// List of npm packages to display download counts for
+const packages = [
+  'vite',
+  'vitest',
+  'rolldown-vite',
+  'rolldown',
+  'tsdown',
+  'oxlint',
+  'oxc-parser',
+  'oxc-transform',
+  'oxc-minify',
+  'oxc-resolver',
+];
+
+function NpmPackages() {
+  return (
+    <>
+      <main className='max-w-7xl mx-auto px-8 py-8'>
+        <h2 className='mb-6 text-slate-800 dark:text-slate-100 text-3xl font-bold tracking-tight'>
+          NPM Package Statistics
+        </h2>
+
+        <PackageDownloadsList packages={packages} />
+      </main>
+    </>
+  );
+}
+
+export default NpmPackages;
diff --git a/apps/dashboard/src/__tests__/pages.test.tsx b/apps/dashboard/src/__tests__/pages.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 import App from '../App';
 import MinificationBenchmarksPage from '../pages/MinificationBenchmarksPage';
-import NpmDownloadsPage from '../pages/NpmDownloadsPage';
+import NpmPackagesPage from '../pages/NpmPackagesPage';
 import RolldownStatsPage from '../pages/RolldownStatsPage';
 
 describe('Pages rendering tests', () => {
@@ -34,17 +34,17 @@ describe('Pages rendering tests', () => {
     expect(container).toBeTruthy();
   });
 
-  it('should render NpmDownloadsPage without errors', () => {
+  it('should render NpmPackagesPage without errors', () => {
     const { container } = render(
       <MemoryRouter>
-        <NpmDownloadsPage />
+        <NpmPackagesPage />
       </MemoryRouter>,
     );
     expect(container).toBeTruthy();
   });
 
   it('should render all routes without errors', () => {
-    const routes = ['/', '/minification', '/npm-downloads'];
+    const routes = ['/', '/minification', '/npm-packages'];
 
     routes.forEach(route => {
       const { container } = render(
diff --git a/apps/dashboard/src/components/dashboard/StatsGrid.tsx b/apps/dashboard/src/components/dashboard/StatsGrid.tsx
@@ -48,13 +48,13 @@ export function StatsGrid() {
         linkTo='/minification'
       />
       <StatCard
-        title='NPM Downloads'
-        value='24.5K'
+        title='NPM Packages'
+        value='10'
         change={12}
-        changeLabel='this week'
+        changeLabel='tracked'
         icon={<Download className='w-6 h-6 text-green-600 dark:text-green-400' />}
         trend='up'
-        linkTo='/npm-downloads'
+        linkTo='/npm-packages'
       />
     </CardGrid>
   );
diff --git a/apps/dashboard/src/components/layout/Sidebar.tsx b/apps/dashboard/src/components/layout/Sidebar.tsx
@@ -27,8 +27,8 @@ const navItems: NavItem[] = [
     badge: 'Benchmarks',
   },
   {
-    path: '/npm-downloads',
-    label: 'NPM Downloads',
+    path: '/npm-packages',
+    label: 'NPM Packages',
     icon: <Download size={20} />,
   },
   {
diff --git a/apps/dashboard/src/components/npm/PackageCard.tsx b/apps/dashboard/src/components/npm/PackageCard.tsx
@@ -1,11 +1,19 @@
 import { Card } from '@vibe/ui';
-import { Download, Package } from 'lucide-react';
+import { Download, Package, Scale, Users, Calendar, GitBranch } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 interface PackageCardProps {
   packageName: string;
 }
 
+interface PackageData {
+  version: string;
+  license: string;
+  maintainers?: Array<{ name: string }>;
+  time?: { [key: string]: string };
+  dependencies?: { [key: string]: string };
+}
+
 function formatNumber(num: number): string {
   if (num >= 1000000) {
     return `${(num / 1000000).toFixed(1)}M`;
@@ -16,17 +24,49 @@ function formatNumber(num: number): string {
   return num.toLocaleString();
 }
 
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffTime = Math.abs(now.getTime() - date.getTime());
+  const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  // Within 24 hours, show hours
+  if (diffHours === 0) return 'Just now';
+  if (diffHours === 1) return '1 hour ago';
+  if (diffHours < 24) return `${diffHours} hours ago`;
+
+  // Days
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7) return `${diffDays} days ago`;
+
+  // Weeks
+  const diffWeeks = Math.floor(diffDays / 7);
+  if (diffWeeks === 1) return '1 week ago';
+  if (diffDays < 30) return `${diffWeeks} weeks ago`;
+
+  // Months
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths === 1) return '1 month ago';
+  if (diffDays < 365) return `${diffMonths} months ago`;
+
+  // Years
+  const diffYears = Math.floor(diffDays / 365);
+  if (diffYears === 1) return '1 year ago';
+  return `${diffYears} years ago`;
+}
+
 export function PackageCard({ packageName }: PackageCardProps) {
   const [downloads, setDownloads] = useState<number | null>(null);
-  const [version, setVersion] = useState<string | null>(null);
+  const [packageData, setPackageData] = useState<PackageData | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchPackageData = async () => {
       try {
         const [downloadsRes, packageRes] = await Promise.all([
           fetch(`https://api.npmjs.org/downloads/point/last-week/${packageName}`),
-          fetch(`https://registry.npmjs.org/${packageName}/latest`),
+          fetch(`https://registry.npmjs.org/${packageName}`),
         ]);
 
         if (downloadsRes.ok) {
@@ -35,8 +75,18 @@ export function PackageCard({ packageName }: PackageCardProps) {
         }
 
         if (packageRes.ok) {
-          const packageData = await packageRes.json();
-          setVersion(packageData.version);
+          const data = await packageRes.json();
+          // Get the latest version data
+          const latestVersion = data['dist-tags']?.latest || Object.keys(data.versions || {}).pop();
+          const latestVersionData = data.versions?.[latestVersion] || {};
+
+          setPackageData({
+            version: latestVersion,
+            license: latestVersionData.license || data.license,
+            maintainers: data.maintainers,
+            time: data.time,
+            dependencies: latestVersionData.dependencies
+          });
         }
       } catch (error) {
         console.error(`Failed to fetch data for ${packageName}:`, error);
@@ -52,6 +102,11 @@ export function PackageCard({ packageName }: PackageCardProps) {
     window.open(`https://www.npmjs.com/package/${packageName}`, '_blank', 'noopener,noreferrer');
   };
 
+  // The 'modified' field contains the last modified date
+  const lastPublishDate = packageData?.time?.modified || packageData?.time?.[packageData?.version || ''];
+  const dependenciesCount = packageData?.dependencies ? Object.keys(packageData.dependencies).length : 0;
+  const maintainersCount = packageData?.maintainers?.length || 0;
+
   return (
     <Card className='hover:shadow-lg transition-all cursor-pointer group'>
       <div
@@ -73,32 +128,32 @@ export function PackageCard({ packageName }: PackageCardProps) {
           <Package className='w-5 h-5 text-slate-400 dark:text-slate-500' />
         </div>
 
-        <div className='space-y-3'>
+        <div className='grid grid-cols-2 gap-3'>
           <div className='flex items-center gap-2'>
-            <div className='p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg'>
-              <Package className='w-4 h-4 text-blue-600 dark:text-blue-400' />
+            <div className='p-1.5 bg-blue-100 dark:bg-blue-900/30 rounded'>
+              <Package className='w-3 h-3 text-blue-600 dark:text-blue-400' />
             </div>
             <div>
               <p className='text-xs text-slate-500 dark:text-slate-400'>Version</p>
               <p className='text-sm font-semibold text-slate-900 dark:text-white'>
                 {loading ? (
-                  <span className='inline-block h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                  <span className='inline-block h-4 w-12 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
                 ) : (
-                  version || 'N/A'
+                  packageData?.version || 'N/A'
                 )}
               </p>
             </div>
           </div>
 
           <div className='flex items-center gap-2'>
-            <div className='p-2 bg-green-100 dark:bg-green-900/30 rounded-lg'>
-              <Download className='w-4 h-4 text-green-600 dark:text-green-400' />
+            <div className='p-1.5 bg-green-100 dark:bg-green-900/30 rounded'>
+              <Download className='w-3 h-3 text-green-600 dark:text-green-400' />
             </div>
             <div>
-              <p className='text-xs text-slate-500 dark:text-slate-400'>Weekly Downloads</p>
+              <p className='text-xs text-slate-500 dark:text-slate-400'>Weekly</p>
               <p className='text-sm font-semibold text-slate-900 dark:text-white'>
                 {loading ? (
-                  <span className='inline-block h-4 w-20 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                  <span className='inline-block h-4 w-14 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
                 ) : downloads !== null ? (
                   formatNumber(downloads)
                 ) : (
@@ -107,6 +162,72 @@ export function PackageCard({ packageName }: PackageCardProps) {
               </p>
             </div>
           </div>
+
+          <div className='flex items-center gap-2'>
+            <div className='p-1.5 bg-purple-100 dark:bg-purple-900/30 rounded'>
+              <Calendar className='w-3 h-3 text-purple-600 dark:text-purple-400' />
+            </div>
+            <div>
+              <p className='text-xs text-slate-500 dark:text-slate-400'>Updated</p>
+              <p className='text-sm font-semibold text-slate-900 dark:text-white'>
+                {loading ? (
+                  <span className='inline-block h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                ) : lastPublishDate ? (
+                  formatDate(lastPublishDate)
+                ) : (
+                  'N/A'
+                )}
+              </p>
+            </div>
+          </div>
+
+          <div className='flex items-center gap-2'>
+            <div className='p-1.5 bg-amber-100 dark:bg-amber-900/30 rounded'>
+              <Users className='w-3 h-3 text-amber-600 dark:text-amber-400' />
+            </div>
+            <div>
+              <p className='text-xs text-slate-500 dark:text-slate-400'>Maintainers</p>
+              <p className='text-sm font-semibold text-slate-900 dark:text-white'>
+                {loading ? (
+                  <span className='inline-block h-4 w-8 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                ) : (
+                  maintainersCount
+                )}
+              </p>
+            </div>
+          </div>
+
+          <div className='flex items-center gap-2'>
+            <div className='p-1.5 bg-indigo-100 dark:bg-indigo-900/30 rounded'>
+              <GitBranch className='w-3 h-3 text-indigo-600 dark:text-indigo-400' />
+            </div>
+            <div>
+              <p className='text-xs text-slate-500 dark:text-slate-400'>Deps</p>
+              <p className='text-sm font-semibold text-slate-900 dark:text-white'>
+                {loading ? (
+                  <span className='inline-block h-4 w-8 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                ) : (
+                  dependenciesCount
+                )}
+              </p>
+            </div>
+          </div>
+
+          <div className='flex items-center gap-2'>
+            <div className='p-1.5 bg-slate-100 dark:bg-slate-800 rounded'>
+              <Scale className='w-3 h-3 text-slate-600 dark:text-slate-400' />
+            </div>
+            <div>
+              <p className='text-xs text-slate-500 dark:text-slate-400'>License</p>
+              <p className='text-sm font-semibold text-slate-900 dark:text-white'>
+                {loading ? (
+                  <span className='inline-block h-4 w-10 bg-slate-200 dark:bg-slate-700 rounded animate-pulse' />
+                ) : (
+                  packageData?.license || 'N/A'
+                )}
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </Card>
diff --git a/apps/dashboard/src/pages/NpmDownloadsPage.tsx b/apps/dashboard/src/pages/NpmDownloadsPage.tsx
diff --git a/apps/dashboard/src/pages/NpmPackagesPage.tsx b/apps/dashboard/src/pages/NpmPackagesPage.tsx

Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,8 @@ const navItems: NavItem[] = [`
`27`	`27`	`badge: 'Benchmarks',`
`28`	`28`	`},`
`29`	`29`	`{`
`30`		`- path: '/npm-downloads',`
`31`		`- label: 'NPM Downloads',`
	`30`	`+ path: '/npm-packages',`
	`31`	`+ label: 'NPM Packages',`
`32`	`32`	`icon: <Download size={20} />,`
`33`	`33`	`},`
`34`	`34`	`{`