From a27e494d8ca6ad2bbf177f938c5e123e917e7ca2 Mon Sep 17 00:00:00 2001
From: OrbisK <robin.kehl@singular-it.de>
Date: Sat, 31 Jan 2026 21:24:01 +0100
Subject: [PATCH 1/3] perf: use `useFetch` for `useDependencyAnalysis`

---
 app/components/PackageDependencies.vue      |  3 --
 app/components/PackageVulnerabilityTree.vue |  8 +---
 app/composables/useDependencyAnalysis.ts    | 46 ++-------------------
 app/pages/[...package].vue                  | 21 ++--------
 4 files changed, 8 insertions(+), 70 deletions(-)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index ebd3783fed..b800ec6ddb 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useDependencyAnalysis } from '~/composables/useDependencyAnalysis'
-import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
-
 const props = defineProps<{
   packageName: string
   version: string
diff --git a/app/components/PackageVulnerabilityTree.vue b/app/components/PackageVulnerabilityTree.vue
index 7ac9eadf6e..0b5b2a4293 100644
--- a/app/components/PackageVulnerabilityTree.vue
+++ b/app/components/PackageVulnerabilityTree.vue
@@ -7,17 +7,11 @@ const props = defineProps<{
   version: string
 }>()
 
-const {
-  data: vulnTree,
-  status,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(
+const { data: vulnTree, status } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
-onMounted(() => fetchVulnTree())
-
 const isExpanded = shallowRef(false)
 const showAllPackages = shallowRef(false)
 const showAllVulnerabilities = shallowRef(false)
diff --git a/app/composables/useDependencyAnalysis.ts b/app/composables/useDependencyAnalysis.ts
index 36f1baad1d..d8eee606a2 100644
--- a/app/composables/useDependencyAnalysis.ts
+++ b/app/composables/useDependencyAnalysis.ts
@@ -1,5 +1,3 @@
-import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
-
 /**
  * Shared composable for dependency analysis data (vulnerabilities, deprecated packages).
  * Fetches once and caches the result so multiple components can use it.
@@ -9,44 +7,8 @@ export function useDependencyAnalysis(
   packageName: MaybeRefOrGetter<string>,
   version: MaybeRefOrGetter<string>,
 ) {
-  // Build a stable key from the current values
-  const name = toValue(packageName)
-  const ver = toValue(version)
-  const key = `dep-analysis:v1:${name}@${ver}`
-
-  // Use useState for SSR-safe caching across components
-  const data = useState<VulnerabilityTreeResult | null>(key, () => null)
-  const status = useState<'idle' | 'pending' | 'success' | 'error'>(`${key}:status`, () => 'idle')
-  const error = useState<Error | null>(`${key}:error`, () => null)
-
-  async function fetch() {
-    const pkgName = toValue(packageName)
-    const pkgVersion = toValue(version)
-
-    if (!pkgName || !pkgVersion) return
-
-    // Already fetched or fetching
-    if (status.value === 'success' || status.value === 'pending') return
-
-    status.value = 'pending'
-    error.value = null
-
-    try {
-      const result = await $fetch<VulnerabilityTreeResult>(
-        `/api/registry/vulnerabilities/${encodePackageName(pkgName)}/v/${pkgVersion}`,
-      )
-      data.value = result
-      status.value = 'success'
-    } catch (e) {
-      error.value = e instanceof Error ? e : new Error('Failed to fetch dependency analysis')
-      status.value = 'error'
-    }
-  }
-
-  return {
-    data: readonly(data),
-    status: readonly(status),
-    error: readonly(error),
-    fetch,
-  }
+  return useFetch(
+    () =>
+      `/api/registry/vulnerabilities/${encodePackageName(toValue(packageName))}/v/${toValue(version)}`,
+  )
 }
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index caf779b48d..f300426d6d 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -93,24 +93,9 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
 
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
-const {
-  data: vulnTree,
-  status: vulnTreeStatus,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(packageName, () => displayVersion.value?.version ?? '')
-onMounted(() => {
-  // Fetch vulnerability tree once displayVersion is available
-  if (displayVersion.value) {
-    fetchVulnTree()
-  }
-})
-watch(
-  () => displayVersion.value?.version,
-  () => {
-    if (displayVersion.value) {
-      fetchVulnTree()
-    }
-  },
+const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
+  packageName,
+  () => displayVersion.value?.version ?? '',
 )
 
 // Keep latestVersion for comparison (to show "(latest)" badge)

From 8240f9061fe39b01457ae43ea0b28059bf3e02f5 Mon Sep 17 00:00:00 2001
From: OrbisK <robin.kehl@singular-it.de>
Date: Sat, 31 Jan 2026 21:44:14 +0100
Subject: [PATCH 2/3] chore: revert removing imports to satisfy knip

---
 app/components/PackageDependencies.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index b800ec6ddb..f347d5ecf0 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
+
 const props = defineProps<{
   packageName: string
   version: string

From 14f7941fbfaef6062477099c22b09a6c4721682e Mon Sep 17 00:00:00 2001
From: OrbisK <robin.kehl@singular-it.de>
Date: Sat, 31 Jan 2026 21:48:14 +0100
Subject: [PATCH 3/3] chore: revert removing imports to satisfy knip

---
 app/components/PackageDependencies.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index f347d5ecf0..ebd3783fed 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useDependencyAnalysis } from '~/composables/useDependencyAnalysis'
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 
 const props = defineProps<{