1826-add a warning and info for license changes. Added support for TR language too.

Author: aisiklar

app/components/LicenseDisplay.vue

@@ -1,13 +1,36 @@
 <script setup lang="ts">
-import { parseLicenseExpression } from '#shared/utils/spdx'
+import { parseLicenseExpression } from "#shared/utils/spdx";
+
+import { useLicenseChanges } from "~/composables/useLicenseChanges";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
-  license: string
-}>()
+  license: string;
+  packageName?: string;
+}>();
+
+const { t } = useI18n();
+
+const tokens = computed(() => parseLicenseExpression(props.license));
+const licenseChanges = useLicenseChanges(() => props.packageName);
 
-const tokens = computed(() => parseLicenseExpression(props.license))
+const changes = computed(() => licenseChanges.data.value?.changes ?? []);
 
-const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
+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,15 +44,42 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         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>
+      <span v-else-if="token.type === 'operator'" class="text-4xs">{{
+        token.value
+      }}</span>
     </template>
     <span
       v-if="hasAnyValidLicense"
       class="i-lucide:scale w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
       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)],
+    },
+  )
+}