feat: add a warning when the package license changes (#2188)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>
Co-authored-by: James Garbutt <43081j@users.noreply.github.com>
Co-authored-by: Roman <dev@rman.dev>

Author: 5 people

app/components/LicenseChangeWarning.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { LicenseChangeResponse } from '~/composables/useLicenseChanges'
+
+const props = defineProps<{
+  change: LicenseChangeResponse['change']
+}>()
+</script>
+
+<template>
+  <div
+    v-if="props.change"
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg mt-1 gap-x-1 py-2 px-3"
+    :aria-label="$t('package.versions.license_change_help')"
+  >
+    <p class="text-md text-amber-800 dark:text-amber-400 flex items-center gap-2">
+      <span
+        class="i-lucide:alert-triangle w-4 h-4 flex-shrink-0"
+        role="img"
+        :aria-label="$t('package.versions.license_change_help')"
+      />
+      {{ $t('package.versions.license_change_warning') }}
+    </p>
+    <p class="text-md text-amber-800 dark:text-amber-400 mt-1">
+      {{
+        $t('package.versions.license_change_record', {
+          from: props.change?.from,
+          to: props.change?.to,
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<style scoped></style>

app/composables/useLicenseChanges.ts

@@ -0,0 +1,31 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
+export interface LicenseChangeResponse {
+  change: { from: string; to: string } | null
+}
+
+/**
+ * Composable to detect license changes across all versions of a package
+ */
+export function useLicenseChanges(
+  packageName: MaybeRefOrGetter<string | null | undefined>,
+  resolvedVersion: MaybeRefOrGetter<string | null | undefined> = () => undefined,
+) {
+  const name = computed(() => toValue(packageName))
+  if (!name) return { data: null } // Don't fetch if no name
+
+  const version = computed(() => toValue(resolvedVersion) ?? 'latest')
+
+  const url = computed(() => {
+    return name.value ? `/api/registry/license-change/${encodeURIComponent(name.value)}` : ''
+  })
+
+  const result = useFetch<LicenseChangeResponse>(url, {
+    query: computed(() => ({ version: version.value })),
+    key: `license-change:${name.value}:${version.value}`,
+    watch: [name, version],
+  })
+
+  return result
+}

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

@@ -204,6 +204,7 @@ const {
   error,
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
+const { data: licenseChangeData } = useLicenseChanges(packageName, resolvedVersion)
 const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
 const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
   useCommandPalettePackageVersions(packageName)
@@ -909,6 +910,8 @@ const showSkeleton = shallowRef(false)
         </section>
 
         <div class="space-y-6" :class="$style.areaVulns">
+          <!-- license change warning -->
+          <LicenseChangeWarning :change="licenseChangeData?.change ?? null" />
           <!-- Bad package warning -->
           <PackageReplacement
             v-if="moduleReplacement"

i18n/locales/en.json

@@ -567,6 +567,9 @@
       "filter_help": "Semver range filter help",
       "filter_tooltip": "Filter versions using a {link}. For example, ^3.0.0 shows all 3.x versions.",
       "filter_tooltip_link": "semver range",
+      "license_change_help": "License Change Details",
+      "license_change_warning": "License changed since previous version.",
+      "license_change_record": "The license of this package changed from \"{from}\" to \"{to}\".",
       "no_matches": "No versions match this range",
       "copy_alt": {
         "per_version_analysis": "{version} version was downloaded {downloads} times",

i18n/locales/tr-TR.json

@@ -387,6 +387,9 @@
       "filter_help": "Semver aralığı filtresi yardımı",
       "filter_tooltip": "Sürümleri {link} kullanarak filtreleyin. Örneğin, ^3.0.0 tüm 3.x sürümlerini gösterir.",
       "filter_tooltip_link": "semver aralığı",
+      "license_change_help": "Lisans Değişikliği Detayı",
+      "license_change_warning": "Önceki versiyondan sonra lisans değişikliği gerçekleşti.",
+      "license_change_record": "Lisans \"{from}\"dan \"{to}\"a değişti.",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {
         "per_version_analysis": "{version} sürümü {downloads} kez indirildi",

i18n/schema.json

@@ -1705,6 +1705,15 @@
             "filter_tooltip_link": {
               "type": "string"
             },
+            "license_change_help": {
+              "type": "string"
+            },
+            "license_change_warning": {
+              "type": "string"
+            },
+            "license_change_record": {
+              "type": "string"
+            },
             "no_matches": {
               "type": "string"
             },

server/api/registry/license-change/[...pkg].get.ts

@@ -0,0 +1,81 @@
+interface LicenseChangeRecord {
+  from: string
+  to: string
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    // 1. Extract the package name from the catch-all parameter
+    const packageName = getRouterParam(event, 'pkg')
+    if (!packageName) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Package name is required',
+      })
+    }
+    const query = getQuery(event)
+    const version = query.version || 'latest'
+
+    try {
+      // 2. Fetch the "Packument" on the server
+      // This stays on the server, so the client never downloads this massive JSON
+      const data = await fetchNpmPackage(packageName)
+
+      if (!data.versions || !data.time) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: 'Package metadata not found',
+        })
+      }
+      // 3. Process the logic
+      const versions = Object.values(data.versions)
+
+      // Sort versions chronologically using the 'time' object
+      versions.sort((a, b) => {
+        const timeA = new Date(data.time[a.version] as string).getTime()
+        const timeB = new Date(data.time[b.version] as string).getTime()
+        return timeA - timeB
+      })
+      let change: LicenseChangeRecord | null = null
+
+      const currentVersionIndex =
+        version === 'latest' ? versions.length - 1 : versions.findIndex(v => v.version === version)
+
+      const previousVersionIndex = currentVersionIndex - 1
+      const currentLicense = String(versions[currentVersionIndex]?.license || 'UNKNOWN')
+      const previousLicense = String(versions[previousVersionIndex]?.license || 'UNKNOWN')
+
+      if (currentLicense !== previousLicense) {
+        change = {
+          from: previousLicense,
+          to: currentLicense,
+        }
+      }
+      return { change }
+    } catch (error: any) {
+      throw createError({
+        statusCode: error.statusCode || 500,
+        statusMessage: `Failed to fetch license data: ${error.message}`,
+      })
+    }
+  },
+  {
+    // 5. Cache Configuration
+    maxAge: 60 * 60, // time in seconds
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      const query = getQuery(event)
+
+      // 1. remove the /'s from the package name
+      const cleanPkg = pkg.replace(/\/+$/, '').trim()
+
+      // 2. Get the version (default to 'latest' if not provided)
+      const version = query.version || 'latest'
+
+      // 3. Create a unique string such that it takes into account the pckage name and version
+      // sample result: "license-change:v1:faker:2.1.15"
+      return `license-change:v2:${cleanPkg}:${version}`
+    },
+  },
+)

test/nuxt/a11y.spec.ts

@@ -252,6 +252,7 @@ import {
   PackageSelectionView,
   PackageSelectionCheckbox,
   PackageExternalLinks,
+  LicenseChangeWarning,
   ChartSplitSparkline,
   TabRoot,
   TabList,
@@ -385,6 +386,21 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('LicenseChangeWarning', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LicenseChangeWarning, {
+        props: {
+          change: { from: 'MIT', to: 'GPL-3.0' },
+        },
+        global: {
+          mocks: { $t: (key: string) => key },
+          stubs: { 'i18n-t': { template: '<span><slot name="license_change" /></span>' } },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
   describe('AppLogo', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AppLogo)