fix: useMeta refs should be reactive (#81)

Co-authored-by: Jacob Andersson <jacob.m.andersson@gmail.com>

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
       },
     ],
     '@typescript-eslint/no-inferrable-types': 1,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/explicit-function-return-type': 0,
   },
   extends: [

src/meta.ts

@@ -1,5 +1,12 @@
 import defu from 'defu'
-import { getCurrentInstance, toRefs, Ref, reactive } from '@vue/composition-api'
+import Vue from 'vue'
+import {
+  getCurrentInstance,
+  toRefs,
+  Ref,
+  reactive,
+  watch,
+} from '@vue/composition-api'
 
 import type { MetaInfo } from 'vue-meta'
 import type { UnwrapRef } from '@vue/composition-api/dist/reactivity'
@@ -18,6 +25,13 @@ type MetaInfoMapper<T> = {
     : T[P] | undefined
 }
 
+function assign<T extends Record<string, any>>(target: T, source: Partial<T>) {
+  Object.entries(source).forEach(([key, value]) => {
+    Vue.set(target, key, value)
+  })
+  return target
+}
+
 export function createEmptyMeta(): MetaInfoMapper<Required<MetaInfo>> {
   return {
     __dangerouslyDisableSanitizers: [],
@@ -42,11 +56,13 @@ export function createEmptyMeta(): MetaInfoMapper<Required<MetaInfo>> {
   }
 }
 
-export const getHeadOptions = (options: any) => {
-  const _head: ReactiveHead = reactive<MetaInfo>({})
-  if (!(options.head instanceof Function)) {
-    Object.assign(_head, options.head)
-  }
+export const getHeadOptions = (options: {
+  head: () => Record<string, any> | Record<string, any>
+}) => {
+  const _head: ReactiveHead =
+    options.head instanceof Function
+      ? reactive<MetaInfo>({})
+      : reactive<MetaInfo>(options.head)
   const head =
     options.head instanceof Function
       ? () => defu(_head, options.head())
@@ -85,7 +101,12 @@ export const useMeta = <T extends MetaInfo>(init?: T) => {
 
   const { _head } = vm.$options as { _head: ReactiveHead }
 
-  Object.assign(_head, createEmptyMeta())
-  Object.assign(_head, init || {})
-  return toRefs(_head) as ToRefs<ReturnType<typeof createEmptyMeta> & T>
+  assign(_head, createEmptyMeta())
+  assign<MetaInfo>(_head, init || {})
+
+  const refs = toRefs(_head) as ToRefs<ReturnType<typeof createEmptyMeta> & T>
+
+  if (process.client) watch(Object.values(refs), vm.$meta().refresh)
+
+  return refs
 }

test/e2e/meta.ts

@@ -8,6 +8,8 @@ test('Shows correct title on server-loaded page', async t => {
   await navigateTo('/meta')
   await t.expect(Selector('title').innerText).eql('newSetTitle')
   await expectOnPage('title-newSetTitle')
+  await t.expect(Selector('title').innerText).eql('mounted title')
+  await expectOnPage('title-mounted title')
   await t.expect(Selector('body').getAttribute('class')).eql('dark-mode mobile')
 
   await t.click(Selector('a').withText('back'))
@@ -20,4 +22,5 @@ test('Shows correct title on client-loaded page', async t => {
 
   await t.click(Selector('a').withText('meta'))
   await t.expect(Selector('title').innerText).eql('newSetTitle')
+  await t.expect(Selector('title').innerText).eql('mounted title')
 })

test/fixture/pages/meta.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { defineComponent, useMeta, computed } from 'nuxt-composition-api'
+import { defineComponent, useMeta, computed, onMounted } from 'nuxt-composition-api'
 
 export default defineComponent({
   head: {},
@@ -19,6 +19,12 @@ export default defineComponent({
     const { title: newImport, bodyAttrs } = useMeta()
     newImport.value = 'newSetTitle'
 
+    onMounted(() => {
+      setTimeout(() => {
+        title.value = 'mounted title'
+      }, 1000)
+    })
+
     bodyAttrs.value.class = ['dark-mode', 'mobile']
 
     return { title }