forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use `useFetch` for `useDependencyAnalysis` (#551)
+8
-67
+1
-7
app/components/PackageVulnerabilityTree.vue
+1
-7
app/components/PackageVulnerabilityTree.vue
···
7
7
version: string
8
8
}>()
9
9
10
-
const {
11
-
data: vulnTree,
12
-
status,
13
-
fetch: fetchVulnTree,
14
-
} = useDependencyAnalysis(
10
+
const { data: vulnTree, status } = useDependencyAnalysis(
15
11
() => props.packageName,
16
12
() => props.version,
17
13
)
18
-
19
-
onMounted(() => fetchVulnTree())
20
14
21
15
const isExpanded = shallowRef(false)
22
16
const showAllPackages = shallowRef(false)
+4
-42
app/composables/useDependencyAnalysis.ts
+4
-42
app/composables/useDependencyAnalysis.ts
···
1
-
import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
2
-
3
1
/**
4
2
* Shared composable for dependency analysis data (vulnerabilities, deprecated packages).
5
3
* Fetches once and caches the result so multiple components can use it.
···
9
7
packageName: MaybeRefOrGetter<string>,
10
8
version: MaybeRefOrGetter<string>,
11
9
) {
12
-
// Build a stable key from the current values
13
-
const name = toValue(packageName)
14
-
const ver = toValue(version)
15
-
const key = `dep-analysis:v1:${name}@${ver}`
16
-
17
-
// Use useState for SSR-safe caching across components
18
-
const data = useState<VulnerabilityTreeResult | null>(key, () => null)
19
-
const status = useState<'idle' | 'pending' | 'success' | 'error'>(`${key}:status`, () => 'idle')
20
-
const error = useState<Error | null>(`${key}:error`, () => null)
21
-
22
-
async function fetch() {
23
-
const pkgName = toValue(packageName)
24
-
const pkgVersion = toValue(version)
25
-
26
-
if (!pkgName || !pkgVersion) return
27
-
28
-
// Already fetched or fetching
29
-
if (status.value === 'success' || status.value === 'pending') return
30
-
31
-
status.value = 'pending'
32
-
error.value = null
33
-
34
-
try {
35
-
const result = await $fetch<VulnerabilityTreeResult>(
36
-
`/api/registry/vulnerabilities/${encodePackageName(pkgName)}/v/${pkgVersion}`,
37
-
)
38
-
data.value = result
39
-
status.value = 'success'
40
-
} catch (e) {
41
-
error.value = e instanceof Error ? e : new Error('Failed to fetch dependency analysis')
42
-
status.value = 'error'
43
-
}
44
-
}
45
-
46
-
return {
47
-
data: readonly(data),
48
-
status: readonly(status),
49
-
error: readonly(error),
50
-
fetch,
51
-
}
10
+
return useFetch(
11
+
() =>
12
+
`/api/registry/vulnerabilities/${encodePackageName(toValue(packageName))}/v/${toValue(version)}`,
13
+
)
52
14
}
+3
-18
app/pages/[...package].vue
+3
-18
app/pages/[...package].vue
···
93
93
94
94
// Fetch dependency analysis (lazy, client-side)
95
95
// This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
96
-
const {
97
-
data: vulnTree,
98
-
status: vulnTreeStatus,
99
-
fetch: fetchVulnTree,
100
-
} = useDependencyAnalysis(packageName, () => displayVersion.value?.version ?? '')
101
-
onMounted(() => {
102
-
// Fetch vulnerability tree once displayVersion is available
103
-
if (displayVersion.value) {
104
-
fetchVulnTree()
105
-
}
106
-
})
107
-
watch(
108
-
() => displayVersion.value?.version,
109
-
() => {
110
-
if (displayVersion.value) {
111
-
fetchVulnTree()
112
-
}
113
-
},
96
+
const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
97
+
packageName,
98
+
() => displayVersion.value?.version ?? '',
114
99
)
115
100
116
101
// Keep latestVersion for comparison (to show "(latest)" badge)