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>

package.json

@@ -25,7 +25,7 @@
     "@types/sanitize-html": "^2.6.2",
     "@types/wicg-file-system-access": "^2020.9.5",
     "@unocss/nuxt": "^0.46.5",
-    "@vue-macros/nuxt": "^0.0.3",
+    "@vue-macros/nuxt": "^0.1.1",
     "@vueuse/nuxt": "^9.6.0",
     "blurhash": "^2.0.4",
     "browser-fs-access": "^0.31.1",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ specifiers:
   '@types/sanitize-html': ^2.6.2
   '@types/wicg-file-system-access': ^2020.9.5
   '@unocss/nuxt': ^0.46.5
-  '@vue-macros/nuxt': ^0.0.3
+  '@vue-macros/nuxt': ^0.1.1
   '@vueuse/nuxt': ^9.6.0
   blurhash: ^2.0.4
   browser-fs-access: ^0.31.1
@@ -34,6 +34,7 @@ specifiers:
   theme-vitesse: ^0.6.0
   typescript: ^4.9.3
   ufo: ^1.0.0
+  vite-plugin-inspect: ^0.7.9
 
 devDependencies:
   '@antfu/eslint-config': 0.31.0_hsf322ms6xhhd4b5ne6lb74y4a
@@ -47,7 +48,7 @@ devDependencies:
   '@types/sanitize-html': 2.6.2
   '@types/wicg-file-system-access': 2020.9.5
   '@unocss/nuxt': 0.46.5
-  '@vue-macros/nuxt': 0.0.3_nuxt@3.0.0
+  '@vue-macros/nuxt': 0.1.1_nuxt@3.0.0
   '@vueuse/nuxt': 9.6.0_nuxt@3.0.0
   blurhash: 2.0.4
   browser-fs-access: 0.31.1
@@ -69,6 +70,7 @@ devDependencies:
   theme-vitesse: 0.6.0
   typescript: 4.9.3
   ufo: 1.0.0
+  vite-plugin-inspect: 0.7.9
 
 packages:
 
@@ -1589,8 +1591,8 @@ packages:
       unplugin: 1.0.0
     dev: true
 
-  /@vue-macros/define-render/1.0.0:
+  /@vue-macros/define-render/1.0.1:
-    resolution: {integrity: sha512-Szm25QnX65YaNMm/wbP4j2TdMKwkWQSGRU72/kadt1yH4/BzwjcQlQIYIpBxEnbYb3BeQyj0NGL5695E1jGqEg==}
+    resolution: {integrity: sha512-B4ttYDZkXqVuciN23WNuVnr6L8dKrxEvz74gaYTXbdybv9jLEYMagSm/nFBLin+32EGYKeZu/D393r2EGAzeNg==}
     engines: {node: '>=14.19.0'}
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
@@ -1638,8 +1640,8 @@ packages:
       - webpack
     dev: true
 
-  /@vue-macros/nuxt/0.0.3_nuxt@3.0.0:
+  /@vue-macros/nuxt/0.1.1_nuxt@3.0.0:
-    resolution: {integrity: sha512-EYrsuUf3yjqCAdZka5U9xM0lRmWGzdZdpgDkVmzGkIf7o6AdxitD6b44MSbgAkZIYWBspQVD5dehOyriVgcSWA==}
+    resolution: {integrity: sha512-ncHA77I4NyzC5hRJVtNlj7vLe6mMNcjKw1qV+FN30h7b9O+cP+6KtyI5GXMmWasts7dR7T8BKDKJJiY9zLo5DA==}
     engines: {node: '>=14.19.0'}
     peerDependencies:
       nuxt: ^3.0.0
@@ -1647,7 +1649,7 @@ packages:
       '@nuxt/kit': 3.0.0
       '@vue-macros/volar': 0.5.4
       nuxt: 3.0.0_hsf322ms6xhhd4b5ne6lb74y4a
-      unplugin-vue-macros: 1.0.1
+      unplugin-vue-macros: 1.0.2
     transitivePeerDependencies:
       - '@vueuse/core'
       - esbuild
@@ -6912,8 +6914,8 @@ packages:
       unplugin: 1.0.0
     dev: true
 
-  /unplugin-vue-macros/1.0.1:
+  /unplugin-vue-macros/1.0.2:
-    resolution: {integrity: sha512-WRG+KtpQJsYUN8y7w9SO/x5StclNyOAazoJtx4pRDgjypkhXRaRCOyRUm2eClia/XeSltbXIuWV7oGSfGKd4pg==}
+    resolution: {integrity: sha512-XstktV1aH88Vn2RXRcxZKUV8ewjFWqbZKHnq8NL4W00MV0z1xOwd1CfNdMCTpYiHl25SWA27TOTNNKYORhizhA==}
     engines: {node: '>=14.19.0'}
     peerDependencies:
       vue: ^2.7.0 || ^3.2.25
@@ -6922,7 +6924,7 @@ packages:
       '@vue-macros/better-define': 1.0.0
       '@vue-macros/define-model': 1.0.0
       '@vue-macros/define-props': 0.0.3
-      '@vue-macros/define-render': 1.0.0
+      '@vue-macros/define-render': 1.0.1
       '@vue-macros/define-slots': 0.0.6
       '@vue-macros/hoist-static': 1.0.0
       '@vue-macros/named-template': 0.0.6
@@ -7090,6 +7092,23 @@ packages:
       vscode-uri: 3.0.6
     dev: true
 
+  /vite-plugin-inspect/0.7.9:
+    resolution: {integrity: sha512-YBI5/smKxx2gc5MrzQ8n6ztGxdtItoqumJn96d6b57SvC9aSvjMXsvzUgrR/dlVXCnpu755m1TXp3h/TsVOwJA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vite: ^3.1.0
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      debug: 4.3.4
+      fs-extra: 10.1.0
+      kolorist: 1.6.0
+      sirv: 2.0.2
+      ufo: 1.0.0
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /vite/3.2.4:
     resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
     engines: {node: ^14.18.0 || >=16.0.0}