11<script setup lang="ts">
22import type { RouteLocationRaw } from ' vue-router'
33import { compare } from ' semver'
4- import type { TimelineResponse , TimelineVersion } from ' ~~/server/api/registry/timeline/[...pkg].get'
4+ import type {
5+ TimelineResponse ,
6+ TimelineVersion ,
7+ } from ' ~~/server/api/registry/timeline/[...pkg].get'
58
69definePageMeta ({
710 name: ' timeline' ,
@@ -46,24 +49,26 @@ const loadError = ref(false)
4649const hasMore = computed (() => timelineEntries .value .length < totalVersions .value )
4750
4851async function fetchTimeline(offset : number ): Promise <TimelineResponse > {
49- return $fetch <TimelineResponse >(
50- ` /api/registry/timeline/${packageName .value } ` ,
51- { query: { offset , limit: PAGE_SIZE } },
52- )
52+ return $fetch <TimelineResponse >(` /api/registry/timeline/${packageName .value } ` , {
53+ query: { offset , limit: PAGE_SIZE },
54+ })
5355}
5456
5557// Initial load — useAsyncData serializes the full response across SSR → client
56- const { data : initialTimeline } = await useAsyncData (
57- ` timeline:${packageName .value } ` ,
58- () => fetchTimeline (0 ),
58+ const { data : initialTimeline } = await useAsyncData (` timeline:${packageName .value } ` , () =>
59+ fetchTimeline (0 ),
5960)
6061
61- watch (initialTimeline , (data ) => {
62- if (data ) {
63- timelineEntries .value = data .versions
64- totalVersions .value = data .total
65- }
66- }, { immediate: true })
62+ watch (
63+ initialTimeline ,
64+ data => {
65+ if (data ) {
66+ timelineEntries .value = data .versions
67+ totalVersions .value = data .total
68+ }
69+ },
70+ { immediate: true },
71+ )
6772
6873async function loadMore() {
6974 if (loadingMore .value || sizesLoading .value ) return
@@ -73,11 +78,9 @@ async function loadMore() {
7378 const data = await fetchTimeline (timelineEntries .value .length )
7479 timelineEntries .value = [... timelineEntries .value , ... data .versions ]
7580 totalVersions .value = data .total
76- }
77- catch {
81+ } catch {
7882 loadError .value = true
79- }
80- finally {
83+ } finally {
8184 loadingMore .value = false
8285 }
8386}
@@ -185,9 +188,10 @@ const versionSubEvents = computed(() => {
185188 key: ' deps' ,
186189 positive: depsDecreased ,
187190 icon: depsDecreased ? ' i-lucide:trending-down' : ' i-lucide:trending-up' ,
188- text: depDiff > 0
189- ? t (' package.timeline.dep_increase' , { count: depDiff })
190- : t (' package.timeline.dep_decrease' , { count: Math .abs (depDiff ) }),
191+ text:
192+ depDiff > 0
193+ ? t (' package.timeline.dep_increase' , { count: depDiff })
194+ : t (' package.timeline.dep_decrease' , { count: Math .abs (depDiff ) }),
191195 })
192196 }
193197 }
@@ -346,13 +350,19 @@ useSeoMeta({
346350 >
347351 <span
348352 class =" absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
349- :class =" ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'"
353+ :class ="
354+ ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
355+ "
350356 >
351357 <span class =" w-2 h-2 text-white" :class =" ev.icon" aria-hidden =" true" />
352358 </span >
353359 <p
354360 class =" text-xs"
355- :class =" ev.positive ? 'text-green-700 dark:text-green-400' : 'text-amber-700 dark:text-amber-400'"
361+ :class ="
362+ ev.positive
363+ ? 'text-green-700 dark:text-green-400'
364+ : 'text-amber-700 dark:text-amber-400'
365+ "
356366 >
357367 {{ ev.text }}
358368 </p >
0 commit comments