perf(theme): optimize composables

theme/src/client/composables/blog-extract.ts

@@ -1,64 +1,44 @@
-import { useRouteLocale } from 'vuepress/client'
 import { computed } from 'vue'
-import type { PresetLocale } from '../../shared/index.js'
 import { useLocalePostList } from './blog-data.js'
 import { useTags } from './blog-tags.js'
 import { type BlogCategory, useBlogCategory } from './blog-category.js'
 import { useData } from './data.js'
-import { useLocaleLink } from './locale.js'
-
-declare const __PLUME_PRESET_LOCALE__: Record<string, PresetLocale>
-
-const presetLocales = __PLUME_PRESET_LOCALE__
-
-export function useBlogNavTitle(name: keyof PresetLocale) {
-  const locale = useRouteLocale()
-
-  return computed(() => presetLocales[locale.value]?.[name] || presetLocales['/'][name])
-}
+import { useInternalLink } from './internal-link.js'
 
 export function useBlogExtract() {
   const { theme } = useData()
-  const locale = useRouteLocale()
   const postList = useLocalePostList()
   const { tags: tagsList } = useTags()
   const { categories: categoryList } = useBlogCategory()
   const blog = computed(() => theme.value.blog || {})
+  const links = useInternalLink()
 
   const hasBlogExtract = computed(() =>
     blog.value.archives !== false
     || blog.value.tags !== false
     || blog.value.categories !== false,
   )
-  const blogLink = useLocaleLink(blog.value.link || 'blog/')
-  const tagsLink = useLocaleLink(blog.value.tagsLink || 'blog/tags/')
-  const archiveLink = useLocaleLink(blog.value.archivesLink || 'blog/archives/')
-  const categoriesLink = useLocaleLink(blog.value.categoriesLink || 'blog/categories/')
 
   const tags = computed(() => ({
-    link: tagsLink.value,
-    text: presetLocales[locale.value]?.tag || presetLocales['/'].tag,
+    link: links.tags.value.link,
+    text: links.tags.value.text,
     total: tagsList.value.length,
   }))
 
   const archives = computed(() => ({
-    link: archiveLink.value,
-    text: presetLocales[locale.value]?.archive || presetLocales['/'].archive,
+    link: links.archive.value.link,
+    text: links.archive.value.text,
     total: postList.value.length,
   }))
 
   const categories = computed(() => ({
-    link: categoriesLink.value,
-    text: presetLocales[locale.value]?.category || presetLocales['/'].category,
+    link: links.categories.value.link,
+    text: links.categories.value.text,
     total: getCategoriesTotal(categoryList.value),
   }))
 
   return {
     hasBlogExtract,
-    blogLink,
-    tagsLink,
-    archiveLink,
-    categoriesLink,
     tags,
     archives,
     categories,

theme/src/client/composables/index.ts

@@ -20,6 +20,7 @@ export * from './contributors.js'
 
 export * from './home.js'
 
+export * from './internal-link.js'
 export * from './blog-data.js'
 export * from './blog-post-list.js'
 export * from './blog-extract.js'
@@ -32,8 +33,8 @@ export * from './page.js'
 export * from './encrypt-data.js'
 export * from './encrypt.js'
 
+export * from './preset-locales.js'
 export * from './link.js'
-export * from './locale.js'
 export * from './route-query.js'
 
 export * from './watermark.js'

theme/src/client/composables/internal-link.ts

@@ -0,0 +1,38 @@
+import { computed } from 'vue'
+import { useRouteLocale } from 'vuepress/client'
+import type { PresetLocale } from '../../shared/index.js'
+import { useData } from './data.js'
+import { getPresetLocaleData } from './preset-locales.js'
+
+export interface InternalLink {
+  text: string
+  link: string
+}
+
+export function useInternalLink() {
+  const { theme } = useData()
+  const routeLocale = useRouteLocale()
+
+  function resolveLink(name: keyof PresetLocale, link: string): InternalLink {
+    return {
+      link: (routeLocale.value + link).replace(/\/+/g, '/'),
+      text: getPresetLocaleData(routeLocale.value, name),
+    }
+  }
+
+  const blogData = computed(() => theme.value.blog || {})
+
+  const home = computed(() => resolveLink('home', '/'))
+  const blog = computed(() => resolveLink('blog', blogData.value.link || 'blog/'))
+  const tags = computed(() => resolveLink('tag', blogData.value.tagsLink || 'blog/tags/'))
+  const archive = computed(() => resolveLink('archive', blogData.value.archivesLink || 'blog/archives/'))
+  const categories = computed(() => resolveLink('category', blogData.value.categoriesLink || 'blog/categories/'))
+
+  return {
+    home,
+    blog,
+    tags,
+    archive,
+    categories,
+  }
+}

theme/src/client/composables/locale.ts

@@ -1,10 +0,0 @@
-import { useRouteLocale } from 'vuepress/client'
-import { computed } from 'vue'
-
-export function useLocaleLink(link: string) {
-  const prefix = useRouteLocale()
-
-  return computed(() => {
-    return (prefix.value + link).replace(/\/+/g, '/')
-  })
-}

theme/src/client/composables/preset-locales.ts

@@ -0,0 +1,9 @@
+import type { PresetLocale } from '../../shared/index.js'
+
+declare const __PLUME_PRESET_LOCALE__: Record<string, PresetLocale>
+
+export const presetLocales = __PLUME_PRESET_LOCALE__
+
+export function getPresetLocaleData(locale: string, name: keyof PresetLocale) {
+  return presetLocales[locale]?.[name] || presetLocales['/'][name]
+}