fix(client): load existing head tags on mounted

Author: meteorlxy

packages/@vuepress/client/src/injections/updateHead.ts

@@ -4,6 +4,32 @@ import type { HeadConfig, VuepressSSRContext } from '@vuepress/shared'
 import { usePageHead } from './pageHead'
 import { usePageLang } from './pageLang'
 
+/**
+ * Query the matched head tag of head config
+ */
+export const queryHeadTag = ([
+  tagName,
+  attrs,
+  content = '',
+]: HeadConfig): HTMLElement | null => {
+  const attrsSelector = Object.entries(attrs).map(([key, value]) => {
+    if (isString(value)) {
+      return `[${key}="${value}"]`
+    }
+
+    if (value === true) {
+      return `[${key}]`
+    }
+
+    return ''
+  })
+
+  const selector = `head > ${tagName}${attrsSelector}`
+  const tags = Array.from(document.querySelectorAll<HTMLElement>(selector))
+  const matchedTag = tags.find((item) => item.innerText === content)
+  return matchedTag || null
+}
+
 /**
  * Create head tag from head config
  */
@@ -57,32 +83,41 @@ export const useUpdateHead = (): void => {
     return
   }
 
-  // current tag elements that generated by this function
-  const currentTags = ref<HTMLElement[]>([])
+  const headTags = ref<HTMLElement[]>([])
 
-  const updateHead = (): void => {
-    if (!document) {
-      return
-    }
+  // load current head tags from DOM
+  const loadHead = (): void => {
+    head.value.forEach((item) => {
+      const tag = queryHeadTag(item)
+      if (tag) {
+        headTags.value.push(tag)
+      }
+    })
+  }
 
+  // update html lang attribute and head tags to DOM
+  const updateHead = (): void => {
     document.documentElement.lang = lang.value
 
-    currentTags.value.forEach((el) => {
-      if (el.parentNode === document.head) {
-        document.head.removeChild(el)
+    headTags.value.forEach((item) => {
+      if (item.parentNode === document.head) {
+        document.head.removeChild(item)
       }
     })
-    currentTags.value.splice(0, currentTags.value.length)
+    headTags.value.splice(0, headTags.value.length)
 
     head.value.forEach((item) => {
       const tag = createHeadTag(item)
       if (tag !== null) {
         document.head.appendChild(tag)
-        currentTags.value.push(tag)
+        headTags.value.push(tag)
       }
     })
   }
 
-  onMounted(() => updateHead())
-  watch(head, () => updateHead())
+  onMounted(() => {
+    loadHead()
+    updateHead()
+    watch([head, lang], () => updateHead())
+  })
 }