refactor: no reactivity transform (#2600)

components/notification/NotificationGroupedFollow.vue

@@ -5,10 +5,10 @@ const { items } = defineProps<{
   items: GroupedNotifications
 }>()
 
-const count = $computed(() => items.items.length)
+const count = computed(() => items.items.length)
 const isExpanded = ref(false)
-const lang = $computed(() => {
-  return (count > 1 || count === 0) ? undefined : items.items[0].status?.language
+const lang = computed(() => {
+  return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
 })
 </script>
 

components/notification/NotificationGroupedLikes.vue

@@ -6,8 +6,8 @@ const { group } = defineProps<{
 }>()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
-const reblogs = $computed(() => group.likes.filter(i => i.reblog))
-const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
+const reblogs = computed(() => group.likes.filter(i => i.reblog))
+const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 </script>
 
 <template>

components/notification/NotificationPreferences.client.vue

@@ -17,12 +17,12 @@ const { t } = useI18n()
 
 const pwaEnabled = useAppConfig().pwaEnabled
 
-let busy = $ref<boolean>(false)
-let animateSave = $ref<boolean>(false)
-let animateSubscription = $ref<boolean>(false)
-let animateRemoveSubscription = $ref<boolean>(false)
-let subscribeError = $ref<string>('')
-let showSubscribeError = $ref<boolean>(false)
+const busy = ref<boolean>(false)
+const animateSave = ref<boolean>(false)
+const animateSubscription = ref<boolean>(false)
+const animateRemoveSubscription = ref<boolean>(false)
+const subscribeError = ref<string>('')
+const showSubscribeError = ref<boolean>(false)
 
 function hideNotification() {
   const key = currentUser.value?.account?.acct
@@ -30,7 +30,7 @@ function hideNotification() {
     hiddenNotification.value[key] = true
 }
 
-const showWarning = $computed(() => {
+const showWarning = computed(() => {
   if (!pwaEnabled)
     return false
 
@@ -40,12 +40,12 @@ const showWarning = $computed(() => {
 })
 
 async function saveSettings() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateSave = true
+  animateSave.value = true
 
   try {
     await updateSubscription()
@@ -55,48 +55,48 @@ async function saveSettings() {
     console.error(err)
   }
   finally {
-    busy = false
-    animateSave = false
+    busy.value = false
+    animateSave.value = false
   }
 }
 
 async function doSubscribe() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateSubscription = true
+  animateSubscription.value = true
 
   try {
     const result = await subscribe()
     if (result !== 'subscribed') {
-      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
-      showSubscribeError = true
+      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
+      showSubscribeError.value = true
     }
   }
   catch (err) {
     if (err instanceof PushSubscriptionError) {
-      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
+      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
     }
     else {
       console.error(err)
-      subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
+      subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
     }
-    showSubscribeError = true
+    showSubscribeError.value = true
   }
   finally {
-    busy = false
-    animateSubscription = false
+    busy.value = false
+    animateSubscription.value = false
   }
 }
 async function removeSubscription() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateRemoveSubscription = true
+  animateRemoveSubscription.value = true
   try {
     await unsubscribe()
   }
@@ -104,11 +104,11 @@ async function removeSubscription() {
     console.error(err)
   }
   finally {
-    busy = false
-    animateRemoveSubscription = false
+    busy.value = false
+    animateRemoveSubscription.value = false
   }
 }
-onActivated(() => (busy = false))
+onActivated(() => (busy.value = false))
 </script>
 
 <template>