/
setupGlobalComputed.ts
143 lines (136 loc) · 3.83 KB
/
setupGlobalComputed.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { type App, computed, ref, watch } from 'vue'
import type { Router } from 'vue-router'
import {
type LayoutsRef,
layoutsSymbol,
type PageData,
pageData,
type PageDataRef,
type PageFrontmatter,
type PageFrontmatterRef,
pageFrontmatterSymbol,
type PageHead,
type PageHeadRef,
pageHeadSymbol,
type PageHeadTitle,
type PageHeadTitleRef,
pageHeadTitleSymbol,
type PageLang,
type PageLangRef,
pageLangSymbol,
type PageLayoutRef,
pageLayoutSymbol,
type RouteLocale,
type RouteLocaleRef,
routeLocaleSymbol,
type SiteData,
siteData,
type SiteDataRef,
type SiteLocaleData,
type SiteLocaleDataRef,
siteLocaleDataSymbol,
} from './composables/index.js'
import { withBase } from './helpers/index.js'
import { resolvers } from './resolvers.js'
import type { ClientConfig } from './types/index.js'
/**
* Vuepress client global computed
*/
export interface GlobalComputed {
layouts: LayoutsRef
pageData: PageDataRef
pageFrontmatter: PageFrontmatterRef
pageHead: PageHeadRef
pageHeadTitle: PageHeadTitleRef
pageLang: PageLangRef
pageLayout: PageLayoutRef
routeLocale: RouteLocaleRef
siteData: SiteDataRef
siteLocaleData: SiteLocaleDataRef
}
/**
* Create and provide global computed
*/
export const setupGlobalComputed = (
app: App,
router: Router,
clientConfigs: ClientConfig[]
): GlobalComputed => {
// create a manual computed route path, so that route hash changes won't trigger all downstream computed
const routePath = ref(router.currentRoute.value.path)
watch(
() => router.currentRoute.value.path,
(value) => (routePath.value = value)
)
// create global computed
const layouts = computed(() => resolvers.resolveLayouts(clientConfigs))
const routeLocale = computed(() =>
resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
)
const siteLocaleData = computed(() =>
resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)
)
const pageFrontmatter = computed(() =>
resolvers.resolvePageFrontmatter(pageData.value)
)
const pageHeadTitle = computed(() =>
resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value)
)
const pageHead = computed(() =>
resolvers.resolvePageHead(
pageHeadTitle.value,
pageFrontmatter.value,
siteLocaleData.value
)
)
const pageLang = computed(() => resolvers.resolvePageLang(pageData.value))
const pageLayout = computed(() =>
resolvers.resolvePageLayout(pageData.value, layouts.value)
)
// provide global computed
app.provide(layoutsSymbol, layouts)
app.provide(pageFrontmatterSymbol, pageFrontmatter)
app.provide(pageHeadTitleSymbol, pageHeadTitle)
app.provide(pageHeadSymbol, pageHead)
app.provide(pageLangSymbol, pageLang)
app.provide(pageLayoutSymbol, pageLayout)
app.provide(routeLocaleSymbol, routeLocale)
app.provide(siteLocaleDataSymbol, siteLocaleData)
// provide global helpers
Object.defineProperties(app.config.globalProperties, {
$frontmatter: { get: () => pageFrontmatter.value },
$head: { get: () => pageHead.value },
$headTitle: { get: () => pageHeadTitle.value },
$lang: { get: () => pageLang.value },
$page: { get: () => pageData.value },
$routeLocale: { get: () => routeLocale.value },
$site: { get: () => siteData.value },
$siteLocale: { get: () => siteLocaleData.value },
$withBase: { get: () => withBase },
})
return {
layouts,
pageData,
pageFrontmatter,
pageHead,
pageHeadTitle,
pageLang,
pageLayout,
routeLocale,
siteData,
siteLocaleData,
}
}
declare module 'vue' {
export interface ComponentCustomProperties {
$frontmatter: PageFrontmatter
$head: PageHead
$headTitle: PageHeadTitle
$lang: PageLang
$page: PageData
$routeLocale: RouteLocale
$site: SiteData
$siteLocale: SiteLocaleData
$withBase: typeof withBase
}
}