template parser should trim empty textNodes from <template> nodes

Author: yyx990803

src/parsers/template.js

@@ -124,6 +124,7 @@ function nodeToFragment (node) {
     _.isTemplate(node) &&
     node.content instanceof DocumentFragment
   ) {
+    _.trimNode(node.content)
     return node.content
   }
   // script template
@@ -139,6 +140,7 @@ function nodeToFragment (node) {
   /* eslint-enable no-cond-assign */
     frag.appendChild(child)
   }
+  _.trimNode(frag)
   return frag
 }
 
@@ -231,6 +233,7 @@ exports.parse = function (template, clone, noSelector) {
   // if the template is already a document fragment,
   // do nothing
   if (template instanceof DocumentFragment) {
+    _.trimNode(template)
     return clone
       ? exports.clone(template)
       : template

src/util/dom.js

@@ -204,8 +204,7 @@ exports.extractContent = function (el, asFragment) {
     el = el.content
   }
   if (el.hasChildNodes()) {
-    trim(el, el.firstChild)
-    trim(el, el.lastChild)
+    exports.trimNode(el)
     rawContent = asFragment
       ? document.createDocumentFragment()
       : document.createElement('div')
@@ -218,9 +217,20 @@ exports.extractContent = function (el, asFragment) {
   return rawContent
 }
 
-function trim (content, node) {
+/**
+ * Trim possible empty head/tail textNodes inside a parent.
+ *
+ * @param {Node} node
+ */
+
+exports.trimNode = function (node) {
+  trim(node, node.firstChild)
+  trim(node, node.lastChild)
+}
+
+function trim (parent, node) {
   if (node && node.nodeType === 3 && !node.data.trim()) {
-    content.removeChild(node)
+    parent.removeChild(node)
   }
 }
 

test/unit/specs/parsers/template_spec.js

@@ -143,5 +143,18 @@ if (_.inBrowser) {
       var c = templateParser.clone(t)
       expect(c.value).toBe('')
     })
+
+    it('should trim empty text nodes', function () {
+      // string
+      var res = templateParser.parse('    <p>test</p>    ')
+      expect(res.childNodes.length).toBe(1)
+      expect(res.firstChild.tagName).toBe('P')
+      // nodes
+      var el = document.createElement('div')
+      el.innerHTML = '<template>    <p>test</p>    </template>'
+      res = templateParser.parse(el.children[0])
+      expect(res.childNodes.length).toBe(1)
+      expect(res.firstChild.tagName).toBe('P')
+    })
   })
 }