zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: no reactivity transform (#2600)

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
components/status/StatusActions.vue
View file

@ -9,7 +9,7 @@ const props = defineProps<{
const focusEditor = inject<typeof noop>('focus-editor', noop)
const { details, command } = $(props)
const { details, command } = props // TODO
const userSettings = useUserSettings()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
@ -21,7 +21,7 @@ const {
toggleBookmark,
toggleFavourite,
toggleReblog,
} = $(useStatusActions(props))
} = useStatusActions(props)
function reply() {
if (!checkLogin())
@ -29,7 +29,7 @@ function reply() {
if (details)
focusEditor()
else
navigateToStatus({ status, focusReply: true })
navigateToStatus({ status: status.value, focusReply: true })
}
</script>

30
components/status/StatusActionsMore.vue
View file

@ -14,8 +14,6 @@ const emit = defineEmits<{
const focusEditor = inject<typeof noop>('focus-editor', noop)
const { details, command } = $(props)
const {
status,
isLoading,
@ -24,7 +22,7 @@ const {
togglePin,
toggleReblog,
toggleMute,
} = $(useStatusActions(props))
} = useStatusActions(props)
const clipboard = useClipboard()
const router = useRouter()
@ -33,9 +31,9 @@ const { t } = useI18n()
const userSettings = useUserSettings()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
const isAuthor = computed(() => status.value.account.id === currentUser.value?.account.id)
const { client } = $(useMasto())
const { client } = useMasto()
function getPermalinkUrl(status: mastodon.v1.Status) {
const url = getStatusPermalinkRoute(status)
@ -72,8 +70,8 @@ async function deleteStatus() {
}) !== 'confirm')
return
removeCachedStatus(status.id)
await client.v1.statuses.$select(status.id).remove()
removeCachedStatus(status.value.id)
await client.value.v1.statuses.$select(status.value.id).remove()
if (route.name === 'status')
router.back()
@ -97,9 +95,9 @@ async function deleteAndRedraft() {
return
}
removeCachedStatus(status.id)
await client.v1.statuses.$select(status.id).remove()
await openPublishDialog('dialog', await getDraftFromStatus(status), true)
removeCachedStatus(status.value.id)
await client.value.v1.statuses.$select(status.value.id).remove()
await openPublishDialog('dialog', await getDraftFromStatus(status.value), true)
// Go to the new status, if the page is the old status
if (lastPublishDialogStatus.value && route.name === 'status')
@ -109,25 +107,25 @@ async function deleteAndRedraft() {
function reply() {
if (!checkLogin())
return
if (details) {
if (props.details) {
focusEditor()
}
else {
const { key, draft } = getReplyDraft(status)
const { key, draft } = getReplyDraft(status.value)
openPublishDialog(key, draft())
}
}
async function editStatus() {
await openPublishDialog(`edit-${status.id}`, {
...await getDraftFromStatus(status),
editingStatus: status,
await openPublishDialog(`edit-${status.value.id}`, {
...await getDraftFromStatus(status.value),
editingStatus: status.value,
}, true)
emit('afterEdit')
}
function showFavoritedAndBoostedBy() {
openFavoridedBoostedByDialog(status.id)
openFavoridedBoostedByDialog(status.value.id)
}
</script>

22
components/status/StatusAttachment.vue
View file

@ -14,8 +14,8 @@ const {
isPreview?: boolean
}>()
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
const srcset = $computed(() => [
const src = computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
const srcset = computed(() => [
[attachment.url, attachment.meta?.original?.width],
[attachment.remoteUrl, attachment.meta?.original?.width],
[attachment.previewUrl, attachment.meta?.small?.width],
@ -53,12 +53,12 @@ const typeExtsMap = {
gifv: ['gifv', 'gif'],
}
const type = $computed(() => {
const type = computed(() => {
if (attachment.type && attachment.type !== 'unknown')
return attachment.type
// some server returns unknown type, we need to guess it based on file extension
for (const [type, exts] of Object.entries(typeExtsMap)) {
if (exts.some(ext => src?.toLowerCase().endsWith(`.${ext}`)))
if (exts.some(ext => src.value?.toLowerCase().endsWith(`.${ext}`)))
return type
}
return 'unknown'
@ -66,8 +66,8 @@ const type = $computed(() => {
const video = ref<HTMLVideoElement | undefined>()
const prefersReducedMotion = usePreferredReducedMotion()
const isAudio = $computed(() => attachment.type === 'audio')
const isVideo = $computed(() => attachment.type === 'video')
const isAudio = computed(() => attachment.type === 'audio')
const isVideo = computed(() => attachment.type === 'video')
const enableAutoplay = usePreferences('enableAutoplay')
@ -100,21 +100,21 @@ function loadAttachment() {
shouldLoadAttachment.value = true
}
const blurHashSrc = $computed(() => {
const blurHashSrc = computed(() => {
if (!attachment.blurhash)
return ''
const pixels = decode(attachment.blurhash, 32, 32)
return getDataUrlFromArr(pixels, 32, 32)
})
let videoThumbnail = shouldLoadAttachment.value
const videoThumbnail = ref(shouldLoadAttachment.value
? attachment.previewUrl
: blurHashSrc
: blurHashSrc.value)
watch(shouldLoadAttachment, () => {
videoThumbnail = shouldLoadAttachment
videoThumbnail.value = shouldLoadAttachment.value
? attachment.previewUrl
: blurHashSrc
: blurHashSrc.value
})
</script>

2
components/status/StatusBody.vue
View file

@ -14,7 +14,7 @@ const {
const { translation } = useTranslation(status, getLanguageCode())
const emojisObject = useEmojisFallback(() => status.emojis)
const vnode = $computed(() => {
const vnode = computed(() => {
if (!status.content)
return null
return contentToVNode(status.content, {

32
components/status/StatusCard.vue
View file

@ -26,45 +26,45 @@ const props = withDefaults(
const userSettings = useUserSettings()
const status = $computed(() => {
const status = computed(() => {
if (props.status.reblog && (!props.status.content || props.status.content === props.status.reblog.content))
return props.status.reblog
return props.status
})
// Use original status, avoid connecting a reblog
const directReply = $computed(() => props.hasNewer || (!!status.inReplyToId && (status.inReplyToId === props.newer?.id || status.inReplyToId === props.newer?.reblog?.id)))
const directReply = computed(() => props.hasNewer || (!!status.value.inReplyToId && (status.value.inReplyToId === props.newer?.id || status.value.inReplyToId === props.newer?.reblog?.id)))
// Use reblogged status, connect it to further replies
const connectReply = $computed(() => props.hasOlder || status.id === props.older?.inReplyToId || status.id === props.older?.reblog?.inReplyToId)
const connectReply = computed(() => props.hasOlder || status.value.id === props.older?.inReplyToId || status.value.id === props.older?.reblog?.inReplyToId)
// Open a detailed status, the replies directly to it
const replyToMain = $computed(() => props.main && props.main.id === status.inReplyToId)
const replyToMain = computed(() => props.main && props.main.id === status.value.inReplyToId)
const rebloggedBy = $computed(() => props.status.reblog ? props.status.account : null)
const rebloggedBy = computed(() => props.status.reblog ? props.status.account : null)
const statusRoute = $computed(() => getStatusRoute(status))
const statusRoute = computed(() => getStatusRoute(status.value))
const router = useRouter()
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey) {
window.open(statusRoute.href)
window.open(statusRoute.value.href)
}
else {
cacheStatus(status)
router.push(statusRoute)
cacheStatus(status.value)
router.push(statusRoute.value)
}
}
const createdAt = useFormattedDateTime(status.createdAt)
const createdAt = useFormattedDateTime(status.value.createdAt)
const timeAgoOptions = useTimeAgoOptions(true)
const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
const timeago = useTimeAgo(() => status.value.createdAt, timeAgoOptions)
const isSelfReply = $computed(() => status.inReplyToAccountId === status.account.id)
const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id)
const isDM = $computed(() => status.visibility === 'direct')
const isSelfReply = computed(() => status.value.inReplyToAccountId === status.value.account.id)
const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.value.account.id)
const isDM = computed(() => status.value.visibility === 'direct')
const showUpperBorder = $computed(() => props.newer && !directReply)
const showReplyTo = $computed(() => !replyToMain && !directReply)
const showUpperBorder = computed(() => props.newer && !directReply)
const showReplyTo = computed(() => !replyToMain && !directReply)
const forceShow = ref(false)
</script>

20
components/status/StatusContent.vue
View file

@ -9,28 +9,28 @@ const { status, context } = defineProps<{
inNotification?: boolean
}>()
const isDM = $computed(() => status.visibility === 'direct')
const isDetails = $computed(() => context === 'details')
const isDM = computed(() => status.visibility === 'direct')
const isDetails = computed(() => context === 'details')
// Content Filter logic
const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
const filter = $computed(() => filterResult?.filter)
const filterResult = computed(() => status.filtered?.length ? status.filtered[0] : null)
const filter = computed(() => filterResult.value?.filter)
const filterPhrase = $computed(() => filter?.title)
const isFiltered = $computed(() => status.account.id !== currentUser.value?.account.id && filterPhrase && context && context !== 'details' && !!filter?.context.includes(context))
const filterPhrase = computed(() => filter.value?.title)
const isFiltered = computed(() => status.account.id !== currentUser.value?.account.id && filterPhrase && context && context !== 'details' && !!filter.value?.context.includes(context))
// check spoiler text or media attachment
// needed to handle accounts that mark all their posts as sensitive
const spoilerTextPresent = $computed(() => !!status.spoilerText && status.spoilerText.trim().length > 0)
const hasSpoilerOrSensitiveMedia = $computed(() => spoilerTextPresent || (status.sensitive && !!status.mediaAttachments.length))
const spoilerTextPresent = computed(() => !!status.spoilerText && status.spoilerText.trim().length > 0)
const hasSpoilerOrSensitiveMedia = computed(() => spoilerTextPresent.value || (status.sensitive && !!status.mediaAttachments.length))
const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText && !!status.mediaAttachments.length)
const hideAllMedia = computed(
() => {
return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
},
)
const embeddedMediaPreference = $(usePreferences('experimentalEmbeddedMedia'))
const allowEmbeddedMedia = $computed(() => status.card?.html && embeddedMediaPreference)
const embeddedMediaPreference = usePreferences('experimentalEmbeddedMedia')
const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPreference)
</script>
<template>

6
components/status/StatusDetails.vue
View file

@ -14,18 +14,18 @@ defineEmits<{
(event: 'refetchStatus'): void
}>()
const status = $computed(() => {
const status = computed(() => {
if (props.status.reblog && props.status.reblog)
return props.status.reblog
return props.status
})
const createdAt = useFormattedDateTime(status.createdAt)
const createdAt = useFormattedDateTime(status.value.createdAt)
const { t } = useI18n()
useHydratedHead({
title: () => `${getDisplayName(status.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
title: () => `${getDisplayName(status.value.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.value.content) || ''}"`,
})
</script>

2
components/status/StatusEmbeddedMedia.vue
View file

@ -5,7 +5,7 @@ const { status } = defineProps<{
status: mastodon.v1.Status
}>()
const vnode = $computed(() => {
const vnode = computed(() => {
if (!status.card?.html)
return null
const node = sanitizeEmbeddedIframe(status.card?.html)?.children[0]

6
components/status/StatusFavouritedBoostedBy.vue
View file

@ -3,13 +3,13 @@ import { favouritedBoostedByStatusId } from '~/composables/dialog'
const type = ref<'favourited-by' | 'boosted-by'>('favourited-by')
const { client } = $(useMasto())
const { client } = useMasto()
function load() {
return client.v1.statuses.$select(favouritedBoostedByStatusId.value!)[type.value === 'favourited-by' ? 'favouritedBy' : 'rebloggedBy'].list()
return client.value.v1.statuses.$select(favouritedBoostedByStatusId.value!)[type.value === 'favourited-by' ? 'favouritedBy' : 'rebloggedBy'].list()
}
const paginator = $computed(() => load())
const paginator = computed(() => load())
function showFavouritedBy() {
type.value = 'favourited-by'

6
components/status/StatusLink.vue
View file

@ -8,7 +8,7 @@ const props = defineProps<{
const el = ref<HTMLElement>()
const router = useRouter()
const statusRoute = $computed(() => getStatusRoute(props.status))
const statusRoute = computed(() => getStatusRoute(props.status))
function onclick(evt: MouseEvent | KeyboardEvent) {
const path = evt.composedPath() as HTMLElement[]
@ -20,11 +20,11 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey) {
window.open(statusRoute.href)
window.open(statusRoute.value.href)
}
else {
cacheStatus(props.status)
router.push(statusRoute)
router.push(statusRoute.value)
}
}
</script>

6
components/status/StatusPoll.vue
View file

@ -15,7 +15,7 @@ const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)
const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
const { formatPercentage } = useHumanReadableNumber()
const { client } = $(useMasto())
const { client } = useMasto()
async function vote(e: Event) {
const formData = new FormData(e.target as HTMLFormElement)
@ -36,10 +36,10 @@ async function vote(e: Event) {
cacheStatus({ ...status, poll }, undefined, true)
await client.v1.polls.$select(poll.id).votes.create({ choices })
await client.value.v1.polls.$select(poll.id).votes.create({ choices })
}
const votersCount = $computed(() => poll.votersCount ?? poll.votesCount ?? 0)
const votersCount = computed(() => poll.votersCount ?? poll.votesCount ?? 0)
</script>
<template>

2
components/status/StatusPreviewCard.vue
View file

@ -11,7 +11,7 @@ const props = defineProps<{
const providerName = props.card.providerName
const gitHubCards = $(usePreferences('experimentalGitHubCards'))
const gitHubCards = usePreferences('experimentalGitHubCards')
</script>
<template>

6
components/status/StatusPreviewCardNormal.vue
View file

@ -12,14 +12,14 @@ const props = defineProps<{
// mastodon's default max og image width
const ogImageWidth = 400
const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
const isSquare = $computed(() => (
const alt = computed(() => `${props.card.title} - ${props.card.title}`)
const isSquare = computed(() => (
props.smallPictureOnly
|| props.card.width === props.card.height
|| Number(props.card.width || 0) < ogImageWidth
|| Number(props.card.height || 0) < ogImageWidth / 2
))
const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
const providerName = computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
// TODO: handle card.type: 'photo' | 'video' | 'rich';
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {

6
components/status/StatusPreviewGitHub.vue
View file

@ -29,7 +29,7 @@ interface Meta {
// /sponsors/user
const supportedReservedRoutes = ['sponsors']
const meta = $computed(() => {
const meta = computed(() => {
const { url } = props.card
const path = url.split('https://github.com/')[1]
const [firstName, secondName] = path?.split('/') || []
@ -64,7 +64,7 @@ const meta = $computed(() => {
const avatar = `https://github.com/${user}.png?size=256`
const author = props.card.authorName
const info = $ref<Meta>({
const info = {
type,
user,
titleUrl: `https://github.com/${user}${repo ? `/${repo}` : ''}`,
@ -78,7 +78,7 @@ const meta = $computed(() => {
user: author,
}
: undefined,
})
}
return info
})
</script>

14
components/status/StatusPreviewStackBlitz.vue
View file

@ -19,31 +19,31 @@ interface Meta {
// Protect against long code snippets
const maxLines = 20
const meta = $computed(() => {
const meta = computed(() => {
const { description } = props.card
const meta = description.match(/.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s)
const file = meta?.[1]
const lines = meta?.[2]
const code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
const project = props.card.title?.replace(' - StackBlitz', '')
const info = $ref<Meta>({
const info = {
file,
lines,
code,
project,
})
}
return info
})
const vnodeCode = $computed(() => {
if (!meta.code)
const vnodeCode = computed(() => {
if (!meta.value.code)
return null
const code = meta.code
const code = meta.value.code
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/`/g, '&#96;')
const vnode = contentToVNode(`<p>\`\`\`${meta.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
const vnode = contentToVNode(`<p>\`\`\`${meta.value.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
markdown: true,
})
return vnode

2
components/status/StatusReplyingTo.vue
View file

@ -9,7 +9,7 @@ const {
isSelfReply: boolean
}>()
const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
const isSelf = computed(() => status.inReplyToAccountId === status.account.id)
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
</script>

6
components/status/StatusTranslation.vue
View file

@ -18,14 +18,14 @@ const showButton = computed(() =>
&& status.content.trim().length,
)
let translating = $ref(false)
const translating = ref(false)
async function toggleTranslation() {
translating = true
translating.value = true
try {
await _toggleTranslation()
}
finally {
translating = false
translating.value = false
}
}
</script>

2
components/status/StatusVisibilityIndicator.vue
View file

@ -5,7 +5,7 @@ const { status } = defineProps<{
status: mastodon.v1.Status
}>()
const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
const visibility = computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
</script>
<template>