feat: add dependency publish dates (#20)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: OrbisK

package.json

@@ -41,6 +41,7 @@
     "bumpp": "catalog:",
     "chalk": "catalog:",
     "eslint": "catalog:",
+    "fast-npm-meta": "catalog:",
     "lint-staged": "catalog:",
     "nuxt": "catalog:",
     "nuxt-eslint-auto-explicit-import": "catalog:",
@@ -49,6 +50,7 @@
     "simple-git-hooks": "catalog:",
     "typescript": "catalog:",
     "unbuild": "catalog:",
+    "unstorage": "catalog:",
     "vite": "catalog:",
     "vite-plugin-inspect": "catalog:",
     "vitest": "catalog:",

packages/node-modules-inspector/package.json

@@ -35,6 +35,7 @@
     "cac": "catalog:",
     "debug": "catalog:",
     "fast-glob": "catalog:",
+    "fast-npm-meta": "catalog:",
     "flatted": "catalog:",
     "get-port-please": "catalog:",
     "h3": "catalog:",
@@ -46,11 +47,12 @@
     "pathe": "catalog:",
     "picocolors": "catalog:",
     "structured-clone-es": "catalog:",
+    "unstorage": "catalog:",
     "ws": "catalog:"
   },
   "devDependencies": {
     "@types/picomatch": "catalog:",
-    "@types/semver": "^7.5.8",
+    "@types/semver": "catalog:",
     "@unocss/nuxt": "catalog:",
     "@vueuse/nuxt": "catalog:",
     "@webcontainer/api": "catalog:",
@@ -61,9 +63,10 @@
     "d3-shape": "catalog:",
     "floating-vue": "catalog:",
     "fuse.js": "catalog:",
+    "idb-keyval": "catalog:",
     "modern-screenshot": "catalog:",
     "picomatch": "catalog:",
-    "semver": "^7.7.1",
+    "semver": "catalog:",
     "shiki": "catalog:",
     "theme-vitesse": "catalog:",
     "vite-hot-client": "catalog:"

packages/node-modules-inspector/src/app/backends/websocket.ts

@@ -95,6 +95,15 @@ export function createWebSocketBackend(options: WebSocketBackendOptions): Backen
           throw err
         }
       },
+      getPackagesPublishDate: async (specs: string[]) => {
+        try {
+          return await rpc.getPackagesPublishDate(specs)
+        }
+        catch (err) {
+          error.value = err
+          throw err
+        }
+      },
       openInEditor: (filename: string) => rpc.openInEditor.asEvent(filename),
       openInFinder: (filename: string) => rpc.openInFinder.asEvent(filename),
     },

packages/node-modules-inspector/src/app/components/display/DateBadge.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { PackageNode } from 'node-modules-tools'
+import { computed } from 'vue'
+import { getPublishTime } from '~/state/payload'
+import { settings } from '~/state/settings'
+
+const props = withDefaults(
+  defineProps<{
+    pkg: PackageNode
+    colorize?: boolean
+  }>(),
+  {
+    colorize: true,
+  },
+)
+
+const date = computed(() => getPublishTime(props.pkg))
+
+const colorScale = [
+  [180, 'color-scale-neutral'],
+  [365, 'color-scale-low'],
+  [365 * 3, 'color-scale-medium'],
+  [365 * 5, 'color-scale-high'],
+  [730 * 5, 'color-scale-critical'],
+] as const
+
+const daysAgo = computed(() => {
+  if (!date.value)
+    return 0
+  const now = +new Date()
+
+  const msPerDay = 24 * 60 * 60 * 1000
+  return Math.floor((now - +date.value) / msPerDay)
+})
+
+const timeAgo = computed(() => {
+  if (daysAgo.value < 1)
+    return [0, 'today']
+  if (daysAgo.value > 365)
+    return [+(daysAgo.value / 365).toFixed(1), 'yr']
+  if (daysAgo.value > 30)
+    return [Math.round(daysAgo.value / 30), 'mo']
+  return [daysAgo.value, 'd']
+})
+
+const color = computed(() => {
+  if (!settings.value.colorizePackageSize && !props.colorize)
+    return colorScale[0][1]
+
+  for (const [limit, color] of colorScale) {
+    if (daysAgo.value < limit)
+      return color
+  }
+
+  return colorScale[colorScale.length - 1][1]
+})
+</script>
+
+<template>
+  <div
+    v-if="date"
+    :class="color"
+    class="px-0.4em py-0.2em line-height-none bg-gray:5"
+    :title="`Published at ${String(date)}`"
+  >
+    <span font-mono>{{ timeAgo[0] }}</span>
+    <span op50 text-sm ml0.5>{{ timeAgo[1] }}</span>
+  </div>
+</template>

packages/node-modules-inspector/src/app/components/display/FileSizeBadge.vue

@@ -23,11 +23,11 @@ const KB = 1024
 const MB = KB ** 2
 
 const colorScale = [
-  [80 * KB, 'text-gray:75!'],
-  [500 * KB, 'text-lime:75! saturate-50'],
-  [1 * MB, 'text-amber:85! saturate-80'],
-  [10 * MB, 'text-orange!'],
-  [20 * MB, 'text-red!'],
+  [80 * KB, 'color-scale-neutral'],
+  [500 * KB, 'color-scale-low'],
+  [1 * MB, 'color-scale-medium'],
+  [10 * MB, 'color-scale-high'],
+  [20 * MB, 'color-scale-critical'],
 ] as const
 
 const color = computed(() => {

packages/node-modules-inspector/src/app/components/grid/Item.vue

@@ -40,6 +40,12 @@ defineProps<{
         rounded-full text-sm
       />
 
+      <DisplayDateBadge
+        v-if="settings.showPublishTimeBadge"
+        :pkg
+        rounded-full text-sm
+      />
+
       <!--
       <span op25>·</span>
       <div op75>

packages/node-modules-inspector/src/app/components/panel/PackageDetails.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue'
 import { getBackend } from '~/backends'
 import { selectedNode } from '~/state/current'
 import { filters } from '~/state/filters'
-import { payloads } from '~/state/payload'
+import { getPublishTime, payloads } from '~/state/payload'
 import { query } from '~/state/query'
 import { settings } from '~/state/settings'
 
@@ -191,6 +191,10 @@ function getShallowestDependents(pkg: PackageNode) {
           <span op50>·</span>
           <DisplayNodeVersionRange :range="pkg.resolved.engines?.node" />
         </template>
+        <template v-if="getPublishTime(pkg)">
+          <span op50>·</span>
+          <DisplayDateBadge :pkg rounded-full text-sm />
+        </template>
       </div>
     </div>
     <div grid="~ cols-3 gap-2 items-center" p2>

packages/node-modules-inspector/src/app/components/panel/Settings.vue

@@ -22,6 +22,9 @@ const backend = getBackend()
       <OptionItem title="Show size badge" description="Show install size badge on package list">
         <OptionCheckbox v-model="settings.showInstallSizeBadge" />
       </OptionItem>
+      <OptionItem title="Show publish time badge" description="Show publish time badge on package list">
+        <OptionCheckbox v-model="settings.showPublishTimeBadge" />
+      </OptionItem>
       <OptionItem title="Colorize size badge" description="Colorize package size badge">
         <OptionCheckbox v-model="settings.colorizePackageSize" />
       </OptionItem>

packages/node-modules-inspector/src/app/components/report/MultipleVersions.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PackageNode } from 'node-modules-tools'
 import { useRouter } from '#app/composables/router'
+import { DisplayDateBadge } from '#components'
 import { computed, nextTick } from 'vue'
 import { compareSemver } from '~~/shared/utils'
 import { selectedNode } from '~/state/current'
 import { filters } from '~/state/filters'
 import { payloads } from '~/state/payload'
+import { settings } from '~/state/settings'
 
 const router = useRouter()
 
@@ -59,12 +61,13 @@ function showGraph(pkgs: PackageNode[]) {
         <div flex="~ col gap-1" p2>
           <button
             v-for="pkg of pkgs" :key="pkg.version"
-            px2 rounded flex="~ items-center gap-04"
+            px2 rounded flex="~ items-center gap-2"
             font-mono hover="bg-active"
             :class="selectedNode === pkg ? 'bg-active' : ''"
             @click="selectedNode = pkg"
           >
             <span op75 flex-auto text-left>v{{ pkg.version }}</span>
+            <DisplayDateBadge v-if="settings.showPublishTimeBadge" :pkg :badge="false" rounded-full text-xs />
             <DisplayModuleType :pkg :badge="false" text-xs />
           </button>
         </div>

packages/node-modules-inspector/src/app/components/report/PublishTime.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { DisplayDateBadge } from '#components'
+import { computed } from 'vue'
+import { selectedNode } from '~/state/current'
+import { getPublishTime, payloads } from '~/state/payload'
+
+const packages = computed(() =>
+  Array.from(payloads.filtered.packages)
+    .filter(x => getPublishTime(x))
+    .sort((a, b) => +getPublishTime(a)! - +getPublishTime(b)!),
+)
+</script>
+
+<template>
+  <ReportExpendableContainer
+    v-if="packages.length"
+    :list="packages"
+    :title="['Oldest Packages', 'Newest Packages']"
+  >
+    <template #default="{ items }">
+      <div grid="~ cols-[1fr_max-content] gap-x-4 gap-y-1">
+        <div />
+        <div text-sm op50 text-right>
+          Publish Time
+        </div>
+
+        <template v-for="pkg of items" :key="pkg.spec">
+          <button
+            font-mono text-left hover:bg-active px2 ml--2 rounded
+            flex="~ gap-2 items-center"
+            @click="selectedNode = pkg"
+          >
+            <DisplayModuleType :pkg />
+            <DisplayPackageSpec :pkg />
+          </button>
+          <div flex justify-end>
+            <DisplayDateBadge :pkg />
+          </div>
+        </template>
+      </div>
+    </template>
+  </ReportExpendableContainer>
+</template>