perf: use shallowRef where possible

Author: serhalp

app/components/CollapsibleSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { shallowRef, computed } from 'vue'
 
 interface Props {
   title: string
@@ -19,7 +19,7 @@ const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
 const headingId = `${props.id}-heading`
 
-const isOpen = ref(true)
+const isOpen = shallowRef(true)
 
 onPrehydrate(() => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')

app/components/compare/PackageSelector.vue

@@ -9,8 +9,8 @@ const props = defineProps<{
 const maxPackages = computed(() => props.max ?? 4)
 
 // Input state
-const inputValue = ref('')
-const isInputFocused = ref(false)
+const inputValue = shallowRef('')
+const isInputFocused = shallowRef(false)
 
 // Use the shared npm search composable
 const { data: searchData, status } = useNpmSearch(inputValue, { size: 15 })

app/composables/usePackageComparison.ts

@@ -39,14 +39,14 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   // Derived array in current package order
   const packagesData = computed(() => packages.value.map(name => cache.value.get(name) ?? null))
 
-  const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
-  const error = ref<Error | null>(null)
+  const status = shallowRef<'idle' | 'pending' | 'success' | 'error'>('idle')
+  const error = shallowRef<Error | null>(null)
 
   // Track which packages are currently being fetched
   const loadingPackages = shallowRef(new Set<string>())
 
   // Track install size loading separately (it's slower)
-  const installSizeLoading = ref(false)
+  const installSizeLoading = shallowRef(false)
 
   // Fetch function - only fetches packages not already in cache
   async function fetchPackages(names: string[]) {