perf: prefere shallowRef instead deep ref if possible (#142)

Author: OrbisK

app/components/AppFooter.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const isMounted = ref(false)
-const isVisible = ref(false)
-const isScrollable = ref(true)
-const lastScrollY = ref(0)
-const footerRef = ref<HTMLElement>()
+const isMounted = shallowRef(false)
+const isVisible = shallowRef(false)
+const isScrollable = shallowRef(true)
+const lastScrollY = shallowRef(0)
+const footerRef = useTemplateRef('footerRef')
 
 // Check if CSS scroll-state container queries are supported
 // Once this becomes baseline, we can remove the JS scroll handling entirely
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function checkScrollable() {
   return document.documentElement.scrollHeight > window.innerHeight
@@ -52,10 +54,6 @@ useEventListener('scroll', onScroll, { passive: true })
 useEventListener('resize', onResize, { passive: true })
 
 onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
-
   nextTick(() => {
     lastScrollY.value = window.scrollY
     isScrollable.value = checkScrollable()

app/components/AppTooltip.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
 
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {

app/components/ClaimPackageModal.vue

@@ -19,12 +19,12 @@ const {
 } = useConnector()
 
 // Fetch name availability when modal opens
-const checkResult = ref<CheckNameResult | null>(null)
+const checkResult = shallowRef<CheckNameResult | null>(null)
 
-const isChecking = ref(false)
-const isPublishing = ref(false)
-const publishError = ref<string | null>(null)
-const publishSuccess = ref(false)
+const isChecking = shallowRef(false)
+const isPublishing = shallowRef(false)
+const publishError = shallowRef<string | null>(null)
+const publishSuccess = shallowRef(false)
 
 async function checkAvailability() {
   isChecking.value = true
@@ -125,7 +125,7 @@ const previewPackageJson = computed(() => {
   }
 })
 
-const connectorModalOpen = ref(false)
+const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>

app/components/CodeMobileTreeDrawer.vue

@@ -7,7 +7,7 @@ defineProps<{
   baseUrl: string
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 
 // Close drawer on navigation
 const route = useRoute()

app/components/CodeViewer.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
-const codeRef = ref<HTMLElement>()
+const codeRef = useTemplateRef('codeRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {

app/components/ConnectorModal.vue

@@ -4,9 +4,9 @@ const open = defineModel<boolean>('open', { default: false })
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
-const tokenInput = ref('')
-const portInput = ref('31415')
-const copied = ref(false)
+const tokenInput = shallowRef('')
+const portInput = shallowRef('31415')
+const copied = shallowRef(false)
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415

app/components/ConnectorStatus.client.vue

@@ -2,8 +2,8 @@
 const { isConnected, isConnecting, npmUser, error, activeOperations, hasPendingOperations } =
   useConnector()
 
-const showModal = ref(false)
-const showTooltip = ref(false)
+const showModal = shallowRef(false)
+const showTooltip = shallowRef(false)
 
 const statusText = computed(() => {
   if (isConnecting.value) return 'connecting…'

app/components/OperationsQueue.vue

@@ -21,8 +21,8 @@ const {
   refreshState,
 } = useConnector()
 
-const isExecuting = ref(false)
-const otpInput = ref('')
+const isExecuting = shallowRef(false)
+const otpInput = shallowRef('')
 
 /** Check if any active operation needs OTP */
 const hasOtpFailures = computed(() =>

app/components/OrgMembersPanel.vue

@@ -21,27 +21,27 @@ const {
 } = useConnector()
 
 // Members data: { username: role }
-const members = ref<Record<string, 'developer' | 'admin' | 'owner'>>({})
-const isLoading = ref(false)
-const error = ref<string | null>(null)
+const members = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const isLoading = shallowRef(false)
+const error = shallowRef<string | null>(null)
 
 // Team membership data: { teamName: [members] }
 const teamMembers = ref<Record<string, string[]>>({})
-const isLoadingTeams = ref(false)
+const isLoadingTeams = shallowRef(false)
 
 // Search/filter
-const searchQuery = ref('')
-const filterRole = ref<'all' | 'developer' | 'admin' | 'owner'>('all')
-const filterTeam = ref<string | null>(null)
-const sortBy = ref<'name' | 'role'>('name')
-const sortOrder = ref<'asc' | 'desc'>('asc')
+const searchQuery = shallowRef('')
+const filterRole = shallowRef<'all' | 'developer' | 'admin' | 'owner'>('all')
+const filterTeam = shallowRef<string | null>(null)
+const sortBy = shallowRef<'name' | 'role'>('name')
+const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Add member form
-const showAddMember = ref(false)
-const newUsername = ref('')
-const newRole = ref<'developer' | 'admin' | 'owner'>('developer')
-const newTeam = ref<string>('') // Empty string means "developers" (default)
-const isAddingMember = ref(false)
+const showAddMember = shallowRef(false)
+const newUsername = shallowRef('')
+const newRole = shallowRef<'developer' | 'admin' | 'owner'>('developer')
+const newTeam = shallowRef<string>('') // Empty string means "developers" (default)
+const isAddingMember = shallowRef(false)
 
 // Role priority for sorting
 const rolePriority = { owner: 0, admin: 1, developer: 2 }

app/components/OrgTeamsPanel.vue

@@ -17,32 +17,32 @@ const {
 } = useConnector()
 
 // Teams data
-const teams = ref<string[]>([])
+const teams = shallowRef<string[]>([])
 const teamUsers = ref<Record<string, string[]>>({})
-const isLoadingTeams = ref(false)
+const isLoadingTeams = shallowRef(false)
 const isLoadingUsers = ref<Record<string, boolean>>({})
-const error = ref<string | null>(null)
+const error = shallowRef<string | null>(null)
 
 // Org members (to check if user needs to be added to org first)
-const orgMembers = ref<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const orgMembers = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
 
 // Search/filter
-const searchQuery = ref('')
-const sortBy = ref<'name' | 'members'>('name')
-const sortOrder = ref<'asc' | 'desc'>('asc')
+const searchQuery = shallowRef('')
+const sortBy = shallowRef<'name' | 'members'>('name')
+const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Expanded teams (to show members)
 const expandedTeams = ref<Set<string>>(new Set())
 
 // Create team form
-const showCreateTeam = ref(false)
-const newTeamName = ref('')
-const isCreatingTeam = ref(false)
+const showCreateTeam = shallowRef(false)
+const newTeamName = shallowRef('')
+const isCreatingTeam = shallowRef(false)
 
 // Add user form (per team)
-const showAddUserFor = ref<string | null>(null)
-const newUserUsername = ref('')
-const isAddingUser = ref(false)
+const showAddUserFor = shallowRef<string | null>(null)
+const newUserUsername = shallowRef('')
+const isAddingUser = shallowRef(false)
 
 // Filtered and sorted teams
 const filteredTeams = computed(() => {