fix: meta content templates (#429)

* examples: add content templates to ssr example

* fix: improve meta content templates

* chore: cleanup debug helper

* refactor: split long if into variables

Author: pimlie

examples/server.js

@@ -32,11 +32,12 @@ app.use(express.static(__dirname))
 
 app.use(async (req, res, next) => {
   if (!req.url.startsWith('/ssr')) {
-    next()
+    return next()
   }
 
   try {
-    const html = await renderPage()
+    const context = { url: req.url }
+    const html = await renderPage(context)
     res.send(html)
   } catch (e) {
     consola.error('SSR Oops:', e)

examples/ssr/App.js

@@ -1,32 +1,82 @@
 import Vue from 'vue'
+import Router from 'vue-router'
 import VueMeta from '../../'
 
+Vue.use(Router)
 Vue.use(VueMeta, {
   tagIDKeyName: 'hid'
 })
 
 export default function createApp () {
-  return new Vue({
-    components: {
-      Hello: {
-        template: '<p>Hello World</p>',
-        metaInfo: {
-          title: 'Hello World',
-          meta: [
-            {
-              hid: 'description',
-              name: 'description',
-              content: 'The description'
-            }
-          ]
+  const Home = {
+    template: `<div>
+      <router-link to="/about">About</router-link>
+
+      <p>Hello World</p>
+    </div>`,
+    metaInfo: {
+      title: 'Hello World',
+      meta: [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          content: 'Hello World'
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Hello World'
         }
-      }
-    },
+      ]
+    }
+  }
+
+  const About = {
+    template: `<div>
+      <router-link to="/">Home</router-link>
+
+      <p>About</p>
+    </div>`,
+    metaInfo: {
+      title: 'About World',
+      meta: [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          content: 'About World'
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'About World'
+        }
+      ]
+    }
+  }
+
+  const router = new Router({
+    mode: 'history',
+    base: '/ssr',
+    routes: [
+      { path: '/', component: Home },
+      { path: '/about', component: About }
+    ]
+  })
+
+  const app = new Vue({
+    router,
     metaInfo () {
       return {
         title: 'Boring Title',
         htmlAttrs: { amp: true },
         meta: [
+          {
+            skip: this.count < 1,
+            hid: 'og:title',
+            name: 'og:title',
+            template: chunk => `${chunk} - My Site`,
+            content: 'Default Title'
+          },
           {
             hid: 'description',
             name: 'description',
@@ -73,8 +123,6 @@ export default function createApp () {
     },
     template: `
     <div id="app">
-      <hello/>
-
       <p>{{ count }} users loaded</p>
 
       <ul>
@@ -85,6 +133,10 @@ export default function createApp () {
         {{ user.id }}: {{ user.name }}
         </li>
       </ul>
+
+      <router-view />
     </div>`
   })
+
+  return { app, router }
 }

examples/ssr/browser.js

@@ -2,4 +2,5 @@ import createApp from './App'
 
 window.users = []
 
-createApp().$mount('#app')
+const { app } = createApp()
+app.$mount('#app')

examples/ssr/server.js

@@ -14,14 +14,27 @@ const compiled = template(templateContent, { interpolate: /{{([\s\S]+?)}}/g })
 
 process.server = true
 
-export async function renderPage () {
-  const app = await createApp()
-  const appHtml = await renderer.renderToString(app)
+export async function renderPage ({ url }) {
+  const { app, router } = await createApp()
 
-  const pageHtml = compiled({
-    app: appHtml,
-    ...app.$meta().inject()
-  })
+  router.push(url.substr(4))
+
+  return new Promise((resolve, reject) => {
+    router.onReady(async () => {
+      const matchedComponents = router.getMatchedComponents()
+      // no matched routes, reject with 404
+      if (!matchedComponents.length) {
+        return reject({ code: 404 })
+      }
+
+      const appHtml = await renderer.renderToString(app)
 
-  return pageHtml
+      const pageHtml = compiled({
+        app: appHtml,
+        ...app.$meta().inject()
+      })
+
+      resolve(pageHtml)
+    })
+  })
 }

src/client/updaters/tag.js

@@ -1,4 +1,4 @@
-import { booleanHtmlAttributes, commonDataAttributes } from '../../shared/constants'
+import { booleanHtmlAttributes, commonDataAttributes, tagProperties } from '../../shared/constants'
 import { includes } from '../../utils/array'
 import { queryElements, getElementsKey } from '../../utils/elements.js'
 
@@ -48,7 +48,7 @@ export default function updateTag (appId, options = {}, type, tags, head, body)
 
     for (const attr in tag) {
       /* istanbul ignore next */
-      if (!tag.hasOwnProperty(attr)) {
+      if (!tag.hasOwnProperty(attr) || includes(tagProperties, attr)) {
         continue
       }
 

src/server/generators/tag.js

@@ -3,6 +3,7 @@ import {
   tagsWithoutEndTag,
   tagsWithInnerContent,
   tagAttributeAsInnerContent,
+  tagProperties,
   commonDataAttributes
 } from '../../shared/constants'
 
@@ -43,7 +44,7 @@ export default function tagGenerator ({ ssrAppId, attribute, tagIDKeyName } = {}
         // build a string containing all attributes of this tag
         for (const attr in tag) {
           // these attributes are treated as children on the tag
-          if (tagAttributeAsInnerContent.includes(attr) || attr === 'once') {
+          if (tagAttributeAsInnerContent.includes(attr) || tagProperties.includes(attr)) {
             continue
           }
 

src/shared/constants.js

@@ -92,6 +92,8 @@ export const tagsWithInnerContent = ['noscript', 'script', 'style']
 // Attributes which are inserted as childNodes instead of HTMLAttribute
 export const tagAttributeAsInnerContent = ['innerHTML', 'cssText', 'json']
 
+export const tagProperties = ['once', 'template']
+
 // Attributes which should be added with data- prefix
 export const commonDataAttributes = ['body', 'pbody']
 

src/shared/getComponentOption.js

@@ -1,8 +1,6 @@
 import { isFunction, isObject } from '../utils/is-type'
-import { findIndex } from '../utils/array'
 import { defaultInfo } from './constants'
 import { merge } from './merge'
-import { applyTemplate } from './template'
 import { inMetaInfoBranch } from './meta-helpers'
 
 export function getComponentMetaInfo (options = {}, component) {
@@ -24,7 +22,7 @@ export function getComponentMetaInfo (options = {}, component) {
  * @return {Object} result - final aggregated result
  */
 export function getComponentOption (options = {}, component, result = {}) {
-  const { keyName, metaTemplateKeyName, tagIDKeyName } = options
+  const { keyName } = options
   const { $options, $children } = component
 
   if (component._inactive) {
@@ -62,20 +60,5 @@ export function getComponentOption (options = {}, component, result = {}) {
     })
   }
 
-  if (metaTemplateKeyName && result.meta) {
-    // apply templates if needed
-    result.meta.forEach(metaObject => applyTemplate(options, metaObject))
-
-    // remove meta items with duplicate vmid's
-    result.meta = result.meta.filter((metaItem, index, arr) => {
-      return (
-        // keep meta item if it doesnt has a vmid
-        !metaItem.hasOwnProperty(tagIDKeyName) ||
-        // or if it's the first item in the array with this vmid
-        index === findIndex(arr, item => item[tagIDKeyName] === metaItem[tagIDKeyName])
-      )
-    })
-  }
-
   return result
 }

src/shared/getMetaInfo.js

@@ -1,3 +1,4 @@
+import { findIndex } from '../utils/array'
 import { escapeMetaInfo } from '../shared/escaping'
 import { applyTemplate } from './template'
 
@@ -9,6 +10,7 @@ import { applyTemplate } from './template'
  * @return {Object} - returned meta info
  */
 export default function getMetaInfo (options = {}, info, escapeSequences = [], component) {
+  const { tagIDKeyName } = options
   // Remove all "template" tags from meta
 
   // backup the title chunk in case user wants access to it
@@ -27,5 +29,21 @@ export default function getMetaInfo (options = {}, info, escapeSequences = [], c
     info.base = Object.keys(info.base).length ? [info.base] : []
   }
 
+  if (info.meta) {
+    // remove meta items with duplicate vmid's
+    info.meta = info.meta.filter((metaItem, index, arr) => {
+      const hasVmid = metaItem.hasOwnProperty(tagIDKeyName)
+      if (!hasVmid) {
+        return true
+      }
+
+      const isFirstItemForVmid = index === findIndex(arr, item => item[tagIDKeyName] === metaItem[tagIDKeyName])
+      return isFirstItemForVmid
+    })
+
+    // apply templates if needed
+    info.meta.forEach(metaObject => applyTemplate(options, metaObject))
+  }
+
   return escapeMetaInfo(options, info, escapeSequences)
 }

src/shared/merge.js

@@ -10,6 +10,10 @@ export function arrayMerge ({ component, tagIDKeyName, metaTemplateKeyName, cont
   // using an O(1) lookup associative array exploit
   const destination = []
 
+  if (!target.length && !source.length) {
+    return destination
+  }
+
   target.forEach((targetItem, targetIndex) => {
     // no tagID so no need to check for duplicity
     if (!targetItem[tagIDKeyName]) {
@@ -53,12 +57,17 @@ export function arrayMerge ({ component, tagIDKeyName, metaTemplateKeyName, cont
     }
 
     const sourceTemplate = sourceItem[metaTemplateKeyName]
-
     if (!sourceTemplate) {
       // use parent template and child content
       applyTemplate({ component, metaTemplateKeyName, contentKeyName }, sourceItem, targetTemplate)
-    } else if (!sourceItem[contentKeyName]) {
-      // use child template and parent content
+
+      // set template to true to indicate template was already applied
+      sourceItem.template = true
+      return
+    }
+
+    if (!sourceItem[contentKeyName]) {
+      // use parent content and child template
       applyTemplate({ component, metaTemplateKeyName, contentKeyName }, sourceItem, undefined, targetItem[contentKeyName])
     }
   })