use empty textNodes as anchors for cleaner HTML output

Author: yyx990803

src/compiler/transclude.js

@@ -51,8 +51,11 @@ module.exports = function transclude (el, options) {
     el = transcludeTemplate(el, options)
   }
   if (el instanceof DocumentFragment) {
-    _.prepend(document.createComment('v-start'), el)
-    el.appendChild(document.createComment('v-end'))
+    // anchors for block instance
+    // passing in `persist: true` to avoid them being
+    // discarded by IE during template cloning
+    _.prepend(_.createAnchor('v-start', true), el)
+    el.appendChild(_.createAnchor('v-end', true))
   }
   return el
 }

src/directives/component.js

@@ -18,8 +18,8 @@ module.exports = {
   bind: function () {
     if (!this.el.__vue__) {
       // create a ref anchor
-      this.ref = document.createComment('v-component')
-      _.replace(this.el, this.ref)
+      this.anchor = _.createAnchor('v-component')
+      _.replace(this.el, this.anchor)
       // check keep-alive options.
       // If yes, instead of destroying the active vm when
       // hiding (v-if) or switching (dynamic literal) it,
@@ -44,7 +44,7 @@ module.exports = {
       if (!this._isDynamicLiteral) {
         this.resolveCtor(this.expression, _.bind(function () {
           var child = this.build()
-          child.$before(this.ref)
+          child.$before(this.anchor)
           this.setCurrent(child)
         }, this))
       } else {
@@ -214,18 +214,18 @@ module.exports = {
     this.setCurrent(target)
     switch (self.transMode) {
       case 'in-out':
-        target.$before(self.ref, function () {
+        target.$before(self.anchor, function () {
           self.remove(current, cb)
         })
         break
       case 'out-in':
         self.remove(current, function () {
-          target.$before(self.ref, cb)
+          target.$before(self.anchor, cb)
         })
         break
       default:
         self.remove(current)
-        target.$before(self.ref, cb)
+        target.$before(self.anchor, cb)
     }
   },
 

src/directives/html.js

@@ -9,6 +9,9 @@ module.exports = {
     if (this.el.nodeType === 8) {
       // hold nodes
       this.nodes = []
+      // replace the placeholder with proper anchor
+      this.anchor = _.createAnchor('v-html')
+      _.replace(this.el, this.anchor)
     }
   },
 
@@ -32,7 +35,7 @@ module.exports = {
     var frag = templateParser.parse(value, true, true)
     // save a reference to these nodes so we can remove later
     this.nodes = _.toArray(frag.childNodes)
-    _.before(frag, this.el)
+    _.before(frag, this.anchor)
   }
 
 }

src/directives/if.js

@@ -8,8 +8,8 @@ module.exports = {
   bind: function () {
     var el = this.el
     if (!el.__vue__) {
-      this.start = document.createComment('v-if-start')
-      this.end = document.createComment('v-if-end')
+      this.start = _.createAnchor('v-if-start')
+      this.end = _.createAnchor('v-if-end')
       _.replace(el, this.end)
       _.before(this.start, this.end)
       if (el.tagName === 'TEMPLATE') {

src/directives/repeat.js

@@ -37,9 +37,9 @@ module.exports = {
     } else {
       this.filters.read.unshift(objectConverter)
     }
-    // setup ref node
-    this.ref = document.createComment('v-repeat')
-    _.replace(this.el, this.ref)
+    // setup anchor node
+    this.anchor = _.createAnchor('v-repeat')
+    _.replace(this.el, this.anchor)
     // check if this is a block repeat
     this.template = this.el.tagName === 'TEMPLATE'
       ? templateParser.parse(this.el, true)
@@ -258,7 +258,7 @@ module.exports = {
   diff: function (data, oldVms) {
     var idKey = this.idKey
     var converted = this.converted
-    var ref = this.ref
+    var anchor = this.anchor
     var alias = this.arg
     var init = !oldVms
     var vms = new Array(data.length)
@@ -297,7 +297,7 @@ module.exports = {
       vms[i] = vm
       // insert if this is first run
       if (init) {
-        vm.$before(ref)
+        vm.$before(anchor)
       }
     }
     // if this is the first run, we're done.
@@ -330,13 +330,13 @@ module.exports = {
         // place, so no need to touch it. Otherwise, insert
         // it.
         if (!vm._reused) {
-          vm.$before(ref)
+          vm.$before(anchor)
         }
       } else {
         var nextEl = targetNext.$el
         if (vm._reused) {
           // this is the vm we are actually in front of
-          currentNext = findNextVm(vm, ref)
+          currentNext = findNextVm(vm, anchor)
           // we only need to move if we are not in the right
           // place already.
           if (currentNext !== targetNext) {
@@ -544,13 +544,13 @@ module.exports = {
  * should have been removed so we can skip them.
  *
  * @param {Vue} vm
- * @param {CommentNode} ref
+ * @param {Comment|Text} anchor
  * @return {Vue}
  */
 
-function findNextVm (vm, ref) {
+function findNextVm (vm, anchor) {
   var el = (vm._blockEnd || vm.$el).nextSibling
-  while (!el.__vue__ && el !== ref) {
+  while (!el.__vue__ && el !== anchor) {
     el = el.nextSibling
   }
   return el.__vue__

src/instance/compile.js

@@ -51,6 +51,10 @@ exports._initElement = function (el) {
     this._isBlock = true
     this.$el = this._blockStart = el.firstChild
     this._blockEnd = el.lastChild
+    // set persisted text anchors to empty
+    if (this._blockStart.nodeType === 3) {
+      this._blockStart.data = this._blockEnd.data = ''
+    }
     this._blockFragment = el
   } else {
     this.$el = el

src/util/misc.js

@@ -1,3 +1,5 @@
+var config = require('../config')
+
 /**
  * Check if an element is a component, if yes return its
  * component id.
@@ -17,4 +19,28 @@ exports.checkComponent = function (el, options) {
   } else if (options.components[tag]) {
     return tag
   }
+}
+
+/**
+ * Create an "anchor" for performing dom insertion/removals.
+ * This is used in a number of scenarios:
+ * - block instance
+ * - v-html
+ * - v-if
+ * - component
+ * - repeat
+ *
+ * @param {String} content
+ * @param {Boolean} persist - IE trashes empty textNodes on
+ *                            cloneNode(true), so in certain
+ *                            cases the anchor needs to be
+ *                            non-empty to be persisted in
+ *                            templates.
+ * @return {Comment|Text}
+ */
+
+exports.createAnchor = function (content, persist) {
+  return config.debug
+    ? document.createComment(content)
+    : document.createTextNode(persist ? ' ' : '')
 }

test/unit/specs/compiler/compile_spec.js

@@ -257,17 +257,15 @@ if (_.inBrowser) {
       })
       expect(el.innerHTML).toBe(
         '<testa><testb>' +
-          '<div>1</div><div>2</div><!--v-repeat-->' +
-        '</testb><!--v-component-->' +
-        '</testa><!--v-component-->'
+          '<div>1</div><div>2</div>' +
+        '</testb></testa>'
       )
       vm.list.push(3)
       _.nextTick(function () {
         expect(el.innerHTML).toBe(
           '<testa><testb>' +
-            '<div>1</div><div>2</div><div>3</div><!--v-repeat-->' +
-          '</testb><!--v-component-->' +
-          '</testa><!--v-component-->'
+            '<div>1</div><div>2</div><div>3</div>' +
+          '</testb></testa>'
         )
         done()
       })

test/unit/specs/compiler/transclude_spec.js

@@ -47,9 +47,9 @@ if (_.inBrowser) {
       var res = transclude(frag, options)
       expect(res).toBe(frag)
       expect(res.childNodes.length).toBe(3)
-      expect(res.childNodes[0].nodeType).toBe(8)
+      expect(res.childNodes[0].nodeType).toBe(3)
       expect(res.childNodes[1]).toBe(el)
-      expect(res.childNodes[2].nodeType).toBe(8)
+      expect(res.childNodes[2].nodeType).toBe(3)
     })
 
     it('template element', function () {
@@ -58,9 +58,9 @@ if (_.inBrowser) {
       var res = transclude(tpl, options)
       expect(res instanceof DocumentFragment).toBe(true)
       expect(res.childNodes.length).toBe(3)
-      expect(res.childNodes[0].nodeType).toBe(8)
+      expect(res.childNodes[0].nodeType).toBe(3)
       expect(res.childNodes[1].textContent).toBe('123')
-      expect(res.childNodes[2].nodeType).toBe(8)
+      expect(res.childNodes[2].nodeType).toBe(3)
     })
 
     it('content transclusion', function () {

test/unit/specs/directives/component_spec.js

@@ -28,7 +28,7 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<test>123</test><!--v-component-->')
+      expect(el.innerHTML).toBe('<test>123</test>')
     })
 
     it('replace', function () {
@@ -45,7 +45,7 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<p>123</p><!--v-component-->')
+      expect(el.innerHTML).toBe('<p>123</p>')
     })
 
     it('inline-template', function () {
@@ -64,7 +64,7 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<test>child</test><!--v-component-->')
+      expect(el.innerHTML).toBe('<test>child</test>')
     })
 
     it('block replace', function () {
@@ -81,7 +81,7 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<!--v-start--><p>123</p><p>234</p><!--v-end--><!--v-component-->')
+      expect(el.innerHTML).toBe('<p>123</p><p>234</p>')
     })
 
     it('dynamic', function (done) {
@@ -108,13 +108,13 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<div view="a">AAA</div><!--v-component-->')
+      expect(el.innerHTML).toBe('<div view="a">AAA</div>')
       vm.view = 'b'
       _.nextTick(function () {
-        expect(el.innerHTML).toBe('<div view="b">BBB</div><!--v-component-->')
+        expect(el.innerHTML).toBe('<div view="b">BBB</div>')
         vm.view = ''
         _.nextTick(function () {
-          expect(el.innerHTML).toBe('<!--v-component-->')
+          expect(el.innerHTML).toBe('')
           done()
         })
       })
@@ -142,22 +142,22 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<div>AAA</div><!--v-component-->')
+      expect(el.innerHTML).toBe('<div>AAA</div>')
       expect(spyA.calls.count()).toBe(1)
       expect(spyB.calls.count()).toBe(0)
       vm.view = 'b'
       _.nextTick(function () {
-        expect(el.innerHTML).toBe('<div>BBB</div><!--v-component-->')
+        expect(el.innerHTML).toBe('<div>BBB</div>')
         expect(spyA.calls.count()).toBe(1)
         expect(spyB.calls.count()).toBe(1)
         vm.view = 'a'
         _.nextTick(function () {
-          expect(el.innerHTML).toBe('<div>AAA</div><!--v-component-->')
+          expect(el.innerHTML).toBe('<div>AAA</div>')
           expect(spyA.calls.count()).toBe(1)
           expect(spyB.calls.count()).toBe(1)
           vm.view = 'b'
           _.nextTick(function () {
-            expect(el.innerHTML).toBe('<div>BBB</div><!--v-component-->')
+            expect(el.innerHTML).toBe('<div>BBB</div>')
             expect(spyA.calls.count()).toBe(1)
             expect(spyB.calls.count()).toBe(1)
             done()
@@ -243,7 +243,7 @@ if (_.inBrowser) {
           }
         }
       })
-      expect(el.innerHTML).toBe('<ul><li>1</li><li>2</li><!--v-repeat--></ul><!--v-component-->')
+      expect(el.innerHTML).toBe('<ul><li>1</li><li>2</li></ul>')
     })
 
     it('wait-for', function (done) {