moved license change logic to server side, to an api, changed nested translation to simpler, removed version number from change record as it is not necessary for current/last version check

Author: aisiklar

app/components/LicenseChangeWarning.vue

@@ -7,29 +7,16 @@ const props = defineProps<{
   resolvedVersion: string | null | undefined
 }>()
 
-const licenseChanges = useLicenseChanges(
+const { data: licenseData } = 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('; '),
-)
+const licenseChangeRecord = computed(() => licenseData?.value?.change ?? null)
 </script>
 
 <template>
   <div
-    v-if="changes && changes.length > 0"
+    v-if="licenseChangeRecord"
     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')"
   >
@@ -42,9 +29,12 @@ const licenseChangeText = computed(() =>
       {{ $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>
+      {{
+        $t('package.versions.license_change_record', {
+          from: licenseChangeRecord?.from,
+          to: licenseChangeRecord?.to,
+        })
+      }}
     </p>
   </div>
 </template>

app/composables/useLicenseChanges.ts

@@ -1,26 +1,7 @@
 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>
+interface LicenseChangeResponse {
+  change: { from: string; to: string } | null
 }
 
 /**
@@ -30,59 +11,19 @@ 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
-      })
+  const name = computed(() => toValue(packageName))
+  if (!name) return { data: null } // Don't fetch if no name
 
-      // When resolvedVer is not provided, check changes across all versions
-      const targetVersion = resolvedVer ?? versions[versions.length - 1]?.version
+  const version = computed(() => toValue(resolvedVersion) ?? 'latest')
 
-      if (targetVersion) {
-        const resolvedIndex = versions.findIndex(v => v.version === targetVersion)
+  const url = computed(() => {
+    return name.value ? `/api/registry/license-change/${encodeURIComponent(name.value)}` : ''
+  })
 
-        if (resolvedIndex > 0) {
-          const currentLicense = (versions[resolvedIndex]?.license as string) ?? 'UNKNOWN'
-          const previousLicense = (versions[resolvedIndex - 1]?.license as string) ?? 'UNKNOWN'
+  const result = useFetch<LicenseChangeResponse>(url, {
+    query: computed(() => ({ version: version.value })),
+    watch: [url, version],
+  })
 
-          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)],
-    },
-  )
+  return result
 }

i18n/locales/en.json

@@ -433,10 +433,9 @@
       "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!",
+      "license_change_record": "License changed from {from} to {to}.",
       "filter_tooltip_link": "semver range",
       "no_matches": "No versions match this range",
       "copy_alt": {

i18n/locales/tr-TR.json

@@ -387,10 +387,9 @@
       "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!",
+      "license_change_record": "{from}'dan {to}'e lisans değişikliği gerçekleşti.",
       "filter_tooltip_link": "semver aralığı",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {

i18n/schema.json

@@ -1303,13 +1303,10 @@
             "license_change_help": {
               "type": "string"
             },
-            "license_change_item": {
-              "type": "string"
-            },
             "filter_tooltip": {
               "type": "string"
             },
-            "changed_license": {
+            "license_change_record": {
               "type": "string"
             },
             "license_change_warning": {

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

@@ -0,0 +1,94 @@
+interface LicenseChangeRecord {
+  from: string
+  to: string
+}
+
+interface NpmRegistryVersion {
+  version: string
+  license?: string
+}
+
+interface NpmRegistryResponse {
+  time: Record<string, string>
+  versions: Record<string, NpmRegistryVersion>
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    // 1. Extract the package name from the catch-all parameter
+    const rawPkg = getRouterParam(event, 'pkg')
+    if (!rawPkg) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Package name is required',
+      })
+    }
+    const query = getQuery(event)
+    const version = query.version || 'latest'
+
+    const packageName = decodeURIComponent(rawPkg).replace(/\/+$/, '').trim()
+
+    try {
+      // 2. Fetch the "Packument" on the server
+      // This stays on the server, so the client never downloads this massive JSON
+      const data = await $fetch<NpmRegistryResponse>(`https://registry.npmjs.org/${packageName}`)
+
+      if (!data.versions || !data.time) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: 'Package metadata not found',
+        })
+      }
+
+      // 3. Process the logic (moved from your composable)
+      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 = versions[currentVersionIndex]?.license || 'UNKNOWN'
+      const previousLicense = versions[previousVersionIndex]?.license || 'UNKNOWN'
+
+      if (currentLicense !== previousLicense) {
+        change = {
+          from: previousLicense as string,
+          to: currentLicense as string,
+        }
+      }
+      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 including the version
+      // Result: "license-change:v1:lodash:4.17.21"
+      return `license-change:v2:${cleanPkg}:${version}`
+    },
+  },
+)