feat: show a warning when significant size increase

app/components/Package/SizeIncrease.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { InstallSizeDiff } from '~/composables/useInstallSizeDiff'
+
+const props = defineProps<{
+  diff: InstallSizeDiff
+}>()
+
+const bytesFormatter = useBytesFormatter()
+const numberFormatter = useNumberFormatter()
+
+const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
+</script>
+
+<template>
+  <div
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
+  >
+    <h2 class="font-medium mb-1 flex items-center gap-2">
+      <span class="i-lucide:trending-up w-4 h-4" aria-hidden="true" />
+      {{
+        diff.sizeThresholdExceeded && diff.depThresholdExceeded
+          ? $t('package.size_increase.title_both', { version: diff.comparisonVersion })
+          : diff.sizeThresholdExceeded
+            ? $t('package.size_increase.title_size', { version: diff.comparisonVersion })
+            : $t('package.size_increase.title_deps', { version: diff.comparisonVersion })
+      }}
+    </h2>
+    <p class="text-sm m-0 mt-1">
+      <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_increase.size" scope="global">
+        <template #percent
+          ><strong>{{ sizePercent }}%</strong></template
+        >
+        <template #size
+          ><strong>{{ bytesFormatter.format(diff.sizeIncrease) }}</strong></template
+        >
+      </i18n-t>
+      <template v-if="diff.sizeThresholdExceeded && diff.depThresholdExceeded"> · </template>
+      <i18n-t v-if="diff.depThresholdExceeded" keypath="package.size_increase.deps" scope="global">
+        <template #count
+          ><strong>+{{ numberFormatter.format(diff.depDiff) }}</strong></template
+        >
+      </i18n-t>
+    </p>
+  </div>
+</template>

app/composables/useInstallSizeDiff.ts

@@ -0,0 +1,115 @@
+import { compare, prerelease, valid } from 'semver'
+import type { InstallSizeResult, SlimPackument } from '#shared/types'
+
+export interface InstallSizeDiff {
+  comparisonVersion: string
+  sizeRatio: number
+  sizeIncrease: number
+  currentSize: number
+  previousSize: number
+  depDiff: number
+  currentDeps: number
+  previousDeps: number
+  sizeThresholdExceeded: boolean
+  depThresholdExceeded: boolean
+}
+
+const SIZE_INCREASE_THRESHOLD = 0.25
+const DEP_INCREASE_THRESHOLD = 5
+
+function getComparisonVersion(pkg: SlimPackument, resolvedVersion: string): string | null {
+  const isCurrentPrerelease = prerelease(resolvedVersion) !== null
+
+  if (isCurrentPrerelease) {
+    const latest = pkg['dist-tags']?.latest
+    if (!latest || latest === resolvedVersion) return null
+    return latest
+  }
+
+  // Find the previous version in time that was stable
+  const stableVersions = Object.keys(pkg.time)
+    .filter(v => v !== 'modified' && v !== 'created' && valid(v) !== null && prerelease(v) === null)
+    .sort((a, b) => compare(a, b))
+
+  const currentIdx = stableVersions.indexOf(resolvedVersion)
+  if (currentIdx <= 0) return null
+
+  return stableVersions[currentIdx - 1]!
+}
+
+export function useInstallSizeDiff(
+  packageName: MaybeRefOrGetter<string>,
+  resolvedVersion: MaybeRefOrGetter<string | null | undefined>,
+  pkg: MaybeRefOrGetter<SlimPackument | null | undefined>,
+  currentInstallSize: MaybeRefOrGetter<InstallSizeResult | null | undefined>,
+) {
+  const comparisonVersion = computed<string | null>(() => {
+    const pkgVal = toValue(pkg)
+    const version = toValue(resolvedVersion)
+    if (!pkgVal || !version) return null
+    return getComparisonVersion(pkgVal, version)
+  })
+
+  const {
+    data: comparisonInstallSize,
+    status: comparisonStatus,
+    execute: fetchComparisonSize,
+  } = useLazyFetch<InstallSizeResult | null>(
+    () => {
+      const v = comparisonVersion.value
+      if (!v) return ''
+      return `/api/registry/install-size/${toValue(packageName)}/v/${v}`
+    },
+    {
+      server: false,
+      immediate: false,
+      default: () => null,
+    },
+  )
+
+  if (import.meta.client) {
+    watch(
+      [comparisonVersion, () => toValue(packageName)],
+      ([v]) => {
+        if (v) fetchComparisonSize()
+      },
+      { immediate: true },
+    )
+  }
+
+  const diff = computed<InstallSizeDiff | null>(() => {
+    const current = toValue(currentInstallSize)
+    const previous = comparisonInstallSize.value
+    const cv = comparisonVersion.value
+
+    if (!current || !previous || !cv) return null
+    const name = toValue(packageName)
+    const version = toValue(resolvedVersion)
+    if (previous.version !== cv || previous.package !== name) return null
+    if (current.version !== version || current.package !== name) return null
+
+    const sizeRatio =
+      previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0
+    const depDiff = current.dependencyCount - previous.dependencyCount
+
+    const sizeThresholdExceeded = sizeRatio > SIZE_INCREASE_THRESHOLD
+    const depThresholdExceeded = depDiff > DEP_INCREASE_THRESHOLD
+
+    if (!sizeThresholdExceeded && !depThresholdExceeded) return null
+
+    return {
+      comparisonVersion: cv,
+      sizeRatio,
+      sizeIncrease: current.totalSize - previous.totalSize,
+      currentSize: current.totalSize,
+      previousSize: previous.totalSize,
+      depDiff,
+      currentDeps: current.dependencyCount,
+      previousDeps: previous.dependencyCount,
+      sizeThresholdExceeded,
+      depThresholdExceeded,
+    }
+  })
+
+  return { diff, comparisonVersion, comparisonStatus }
+}

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type {
+  InstallSizeResult,
   NpmVersionDist,
   PackageVersionInfo,
   PackumentVersion,
@@ -19,6 +20,7 @@ import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-securi
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
@@ -182,13 +184,6 @@ const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(() => `/api/jsr/${package
 })
 
 // Fetch total install size (lazy, can be slow for large dependency trees)
-interface InstallSizeResult {
-  package: string
-  version: string
-  selfSize: number
-  totalSize: number
-  dependencyCount: number
-}
 const {
   data: installSize,
   status: installSizeStatus,
@@ -255,6 +250,8 @@ const {
   error,
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
+const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
+
 // Detect two hydration scenarios where the external _payload.json is missing:
 //
 // 1. SPA fallback (200.html): No real content was server-rendered.
@@ -1333,6 +1330,8 @@ const showSkeleton = shallowRef(false)
       <div class="space-y-6" :class="$style.areaVulns">
         <!-- Bad package warning -->
         <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+        <!-- Size / dependency increase notice -->
+        <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree

i18n/locales/en.json

@@ -157,6 +157,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",

i18n/schema.json

@@ -475,6 +475,27 @@
           },
           "additionalProperties": false
         },
+        "size_increase": {
+          "type": "object",
+          "properties": {
+            "title_size": {
+              "type": "string"
+            },
+            "title_deps": {
+              "type": "string"
+            },
+            "title_both": {
+              "type": "string"
+            },
+            "size": {
+              "type": "string"
+            },
+            "deps": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "replacement": {
           "type": "object",
           "properties": {

lunaria/files/en-GB.json

@@ -156,6 +156,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",

lunaria/files/en-US.json

@@ -156,6 +156,13 @@
       "version": "This version has been deprecated.",
       "no_reason": "No reason provided"
     },
+    "size_increase": {
+      "title_size": "Significant size increase since v{version}",
+      "title_deps": "Significant dependency count increase since v{version}",
+      "title_both": "Significant size and dependency increase since v{version}",
+      "size": "Install size increased by {percent} ({size} larger)",
+      "deps": "{count} more dependencies"
+    },
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",

server/utils/install-size.ts

@@ -1,29 +1,3 @@
-/**
- * Result of install size calculation
- */
-export interface InstallSizeResult {
-  /** Package name */
-  package: string
-  /** Package version */
-  version: string
-  /** Unpacked size of the package itself (bytes) */
-  selfSize: number
-  /** Total unpacked size including all dependencies (bytes) */
-  totalSize: number
-  /** Number of dependencies (including transitive) */
-  dependencyCount: number
-  /** Breakdown of dependency sizes */
-  dependencies: DependencySize[]
-}
-
-export interface DependencySize {
-  name: string
-  version: string
-  size: number
-  /** True if this is an optional dependency */
-  optional?: boolean
-}
-
 /**
  * Calculate the total install size for a package.
  *

shared/types/index.ts

@@ -9,3 +9,4 @@ export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
 export * from './version-downloads'
+export * from './install-size'

shared/types/install-size.ts

@@ -0,0 +1,22 @@
+export interface DependencySize {
+  name: string
+  version: string
+  size: number
+  /** True if this is an optional dependency */
+  optional?: boolean
+}
+
+export interface InstallSizeResult {
+  /** Package name */
+  package: string
+  /** Package version */
+  version: string
+  /** Unpacked size of the package itself (bytes) */
+  selfSize: number
+  /** Total unpacked size including all dependencies (bytes) */
+  totalSize: number
+  /** Number of dependencies (including transitive) */
+  dependencyCount: number
+  /** Breakdown of dependency sizes */
+  dependencies: DependencySize[]
+}