Merge branch 'main' of https://github.com/neutrino2211/npmx.dev

Author: neutrino2211

.github/workflows/autofix.yml

@@ -28,7 +28,7 @@ jobs:
         run: pnpm playwright install
 
       - name: 🔠 Fix lint errors
-        run: pnpm lint --fix
+        run: pnpm lint:fix
 
       - name: 🧪 Update unit test snapshots
         run: pnpm test:unit -u

app/components/ConnectorModal.vue

@@ -105,7 +105,7 @@ watch(open, isOpen => {
 
               <div class="p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm">
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg ml-2">npx npmx-connector</span>
+                <span class="text-fg ml-2">npx&nbsp;npmx-connector</span>
               </div>
 
               <p class="text-sm text-fg-muted">Then paste the token shown in your terminal:</p>

app/components/PackageDownloadStats.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+
+const props = defineProps<{
+  downloads?: Array<{
+    downloads: number | null
+    weekStart: string
+    weekEnd: string
+  }>
+}>()
+
+const dataset = computed(() =>
+  props.downloads?.map(d => ({
+    value: d?.downloads ?? 0,
+    period: `${d.weekStart ?? '-'} to ${d.weekEnd ?? '-'}`,
+  })),
+)
+
+const lastDatapoint = computed(() => {
+  return (dataset.value || []).at(-1)?.period ?? ''
+})
+
+const config = computed(() => ({
+  theme: 'dark', // enforced dark mode for now
+  style: {
+    backgroundColor: 'transparent',
+    area: {
+      color: '#6A6A6A',
+      useGradient: false,
+      opacity: 10,
+    },
+    dataLabel: {
+      offsetX: -10,
+      fontSize: 28,
+      bold: false,
+      color: '#FAFAFA',
+    },
+    line: {
+      color: '#6A6A6A',
+    },
+    plot: {
+      radius: 6,
+      stroke: '#FAFAFA',
+    },
+    title: {
+      text: lastDatapoint.value,
+      fontSize: 12,
+      color: '#666666',
+      bold: false,
+    },
+    verticalIndicator: {
+      strokeDasharray: 0,
+      color: '#FAFAFA',
+    },
+  },
+}))
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Download stats -->
+    <section>
+      <div class="flex items-center justify-between mb-3">
+        <h2 id="dependencies-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+          Weekly Downloads
+        </h2>
+      </div>
+      <div class="w-full">
+        <ClientOnly>
+          <VueUiSparkline :dataset :config />
+        </ClientOnly>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style>
+/** Overrides */
+.vue-ui-sparkline-title span {
+  padding: 0 !important;
+  letter-spacing: 0.04rem;
+}
+.vue-ui-sparkline text {
+  font-family:
+    Geist Mono,
+    monospace !important;
+}
+</style>

app/composables/useCharts.ts

@@ -0,0 +1,3 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export const useCharts = createSharedComposable(function useCharts() {})

app/composables/useNpmRegistry.ts

@@ -141,6 +141,47 @@ export function usePackageDownloads(
   )
 }
 
+type NpmDownloadsRangeResponse = {
+  start: string
+  end: string
+  package: string
+  downloads: Array<{ day: string; downloads: number }>
+}
+
+async function fetchNpmDownloadsRange(
+  packageName: string,
+  start: string,
+  end: string,
+): Promise<NpmDownloadsRangeResponse> {
+  const encodedName = encodePackageName(packageName)
+  return await $fetch<NpmDownloadsRangeResponse>(
+    `${NPM_API}/downloads/range/${start}:${end}/${encodedName}`,
+  )
+}
+
+export function usePackageWeeklyDownloadEvolution(
+  name: MaybeRefOrGetter<string>,
+  options: MaybeRefOrGetter<{
+    weeks?: number
+    endDate?: string
+  }> = {},
+) {
+  return useLazyAsyncData(
+    () => `downloads-weekly-evolution:${toValue(name)}:${JSON.stringify(toValue(options))}`,
+    async () => {
+      const packageName = toValue(name)
+      const { weeks = 12, endDate } = toValue(options) ?? {}
+      const end = endDate ? new Date(`${endDate}T00:00:00.000Z`) : new Date()
+      const start = addDays(end, -(weeks * 7) + 1)
+      const startIso = toIsoDateString(start)
+      const endIso = toIsoDateString(end)
+      const range = await fetchNpmDownloadsRange(packageName, startIso, endIso)
+      const sortedDaily = [...range.downloads].sort((a, b) => a.day.localeCompare(b.day))
+      return buildWeeklyEvolutionFromDaily(sortedDaily)
+    },
+  )
+}
+
 const emptySearchResponse = {
   objects: [],
   total: 0,

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

@@ -42,6 +42,7 @@ const orgName = computed(() => {
 const { data: pkg, status, error } = usePackage(packageName, requestedVersion)
 
 const { data: downloads } = usePackageDownloads(packageName, 'last-week')
+const { data: weeklyDownloads } = usePackageWeeklyDownloadEvolution(packageName, { weeks: 52 })
 
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<{ html: string }>(
@@ -495,15 +496,15 @@ defineOgImageComponent('Package', {
               <span class="text-fg-subtle font-mono text-sm select-none">$</span>
               <code class="font-mono text-sm"
                 ><ClientOnly
-                  ><span class="text-fg">{{ selectedPMLabel }}</span>
-                  <span class="text-fg-muted">{{ selectedPMAction }}</span
+                  ><span class="text-fg">{{ selectedPMLabel }}</span
+                  >&nbsp;<span class="text-fg-muted">{{ selectedPMAction }}</span
                   ><span v-if="selectedPM !== 'deno'" class="text-fg-muted"
                     >&nbsp;{{ pkg.name }}</span
                   ><span v-else class="text-fg-muted">{{ pkg.name }}</span
                   ><span v-if="requestedVersion" class="text-fg-muted">@{{ requestedVersion }}</span
                   ><template #fallback
                     ><span class="text-fg">npm</span>&nbsp;<span class="text-fg-muted"
-                      >install {{ pkg.name }}</span
+                      >install&nbsp;{{ pkg.name }}</span
                     ></template
                   ></ClientOnly
                 ></code
@@ -566,6 +567,9 @@ defineOgImageComponent('Package', {
             </ul>
           </section>
 
+          <!-- Donwload stats -->
+          <PackageDownloadStats :downloads="weeklyDownloads" />
+
           <section
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)

app/utils/charts.ts

@@ -0,0 +1,29 @@
+export function sum(numbers: number[]): number {
+  return numbers.reduce((a, b) => a + b, 0)
+}
+
+export function chunkIntoWeeks<T>(items: T[], weekSize = 7): T[][] {
+  const result: T[][] = []
+  for (let index = 0; index < items.length; index += weekSize) {
+    result.push(items.slice(index, index + weekSize))
+  }
+  return result
+}
+
+export function buildWeeklyEvolutionFromDaily(
+  daily: Array<{ day: string; downloads: number }>,
+): Array<{ weekStart: string; weekEnd: string; downloads: number }> {
+  const weeks = chunkIntoWeeks(daily, 7)
+  return weeks.map(weekDays => {
+    const weekStart = weekDays[0]?.day ?? ''
+    const weekEnd = weekDays[weekDays.length - 1]?.day ?? ''
+    const downloads = sum(weekDays.map(d => d.downloads))
+    return { weekStart, weekEnd, downloads }
+  })
+}
+
+export function addDays(date: Date, days: number): Date {
+  const d = new Date(date)
+  d.setUTCDate(d.getUTCDate() + days)
+  return d
+}

app/utils/formatters.ts

@@ -9,3 +9,10 @@ export function formatDate(dateStr: string): string {
     day: 'numeric',
   })
 }
+
+export function toIsoDateString(date: Date): string {
+  const year = date.getUTCFullYear()
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const day = String(date.getUTCDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}

cli/src/server.ts

@@ -10,9 +10,12 @@ import {
   getQuery,
   createError,
   getHeader,
+  getRequestHeader,
   setResponseHeaders,
   getRouterParam,
 } from 'h3'
+
+const ALLOWED_ORIGINS = new Set(['https://npmx.dev', 'http://localhost:3000'])
 import type { ConnectorState, PendingOperation, OperationType, ApiResponse } from './types.ts'
 import {
   getNpmUser,
@@ -66,24 +69,31 @@ export function createConnectorApp(expectedToken: string) {
     operations: [],
   }
 
-  const app = createApp({
-    onRequest(event) {
-      // CORS headers for browser connections
+  function setCorsHeaders(event: Parameters<typeof setResponseHeaders>[0]) {
+    const origin = getRequestHeader(event, 'origin')
+    if (origin && ALLOWED_ORIGINS.has(origin)) {
       setResponseHeaders(event, {
-        'Access-Control-Allow-Origin': 'https://npmx.dev, http://localhost:3000',
+        'Access-Control-Allow-Origin': origin,
         'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',
         'Access-Control-Allow-Headers': 'Content-Type, Authorization',
       })
+    }
+  }
+
+  const app = createApp({
+    onRequest(event) {
+      setCorsHeaders(event)
+    },
+    onBeforeResponse(event) {
+      setCorsHeaders(event)
     },
   })
   const router = createRouter()
 
   // Handle CORS preflight requests
   router.options(
     '/**',
-    eventHandler(() => {
-      return null
-    }),
+    eventHandler(() => ''),
   )
 
   function validateToken(authHeader: string | null | undefined): boolean {

package.json

@@ -42,7 +42,8 @@
     "shiki": "^3.21.0",
     "ufo": "^1.6.3",
     "unplugin-vue-router": "^0.19.2",
-    "vue": "3.5.27"
+    "vue": "3.5.27",
+    "vue-data-ui": "^3.13.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.18",