feat: add a warning when the package license changes

app/components/LicenseChangeWarning.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useLicenseChanges } from '~/composables/useLicenseChanges'
+
+const props = defineProps<{
+  license?: string
+  packageName?: string
+  resolvedVersion: string | null | undefined
+}>()
+
+const licenseChanges = useLicenseChanges(
+  () => props.packageName,
+  () => props.resolvedVersion,
+)
+
+const changes = computed(() => licenseChanges.data.value?.changes ?? [])
+
+const licenseChangeText = computed(() =>
+  changes.value
+    .map(item =>
+      $t('package.versions.license_change_item', {
+        from: item.from,
+        to: item.to,
+        version: item.version,
+      }),
+    )
+    .join('; '),
+)
+</script>
+
+<template>
+  <div
+    v-if="changes && changes.length > 0"
+    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">
+      <i18n-t keypath="package.versions.changed_license" tag="span">
+        <template #license_change>{{ licenseChangeText }}</template>
+      </i18n-t>
+    </p>
+  </div>
+</template>
+
+<style scoped></style>

app/composables/useLicenseChanges.ts

@@ -0,0 +1,88 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
+export interface LicenseChange {
+  from: string
+  to: string
+  version: string
+}
+
+export interface LicenseChangesResult {
+  changes: LicenseChange[]
+}
+
+// Type definitions for npm registry response
+interface NpmRegistryVersion {
+  version: string
+  license?: string
+}
+
+// for registry responses of $fetch function, the type includes the key versions as well as many others too.
+interface NpmRegistryResponse {
+  time: Record<string, string>
+  versions: Record<string, NpmRegistryVersion>
+}
+
+/**
+ * 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,
+) {
+  return useAsyncData<LicenseChangesResult>(
+    () => {
+      const name = toValue(packageName)
+      const version = toValue(resolvedVersion) ?? 'latest'
+      return `license-changes:${name}:${version}`
+    },
+    async () => {
+      const name = toValue(packageName)
+      const resolvedVer = toValue(resolvedVersion)
+      if (!name) return { changes: [] }
+
+      // Fetch full package metadata from npm registry
+      const url = `https://registry.npmjs.org/${name}`
+      const data = await $fetch<NpmRegistryResponse>(url)
+
+      const changes: LicenseChange[] = []
+
+      // `data.versions` is an object with version keys
+      const versions = Object.values(data.versions) as NpmRegistryVersion[]
+
+      // Sort versions ascending to compare chronologically
+      versions.sort((a, b) => {
+        const dateA = new Date(data.time[a.version] as string).getTime()
+        const dateB = new Date(data.time[b.version] as string).getTime()
+
+        // Ascending order (oldest to newest)
+        return dateA - dateB
+      })
+
+      // When resolvedVer is not provided, check changes across all versions
+      const targetVersion = resolvedVer ?? versions[versions.length - 1]?.version
+
+      if (targetVersion) {
+        const resolvedIndex = versions.findIndex(v => v.version === targetVersion)
+
+        if (resolvedIndex > 0) {
+          const currentLicense = (versions[resolvedIndex]?.license as string) ?? 'UNKNOWN'
+          const previousLicense = (versions[resolvedIndex - 1]?.license as string) ?? 'UNKNOWN'
+
+          if (currentLicense !== previousLicense) {
+            changes.push({
+              from: previousLicense,
+              to: currentLicense,
+              version: (versions[resolvedIndex]?.version as string) || 'UNKNOWN',
+            })
+          }
+        }
+      }
+      return { changes }
+    },
+    {
+      default: () => ({ changes: [] }),
+      watch: [() => toValue(packageName), () => toValue(resolvedVersion)],
+    },
+  )
+}

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

@@ -883,6 +883,8 @@ const showSkeleton = shallowRef(false)
         </section>
 
         <div class="space-y-6" :class="$style.areaVulns">
+          <!-- license change warning -->
+          <LicenseChangeWarning :packageName="pkg.name" :resolvedVersion="resolvedVersion" />
           <!-- Bad package warning -->
           <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
           <!-- Size / dependency increase notice -->

i18n/locales/en.json

@@ -432,7 +432,11 @@
       "filter_placeholder": "Filter by semver (e.g. ^3.0.0)",
       "filter_invalid": "Invalid semver range",
       "filter_help": "Semver range filter help",
+      "license_change_help": "License Change Details",
+      "license_change_item": "from {from} to {to} at version {version}",
       "filter_tooltip": "Filter versions using a {link}. For example, ^3.0.0 shows all 3.x versions.",
+      "changed_license": "The license was changed {license_change}",
+      "license_change_warning": "License change!",
       "filter_tooltip_link": "semver range",
       "no_matches": "No versions match this range",
       "copy_alt": {

i18n/locales/tr-TR.json

@@ -386,7 +386,11 @@
       "filter_placeholder": "Semver ile filtrele (örn. ^3.0.0)",
       "filter_invalid": "Geçersiz semver aralığı",
       "filter_help": "Semver aralığı filtresi yardımı",
+      "license_change_help": "Lisans değişikliği yardımı",
+      "license_change_item": "{version} sürümünde {from}'den {to}'ya",
       "filter_tooltip": "Sürümleri {link} kullanarak filtreleyin. Örneğin, ^3.0.0 tüm 3.x sürümlerini gösterir.",
+      "changed_license": "Lisans değişikliği gerçekleşti: {license_change}",
+      "license_change_warning": "Lisans değişikliği!",
       "filter_tooltip_link": "semver aralığı",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {

i18n/schema.json

@@ -1300,9 +1300,21 @@
             "filter_help": {
               "type": "string"
             },
+            "license_change_help": {
+              "type": "string"
+            },
+            "license_change_item": {
+              "type": "string"
+            },
             "filter_tooltip": {
               "type": "string"
             },
+            "changed_license": {
+              "type": "string"
+            },
+            "license_change_warning": {
+              "type": "string"
+            },
             "filter_tooltip_link": {
               "type": "string"
             },

test/nuxt/a11y.spec.ts

@@ -235,6 +235,7 @@ import {
   PackageSelectionView,
   PackageSelectionCheckbox,
   PackageExternalLinks,
+  LicenseChangeWarning,
   ChartSplitSparkline,
   TabRoot,
   TabList,
@@ -349,6 +350,22 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('LicenseChangeWarning', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LicenseChangeWarning, {
+        props: {
+          packageName: 'vue',
+          resolvedVersion: '3.4.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)