fix(core): server template params missing from SSR payload

Author: harlan-zw

packages/unhead/src/plugins/templateParams.ts

@@ -14,6 +14,17 @@ export const TemplateParamsPlugin = /* @__PURE__ */ defineHeadPlugin((head) => {
   return {
     key: 'template-params',
     hooks: {
+      'entries:normalize': (ctx) => {
+        const params = ctx.tags.filter(t => t.tag === 'templateParams' && t.mode === 'server')?.[0]?.props || {}
+        if (Object.keys(params).length) {
+          head._ssrPayload = {
+            templateParams: {
+              ...head._ssrPayload?.templateParams || {},
+              ...params,
+            },
+          }
+        }
+      },
       'tags:resolve': ({ tagMap, tags }) => {
         // we always process params so we can substitute the title
         const params = (tagMap.get('templateParams')?.props || {}) as TemplateParams

packages/unhead/src/server/createHead.ts

@@ -34,17 +34,22 @@ export function createHead<T = ResolvableHead>(options: CreateServerHeadOptions
       ...(options.init || []),
     ],
   })
+  unhead._ssrPayload = {}
   unhead.use({
     key: 'server',
     hooks: {
       'tags:resolve': function (ctx) {
         const title = ctx.tagMap.get('title') as HeadTag | undefined
         const titleTemplate = ctx.tagMap.get('titleTemplate') as HeadTag | undefined
-        const templateParams = ctx.tagMap.get('templateParams') as HeadTag | undefined
-        const payload: ResolvableHead = {
+        let payload: ResolvableHead = {
           title: title?.mode === 'server' ? unhead._title : undefined,
           titleTemplate: titleTemplate?.mode === 'server' ? unhead._titleTemplate : undefined,
-          templateParams: templateParams?.mode === 'server' ? unhead._templateParams : undefined,
+        }
+        if (Object.keys(unhead._ssrPayload || {}).length > 0) {
+          payload = {
+            ...unhead._ssrPayload,
+            ...payload,
+          }
         }
         // filter non-values
         if (Object.values(payload).some(Boolean)) {

packages/unhead/src/types/head.ts

@@ -228,6 +228,10 @@ export interface Unhead<Input = ResolvableHead> {
    * @internal
    */
   _titleTemplate?: string
+  /**
+   * @internal
+   */
+  _ssrPayload?: ResolvableHead
 }
 
 export interface DomState {

packages/unhead/test/unit/server/templateParams.test.ts

@@ -5,6 +5,28 @@ import { renderSSRHead } from '../../../src/server'
 import { createServerHeadWithContext } from '../../util'
 
 describe('ssr templateParams', () => {
+  it('payload merging', async () => {
+    const head = createServerHeadWithContext({
+      plugins: [TemplateParamsPlugin],
+    })
+    head.push({
+      templateParams: {
+        foo: 'bar',
+      },
+    }, {
+      mode: 'server',
+    })
+    head.push({
+      templateParams: {
+        separator: 'x',
+      },
+    })
+    const { headTags, htmlAttrs } = await renderSSRHead(head)
+
+    expect(htmlAttrs).toMatchInlineSnapshot(`""`)
+    expect(headTags).toMatchInlineSnapshot(`"<script id="unhead:payload" type="application/json">{"templateParams":{"foo":"bar"}}</script>"`)
+  })
+
   it('basic', async () => {
     const head = createServerHeadWithContext({
       plugins: [TemplateParamsPlugin],
@@ -121,7 +143,7 @@ describe('ssr templateParams', () => {
 
     expect(headTags).toMatchInlineSnapshot(`
       "<title>test | My Awesome Site</title>
-      <script id="unhead:payload" type="application/json">{"title":"test","titleTemplate":"%s %separator %siteName","templateParams":{"siteName":"My Awesome Site","foo":"bar","pageTitle":"test"}}</script>"
+      <script id="unhead:payload" type="application/json">{"templateParams":{"separator":"|","siteName":"My Awesome Site","foo":"bar"},"title":"test","titleTemplate":"%s %separator %siteName"}</script>"
     `)
   })