fix(vue): broken reactivity

Author: harlan-zw

packages/schema-org/build.config.ts

@@ -25,5 +25,12 @@ export default defineBuildConfig({
     'unplugin-vue-components',
     'vue',
     '@vue/runtime-core',
+    '@unhead/react',
+    '@unhead/solid-js',
+    '@unhead/svelte',
+    '@unhead/vue',
+    'unhead',
+    'unhead/utils',
+    'unhead/plugins',
   ],
 })

packages/schema-org/package.json

@@ -76,27 +76,6 @@
     "lint": "eslint \"{src,test}/**/*.{ts,vue,json,yml}\" --fix",
     "test:attw": "attw --pack"
   },
-  "peerDependencies": {
-    "@unhead/react": "^2",
-    "@unhead/solid-js": "^2",
-    "@unhead/svelte": "^2",
-    "@unhead/vue": "^2",
-    "unhead": "^2"
-  },
-  "peerDependenciesMeta": {
-    "@unhead/react": {
-      "optional": true
-    },
-    "@unhead/solid-js": {
-      "optional": true
-    },
-    "@unhead/svelte": {
-      "optional": true
-    },
-    "@unhead/vue": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "defu": "^6.1.4",
     "ohash": "^2.0.10",

packages/schema-org/test/vue/vue.test.ts

@@ -1,9 +1,11 @@
-import { defineArticle, defineWebPage, useSchemaOrg } from '@unhead/schema-org/vue'
+import { defineArticle, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/vue'
 import { useHead } from '@unhead/vue'
 import { createHead as createClientHead, renderDOMHead } from '@unhead/vue/client'
 import { renderSSRHead } from '@unhead/vue/server'
 import { describe, expect, it } from 'vitest'
+import { computed, ref } from 'vue'
 import { useDom } from '../../../unhead/test/fixtures'
+import { createHead as createServerHead } from '../../../vue/src/server'
 import { ssrVueAppWithUnhead } from '../../../vue/test/util'
 
 describe('schema.org e2e', () => {
@@ -150,4 +152,71 @@ describe('schema.org e2e', () => {
       }
     `)
   })
+  it('ref simple', async () => {
+    const head = createServerHead({
+      disableDefaults: true,
+    })
+    useSchemaOrg([
+      defineWebSite(ref({
+        name: 'Test',
+      })),
+    ], { head })
+
+    const data = await renderSSRHead(head)
+    expect(data.bodyTags).toMatchInlineSnapshot(`
+      "<script type="application/ld+json" data-hid="schema-org-graph">{
+        "@context": "https://schema.org",
+        "@graph": [
+          {
+            "@id": "#/schema//d006e97",
+            "name": "Test"
+          }
+        ]
+      }</script>"
+    `)
+  })
+
+  it('refs', async () => {
+    const head = createServerHead({
+      disableDefaults: true,
+      init: [
+        {
+          templateParams: {
+            schemaOrg: computed(() => {
+              return {
+                inLanguage: ref('foo'),
+              }
+            }),
+          },
+        },
+      ],
+    })
+    useSchemaOrg([
+      defineWebPage(computed(() => ({
+        name: ref('test'),
+        foo: computed(() => 'bar'),
+      }))),
+      defineWebSite(ref({
+        name: 'Test',
+      })),
+    ], { head })
+
+    const data = await renderSSRHead(head)
+    expect(data.bodyTags).toMatchInlineSnapshot(`
+      "<script type="application/ld+json" data-hid="schema-org-graph">{
+        "@context": "https://schema.org",
+        "@graph": [
+          {
+            "@id": "#/schema//6b94a87",
+            "foo": "bar",
+            "name": "test"
+          },
+          {
+            "@id": "#/schema//d006e97",
+            "name": "Test"
+          }
+        ]
+      }</script>"
+    `)
+  })
 })

packages/unhead/src/server/createHead.ts

@@ -12,6 +12,7 @@ export function createHead<T = ResolvableHead>(options: CreateServerHeadOptions
         if (k && k.startsWith('on') && typeof v === 'function') {
           return `this.dataset.${k}fired = true`
         }
+        return v
       },
     ],
     init: [

packages/unhead/src/types/head.ts

@@ -93,7 +93,7 @@ export interface ActiveHeadEntry<Input> {
   _poll: (rm?: boolean) => void
 }
 
-export type PropResolver = (key: string, value: any, tag?: HeadTag) => any
+export type PropResolver = (key?: string, value?: any, tag?: HeadTag) => any
 
 export interface CreateHeadOptions {
   document?: Document

packages/unhead/src/utils/normalize.ts

@@ -112,7 +112,6 @@ function normalizeTag(tagName: HeadTag['tag'], _input: HeadTag['props'] | string
     : { [(tagName === 'script' || tagName === 'noscript' || tagName === 'style') ? 'innerHTML' : 'textContent']: _input }
 
   const tag = normalizeProps({ tag: tagName, props: {} }, input)
-
   if (tag.key && DupeableTags.has(tag.tag)) {
     tag.props['data-hid'] = tag._h = tag.key
   }
@@ -131,22 +130,21 @@ export function normalizeEntryToTags(input: any, propResolvers: PropResolver[]):
   if (!input) {
     return []
   }
-
-  const tags: (HeadTag | HeadTag[])[] = []
-
   if (typeof input === 'function') {
-    return normalizeEntryToTags(input(), propResolvers)
+    input = input()
   }
-  input = walkResolver(input, (key, val) => {
-    let res = val
+  const resolvers = (key?: string, val?: any) => {
     for (let i = 0; i < propResolvers.length; i++) {
-      const v = propResolvers[i](key, res)
-      if (v !== undefined)
-        res = v
+      val = propResolvers[i](key, val)
     }
-    return res
-  })
-  Object.entries(input).forEach(([key, value]) => {
+    return val
+  }
+  input = resolvers(undefined, input)
+
+  const tags: (HeadTag | HeadTag[])[] = []
+
+  input = walkResolver(input, resolvers)
+  Object.entries(input || {}).forEach(([key, value]) => {
     if (value === undefined)
       return
     for (const v of (Array.isArray(value) ? value : [value]))

packages/unhead/src/utils/walkResolver.ts

@@ -4,17 +4,12 @@ export function walkResolver(val: any, resolve?: PropResolver, key?: string): an
   // Combined primitive type check
   const type = typeof val
 
-  let v: any
-  if (!resolve || !key) {
-    v = type === 'function' ? val() : val
-  }
-  else if (resolve && (key === 'titleTemplate' || (key[0] === 'o' && key[1] === 'n'))) {
-    v = resolve(key, val)
-  }
-  else if (resolve) {
-    v = type === 'function' ? resolve(key, val()) : resolve(key, val)
+  if (type === 'function') {
+    if (!key || (key !== 'titleTemplate' && !(key[0] === 'o' && key[1] === 'n'))) {
+      val = val()
+    }
   }
-
+  const v = resolve?.(key, val) || val
   if (Array.isArray(v)) {
     return v.map(r => walkResolver(r, resolve))
   }

packages/vue/test/unit/ssr/examples.test.ts

@@ -147,4 +147,26 @@ describe('vue ssr examples', () => {
       }
     `)
   })
+  it('https://github.com/vite-pwa/vite-plugin-pwa/discussions/832', async () => {
+    const head = await ssrVueAppWithUnhead(() => {
+      useHead(ref({
+        link: [
+          {
+            rel: 'manifest',
+            href: '/manifest.webmanifest',
+          },
+        ],
+      }))
+    })
+    const ctx = await renderSSRHead(head)
+    expect(ctx).toMatchInlineSnapshot(`
+      {
+        "bodyAttrs": "",
+        "bodyTags": "",
+        "bodyTagsOpen": "",
+        "headTags": "<link rel="manifest" href="/manifest.webmanifest">",
+        "htmlAttrs": "",
+      }
+    `)
+  })
 })

packages/vue/test/util.ts

@@ -30,14 +30,14 @@ export function csrVueAppWithUnhead(dom: JSDOM, fn: () => void | Promise<void>,
   return head
 }
 
-export async function ssrVueAppWithUnhead(fn: () => void | Promise<void>, options?: CreateHeadOptions) {
+export async function ssrVueAppWithUnhead(fn: (head: ReturnType<typeof createServerHead>) => void | Promise<void>, options?: CreateHeadOptions) {
   const head = createServerHead({
     disableDefaults: true,
     ...options,
   })
   const app = createSSRApp({
     async setup() {
-      fn()
+      fn(head)
       return () => '<div>hi</div>'
     },
   })