Skip to content
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.

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

feat: add transformHead hook #1323

Merged
merged 9 commits into from Sep 12, 2022
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitattributes
@@ -0,0 +1 @@
* text=auto eol=lf
41 changes: 26 additions & 15 deletions docs/config/app-configs.md
Expand Up @@ -255,24 +255,21 @@ VitePress build hooks allow you to add new functionality and behaviors to your w
- Search Indexing
- PWA

### transformHtml
### transformHead

- Type: `( code: string, id: string, ctx: TransformContext ) => Awaitable<string | void>`
- Type: `(ctx: TransformContext) => Awaitable<HeadConfig[]>`

`transformHtml` is a build hook to transform the content of each page before saving to disk (SSG).
`transformHead` is a build hook to transform the head before generating each page. It will allow you to add head entries that cannot be statically added to your VitePress config. You only need to return extra entries, they will be merged automatically with the existing ones.

::: warning
Modifying the html content may cause hydration problems in runtime.
Don't mutate anything inside the `ctx`.
brc-dd marked this conversation as resolved.
Show resolved Hide resolved
:::

```ts
import { defineConfig } from 'vitepress'

export default defineConfig({
/* other vitepress options */
async transformHtml(code, id, context) {
export default {
async transformHead(ctx) {
}
})
}
```

```ts
Expand All @@ -287,18 +284,32 @@ interface TransformContext {
}
```

### transformHtml

- Type: `(code: string, id: string, ctx: TransformContext) => Awaitable<string | void>`

`transformHtml` is a build hook to transform the content of each page before saving to disk.

::: warning
Modifying the html content may cause hydration problems in runtime.
brc-dd marked this conversation as resolved.
Show resolved Hide resolved
:::

```ts
export default {
async transformHtml(code, id, context) {
}
}
```

### buildEnd

- Type: `(siteConfig: SiteConfig) => Awaitable<void>`

`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.

```ts
import { defineConfig } from 'vitepress'

export default defineConfig({
/* other vitepress options */
export default {
async buildEnd(siteConfig) {
}
})
}
```
15 changes: 14 additions & 1 deletion src/node/build/render.ts
Expand Up @@ -106,11 +106,24 @@ export async function renderPage(
const title: string = createTitle(siteData, pageData)
const description: string = pageData.description || siteData.description

const head = mergeHead(
const headBeforeTransform = mergeHead(
siteData.head,
filterOutHeadDescription(pageData.frontmatter.head)
)

const head = mergeHead(
headBeforeTransform,
(await config.transformHead?.({
siteConfig: config,
siteData,
pageData,
title,
description,
head: headBeforeTransform,
content
})) || []
)

let inlinedScript = ''
if (config.mpa && result) {
const matchingChunk = result.output.find(
Expand Down
9 changes: 9 additions & 0 deletions src/node/config.ts
Expand Up @@ -93,6 +93,13 @@ export interface UserConfig<ThemeConfig = any> {
*/
buildEnd?: (siteConfig: SiteConfig) => Awaitable<void>

/**
* Head transform hook: runs before writing HTML to dist.
*
* This build hook will allow you to modify the head adding new entries that cannot be statically added.
*/
transformHead?: (ctx: TransformContext) => Awaitable<HeadConfig[]>

/**
* HTML transform hook: runs before writing HTML to dist.
*/
Expand Down Expand Up @@ -129,6 +136,7 @@ export interface SiteConfig<ThemeConfig = any>
| 'ignoreDeadLinks'
| 'cleanUrls'
| 'buildEnd'
| 'transformHead'
| 'transformHtml'
> {
root: string
Expand Down Expand Up @@ -215,6 +223,7 @@ export async function resolveConfig(
ignoreDeadLinks: userConfig.ignoreDeadLinks,
cleanUrls: userConfig.cleanUrls || 'disabled',
buildEnd: userConfig.buildEnd,
transformHead: userConfig.transformHead,
transformHtml: userConfig.transformHtml
}

Expand Down