refactor: remove withDefaults macro and clean up reactive props destructuring (#3217)

components/status/StatusAccountDetails.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, link = true } = defineProps<{
+const { link = true } = defineProps<{
   account: mastodon.v1.Account
   link?: boolean
 }>()

components/status/StatusActions.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = defineProps<{
+const { details, command, ...props } = defineProps<{
   status: mastodon.v1.Status
   details?: boolean
   command?: boolean
@@ -9,8 +9,6 @@ const props = defineProps<{
 
 const focusEditor = inject<typeof noop>('focus-editor', noop)
 
-const { details, command } = props // TODO
-
 const userSettings = useUserSettings()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
@@ -21,7 +19,7 @@ const {
   toggleBookmark,
   toggleFavourite,
   toggleReblog,
-} = useStatusActions(props)
+} = useStatusActions({ status: props.status })
 
 function reply() {
   if (!checkLogin())

components/status/StatusActionsMore.vue

@@ -2,7 +2,7 @@
 import type { mastodon } from 'masto'
 import { toggleBlockAccount, toggleMuteAccount, useRelationship } from '~~/composables/masto/relationship'
 
-const props = defineProps<{
+const { details, ...props } = defineProps<{
   status: mastodon.v1.Status
   details?: boolean
   command?: boolean
@@ -22,7 +22,7 @@ const {
   togglePin,
   toggleReblog,
   toggleMute,
-} = useStatusActions(props)
+} = useStatusActions({ status: props.status })
 
 const clipboard = useClipboard()
 const router = useRouter()
@@ -109,7 +109,7 @@ async function deleteAndRedraft() {
 function reply() {
   if (!checkLogin())
     return
-  if (props.details) {
+  if (details) {
     focusEditor()
   }
   else {

components/status/StatusCard.vue

@@ -1,28 +1,25 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = withDefaults(
-  defineProps<{
-    status: mastodon.v1.Status
-    actions?: boolean
-    context?: mastodon.v2.FilterContext
-    hover?: boolean
-    inNotification?: boolean
-    isPreview?: boolean
+const { actions = true, older, newer, hasOlder, hasNewer, main, ...props } = defineProps<{
+  status: mastodon.v1.Status
+  actions?: boolean
+  context?: mastodon.v2.FilterContext
+  hover?: boolean
+  inNotification?: boolean
+  isPreview?: boolean
 
-    // If we know the prev and next status in the timeline, we can simplify the card
-    older?: mastodon.v1.Status
-    newer?: mastodon.v1.Status
-    // Manual overrides
-    hasOlder?: boolean
-    hasNewer?: boolean
+  // If we know the prev and next status in the timeline, we can simplify the card
+  older?: mastodon.v1.Status
+  newer?: mastodon.v1.Status
+  // Manual overrides
+  hasOlder?: boolean
+  hasNewer?: boolean
 
-    // When looking into a detailed view of a post, we can simplify the replying badges
-    // to the main expanded post
-    main?: mastodon.v1.Status
-  }>(),
-  { actions: true },
-)
+  // When looking into a detailed view of a post, we can simplify the replying badges
+  // to the main expanded post
+  main?: mastodon.v1.Status
+}>()
 
 const userSettings = useUserSettings()
 
@@ -33,11 +30,11 @@ const status = computed(() => {
 })
 
 // Use original status, avoid connecting a reblog
-const directReply = computed(() => props.hasNewer || (!!status.value.inReplyToId && (status.value.inReplyToId === props.newer?.id || status.value.inReplyToId === props.newer?.reblog?.id)))
+const directReply = computed(() => hasNewer || (!!status.value.inReplyToId && (status.value.inReplyToId === newer?.id || status.value.inReplyToId === newer?.reblog?.id)))
 // Use reblogged status, connect it to further replies
-const connectReply = computed(() => props.hasOlder || status.value.id === props.older?.inReplyToId || status.value.id === props.older?.reblog?.inReplyToId)
+const connectReply = computed(() => hasOlder || status.value.id === older?.inReplyToId || status.value.id === older?.reblog?.inReplyToId)
 // Open a detailed status, the replies directly to it
-const replyToMain = computed(() => props.main && props.main.id === status.value.inReplyToId)
+const replyToMain = computed(() => main && main.id === status.value.inReplyToId)
 
 const rebloggedBy = computed(() => props.status.reblog ? props.status.account : null)
 
@@ -64,7 +61,7 @@ const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.valu
 const isDM = computed(() => status.value.visibility === 'direct')
 const isPinned = computed(() => status.value.pinned)
 
-const showUpperBorder = computed(() => props.newer && !directReply.value)
+const showUpperBorder = computed(() => newer && !directReply.value)
 const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
 
 const forceShow = ref(false)

components/status/StatusDetails.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = withDefaults(defineProps<{
+const { actions = true, ...props } = defineProps<{
   status: mastodon.v1.Status
   newer?: mastodon.v1.Status
   command?: boolean
   actions?: boolean
-}>(), {
-  actions: true,
-})
+}>()
 
 defineEmits<{
   (event: 'refetchStatus'): void

components/status/StatusLink.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = defineProps<{
+const { status } = defineProps<{
   status: mastodon.v1.Status
   hover?: boolean
 }>()
 
 const el = ref<HTMLElement>()
 const router = useRouter()
-const statusRoute = computed(() => getStatusRoute(props.status))
+const statusRoute = computed(() => getStatusRoute(status))
 
 function onclick(evt: MouseEvent | KeyboardEvent) {
   const path = evt.composedPath() as HTMLElement[]
@@ -24,7 +24,7 @@ function go(evt: MouseEvent | KeyboardEvent) {
     window.open(statusRoute.value.href)
   }
   else {
-    cacheStatus(props.status)
+    cacheStatus(status)
     router.push(statusRoute.value)
   }
 }

components/status/StatusPreviewCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = defineProps<{
+const { card } = defineProps<{
   card: mastodon.v1.PreviewCard
   /** For the preview image, only the small image mode is displayed */
   smallPictureOnly?: boolean
@@ -9,7 +9,7 @@ const props = defineProps<{
   root?: boolean
 }>()
 
-const providerName = props.card.providerName
+const providerName = card.providerName
 
 const gitHubCards = usePreferences('experimentalGitHubCards')
 </script>

components/status/StatusPreviewCardNormal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = defineProps<{
+const { card, smallPictureOnly } = defineProps<{
   card: mastodon.v1.PreviewCard
   /** For the preview image, only the small image mode is displayed */
   smallPictureOnly?: boolean
@@ -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 alt = computed(() => `${card.title} - ${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
+  smallPictureOnly
+  || card.width === card.height
+  || Number(card.width || 0) < ogImageWidth
+  || Number(card.height || 0) < ogImageWidth / 2
 ))
-const providerName = computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
+const providerName = computed(() => card.providerName ? card.providerName : new URL(card.url).hostname)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {

components/status/StatusPreviewGitHub.vue

@@ -2,7 +2,7 @@
 import type { mastodon } from 'masto'
 import reservedNames from 'github-reserved-names'
 
-const props = defineProps<{
+const { card } = defineProps<{
   card: mastodon.v1.PreviewCard
 }>()
 
@@ -30,7 +30,7 @@ interface Meta {
 const supportedReservedRoutes = ['sponsors']
 
 const meta = computed(() => {
-  const { url } = props.card
+  const { url } = card
   const path = url.split('https://github.com/')[1]
   const [firstName, secondName] = path?.split('/') || []
   if (!firstName || (reservedNames.check(firstName) && !supportedReservedRoutes.includes(firstName)))
@@ -42,7 +42,7 @@ const meta = computed(() => {
 
   let type: UrlType = repo ? 'repo' : 'user'
   let number: string | undefined
-  let details = (props.card.title ?? '').replace('GitHub - ', '').split(' · ')[0]
+  let details = (card.title ?? '').replace('GitHub - ', '').split(' · ')[0]
 
   if (repo) {
     const repoPath = `${user}/${repo}`
@@ -63,7 +63,7 @@ const meta = computed(() => {
 
   const avatar = `https://github.com/${user}.png?size=256`
 
-  const author = props.card.authorName
+  const author = card.authorName
   return {
     type,
     user,

components/status/StatusPreviewStackBlitz.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const props = defineProps<{
+const { card } = defineProps<{
   card: mastodon.v1.PreviewCard
   /** For the preview image, only the small image mode is displayed */
   smallPictureOnly?: boolean
@@ -20,12 +20,12 @@ interface Meta {
 const maxLines = 20
 
 const meta = computed(() => {
-  const { description } = props.card
+  const { description } = 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 project = card.title?.replace(' - StackBlitz', '')
   return {
     file,
     lines,

components/status/StatusReplyingTo.vue

@@ -4,15 +4,15 @@ import { fetchAccountById } from '~/composables/cache'
 
 type WatcherType = [status?: mastodon.v1.Status, v?: boolean]
 
-const props = defineProps<{
+const { status } = defineProps<{
   status: mastodon.v1.Status
   isSelfReply: boolean
 }>()
 
 const link = ref()
 const targetIsVisible = ref(false)
-const isSelf = computed(() => props.status.inReplyToAccountId === props.status.account.id)
-const account = ref<mastodon.v1.Account | null | undefined>(isSelf.value ? props.status.account : undefined)
+const isSelf = computed(() => status.inReplyToAccountId === status.account.id)
+const account = ref<mastodon.v1.Account | null | undefined>(isSelf.value ? status.account : undefined)
 
 useIntersectionObserver(
   link,
@@ -22,7 +22,7 @@ useIntersectionObserver(
 )
 
 watch(
-  () => [props.status, targetIsVisible.value] satisfies WatcherType,
+  () => [status, targetIsVisible.value] satisfies WatcherType,
   ([newStatus, newVisible]) => {
     if (newStatus.account && newStatus.inReplyToAccountId === newStatus.account.id) {
       account.value = newStatus.account
@@ -36,7 +36,7 @@ watch(
 
     if (newId) {
       fetchAccountById(newStatus.inReplyToAccountId).then((acc) => {
-        if (newId === props.status.inReplyToAccountId)
+        if (newId === status.inReplyToAccountId)
           account.value = acc
       })
       return

components/status/StatusSpoiler.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { enabled, filter, sensitiveNonSpoiler } = defineProps<{
   enabled?: boolean
   filter?: boolean
   isDM?: boolean
@@ -10,12 +10,12 @@ const expandSpoilers = computed(() => {
   const expandCW = currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false
   const expandMedia = currentUser.value ? getExpandMediaByDefault(currentUser.value.account) : false
 
-  return !props.filter // always prevent expansion if filtered
-    && ((props.sensitiveNonSpoiler && expandMedia)
-      || (!props.sensitiveNonSpoiler && expandCW))
+  return !filter // always prevent expansion if filtered
+    && ((sensitiveNonSpoiler && expandMedia)
+      || (!sensitiveNonSpoiler && expandCW))
 })
 
-const hideContent = props.enabled || props.sensitiveNonSpoiler
+const hideContent = enabled || sensitiveNonSpoiler
 const showContent = ref(expandSpoilers.value ? true : !hideContent)
 const toggleContent = useToggle(showContent)
 
@@ -23,9 +23,9 @@ watchEffect(() => {
   showContent.value = expandSpoilers.value ? true : !hideContent
 })
 function getToggleText() {
-  if (props.sensitiveNonSpoiler)
+  if (sensitiveNonSpoiler)
     return 'status.spoiler_media_hidden'
-  return props.filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more'
+  return filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more'
 }
 </script>
 

components/status/edit/StatusEditPreview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { edit } = defineProps<{
+defineProps<{
   edit: mastodon.v1.StatusEdit
 }>()
 </script>