perf: use shallowRef and useTemplateRef (#476)

OrbisK · web-flow · commit ae7818896cb1 · 2026-01-31T11:07:06.000Z
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -12,7 +12,7 @@ const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
 
-const showFullSearch = ref(false)
+const showFullSearch = shallowRef(false)
 
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input
diff --git a/app/components/AuthButton.client.vue b/app/components/AuthButton.client.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showModal = ref(false)
+const showModal = shallowRef(false)
 const { user } = useAtproto()
 </script>
 
diff --git a/app/components/AuthButton.vue b/app/components/AuthButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showModal = ref(false)
+const showModal = shallowRef(false)
 const { user } = useAtproto()
 </script>
 
diff --git a/app/components/AuthModal.vue b/app/components/AuthModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
-const handleInput = ref('')
+const handleInput = shallowRef('')
 
 const { user, logout } = useAtproto()
 
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
@@ -10,7 +10,7 @@ const emit = defineEmits<{
   reset: []
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 const buttonRef = useTemplateRef('buttonRef')
 const menuRef = useTemplateRef('menuRef')
 const menuId = useId()
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
@@ -5,14 +5,9 @@ defineProps<{
 }>()
 
 const isOpen = shallowRef(false)
-const popupEl = ref<HTMLElement | null>(null)
+const popupEl = useTemplateRef('popupEl')
 const popupPosition = shallowRef<{ top: number; left: number } | null>(null)
 
-// Function ref - captures the element when popup mounts
-function setPopupRef(el: unknown) {
-  popupEl.value = (el as HTMLElement) || null
-}
-
 function closePopup() {
   isOpen.value = false
 }
@@ -78,7 +73,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Tree popup -->
     <div
       v-if="isOpen"
-      :ref="setPopupRef"
+      ref="popupEl"
       class="fixed z-[100] bg-bg-elevated border border-border rounded-lg shadow-xl p-3 min-w-64 max-w-sm"
       :style="getPopupStyle()"
     >
diff --git a/app/components/FilterPanel.vue b/app/components/FilterPanel.vue
@@ -27,8 +27,8 @@ const emit = defineEmits<{
   'toggleKeyword': [keyword: string]
 }>()
 
-const isExpanded = ref(false)
-const showAllKeywords = ref(false)
+const isExpanded = shallowRef(false)
+const showAllKeywords = shallowRef(false)
 
 const displayedKeywords = computed(() => {
   const keywords = props.availableKeywords ?? []
diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
@@ -10,9 +10,9 @@ const {
 
 const { user: atprotoUser } = useAtproto()
 
-const isOpen = ref(false)
-const showConnectorModal = ref(false)
-const showAuthModal = ref(false)
+const isOpen = shallowRef(false)
+const showConnectorModal = shallowRef(false)
+const showAuthModal = shallowRef(false)
 
 /** Check if connected to at least one service */
 const hasAnyConnection = computed(() => isNpmConnected.value || !!atprotoUser.value)
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
@@ -5,11 +5,11 @@ const props = defineProps<{
 
 const { listUserOrgs } = useConnector()
 
-const isOpen = ref(false)
-const isLoading = ref(false)
-const orgs = ref<string[]>([])
-const hasLoaded = ref(false)
-const error = ref<string | null>(null)
+const isOpen = shallowRef(false)
+const isLoading = shallowRef(false)
+const orgs = shallowRef<string[]>([])
+const hasLoaded = shallowRef(false)
+const error = shallowRef<string | null>(null)
 
 async function loadOrgs() {
   if (hasLoaded.value || isLoading.value) return
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
@@ -5,11 +5,11 @@ const props = defineProps<{
 
 const { listUserPackages } = useConnector()
 
-const isOpen = ref(false)
-const isLoading = ref(false)
-const packages = ref<string[]>([])
-const hasLoaded = ref(false)
-const error = ref<string | null>(null)
+const isOpen = shallowRef(false)
+const isLoading = shallowRef(false)
+const packages = shallowRef<string[]>([])
+const hasLoaded = shallowRef(false)
+const error = shallowRef<string | null>(null)
 
 async function loadPackages() {
   if (hasLoaded.value || isLoading.value) return
diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
@@ -20,7 +20,7 @@ const {
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const colorMode = useColorMode()
-const resolvedMode = ref<'light' | 'dark'>('light')
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 
 const { width } = useElementSize(rootEl)
@@ -221,18 +221,18 @@ function extractDates(dateLabel: string): [string, string] | null {
  * - selectedGranularity: immediate UI
  * - displayedGranularity: only updated once data is ready
  */
-const selectedGranularity = ref<ChartTimeGranularity>('weekly')
-const displayedGranularity = ref<ChartTimeGranularity>('weekly')
+const selectedGranularity = shallowRef<ChartTimeGranularity>('weekly')
+const displayedGranularity = shallowRef<ChartTimeGranularity>('weekly')
 
 /**
  * Date range inputs.
  * They are initialized from the current effective range:
  * - weekly: from weeklyDownloads first -> weekStart/weekEnd
  * - fallback: last 30 days ending yesterday (client-side)
  */
-const startDate = ref<string>('') // YYYY-MM-DD
-const endDate = ref<string>('') // YYYY-MM-DD
-const hasUserEditedDates = ref(false)
+const startDate = shallowRef<string>('') // YYYY-MM-DD
+const endDate = shallowRef<string>('') // YYYY-MM-DD
+const hasUserEditedDates = shallowRef(false)
 
 function initDateRangeFromWeekly() {
   if (hasUserEditedDates.value) return
@@ -274,8 +274,8 @@ watch(
   { immediate: true },
 )
 
-const initialStartDate = ref<string>('') // YYYY-MM-DD
-const initialEndDate = ref<string>('') // YYYY-MM-DD
+const initialStartDate = shallowRef<string>('') // YYYY-MM-DD
+const initialEndDate = shallowRef<string>('') // YYYY-MM-DD
 
 function setInitialRangeIfEmpty() {
   if (initialStartDate.value || initialEndDate.value) return
@@ -343,8 +343,8 @@ watch(
 
 const { fetchPackageDownloadEvolution } = useCharts()
 
-const evolution = ref<EvolutionData>(weeklyDownloads)
-const pending = ref(false)
+const evolution = shallowRef<EvolutionData>(weeklyDownloads)
+const pending = shallowRef(false)
 
 let lastRequestKey = ''
 let requestToken = 0
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
@@ -8,7 +8,7 @@ const { packageName } = defineProps<{
   packageName: string
 }>()
 
-const showModal = ref(false)
+const showModal = shallowRef(false)
 
 const { data: packument } = usePackage(() => packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
@@ -19,7 +19,7 @@ const { accentColors, selectedAccentColor } = useAccentColor()
 
 const colorMode = useColorMode()
 
-const resolvedMode = ref<'light' | 'dark'>('light')
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
 
 const rootEl = shallowRef<HTMLElement | null>(null)
 
@@ -78,7 +78,7 @@ const pulseColor = computed(() => {
   return isDarkMode.value ? accent.value : lightenOklch(accent.value, 0.5)
 })
 
-const weeklyDownloads = ref<WeeklyDownloadPoint[]>([])
+const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
 
 async function loadWeeklyDownloads() {
   if (!import.meta.client) return
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
@@ -17,14 +17,16 @@ const emit = defineEmits(['blur', 'focus'])
 const router = useRouter()
 const route = useRoute()
 
-const isSearchFocused = ref(false)
+const isSearchFocused = shallowRef(false)
 
 const showSearchBar = computed(() => {
   return route.name !== 'index'
 })
 
 // Local input value (updates immediately as user types)
-const searchQuery = ref((route.query.q as string) ?? '')
+const searchQuery = shallowRef(
+  (Array.isArray(route.query.q) ? route.query.q[0] : route.query.q) ?? '',
+)
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
diff --git a/app/components/TranslationHelper.vue b/app/components/TranslationHelper.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 
 // Show first N missing keys by default
 const INITIAL_SHOW_COUNT = 5
-const showAll = ref(false)
+const showAll = shallowRef(false)
 
 const missingKeysToShow = computed(() => {
   if (showAll.value || props.status.missingKeys.length <= INITIAL_SHOW_COUNT) {
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
@@ -21,10 +21,10 @@ const props = defineProps<{
   urlPattern: string
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 const dropdownRef = useTemplateRef('dropdownRef')
 const listboxRef = useTemplateRef('listboxRef')
-const focusedIndex = ref(-1)
+const focusedIndex = shallowRef(-1)
 
 onClickOutside(dropdownRef, () => {
   isOpen.value = false
@@ -57,10 +57,10 @@ interface VersionGroup {
 const versionGroups = ref<VersionGroup[]>([])
 
 /** Whether we've loaded all versions from the API */
-const hasLoadedAll = ref(false)
+const hasLoadedAll = shallowRef(false)
 
 /** Loading state for initial all-versions fetch */
-const isLoadingAll = ref(false)
+const isLoadingAll = shallowRef(false)
 
 /** Cached full version list */
 const allVersionsCache = shallowRef<PackageVersionInfo[] | null>(null)
diff --git a/app/composables/useNpmRegistry.ts b/app/composables/useNpmRegistry.ts
@@ -299,7 +299,7 @@ export function useNpmSearch(
     total: number
   } | null>(null)
 
-  const isLoadingMore = ref(false)
+  const isLoadingMore = shallowRef(false)
 
   // Standard (non-incremental) search implementation
   let lastSearch: NpmSearchResponse | undefined = undefined
diff --git a/app/composables/usePreferencesProvider.ts b/app/composables/usePreferencesProvider.ts
@@ -62,7 +62,7 @@ function createLocalStorageProvider<T>(key: string): StorageProvider<T> {
 export function usePreferencesProvider<T>(defaultValue: T) {
   const provider = createLocalStorageProvider<T>(STORAGE_KEY)
   const data = ref<T>(defaultValue) as Ref<T>
-  const isHydrated = ref(false)
+  const isHydrated = shallowRef(false)
 
   // Load from storage on client
   onMounted(() => {
diff --git a/app/composables/useStructuredFilters.ts b/app/composables/useStructuredFilters.ts
@@ -123,7 +123,7 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   })
 
   // Sort state
-  const sortOption = ref<SortOption>(initialSort ?? 'updated-desc')
+  const sortOption = shallowRef<SortOption>(initialSort ?? 'updated-desc')
 
   // Available keywords extracted from all packages
   const availableKeywords = computed(() => {
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
@@ -58,7 +58,7 @@ const {
 })
 
 // Pagination state
-const currentPage = ref(1)
+const currentPage = shallowRef(1)
 
 // Calculate total pages
 const totalPages = computed(() => {
@@ -114,7 +114,7 @@ function handleSortChange(option: SortOption) {
   setSort(option)
 }
 
-const activeTab = ref<'members' | 'teams'>('members')
+const activeTab = shallowRef<'members' | 'teams'>('members')
 
 // Canonical URL for this org page
 const canonicalUrl = computed(() => `https://npmx.dev/@${orgName.value}`)
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
@@ -104,7 +104,7 @@ const { data: fileContent, status: fileStatus } = useFetch<PackageFileContentRes
 )
 
 // Track hash manually since we update it via history API to avoid scroll
-const currentHash = ref('')
+const currentHash = shallowRef('')
 
 onMounted(() => {
   currentHash.value = window.location.hash
@@ -136,7 +136,7 @@ const selectedLines = computed(() => {
 })
 
 // Scroll to selected line only on initial load or file change (not on click)
-const shouldScrollOnHashChange = ref(true)
+const shouldScrollOnHashChange = shallowRef(true)
 
 function scrollToLine() {
   if (!shouldScrollOnHashChange.value) return
@@ -256,7 +256,7 @@ const markdownViewModes = [
   },
 ] as const
 
-const markdownViewMode = ref<(typeof markdownViewModes)[number]['key']>('preview')
+const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
 
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -2,7 +2,7 @@
 import { debounce } from 'perfect-debounce'
 
 const router = useRouter()
-const searchQuery = ref('')
+const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
diff --git a/modules/dev.ts b/modules/dev.ts
diff --git a/test/nuxt/components/DateTime.spec.ts b/test/nuxt/components/DateTime.spec.ts
diff --git a/test/nuxt/composables/use-install-command.spec.ts b/test/nuxt/composables/use-install-command.spec.ts
