refactor: optimize code

vuepress-reco · Apr 27, 2024 · d2d7818 · d2d7818
1 parent 6168be2
commit d2d7818
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 277 deletions.
diff --git a/packages/vuepress-theme-reco/src/client/components/Link.vue b/packages/vuepress-theme-reco/src/client/components/Link.vue
@@ -3,7 +3,7 @@
     v-if="isRouterLink"
     class="link"
     :class="{ 'router-link-active': isActiveInSubpath }"
-    :to="item.link"
+    :to="item.link as string"
     :aria-label="linkAriaLabel"
     v-bind="$attrs"
     :key="`${item.link}-router`"
@@ -30,95 +30,84 @@
   </a>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useRoute } from 'vue-router'
-import { computed, defineComponent, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
 import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
 
 import { useThemeLocaleData } from '@composables/index.js'
 
 import type { PropType } from 'vue'
-import type { NavLink } from '../../types'
+import type { NavLink, ResolvedSeriesItem } from '../../types'
 
-export default defineComponent({
-  name: 'Link',
 
-  inheritAttrs: false,
+const route = useRoute()
+const routeLocale = useRouteLocale()
+const siteLocal = useSiteLocaleData()
+const themeLocal = useThemeLocaleData()
 
-  props: {
-    item: {
-      type: Object as PropType<NavLink>,
-      required: true,
-    },
-  },
+interface LinkItem extends NavLink {
+  [key: string]: unknown
+}
 
-  setup(props) {
-    const route = useRoute()
-    const routeLocale = useRouteLocale()
-    const siteLocal = useSiteLocaleData()
-    const themeLocal = useThemeLocaleData()
+const props = defineProps({
+  item: {
+    type: Object as PropType<NavLink | ResolvedSeriesItem>,
+    required: true,
+  },
+})
+const { item } = toRefs(props)
 
-    const { item } = toRefs(props)
+// if the link has http protocol
+const hasHttpProtocol = computed(() => isLinkHttp(item.value.link as string))
+// if the link has non-http protocol
+const hasNonHttpProtocal = computed(
+  () => !hasHttpProtocol.value && isLinkWithProtocol(item.value.link as string)
+)
+// resolve the `target` attr
+const linkTarget = computed(() => {
+  if (hasNonHttpProtocal.value) return undefined
+  if (item.value.target) return item.value.target
+  if (hasHttpProtocol.value) return '_blank'
+  return undefined
+})
+// if the `target` attr is '_blank'
+const isBlankTarget = computed(() => linkTarget.value === '_blank')
+// is `<RouterLink>` or not
+const isRouterLink = computed(
+  () =>
+    !hasHttpProtocol.value &&
+    !hasNonHttpProtocal.value &&
+    !isBlankTarget.value
+)
 
-    // if the link has http protocol
-    const hasHttpProtocol = computed(() => isLinkHttp(item.value.link))
-    // if the link has non-http protocol
-    const hasNonHttpProtocal = computed(
-      () => !hasHttpProtocol.value && isLinkWithProtocol(item.value.link)
-    )
-    // resolve the `target` attr
-    const linkTarget = computed(() => {
-      if (hasNonHttpProtocal.value) return undefined
-      if (item.value.target) return item.value.target
-      if (hasHttpProtocol.value) return '_blank'
-      return undefined
-    })
-    // if the `target` attr is '_blank'
-    const isBlankTarget = computed(() => linkTarget.value === '_blank')
-    // is `<RouterLink>` or not
-    const isRouterLink = computed(
-      () =>
-        !hasHttpProtocol.value &&
-        !hasNonHttpProtocal.value &&
-        !isBlankTarget.value
-    )
-    // resolve the `rel` attr
-    const linkRel = computed(() => {
-      if (hasNonHttpProtocal.value) return undefined
-      if (item.value.rel) return item.value.rel
-      if (isBlankTarget.value) return 'noopener noreferrer'
-      return undefined
-    })
-    // resolve the `aria-label` attr
-    const linkAriaLabel = computed(
-      () => item.value.ariaLabel || item.value.text
-    )
+// resolve the `rel` attr
+const linkRel = computed(() => {
+  if (hasNonHttpProtocal.value) return undefined
+  if (item.value.rel) return item.value.rel
+  if (isBlankTarget.value) return 'noopener noreferrer'
+  return undefined
+})
+// resolve the `aria-label` attr
+const linkAriaLabel = computed(
+  () => item.value.ariaLabel || item.value.text
+)
 
-    // should be active when current route is a subpath of this link
-    const shouldBeActiveInSubpath = computed(() => {
-      const localeKeys = Object.keys(siteLocal.value.locales)
-      if (localeKeys.length) {
-        return !localeKeys.some((key) => key === item.value.link)
-      }
-      return item.value.link !== themeLocal.value.home || routeLocale.value
-    })
-    // if this link is active in subpath
-    const isActiveInSubpath = computed(() => {
-      if (!isRouterLink.value || !shouldBeActiveInSubpath.value) {
-        return false
-      }
-      return route.path.startsWith(item.value.link)
-    })
+// should be active when current route is a subpath of this link
+const shouldBeActiveInSubpath = computed(() => {
+  const localeKeys = Object.keys(siteLocal.value.locales)
+  if (localeKeys.length) {
+    return !localeKeys.some((key) => key === item.value.link)
+  }
+  return item.value.link !== themeLocal.value.home || routeLocale.value
+})
 
-    return {
-      isActiveInSubpath,
-      isBlankTarget,
-      isRouterLink,
-      linkRel,
-      linkTarget,
-      linkAriaLabel,
-    }
-  },
+// if this link is active in subpath
+const isActiveInSubpath = computed(() => {
+  if (!isRouterLink.value || !shouldBeActiveInSubpath.value) {
+    return false
+  }
+  return route.path.startsWith(item.value.link as string)
 })
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue b/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
@@ -12,10 +12,10 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { isString } from 'vuepress/shared'
-import { computed, defineComponent } from 'vue'
 import { convertToPinyin } from '@vuepress-reco/shared'
 import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
 import { getNavLink, useThemeLocaleData } from '@composables/index.js'
@@ -200,28 +200,14 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
   })
 }
 
-export default defineComponent({
-  name: 'NavbarLinks',
 
-  components: {
-    Link,
-    DropdownLink,
-  },
+const navbarConfig = useNavbarConfig()
+const navbarSelectLanguage = useNavbarSelectLanguage()
+const navbarRepo = useNavbarRepo()
 
-  setup() {
-    const navbarConfig = useNavbarConfig()
-    const navbarSelectLanguage = useNavbarSelectLanguage()
-    const navbarRepo = useNavbarRepo()
-
-    const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
-      ...navbarConfig.value,
-      ...navbarSelectLanguage.value,
-      ...navbarRepo.value,
-    ])
-
-    return {
-      navbarLinks,
-    }
-  },
-})
+const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
+  ...navbarConfig.value,
+  ...navbarSelectLanguage.value,
+  ...navbarRepo.value,
+])
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/PageInfo.vue b/packages/vuepress-theme-reco/src/client/components/PageInfo.vue
@@ -43,9 +43,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, toRefs } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useThemeLocaleData } from '@composables/index.js'
 import { convertToPinyin, removeEmptyString } from '@vuepress-reco/shared'
 import { useComment } from '@vuepress-reco/vuepress-plugin-comments/composables'
 
@@ -55,95 +55,77 @@ function formatCategory(category: string) {
   return convertToPinyin(removeEmptyString(category))
 }
 
-export default defineComponent({
-  name: 'PageInfo',
-
-  props: {
-    pageData: {
-      type: Object,
-      default: () => ({}),
-    },
-    currentCategory: {
-      type: String,
-      default: '',
-    },
-    currentTag: {
-      type: String,
-      default: '',
-    },
-    hideViews: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => ({}),
   },
+  currentCategory: {
+    type: String,
+    default: '',
+  },
+  currentTag: {
+    type: String,
+    default: '',
+  },
+  hideViews: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { pageData, hideViews } = toRefs(props)
 
-  setup(props) {
-    const { pageData, hideViews } = toRefs(props)
-    const { solution, options } = useComment()
-    const themeData = useThemeLocaleData()
-
-    const author = computed(
-      () => pageData?.value?.frontmatter?.author || themeData.value.author || ''
-    )
-
-    const date = computed(() => {
-      const d = pageData?.value?.frontmatter?.date
-      return d ? formatISODate(d) : ''
-    })
-
-    const categories = computed(() => {
-      return (pageData?.value?.frontmatter?.categories || []).map(category => {
-        return {
-          label: category,
-          pathValue: formatCategory((category))
-        }
-      })
-    })
-
-    const tags = computed(() => {
-      return (pageData?.value?.frontmatter?.tags || []).map(category => {
-        return {
-          label: category,
-          pathValue: formatCategory((category))
-        }
-      })
-    })
-
-    const showPageInfo = computed(
-      () =>
-        !!author.value ||
-        !!date.value ||
-        !!(categories.value && categories.value.length > 0) ||
-        !!(tags.value && tags.value.length > 0)
-    )
-
-    const showValineViews = computed(() => {
-      return (
-        solution.value === 'valine' &&
-        options.value.visitor != false &&
-        !hideViews.value
-      )
-    })
-
-    const showWalineViews = computed(() => {
-      return (
-        solution.value === 'waline' &&
-        options.value.pageview != false &&
-        !hideViews.value
-      )
-    })
+const themeData = useThemeLocaleData()
+const { solution, options } = useComment()
 
+const author = computed(
+  () => pageData?.value?.frontmatter?.author || themeData.value.author || ''
+)
+
+const date = computed(() => {
+  const d = pageData?.value?.frontmatter?.date
+  return d ? formatISODate(d) : ''
+})
+
+const categories = computed(() => {
+  return (pageData?.value?.frontmatter?.categories || []).map(category => {
     return {
-      author,
-      date,
-      categories,
-      tags,
-      showPageInfo,
-      solution,
-      showValineViews,
-      showWalineViews,
-      convertToPinyin,
+      label: category,
+      pathValue: formatCategory((category))
     }
-  },
+  })
+})
+
+const tags = computed(() => {
+  return (pageData?.value?.frontmatter?.tags || []).map(category => {
+    return {
+      label: category,
+      pathValue: formatCategory((category))
+    }
+  })
+})
+
+const showPageInfo = computed(
+  () =>
+    !!author.value ||
+    !!date.value ||
+    !!(categories.value && categories.value.length > 0) ||
+    !!(tags.value && tags.value.length > 0)
+)
+
+const showValineViews = computed(() => {
+  return (
+    solution.value === 'valine' &&
+    options.value.visitor != false &&
+    !hideViews.value
+  )
+})
+
+const showWalineViews = computed(() => {
+  return (
+    solution.value === 'waline' &&
+    options.value.pageview != false &&
+    !hideViews.value
+  )
 })
 </script>