refactor: no reactivity transform (#2600)

This commit is contained in:
patak 2024-02-21 16:20:08 +01:00 committed by GitHub
parent b9394c2fa5
commit ccfa7a8d10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
102 changed files with 649 additions and 652 deletions

View file

@ -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

View file

@ -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()

View file

@ -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)

View file

@ -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)

View file

@ -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')

View file

@ -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 })

View file

@ -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 })

View file

@ -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') : '',

View file

@ -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,
})

View file

@ -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')}`,
})
}

View file

@ -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>

View file

@ -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>

View file

@ -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()
})

View file

@ -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>

View file

@ -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}`,
})
}