refactor: initialise `masto` outside of functions/handlers

components/account/AccountFollowButton.vue

@@ -11,10 +11,11 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
 const enable = $computed(() => !isSelf && currentUser.value)
 const relationship = $computed(() => props.relationship || useRelationship(account).value)
 
+const masto = useMasto()
 async function toggleFollow() {
   relationship!.following = !relationship!.following
   try {
-    const newRel = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
+    const newRel = await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
     Object.assign(relationship!, newRel)
   }
   catch {
@@ -26,7 +27,7 @@ async function toggleFollow() {
 async function unblock() {
   relationship!.blocking = false
   try {
-    const newRel = await useMasto().accounts.unblock(account.id)
+    const newRel = await masto.accounts.unblock(account.id)
     Object.assign(relationship!, newRel)
   }
   catch {
@@ -38,7 +39,7 @@ async function unblock() {
 async function unmute() {
   relationship!.muting = false
   try {
-    const newRel = await useMasto().accounts.unmute(account.id)
+    const newRel = await masto.accounts.unmute(account.id)
     Object.assign(relationship!, newRel)
   }
   catch {

components/account/AccountMoreButton.vue

@@ -9,29 +9,30 @@ let relationship = $(useRelationship(account))
 
 const isSelf = $computed(() => currentUser.value?.account.id === account.id)
 
+const masto = useMasto()
 const toggleMute = async () => {
   // TODO: Add confirmation
 
   relationship!.muting = !relationship!.muting
   relationship = relationship!.muting
-    ? await useMasto().accounts.mute(account.id, {
+    ? await masto.accounts.mute(account.id, {
       // TODO support more options
     })
-    : await useMasto().accounts.unmute(account.id)
+    : await masto.accounts.unmute(account.id)
 }
 
 const toggleBlockUser = async () => {
   // TODO: Add confirmation
 
   relationship!.blocking = !relationship!.blocking
-  relationship = await useMasto().accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
+  relationship = await masto.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
 }
 
 const toggleBlockDomain = async () => {
   // TODO: Add confirmation
 
   relationship!.domainBlocking = !relationship!.domainBlocking
-  await useMasto().domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
+  await masto.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
 }
 </script>
 

components/publish/PublishWidget.vue

@@ -94,10 +94,12 @@ async function toggleSensitive() {
   draft.params.sensitive = !draft.params.sensitive
 }
 
+const masto = useMasto()
+
 async function uploadAttachments(files: File[]) {
   isUploading = true
   for (const file of files) {
-    const attachment = await useMasto().mediaAttachments.create({
+    const attachment = await masto.mediaAttachments.create({
       file,
     })
     draft.attachments.push(attachment)
@@ -107,7 +109,7 @@ async function uploadAttachments(files: File[]) {
 
 async function setDescription(att: Attachment, description: string) {
   att.description = description
-  await useMasto().mediaAttachments.update(att.id, { description: att.description })
+  await masto.mediaAttachments.update(att.id, { description: att.description })
 }
 
 function removeAttachment(index: number) {
@@ -141,9 +143,9 @@ async function publish() {
     isSending = true
 
     if (!draft.editingStatus)
-      await useMasto().statuses.create(payload)
+      await masto.statuses.create(payload)
     else
-      await useMasto().statuses.update(draft.editingStatus.id, payload)
+      await masto.statuses.update(draft.editingStatus.id, payload)
 
     draft = initial()
     isPublishDialogOpen.value = false

components/status/edit/StatusEditHistory.vue

@@ -5,7 +5,8 @@ const { status } = defineProps<{
   status: Status
 }>()
 
-const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => useMasto().statuses.fetchHistory(status.id).then(res => res.reverse()))
+const masto = useMasto()
+const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.statuses.fetchHistory(status.id).then(res => res.reverse()))
 
 const showHistory = (edit: StatusEdit) => {
   openEditHistoryDialog(edit)

composables/status.ts

@@ -9,6 +9,7 @@ export interface StatusActionsProps {
 
 export function useStatusActions(props: StatusActionsProps) {
   let status = $ref<Status>({ ...props.status })
+  const masto = useMasto()
 
   watch(
     () => props.status,
@@ -42,7 +43,7 @@ export function useStatusActions(props: StatusActionsProps) {
   }
   const toggleReblog = () => toggleStatusAction(
     'reblogged',
-    () => useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
+    () => masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
       if (status.reblogged)
       // returns the original status
         return res.reblog!
@@ -53,18 +54,18 @@ export function useStatusActions(props: StatusActionsProps) {
 
   const toggleFavourite = () => toggleStatusAction(
     'favourited',
-    () => useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
+    () => masto.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
     'favouritesCount',
   )
 
   const toggleBookmark = () => toggleStatusAction(
     'bookmarked',
-    () => useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
+    () => masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
   )
 
   const togglePin = async () => toggleStatusAction(
     'pinned',
-    () => useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
+    () => masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
   )
 
   return {

pages/[[server]]/@[account]/[status].vue

@@ -17,7 +17,8 @@ const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:$
   window.history.state?.status as Status | undefined)
   ?? await fetchStatus(id),
 )
-const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
+const masto = useMasto()
+const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
 
 const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
 

pages/[[server]]/explore/tags.vue

@@ -4,8 +4,9 @@ import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
 
 const { t } = useI18n()
 
+const masto = useMasto()
 const { data, pending, error } = useLazyAsyncData(
-  () => useMasto().trends.fetchTags({ limit: 20 }),
+  () => masto.trends.fetchTags({ limit: 20 }),
   { immediate: true },
 )
 

pages/[[server]]/explore/users.vue

@@ -2,8 +2,9 @@
 const { t } = useI18n()
 
 // limit: 20 is the default configuration of the official client
+const masto = useMasto()
 const { data, pending, error } = useLazyAsyncData(
-  () => useMasto().suggestions.fetchAll({ limit: 20 }),
+  () => masto.suggestions.fetchAll({ limit: 20 }),
   { immediate: true },
 )
 

pages/[[server]]/tags/[tag].vue

@@ -2,10 +2,11 @@
 const params = useRoute().params
 const tagName = $(computedEager(() => params.tag as string))
 
-const { data: tag, refresh } = $(await useAsyncData(() => useMasto().tags.fetch(tagName)))
+const masto = useMasto()
+const { data: tag, refresh } = $(await useAsyncData(() => masto.tags.fetch(tagName)))
 
-const paginator = useMasto().timelines.iterateHashtag(tagName)
+const paginator = masto.timelines.iterateHashtag(tagName)
-const stream = await useMasto().stream.streamTagTimeline(tagName)
+const stream = await masto.stream.streamTagTimeline(tagName)
 onBeforeUnmount(() => stream.disconnect())
 
 if (tag) {

pages/domain_blocks.vue

@@ -3,14 +3,15 @@ definePageMeta({
   middleware: 'auth',
 })
 
-const paginator = useMasto().domainBlocks.iterate()
+const masto = useMasto()
+const paginator = masto.domainBlocks.iterate()
 
 useHeadFixed({
   title: 'Blocked domains',
 })
 
 const unblock = async (domain: string) => {
-  await useMasto().domainBlocks.unblock(domain)
+  await masto.domainBlocks.unblock(domain)
 }
 </script>
 

pages/home.vue

@@ -11,8 +11,9 @@ if (useRoute().path === '/signin/callback') {
   useRouter().push('/home')
 }
 
-const paginator = useMasto().timelines.iterateHome()
+const masto = useMasto()
-const stream = await useMasto().stream.streamUser()
+const paginator = masto.timelines.iterateHome()
+const stream = await masto.stream.streamUser()
 onBeforeUnmount(() => stream.disconnect())
 
 const { t } = useI18n()

pages/notifications/index.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const masto = useMasto()
 
 // Default limit is 20 notifications, and servers are normally caped to 30
-const paginator = useMasto().notifications.iterate({ limit: 30 })
+const paginator = masto.notifications.iterate({ limit: 30 })
 
 const { clearNotifications } = useNotifications()
 onActivated(clearNotifications)
 
-const stream = await useMasto().stream.streamUser()
+const stream = await masto.stream.streamUser()
 
 useHeadFixed({
   title: () => `${t('tab.notifications_all')} | ${t('nav_side.notifications')}`,

pages/notifications/mention.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const { t } = useI18n()
 
+const masto = useMasto()
 // Default limit is 20 notifications, and servers are normally caped to 30
-const paginator = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
+const paginator = masto.notifications.iterate({ limit: 30, types: ['mention'] })
 
 const { clearNotifications } = useNotifications()
 onActivated(clearNotifications)
 
-const stream = await useMasto().stream.streamUser()
+const stream = await masto.stream.streamUser()
 
 useHeadFixed({
   title: () => `${t('tab.notifications_mention')} | ${t('nav_side.notifications')}`,