feat: update head tags during dev

lib/app/composables/head.js

@@ -0,0 +1,51 @@
+import { watchEffect } from 'vue'
+import { useSiteData } from './siteData'
+
+/**
+ * @param {import('./pageData').PageDataRef} pageData
+ */
+export function useUpdateHead(pageData) {
+ const siteData = useSiteData()
+
+ /**
+ * @type {HTMLElement[]}
+ */
+ const siteHeadTags = []
+ /**
+ * @type {HTMLElement[]}
+ */
+ const pageHeadTags = []
+
+ /**
+ * @param {HTMLElement[]} tags
+ * @param {import('src').HeadConfig[]} newTags
+ */
+ const updateHeadTags = (tags, newTags) => {
+ tags.forEach((el) => document.head.removeChild(el))
+ tags.length = 0
+ if (newTags && newTags.length) {
+ newTags.forEach(([tag, attrs, innerHTML]) => {
+ const el = document.createElement(tag)
+ for (const key in attrs) {
+ el.setAttribute(key, attrs[key])
+ }
+ if (innerHTML) {
+ el.innerHTML = innerHTML
+ }
+ document.head.appendChild(el)
+ tags.push(el)
+ })
+ }
+ }
+
+ watchEffect(() => {
+ updateHeadTags(siteHeadTags, siteData.value.head)
+ })
+
+ watchEffect(() => {
+ updateHeadTags(
+ pageHeadTags,
+ pageData.value && pageData.value.frontmatter.head
+ )
+ })
+}

lib/app/composables/pageData.js

@@ -1,11 +1,7 @@
 import { inject } from 'vue'
 
 /**
- * @typedef {{
- * a: 1
- * }} PageData
- *
- * @typedef {import('vue').Ref<PageData>} PageDataRef
+ * @typedef {import('vue').Ref<import('src').PageData>} PageDataRef
  */
 
 /**

lib/app/composables/siteData.js

@@ -4,10 +4,13 @@ import { ref, readonly } from 'vue'
 
 /**
  * @param {string} data
+ * @returns {any}
  */
 const parse = (data) => readonly(JSON.parse(data))
 
-// site data
+/**
+ * @type {import('vue').Ref<import('src').SiteData>}
+ */
 const siteDataRef = ref(parse(serialized))
 
 export function useSiteData() {

lib/app/index.js

@@ -6,6 +6,7 @@ import {
 } from 'vue'
 import { Content } from './components/Content'
 import { createRouter, RouterSymbol } from './router'
+import { useUpdateHead } from './composables/head'
 import { useSiteData } from './composables/siteData'
 import { usePageData, pageDataSymbol } from './composables/pageData'
 import Theme from '/@theme/index'
@@ -18,8 +19,12 @@ const NotFound = Theme.NotFound || (() => '404 Not Found')
 export function createApp() {
  const pageDataRef = ref()
 
- // hot reload pageData
  if (__DEV__ && inBrowser) {
+ // dynamically update head tags during dev since it's an SPA
+ // this is not needed in production.
+ useUpdateHead(pageDataRef)
+
+ // hot reload pageData
  hot.on('vitepress:pageData', (data) => {
  if (
  data.path.replace(/\.md$/, '') ===

lib/jsconfig.json

@@ -10,7 +10,8 @@
  "paths": {
  "/@app/*": ["app/*"],
  "/@theme/*": ["theme-default/*"],
- "vitepress": ["app/exports.js"]
+ "vitepress": ["app/exports.js"],
+ "src": ["../dist/index.d.ts"]
  }
  },
  "include": ["."]

src/config.ts

@@ -4,6 +4,7 @@ import globby from 'globby'
 import { promises as fs } from 'fs'
 import { createResolver, APP_PATH } from './utils/pathResolver'
 import { Resolver } from 'vite'
+import { Header } from './markdown/plugins/header'
 
 const debug = require('debug')('vitepress:config')
 
@@ -20,14 +21,6 @@ export interface UserConfig<ThemeConfig = any> {
  // TODO locales support etc.
 }
 
-export interface SiteData<ThemeConfig = any> {
- title: string
- description: string
- base: string
- head: HeadConfig[]
- themeConfig: ThemeConfig
-}
-
 export interface SiteConfig<ThemeConfig = any> {
  root: string
  site: SiteData<ThemeConfig>
@@ -39,6 +32,21 @@ export interface SiteConfig<ThemeConfig = any> {
  pages: string[]
 }
 
+export interface SiteData<ThemeConfig = any> {
+ title: string
+ description: string
+ base: string
+ head: HeadConfig[]
+ themeConfig: ThemeConfig
+}
+
+export interface PageData {
+ title: string
+ frontmatter: Record<string, any>
+ headers: Header[]
+ lastUpdated: number
+}
+
 const resolve = (root: string, file: string) =>
  path.join(root, `.vitepress`, file)
 

src/index.ts

@@ -1,2 +1,3 @@
 export * from './server'
 export * from './build/build'
+export * from './config'

src/markdownToVue.ts

@@ -2,8 +2,8 @@ import path from 'path'
 import matter from 'gray-matter'
 import LRUCache from 'lru-cache'
 import { createMarkdownRenderer, MarkdownOpitons } from './markdown/markdown'
-import { Header } from './markdown/plugins/header'
 import { deeplyParseHeader } from './utils/parseHeader'
+import { PageData } from './config'
 
 const debug = require('debug')('vitepress:md')
 const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 })
@@ -13,13 +13,6 @@ interface MarkdownCompileResult {
  pageData: PageData
 }
 
-export interface PageData {
- title: string
- frontmatter: Record<string, any>
- headers: Header[]
- lastUpdated: number
-}
-
 export function createMarkdownToVueRenderFn(
  root: string,
  options: MarkdownOpitons = {}
@@ -53,8 +46,10 @@ export function createMarkdownToVueRenderFn(
  pageData
  )
 
+ // double wrapping since tempalte root node is never hoisted or turned into
+ // a static node.
  const vueSrc =
- `<template><div class="vitepress-content">${html}</div></template>\n` +
+ `<template><div><div class="vitepress-content">${html}</div></div></template>\n` +
  additionalBlocks.join('\n')
  debug(`[render] ${file} in ${Date.now() - start}ms.`)