refactor: switch to setup-sfc

2022-11-25 15:12:49 +08:00 · 2022-11-25 15:12:49 +08:00 · bbc8ed5307
parent 6ca34cab85
commit bbc8ed5307
10 changed files with 55 additions and 41 deletions
--- a/components/account/AccountHeader.vue
+++ b/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>
--- a/components/account/AccountInfo.vue
+++ b/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>
--- a/components/account/AccountInlineInfo.vue
+++ b/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>
--- a/components/account/AccountLink.vue
+++ b/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>
--- a/components/content/ContentRich.setup.ts
+++ b/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),
+)
--- a/components/content/ContentRich.ts
+++ b/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),
-    )
-  },
-})
--- a/components/status/StatusAccountDetails.vue
+++ b/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>
--- a/components/status/StatusBody.vue
+++ b/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>
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
-    resolution: {integrity: sha512-Szm25QnX65YaNMm/wbP4j2TdMKwkWQSGRU72/kadt1yH4/BzwjcQlQIYIpBxEnbYb3BeQyj0NGL5695E1jGqEg==}
+  /@vue-macros/define-render/1.0.1:
+    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:
-    resolution: {integrity: sha512-EYrsuUf3yjqCAdZka5U9xM0lRmWGzdZdpgDkVmzGkIf7o6AdxitD6b44MSbgAkZIYWBspQVD5dehOyriVgcSWA==}
+  /@vue-macros/nuxt/0.1.1_nuxt@3.0.0:
+    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:
-    resolution: {integrity: sha512-WRG+KtpQJsYUN8y7w9SO/x5StclNyOAazoJtx4pRDgjypkhXRaRCOyRUm2eClia/XeSltbXIuWV7oGSfGKd4pg==}
+  /unplugin-vue-macros/1.0.2:
+    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}