Skip to content

feat(core): support injecting meta into router #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Mister-Hope wants to merge 2 commits into from
Closed

feat(core): support injecting meta into router #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e850b46
feat(core): support injecting meta into router
Mister-Hope Nov 7, 2021
2f78825
test: fix test
Mister-Hope Nov 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/reference/node-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,7 @@ interface PageData {
frontmatter: PageFrontmatter
excerpt: string
headers: PageHeader[]
meta: Record<string, unknown>
}
```

Expand Down
8 changes: 6 additions & 2 deletions docs/reference/plugin-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ module.exports = {
```js
module.exports = {
extendsPageData: (page) => {
const meta = 'foobar'
const meta = { foo: 'bar', path: page.pathInferred }
return { meta }
},
}
Expand All @@ -196,11 +196,15 @@ In client component:

```js
import { usePageData } from '@vuepress/client'
import { useResolveRouteWithRedirect } from '@vuepress/theme-default'

export default {
setup() {
const page = usePageData()
console.log(page.value.meta) // foobar
const route = useResolveRouteWithRedirect('/')

console.log(page.value.meta.foo) // 'bar'
console.log(route.meta.path) // '/'
Copy link
Member

@meteorlxy meteorlxy Dec 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As meta is already available in the route.meta, is it necessary to put meta in to page data?

I think we can make meta a property of the Page object, and don't need to put it into page data.

What's your opinion? @Mister-Hope

Copy link
Member Author

@Mister-Hope Mister-Hope Dec 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds ok to me.

Copy link
Member

@meteorlxy meteorlxy Dec 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we remove it from page data, we could not use extendsPageData to modify it. I have two proposals:

  1. Let users to modify it manually in onInitialized hook:
onInitialized: (app) => app.pages.forEach((page) => {
  page.data.foo = 'foo'
  page.routeMeta.title = page.title
  // ...
})

In fact, the extendsPageData hook could also be removed as we have added page.data property, and users can modify it in this way, too. 😅

  1. Rename extendsPageData to extendsPage:
extendsPage: (page) => {
  page.data.foo = 'foo'
  page.routeMeta.title = page.title
  // ...
}

The only difference is that plugins / themes don't need to traverse the app.pages array by themselves.

@Mister-Hope

},
}
```
Expand Down
1 change: 1 addition & 0 deletions docs/zh/reference/node-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,7 @@ interface PageData {
frontmatter: PageFrontmatter
excerpt: string
headers: PageHeader[]
meta: Record<string, unknown>
}
```

Expand Down
8 changes: 6 additions & 2 deletions docs/zh/reference/plugin-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ module.exports = {
```js
module.exports = {
extendsPageData: (page) => {
const meta = 'foobar'
const meta = { foo: 'bar', path: page.pathInferred }
return { meta }
},
}
Expand All @@ -197,11 +197,15 @@ module.exports = {

```js
import { usePageData } from '@vuepress/client'
import { useResolveRouteWithRedirect } from '@vuepress/theme-default'

export default {
setup() {
const page = usePageData()
console.log(page.value.meta) // foobar
const route = useResolveRouteWithRedirect('/')

console.log(page.value.meta.foo) // 'bar'
console.log(route.meta.path) // '/'
},
}
```
Expand Down
1 change: 1 addition & 0 deletions packages/@vuepress/core/__tests__/page/resolvePageData.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('core > page > resolvePageData', () => {
frontmatter: {},
excerpt: '',
headers: [],
meta: {},
} as unknown) as Page

expect(
Expand Down
12 changes: 6 additions & 6 deletions packages/@vuepress/core/src/app/prepare/preparePagesRoutes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import type { App } from '../../types'
type RouteItem = [
name: string,
path: string,
title: string,
redirects: string[]
redirects: string[],
meta: Record<string, unknown>
]

/**
Expand All @@ -17,9 +17,9 @@ import { Vuepress } from '@vuepress/client/lib/components/Vuepress'

const routeItems = [\
${app.pages
.map(({ key, path, pathInferred, filePathRelative, title }) => {
.map(({ key, path, pathInferred, filePathRelative, data: { meta = {} } }) => {
const redirects: string[] = []
const routeItem: RouteItem = [key, path, title, redirects]
const routeItem: RouteItem = [key, path, redirects, meta]

// paths that should redirect to this page
const redirectsSet = new Set<string>()
Expand Down Expand Up @@ -60,13 +60,13 @@ ${app.pages
]

export const pagesRoutes = routeItems.reduce(
(result, [name, path, title, redirects]) => {
(result, [name, path, redirects, meta]) => {
result.push(
{
name,
path,
component: Vuepress,
meta: { title },
meta,
},
...redirects.map((item) => ({
path: item,
Expand Down
5 changes: 4 additions & 1 deletion packages/@vuepress/core/src/page/resolvePageData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@ export const resolvePageData = async ({
frontmatter,
excerpt,
headers,
meta: {},
}

// plugin hook: extendsPageData
const extendsPageData = await app.pluginApi.hooks.extendsPageData.process(
page,
app
)
extendsPageData.forEach((item) => Object.assign(data, item))
extendsPageData.forEach((item) =>
Object.assign(data, { item, meta: { ...data.meta, ...item.meta } })
)
Comment on lines +30 to +32
Copy link
Member Author

@Mister-Hope Mister-Hope Nov 7, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I deep merge meta key to avoid the frontter edits being coverd.

But, I think there are issues with this design. I am explaining why there are problems in #519 .

Though this simple change avoid #519, but users are not able to delete any meta keys.


return data
}
5 changes: 5 additions & 0 deletions packages/@vuepress/shared/src/types/page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ export type PageData<
* Headers of the page
*/
headers: PageHeader[]

/**
* Route meta data of the page
*/
meta?: Record<string, unknown>
}

/**
Expand Down
6 changes: 5 additions & 1 deletion packages/@vuepress/theme-default/src/node/defaultTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@ export const defaultTheme: Theme<DefaultThemeOptions> = ({
clientAppSetupFiles: path.resolve(__dirname, '../client/clientAppSetup.js'),

// use the relative file path to generate edit link
extendsPageData: ({ filePathRelative }) => ({ filePathRelative }),
// store title to display navbar and sidebar
extendsPageData: ({ filePathRelative, title }) => ({
filePathRelative,
meta: { title },
}),

plugins: [
[
Expand Down