fix: track title side effects

harlan-zw · harlan-zw · commit 1a349e7f0d87 · 2025-03-07T08:15:30.000+11:00
diff --git a/packages/unhead/src/client/renderDOMHead.ts b/packages/unhead/src/client/renderDOMHead.ts
@@ -54,6 +54,7 @@ export async function renderDOMHead<T extends Unhead<any>>(head: T, options: Ren
     // let's hydrate - fill the elMap for fast lookups
     if (!state) {
       state = {
+        title: dom.title,
         elMap: new Map()
           .set('htmlAttrs', dom.documentElement)
           .set('bodyAttrs', dom.body),
@@ -197,6 +198,7 @@ export async function renderDOMHead<T extends Unhead<any>>(head: T, options: Ren
       // 1. render tags which don't create a new element
       if (tag.tag === 'title') {
         dom.title = tag.textContent as string
+        track('title', '', () => dom.title = state.title)
         continue
       }
       ctx.$el = ctx.$el || state.elMap.get(id)
diff --git a/packages/unhead/src/types/head.ts b/packages/unhead/src/types/head.ts
@@ -231,6 +231,7 @@ export interface Unhead<Input = ResolvableHead> {
 }
 
 export interface DomState {
+  title: string
   pendingSideEffects: SideEffectsRecord
   sideEffects: SideEffectsRecord
   elMap: Map<string, Element | Element[]>
diff --git a/packages/unhead/src/unhead.ts b/packages/unhead/src/unhead.ts
@@ -146,17 +146,29 @@ export function createUnhead<T = ResolvableHead>(resolvedOptions: CreateHeadOpti
         }, ctx.tagMap)
 
       const title = ctx.tagMap.get('title')
-      const titleTemplate = ctx.tagMap.get('titleTemplate')?.textContent
+      const titleTemplate = ctx.tagMap.get('titleTemplate')
       head._title = title?.textContent
-      head._titleTemplate = typeof titleTemplate === 'string' ? titleTemplate : undefined
 
-      if (titleTemplate && title) {
-        // @ts-expect-error todo
-        let newTitle = typeof titleTemplate === 'function' ? titleTemplate(title.textContent) : titleTemplate
-        if (typeof newTitle === 'string' && !head.plugins.has('template-params')) {
-          newTitle = newTitle.replace('%s', title.textContent || '')
+      if (titleTemplate) {
+        const titleTemplateFn = titleTemplate?.textContent
+        head._titleTemplate = typeof titleTemplateFn === 'string' ? titleTemplateFn : undefined
+        if (titleTemplateFn) {
+          // @ts-expect-error todo
+          let newTitle = (typeof titleTemplateFn === 'function' ? titleTemplateFn(title?.textContent) : titleTemplateFn)
+          if (typeof newTitle === 'string' && !head.plugins.has('template-params')) {
+            newTitle = newTitle.replace('%s', title?.textContent || '')
+          }
+          if (title) {
+            newTitle === null
+              ? ctx.tagMap.delete('title')
+              : ctx.tagMap.set('title', { ...title, textContent: newTitle })
+          }
+          else {
+            // convert title template to a title
+            titleTemplate.tag = 'title'
+            titleTemplate.textContent = newTitle
+          }
         }
-        newTitle === null ? ctx.tagMap.delete('title') : ctx.tagMap.set('title', { ...title, textContent: newTitle })
       }
       // merge _tags into one map
       ctx.tags = Array.from(ctx.tagMap!.values())
diff --git a/packages/vue/test/unit/dom/titleTemplate.test.ts b/packages/vue/test/unit/dom/titleTemplate.test.ts
@@ -7,6 +7,23 @@ import { useDom } from '../../../../unhead/test/fixtures'
 import { csrVueAppWithUnhead } from '../../util'
 
 describe('vue dom titleTemplate', () => {
+  it('fn replace', async () => {
+    const dom = useDom()
+    const head = csrVueAppWithUnhead(dom, () => {}, {
+      init: [
+        {
+          titleTemplate: () => 'Test',
+        },
+      ],
+    })
+
+    await renderDOMHead(head, { document: dom.window.document })
+
+    expect(dom.window.document.title).toMatchInlineSnapshot(
+      `"Test"`,
+    )
+  })
+
   it('basic', async () => {
     const dom = useDom()
     const head = csrVueAppWithUnhead(dom, () => {
@@ -25,4 +42,29 @@ describe('vue dom titleTemplate', () => {
       <body><div id="app" data-v-app=""><div>hello world</div></div></body></html>"
     `)
   })
+
+  it('remove', async () => {
+    const dom = useDom()
+    let entry
+    const head = csrVueAppWithUnhead(dom, () => {
+      entry = useHead({
+        title: 'test',
+      })
+    }, {
+    })
+
+    await renderDOMHead(head, { document: dom.window.document })
+
+    expect(dom.window.document.title).toMatchInlineSnapshot(
+      `"test"`,
+    )
+
+    entry!.dispose()
+
+    await renderDOMHead(head, { document: dom.window.document })
+
+    expect(dom.window.document.title).toMatchInlineSnapshot(
+      `""`,
+    )
+  })
 })
diff --git a/packages/vue/test/unit/e2e/basic.test.ts b/packages/vue/test/unit/e2e/basic.test.ts
@@ -419,6 +419,6 @@ describe('vue e2e', () => {
     home.dispose()
 
     await renderDOMHead(csrHead, { document: dom.window.document })
-    expect(dom.window.document.title).toMatchInlineSnapshot(`"Home Page | Company"`)
+    expect(dom.window.document.title).toMatchInlineSnapshot(`"| Company"`)
   })
 })

Original file line number	Diff line number	Diff line change
`@@ -231,6 +231,7 @@ export interface Unhead<Input = ResolvableHead> {`
`231`	`231`	`}`
`232`	`232`
`233`	`233`	`export interface DomState {`
	`234`	`+ title: string`
`234`	`235`	`pendingSideEffects: SideEffectsRecord`
`235`	`236`	`sideEffects: SideEffectsRecord`
`236`	`237`	`elMap: Map<string, Element \| Element[]>`