refactor: no reactivity transform (#2600)
This commit is contained in:
parent
b9394c2fa5
commit
ccfa7a8d10
102 changed files with 649 additions and 652 deletions
|
@ -11,18 +11,18 @@ definePageMeta({
|
|||
})
|
||||
|
||||
const route = useRoute()
|
||||
const id = $(computedEager(() => route.params.status as string))
|
||||
const id = computedEager(() => route.params.status as string)
|
||||
const main = ref<ComponentPublicInstance | null>(null)
|
||||
|
||||
const { data: status, pending, refresh: refreshStatus } = useAsyncData(
|
||||
`status:${id}`,
|
||||
() => fetchStatus(id, true),
|
||||
`status:${id.value}`,
|
||||
() => fetchStatus(id.value, true),
|
||||
{ watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
|
||||
)
|
||||
const { client } = $(useMasto())
|
||||
const { client } = useMasto()
|
||||
const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(
|
||||
`context:${id}`,
|
||||
async () => client.v1.statuses.$select(id).context.fetch(),
|
||||
async () => client.value.v1.statuses.$select(id.value).context.fetch(),
|
||||
{ watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
|
||||
)
|
||||
|
||||
|
@ -54,7 +54,7 @@ watch(publishWidget, () => {
|
|||
focusEditor()
|
||||
})
|
||||
|
||||
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
|
||||
const replyDraft = computed(() => status.value ? getReplyDraft(status.value) : null)
|
||||
|
||||
onReactivated(() => {
|
||||
// Silently update data when reentering the page
|
||||
|
|
|
@ -4,12 +4,12 @@ definePageMeta({
|
|||
})
|
||||
|
||||
const params = useRoute().params
|
||||
const accountName = $(computedEager(() => toShortHandle(params.account as string)))
|
||||
const accountName = computedEager(() => toShortHandle(params.account as string))
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { data: account, pending, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null), { immediate: process.client, default: () => shallowRef() }))
|
||||
const relationship = $computed(() => account ? useRelationship(account).value : undefined)
|
||||
const { data: account, pending, refresh } = await useAsyncData(() => fetchAccountByHandle(accountName.value).catch(() => null), { immediate: process.client, default: () => shallowRef() })
|
||||
const relationship = computed(() => account ? useRelationship(account.value).value : undefined)
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
const params = useRoute().params
|
||||
const handle = $(computedEager(() => params.account as string))
|
||||
const handle = computedEager(() => params.account as string)
|
||||
|
||||
definePageMeta({ name: 'account-followers' })
|
||||
|
||||
const account = await fetchAccountByHandle(handle)
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
const paginator = account ? useMastoClient().v1.accounts.$select(account.id).followers.list() : null
|
||||
|
||||
const isSelf = useSelfAccount(account)
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
const params = useRoute().params
|
||||
const handle = $(computedEager(() => params.account as string))
|
||||
const handle = computedEager(() => params.account as string)
|
||||
|
||||
definePageMeta({ name: 'account-following' })
|
||||
|
||||
const account = await fetchAccountByHandle(handle)
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
const paginator = account ? useMastoClient().v1.accounts.$select(account.id).following.list() : null
|
||||
|
||||
const isSelf = useSelfAccount(account)
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
import type { mastodon } from 'masto'
|
||||
|
||||
const params = useRoute().params
|
||||
const handle = $(computedEager(() => params.account as string))
|
||||
const handle = computedEager(() => params.account as string)
|
||||
|
||||
definePageMeta({ name: 'account-index' })
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const account = await fetchAccountByHandle(handle)
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
|
||||
function reorderAndFilter(items: mastodon.v1.Status[]) {
|
||||
return reorderedTimeline(items, 'account')
|
||||
|
|
|
@ -3,9 +3,9 @@ definePageMeta({ name: 'account-media' })
|
|||
|
||||
const { t } = useI18n()
|
||||
const params = useRoute().params
|
||||
const handle = $(computedEager(() => params.account as string))
|
||||
const handle = computedEager(() => params.account as string)
|
||||
|
||||
const account = await fetchAccountByHandle(handle)
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
|
||||
const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ onlyMedia: true, excludeReplies: false })
|
||||
|
||||
|
|
|
@ -3,9 +3,9 @@ definePageMeta({ name: 'account-replies' })
|
|||
|
||||
const { t } = useI18n()
|
||||
const params = useRoute().params
|
||||
const handle = $(computedEager(() => params.account as string))
|
||||
const handle = computedEager(() => params.account as string)
|
||||
|
||||
const account = await fetchAccountByHandle(handle)
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
|
||||
const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ excludeReplies: false })
|
||||
|
||||
|
|
|
@ -3,20 +3,20 @@ import type { CommonRouteTabOption } from '~/components/common/CommonRouteTabs.v
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
const search = $ref<{ input?: HTMLInputElement }>()
|
||||
const search = ref<{ input?: HTMLInputElement }>()
|
||||
const route = useRoute()
|
||||
watchEffect(() => {
|
||||
if (isMediumOrLargeScreen && route.name === 'explore' && search?.input)
|
||||
search?.input?.focus()
|
||||
if (isMediumOrLargeScreen && route.name === 'explore' && search.value?.input)
|
||||
search.value?.input?.focus()
|
||||
})
|
||||
onActivated(() =>
|
||||
search?.input?.focus(),
|
||||
search.value?.input?.focus(),
|
||||
)
|
||||
onDeactivated(() => search?.input?.blur())
|
||||
onDeactivated(() => search.value?.input?.blur())
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
const tabs = $computed<CommonRouteTabOption[]>(() => [
|
||||
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||
{
|
||||
to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
|
||||
display: isHydrated.value ? t('tab.posts') : '',
|
||||
|
|
|
@ -3,8 +3,8 @@ import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { client } = $(useMasto())
|
||||
const paginator = client.v1.trends.tags.list({
|
||||
const { client } = useMasto()
|
||||
const paginator = client.value.v1.trends.tags.list({
|
||||
limit: 20,
|
||||
})
|
||||
|
||||
|
|
|
@ -8,14 +8,14 @@ definePageMeta({
|
|||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
|
||||
const list = $computed(() => route.params.list as string)
|
||||
const server = $computed(() => (route.params.server ?? currentServer.value) as string)
|
||||
const list = computed(() => route.params.list as string)
|
||||
const server = computed(() => (route.params.server ?? currentServer.value) as string)
|
||||
|
||||
const tabs = $computed<CommonRouteTabOption[]>(() => [
|
||||
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||
{
|
||||
to: {
|
||||
name: 'list',
|
||||
params: { server, list },
|
||||
params: { server: server.value, list: list.value },
|
||||
},
|
||||
display: t('tab.posts'),
|
||||
icon: 'i-ri:list-unordered',
|
||||
|
@ -23,7 +23,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
|||
{
|
||||
to: {
|
||||
name: 'list-accounts',
|
||||
params: { server, list },
|
||||
params: { server: server.value, list: list.value },
|
||||
},
|
||||
display: t('tab.accounts'),
|
||||
icon: 'i-ri:user-line',
|
||||
|
@ -31,12 +31,12 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
|||
],
|
||||
)
|
||||
|
||||
const { client } = $(useMasto())
|
||||
const { data: listInfo, refresh } = $(await useAsyncData(() => client.v1.lists.$select(list).fetch(), { default: () => shallowRef() }))
|
||||
const { client } = useMasto()
|
||||
const { data: listInfo, refresh } = await useAsyncData(() => client.value.v1.lists.$select(list.value).fetch(), { default: () => shallowRef() })
|
||||
|
||||
if (listInfo) {
|
||||
useHydratedHead({
|
||||
title: () => `${listInfo.title} | ${route.fullPath.endsWith('/accounts') ? t('tab.accounts') : t('tab.posts')} | ${t('nav.lists')}`,
|
||||
title: () => `${listInfo.value.title} | ${route.fullPath.endsWith('/accounts') ? t('tab.accounts') : t('tab.posts')} | ${t('nav.lists')}`,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -4,9 +4,9 @@ definePageMeta({
|
|||
})
|
||||
|
||||
const params = useRoute().params
|
||||
const listId = $(computedEager(() => params.list as string))
|
||||
const listId = computedEager(() => params.list as string)
|
||||
|
||||
const paginator = useMastoClient().v1.lists.$select(listId).accounts.list()
|
||||
const paginator = useMastoClient().v1.lists.$select(listId.value).accounts.list()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -4,12 +4,12 @@ definePageMeta({
|
|||
})
|
||||
|
||||
const params = useRoute().params
|
||||
const listId = $(computedEager(() => params.list as string))
|
||||
const listId = computedEager(() => params.list as string)
|
||||
|
||||
const client = useMastoClient()
|
||||
|
||||
const paginator = client.v1.timelines.list.$select(listId).list()
|
||||
const stream = useStreaming(client => client.list.subscribe({ list: listId }))
|
||||
const paginator = client.v1.timelines.list.$select(listId.value).list()
|
||||
const stream = useStreaming(client => client.list.subscribe({ list: listId.value }))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -17,17 +17,17 @@ useHydratedHead({
|
|||
|
||||
const paginatorRef = ref()
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
let actionError = $ref<string | undefined>(undefined)
|
||||
let busy = $ref<boolean>(false)
|
||||
const actionError = ref<string | undefined>(undefined)
|
||||
const busy = ref<boolean>(false)
|
||||
const createText = ref('')
|
||||
const enableSubmit = computed(() => createText.value.length > 0)
|
||||
|
||||
async function createList() {
|
||||
if (busy || !enableSubmit.value)
|
||||
if (busy.value || !enableSubmit.value)
|
||||
return
|
||||
|
||||
busy = true
|
||||
actionError = undefined
|
||||
busy.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
try {
|
||||
const newEntry = await client.v1.lists.create({
|
||||
|
@ -38,18 +38,18 @@ async function createList() {
|
|||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
actionError.value = (err as Error).message
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
finally {
|
||||
busy = false
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearError(focusBtn: boolean) {
|
||||
actionError = undefined
|
||||
actionError.value = undefined
|
||||
focusBtn && nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
|
|
|
@ -6,15 +6,15 @@ useHydratedHead({
|
|||
title: () => t('nav.search'),
|
||||
})
|
||||
|
||||
const search = $ref<{ input?: HTMLInputElement }>()
|
||||
const search = ref<{ input?: HTMLInputElement }>()
|
||||
watchEffect(() => {
|
||||
if (search?.input)
|
||||
search?.input?.focus()
|
||||
if (search.value?.input)
|
||||
search.value?.input?.focus()
|
||||
})
|
||||
onActivated(() =>
|
||||
search?.input?.focus(),
|
||||
search.value?.input?.focus(),
|
||||
)
|
||||
onDeactivated(() => search?.input?.blur())
|
||||
onDeactivated(() => search.value?.input?.blur())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -4,17 +4,17 @@ definePageMeta({
|
|||
})
|
||||
|
||||
const params = useRoute().params
|
||||
const tagName = $(computedEager(() => params.tag as string))
|
||||
const tagName = computedEager(() => params.tag as string)
|
||||
|
||||
const { client } = $(useMasto())
|
||||
const { data: tag, refresh } = $(await useAsyncData(() => client.v1.tags.$select(tagName).fetch(), { default: () => shallowRef() }))
|
||||
const { client } = useMasto()
|
||||
const { data: tag, refresh } = await useAsyncData(() => client.value.v1.tags.$select(tagName.value).fetch(), { default: () => shallowRef() })
|
||||
|
||||
const paginator = client.v1.timelines.tag.$select(tagName).list()
|
||||
const stream = useStreaming(client => client.hashtag.subscribe({ tag: tagName }))
|
||||
const paginator = client.value.v1.timelines.tag.$select(tagName.value).list()
|
||||
const stream = useStreaming(client => client.hashtag.subscribe({ tag: tagName.value }))
|
||||
|
||||
if (tag) {
|
||||
if (tag.value) {
|
||||
useHydratedHead({
|
||||
title: () => `#${tag.name}`,
|
||||
title: () => `#${tag.value.name}`,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue