Skip to content

Commit 88f76f2

Browse files
MopsgamerMopsgamer
committed
fixup
1 parent 4b4685d commit 88f76f2

5 files changed

Lines changed: 65 additions & 37 deletions

File tree

‎app/components/Package/Dependencies.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const numberFormatter = useNumberFormatter()
114114
v-if="sortedDependencies.length > 0"
115115
id="dependencies"
116116
:title="
117-
t(
117+
$t(
118118
'package.dependencies.title',
119119
{
120120
count: numberFormatter.format(sortedDependencies.length),
@@ -126,7 +126,7 @@ const numberFormatter = useNumberFormatter()
126126
<div class="mb-4">
127127
<div class="flex items-center justify-between mb-3">
128128
<div class="text-xs text-fg-subtle uppercase tracking-wider font-medium">
129-
{{ t('package.stats.install_size') }}
129+
{{ $t('package.stats.install_size') }}
130130
</div>
131131
</div>
132132
<PackageSizeBar
@@ -151,12 +151,12 @@ const numberFormatter = useNumberFormatter()
151151
v-if="outdatedDeps[dep]"
152152
class="shrink-0"
153153
:class="getVersionClass(outdatedDeps[dep])"
154-
:text="getOutdatedTooltip(outdatedDeps[dep], t)"
154+
:text="getOutdatedTooltip(outdatedDeps[dep], $t)"
155155
>
156156
<button
157157
type="button"
158158
class="inline-flex items-center justify-center p-2 -m-2"
159-
:aria-label="getOutdatedTooltip(outdatedDeps[dep], t)"
159+
:aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
160160
>
161161
<span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
162162
</button>
@@ -206,7 +206,7 @@ const numberFormatter = useNumberFormatter()
206206
{{ version }}
207207
</LinkBase>
208208
<span v-if="outdatedDeps[dep]" class="sr-only">
209-
({{ getOutdatedTooltip(outdatedDeps[dep], t) }})
209+
({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
210210
</span>
211211
<span v-if="getVulnerableDepInfo(dep)" class="sr-only">
212212
({{
@@ -225,7 +225,7 @@ const numberFormatter = useNumberFormatter()
225225
@click="expandDeps"
226226
>
227227
{{
228-
t(
228+
$t(
229229
'package.dependencies.show_all',
230230
{
231231
count: numberFormatter.format(sortedDependencies.length),
@@ -280,7 +280,7 @@ const numberFormatter = useNumberFormatter()
280280
@click="expandPeerDeps"
281281
>
282282
{{
283-
t(
283+
$t(
284284
'package.peer_dependencies.show_all',
285285
{
286286
count: numberFormatter.format(sortedPeerDependencies.length),
@@ -296,7 +296,7 @@ const numberFormatter = useNumberFormatter()
296296
v-if="sortedOptionalDependencies.length > 0"
297297
id="optional-dependencies"
298298
:title="
299-
t(
299+
$t(
300300
'package.optional_dependencies.title',
301301
{
302302
count: numberFormatter.format(sortedOptionalDependencies.length),
@@ -334,7 +334,7 @@ const numberFormatter = useNumberFormatter()
334334
@click="expandOptionalDeps"
335335
>
336336
{{
337-
t(
337+
$t(
338338
'package.optional_dependencies.show_all',
339339
{
340340
count: numberFormatter.format(sortedOptionalDependencies.length),

‎app/components/Package/SizeCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const displayDepCount = computed(() => {
4343
</script>
4444

4545
<template>
46-
<div ref="target" class="p-4 border border-border rounded-lg bg-neutral-950/40 transition-colors">
46+
<div ref="target" class="p-4 border border-border rounded-lg bg-bg-elevated transition-colors">
4747
<div class="flex items-start justify-between gap-4">
4848
<div class="min-w-0 flex-1">
4949
<div class="flex items-center gap-3 flex-wrap">

‎app/components/Package/SizeTable.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function toggleSort(col: keyof SizeEntry) {
7979
<tr
8080
v-for="i in 5"
8181
:key="`skeleton-${i}`"
82-
class="border-b border-border bg-neutral-950/20"
82+
class="border-b border-border"
8383
>
8484
<td class="py-3 px-4" v-for="j in 5" :key="j">
8585
<div class="h-4 w-full bg-bg-muted rounded animate-pulse" />
@@ -90,14 +90,14 @@ function toggleSort(col: keyof SizeEntry) {
9090
<tr
9191
v-for="entry in props.entries"
9292
:key="entry.name"
93-
class="bg-neutral-950/20 hover:bg-neutral-900/40 transition-colors items-center"
93+
class="hover:bg-bg-subtle transition-colors items-center"
9494
>
9595
<td class="px-4 py-3 min-w-0">
9696
<div class="flex items-center gap-3 min-w-0">
9797
<div class="flex-1 min-w-0">
9898
<LinkBase
9999
:to="packageRoute(entry.name, entry.version)"
100-
class="block truncate hover:text-accent transition-colors font-mono text-sm font-medium"
100+
class="block truncate font-mono text-sm font-medium"
101101
:title="entry.name"
102102
>
103103
{{ entry.name }}
@@ -120,10 +120,20 @@ function toggleSort(col: keyof SizeEntry) {
120120
{{ bytesFormatter.format(entry.selfSize) }}
121121
</td>
122122
<td class="px-4 py-3 text-end font-mono text-sm text-fg-muted">
123-
{{ bytesFormatter.format(entry.totalSize) }}
123+
<template v-if="!Number.isNaN(entry.totalSize)">
124+
{{ bytesFormatter.format(entry.totalSize) }}
125+
</template>
126+
<template v-else>
127+
<div class="inline-block w-3 h-3 border-2 border-fg-muted/20 border-t-accent rounded-full animate-spin" aria-hidden="true" />
128+
</template>
124129
</td>
125130
<td class="px-4 py-3 text-end font-mono text-sm text-fg-muted">
126-
{{ numberFormatter.format(entry.depCount) }}
131+
<template v-if="!Number.isNaN(entry.depCount)">
132+
{{ numberFormatter.format(entry.depCount) }}
133+
</template>
134+
<template v-else>
135+
<div class="inline-block w-3 h-3 border-2 border-fg-muted/20 border-t-accent rounded-full animate-spin" aria-hidden="true" />
136+
</template>
127137
</td>
128138
<td class="px-4 py-3 text-end font-mono text-sm">
129139
<div class="flex items-center justify-end gap-2">

‎app/composables/npm/usePackageSize.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function usePackageDependencySizes(
3838
NuxtError<unknown> | undefined
3939
> {
4040
return useAsyncData(
41-
`install-size:${toValue(packageName)}:${toValue(version)}`,
41+
`install-size-deps:${toValue(packageName)}:${toValue(version)}`,
4242
async (_app, { signal }) => {
4343
const entries = toValue(dependencies) ?? []
4444

‎app/pages/package-sizes/[[org]]/[packageName].vue‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,6 @@ const version = computed(() => route.params.version as string)
2121
const isScrolled = ref(false)
2222
const { y } = useWindowScroll()
2323
24-
watch([y, () => tableData.value.length, viewMode], ([newY, count, mode]) => {
25-
if (mode !== 'table' && mode !== 'cards') {
26-
isScrolled.value = false
27-
return
28-
}
29-
const threshold = mode === 'table' ? 8 : 3
30-
isScrolled.value = newY > 0 && count >= threshold
31-
})
32-
3324
// Fetch total install size
3425
const {
3526
data: installSize,
@@ -55,6 +46,12 @@ function compare(a: SizeEntry, b: SizeEntry) {
5546
return sortDir.value === 'asc' ? comparison : -comparison
5647
}
5748
49+
const { data: sizereqData } = usePackageDependencySizes(
50+
packageName,
51+
version,
52+
computed(() => installSize.value?.dependencies),
53+
)
54+
5855
const tableData = computed(() => {
5956
if (!installSize.value) return []
6057
@@ -63,12 +60,21 @@ const tableData = computed(() => {
6360
// Add dependencies
6461
if (installSize.value.dependencies) {
6562
for (const dep of installSize.value.dependencies) {
63+
const serverData = sizereqData.value?.[dep.name]
64+
const isSuccess = serverData?.kind === 'success'
65+
6666
entries.push({
6767
name: dep.name,
6868
version: dep.version,
69-
selfSize: dep.size,
70-
totalSize: dep.totalSize ?? NaN,
71-
depCount: dep.dependencyCount ?? NaN,
69+
selfSize: isSuccess && serverData.packageSize ? serverData.packageSize.selfSize : dep.size,
70+
totalSize:
71+
isSuccess && serverData.packageSize
72+
? serverData.packageSize.totalSize
73+
: (dep.totalSize ?? NaN),
74+
depCount:
75+
isSuccess && serverData.packageSize
76+
? serverData.packageSize.dependencyCount
77+
: (dep.dependencyCount ?? NaN),
7278
percentage: (dep.size / installSize.value.totalSize) * 100,
7379
})
7480
}
@@ -79,6 +85,20 @@ const tableData = computed(() => {
7985
return entries
8086
})
8187
88+
const isStickyEnabled = computed(() => {
89+
if (viewMode.value !== 'table' && viewMode.value !== 'cards') return false
90+
const threshold = viewMode.value === 'table' ? 18 : 8
91+
return tableData.value.length >= threshold
92+
})
93+
94+
watch([y, isStickyEnabled], ([newY, stickyEnabled]) => {
95+
if (!stickyEnabled) {
96+
isScrolled.value = false
97+
return
98+
}
99+
isScrolled.value = newY > 0
100+
})
101+
82102
useSeoMeta({
83103
title: () => `Sizes - ${packageName.value} - npmx`,
84104
description: () => `Dependency sizes for ${packageName.value}@${version.value}`,
@@ -104,12 +124,13 @@ const bytesFormatter = useBytesFormatter()
104124
</div>
105125

106126
<header
107-
class="sticky top-[55px] z-20 border-b transition-all duration-300"
108-
:class="
127+
class="z-20 border-b transition-all duration-300"
128+
:class="[
129+
isStickyEnabled ? 'sticky top-[55px]' : '',
109130
isScrolled
110131
? 'bg-bg/80 backdrop-blur-md pt-2 pb-2 border-border/50 shadow-sm'
111-
: 'pt-4 pb-8 border-transparent'
112-
"
132+
: 'pt-4 pb-8 border-transparent',
133+
]"
113134
>
114135
<div class="max-w-4xl mx-auto px-4 sm:px-8">
115136
<div
@@ -127,10 +148,7 @@ const bytesFormatter = useBytesFormatter()
127148
class="flex items-center gap-2 text-fg-muted font-mono transition-all duration-300 shrink-0"
128149
:class="isScrolled ? 'text-xs' : 'text-lg'"
129150
>
130-
<LinkBase
131-
:to="packageRoute(packageName, version)"
132-
class="hover:text-accent transition-colors"
133-
>
151+
<LinkBase :to="packageRoute(packageName, version)">
134152
{{ packageName }}
135153
</LinkBase>
136154
<span>@</span>
@@ -204,7 +222,7 @@ const bytesFormatter = useBytesFormatter()
204222
:version="version"
205223
:package-size="installSize"
206224
class="transition-all duration-300 min-w-[100px]"
207-
:class="isScrolled ? 'flex-1' : 'w-full'"
225+
:class="isScrolled ? 'flex-1' : ''"
208226
:height="isScrolled ? 'h-6' : 'h-10'"
209227
/>
210228

0 commit comments

Comments
 (0)