feat: add a warning when the package license changes

app/components/LicenseDisplay.vue

@@ -1,13 +1,34 @@
 <script setup lang="ts">
 import { parseLicenseExpression } from '#shared/utils/spdx'
 
+import { useLicenseChanges } from '~/composables/useLicenseChanges'
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps<{
   license: string
+  packageName?: string
 }>()
 
+const { t } = useI18n()
+
 const tokens = computed(() => parseLicenseExpression(props.license))
+const licenseChanges = useLicenseChanges(() => props.packageName)
+
+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('; '),
+)
 
 const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
 </script>
 
 <template>
@@ -21,7 +42,7 @@
         class="link-subtle"
         :title="$t('package.license.view_spdx')"
       >
-        {{ token.value }}
+        {{ token.value }}!!
       </a>
       <span v-else-if="token.type === 'license'">{{ token.value }}</span>
       <span v-else-if="token.type === 'operator'" class="text-4xs">{{ token.value }}</span>
@@ -32,4 +53,26 @@
       aria-hidden="true"
     />
   </span>
+  <div v-if="changes.length > 0" class="text-red-500 flex justify-start items-center gap-x-1">
+    <p>change!</p>
+    <TooltipApp interactive position="top">
+      <span
+        tabindex="0"
+        class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+      >
+        <span
+          class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle"
+          role="img"
+          :aria-label="$t('package.versions.license_change_help')"
+        />
+      </span>
+      <template #content>
+        <p class="text-xs text-fg-muted">
+          <i18n-t keypath="package.versions.changed_license" tag="span">
+            <template #license_change>{{ licenseChangeText }}</template>
+          </i18n-t>
+        </p>
+      </template>
+    </TooltipApp>
+  </div>
 </template>

app/composables/useLicenseChanges.ts

@@ -0,0 +1,80 @@
+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 {
+  versions: Record<
+    string,
+    {
+      version: string
+      license?: string
+    }
+  >
+}
+
+/**
+ * Composable to detect license changes across all versions of a package
+ */
+export function useLicenseChanges(packageName: MaybeRefOrGetter<string | null | undefined>) {
+  return useAsyncData<LicenseChangesResult>(
+    () => `license-changes:${toValue(packageName)}`,
+    async () => {
+      const name = toValue(packageName)
+      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[] = []
+      let prevLicense: string | undefined = undefined
+
+      // `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 parse = (v: string) => v.split('.').map(Number)
+        const [aMajor, aMinor, aPatch] = parse(a.version as string)
+        const [bMajor, bMinor, bPatch] = parse(b.version as string)
+        if (aMajor !== bMajor) return aMajor! - bMajor!
+        if (aMinor !== bMinor) return aMinor! - bMinor!
+        return aPatch! - bPatch!
+      })
+
+      // Detect license changes
+      for (const version of versions) {
+        const license = (version.license as string) ?? 'UNKNOWN'
+        if (prevLicense && license !== prevLicense) {
+          changes.push({
+            from: prevLicense,
+            to: license,
+            version: version.version as string,
+          })
+        }
+        prevLicense = license
+      }
+      return { changes }
+    },
+    {
+      default: () => ({ changes: [] }),
+      watch: [() => toValue(packageName)],
+    },
+  )
+}

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

@@ -583,7 +583,11 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.stats.license') }}
               </dt>
               <dd class="font-mono text-sm text-fg">
-                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
+                <LicenseDisplay
+                  v-if="pkg.license"
+                  :license="pkg.license"
+                  :package-name="pkg.name"
+                />
                 <span v-else>{{ $t('package.license.none') }}</span>
               </dd>
             </div>

i18n/locales/en.json

@@ -431,7 +431,10 @@
       "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}",
       "filter_tooltip_link": "semver range",
       "no_matches": "No versions match this range",
       "copy_alt": {

i18n/locales/tr-TR.json

@@ -386,7 +386,10 @@
       "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}",
       "filter_tooltip_link": "semver aralığı",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {

i18n/schema.json

@@ -1297,9 +1297,18 @@
             "filter_help": {
               "type": "string"
             },
+            "license_change_help": {
+              "type": "string"
+            },
+            "license_change_item": {
+              "type": "string"
+            },
             "filter_tooltip": {
               "type": "string"
             },
+            "changed_license": {
+              "type": "string"
+            },
             "filter_tooltip_link": {
               "type": "string"
             },