refactor: switch to setup-sfc

components/account/AccountHeader.vue

@@ -59,7 +59,7 @@ function getFieldNameIcon(fieldName: string) {
             </NuxtLink>
           </div>
           <div flex flex-col>
-            <ContentRich font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
+            <ContentRichSetup font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
               {{ getAccountHandle(account) }}
             </p>

components/account/AccountInfo.vue

@@ -18,7 +18,7 @@ const accountHandle = $(useAccountHandle(account, fullServer))
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
-      <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+      <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
         {{ accountHandle }}
       </p>

components/account/AccountInlineInfo.vue

@@ -10,6 +10,6 @@ const { link = true } = defineProps<{
 <template>
   <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
-    <ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
 </template>

components/account/AccountLink.vue

@@ -8,6 +8,6 @@ defineProps<{
 
 <template>
   <NuxtLink :to="getAccountPath(account)">
-    <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
 </template>

components/content/ContentRich.setup.ts

@@ -0,0 +1,19 @@
+import type { Emoji } from 'masto'
+import { emojisArrayToObject } from '~/composables/utils'
+
+defineOptions({
+  name: 'ContentRich',
+})
+
+const props = defineProps<{
+  content: string
+  emojis: Emoji[]
+}>()
+
+const emojiObject = emojisArrayToObject(props.emojis || [])
+
+export default () => h(
+  'div',
+  { class: 'rich-content' },
+  contentToVNode(props.content, emojiObject),
+)

components/content/ContentRich.ts

@@ -1,24 +0,0 @@
-import type { Emoji } from 'masto'
-import type { PropType } from 'vue'
-import { emojisArrayToObject } from '~/composables/utils'
-
-export default defineComponent({
-  props: {
-    content: {
-      type: String,
-      required: true,
-    },
-    emojis: {
-      type: Array as PropType<Emoji[]>,
-    },
-  },
-  setup(props) {
-    const emojiObject = emojisArrayToObject(props.emojis || [])
-
-    return () => h(
-      'div',
-      { class: 'rich-content' },
-      contentToVNode(props.content, emojiObject),
-    )
-  },
-})

components/status/StatusAccountDetails.vue

@@ -11,7 +11,7 @@ const accountHandle = $(useAccountHandle(account))
 
 <template>
   <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-2 items-center>
-    <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
     <p op35 text-sm>
       {{ accountHandle }}
     </p>

components/status/StatusBody.vue

@@ -9,6 +9,6 @@ const { translation } = useTranslation(status)
 
 <template>
   <div class="status-body">
-    <ContentRich :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
+    <ContentRichSetup :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
   </div>
 </template>