fix: compute license changes in page

If we compute the license change in the warning component, it is
possible the fetch resolves _after_ SSR completes it seems. So this
means the result is null and no notice is shown (via SSR).

When you later navigate to a version, the client does an actual fetch
and the notice is now shown.

To fix this, I've moved the license change call to the page which is how
all other composables in this page work. The license warning component
then just consumes the change data.

Author: 43081j

app/components/LicenseChangeWarning.vue

@@ -1,23 +1,14 @@
 <script setup lang="ts">
-import { useLicenseChanges } from '~/composables/useLicenseChanges'
+import type { LicenseChangeResponse } from '~/composables/useLicenseChanges'
 
 const props = defineProps<{
-  license?: string
-  packageName?: string
-  resolvedVersion: string | null | undefined
+  change: LicenseChangeResponse['change']
 }>()
-
-const { data: licenseData } = useLicenseChanges(
-  () => props.packageName,
-  () => props.resolvedVersion,
-)
-
-const licenseChangeRecord = computed(() => licenseData?.value?.change ?? null)
 </script>
 
 <template>
   <div
-    v-if="licenseChangeRecord"
+    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')"
   >
@@ -32,8 +23,8 @@ const licenseChangeRecord = computed(() => licenseData?.value?.change ?? null)
     <p class="text-md text-amber-800 dark:text-amber-400 mt-1">
       {{
         $t('package.versions.license_change_record', {
-          from: licenseChangeRecord?.from,
-          to: licenseChangeRecord?.to,
+          from: props.change?.from,
+          to: props.change?.to,
         })
       }}
     </p>

app/composables/useLicenseChanges.ts

@@ -1,6 +1,7 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
-interface LicenseChangeResponse {
+
+export interface LicenseChangeResponse {
   change: { from: string; to: string } | null
 }
 

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

@@ -199,6 +199,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)
@@ -906,7 +907,7 @@ const showSkeleton = shallowRef(false)
 
         <div class="space-y-6" :class="$style.areaVulns">
           <!-- license change warning -->
-          <LicenseChangeWarning :packageName="pkg.name" :resolvedVersion="resolvedVersion" />
+          <LicenseChangeWarning :change="licenseChangeData?.change ?? null" />
           <!-- Bad package warning -->
           <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
           <!-- Size / dependency increase notice -->

test/nuxt/a11y.spec.ts

@@ -391,8 +391,7 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(LicenseChangeWarning, {
         props: {
-          packageName: 'vue',
-          resolvedVersion: '3.4.0',
+          change: { from: 'MIT', to: 'GPL-3.0' },
         },
         global: {
           mocks: { $t: (key: string) => key },