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

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])
     }
   })

src/shared/template.js

@@ -1,13 +1,23 @@
 import { isUndefined, isFunction } from '../utils/is-type'
 
 export function applyTemplate ({ component, metaTemplateKeyName, contentKeyName }, headObject, template, chunk) {
-  if (isUndefined(template)) {
+  if (template === true || headObject[metaTemplateKeyName] === true) {
+    // abort, template was already applied
+    return false
+  }
+
+  if (isUndefined(template) && headObject[metaTemplateKeyName]) {
     template = headObject[metaTemplateKeyName]
-    delete headObject[metaTemplateKeyName]
+    headObject[metaTemplateKeyName] = true
   }
 
   // return early if no template defined
   if (!template) {
+    // cleanup faulty template properties
+    if (headObject.hasOwnProperty(metaTemplateKeyName)) {
+      delete headObject[metaTemplateKeyName]
+    }
+
     return false
   }