trim comments when parsing template (close #2253)

Author: yyx990803

src/parsers/template.js

@@ -85,7 +85,10 @@ const entityRE = /&#?\w+?;/
 
 function stringToFragment (templateString, raw) {
   // try a cache hit first
-  var hit = templateCache.get(templateString)
+  var cacheKey = raw
+    ? templateString
+    : templateString.trim()
+  var hit = templateCache.get(cacheKey)
   if (hit) {
     return hit
   }
@@ -108,8 +111,7 @@ function stringToFragment (templateString, raw) {
     var suffix = wrap[2]
     var node = document.createElement('div')
 
-    var templateStringToUse = raw ? templateString : templateString.trim()
-    node.innerHTML = prefix + templateStringToUse + suffix
+    node.innerHTML = prefix + templateString + suffix
     while (depth--) {
       node = node.lastChild
     }
@@ -121,8 +123,10 @@ function stringToFragment (templateString, raw) {
       frag.appendChild(child)
     }
   }
-
-  templateCache.put(templateString, frag)
+  if (!raw) {
+    trimNode(frag)
+  }
+  templateCache.put(cacheKey, frag)
   return frag
 }
 

src/util/dom.js

@@ -272,20 +272,29 @@ export function extractContent (el, asFragment) {
 }
 
 /**
- * Trim possible empty head/tail textNodes inside a parent.
+ * Trim possible empty head/tail text and comment
+ * nodes inside a parent.
  *
  * @param {Node} node
  */
 
 export function trimNode (node) {
-  trim(node, node.firstChild)
-  trim(node, node.lastChild)
+  var child
+  /* eslint-disable no-sequences */
+  while (child = node.firstChild, isTrimmable(child)) {
+    node.removeChild(child)
+  }
+  while (child = node.lastChild, isTrimmable(child)) {
+    node.removeChild(child)
+  }
+  /* eslint-enable no-sequences */
 }
 
-function trim (parent, node) {
-  if (node && node.nodeType === 3 && !node.data.trim()) {
-    parent.removeChild(node)
-  }
+function isTrimmable (node) {
+  return node && (
+    (node.nodeType === 3 && !node.data.trim()) ||
+    node.nodeType === 8
+  )
 }
 
 /**

test/unit/specs/parsers/template_spec.js

@@ -158,7 +158,7 @@ describe('Template Parser', function () {
     expect(c.value).toBe('')
   })
 
-  it('should trim empty text nodes', function () {
+  it('should trim empty text nodes and comments', function () {
     // string
     var res = parse('    <p>test</p>    ')
     expect(res.childNodes.length).toBe(1)
@@ -169,6 +169,10 @@ describe('Template Parser', function () {
     res = parse(el.children[0])
     expect(res.childNodes.length).toBe(1)
     expect(res.firstChild.tagName).toBe('P')
+    // comments
+    res = parse('  <!-- yo -->  <p>test</p>  <!-- yo -->  ')
+    expect(res.childNodes.length).toBe(1)
+    expect(res.firstChild.tagName).toBe('P')
   })
 
   it('should reuse fragment from cache for the same string template', function () {