dom: simplify fragment insertion/removal

Author: yyx990803

src/api/dom.js

@@ -94,22 +94,20 @@ exports.$remove = function (cb, withTransition) {
   // if we are not in document, no need to check
   // for transitions
   if (!inDoc) withTransition = false
-  var op
   var self = this
   var realCb = function () {
     if (inDoc) self._callHook('detached')
     if (cb) cb()
   }
-  if (
-    this._isFragment &&
-    !this._blockFragment.hasChildNodes()
-  ) {
-    op = withTransition === false
-      ? append
-      : transition.removeThenAppend
-    blockOp(this, this._blockFragment, op, realCb)
+  if (this._isFragment) {
+    var frag = this._fragment
+    _.mapNodeRange(this._fragmentStart, this._fragmentEnd, function (node) {
+      // store nodes in the fragment
+      frag.appendChild(node)
+    })
+    realCb()
   } else {
-    op = withTransition === false
+    var op = withTransition === false
       ? remove
       : transition.remove
     op(this.$el, this, realCb)
@@ -132,16 +130,19 @@ exports.$remove = function (cb, withTransition) {
 function insert (vm, target, cb, withTransition, op1, op2) {
   target = query(target)
   var targetIsDetached = !_.inDoc(target)
-  var op = withTransition === false || targetIsDetached
-    ? op1
-    : op2
   var shouldCallHook =
     !targetIsDetached &&
     !vm._isAttached &&
     !_.inDoc(vm.$el)
   if (vm._isFragment) {
-    blockOp(vm, target, op, cb)
+    _.mapNodeRange(vm._fragmentStart, vm._fragmentEnd, function (node) {
+      op1(node, target)
+    })
+    cb && cb()
   } else {
+    var op = withTransition === false || targetIsDetached
+      ? op1
+      : op2
     op(vm.$el, target, vm, cb)
   }
   if (shouldCallHook) {
@@ -150,28 +151,6 @@ function insert (vm, target, cb, withTransition, op1, op2) {
   return vm
 }
 
-/**
- * Execute a transition operation on a fragment instance,
- * iterating through all its block nodes.
- *
- * @param {Vue} vm
- * @param {Node} target
- * @param {Function} op
- * @param {Function} cb
- */
-
-function blockOp (vm, target, op, cb) {
-  var current = vm._fragmentStart
-  var end = vm._fragmentEnd
-  var next
-  while (next !== end) {
-    next = current.nextSibling
-    op(current, target, vm)
-    current = next
-  }
-  op(end, target, vm, cb)
-}
-
 /**
  * Check for selectors
  *

src/api/lifecycle.js

@@ -23,8 +23,6 @@ exports.$mount = function (el) {
     el = document.createElement('div')
   }
   this._compile(el)
-  this._isCompiled = true
-  this._callHook('compiled')
   this._initDOMHooks()
   if (_.inDoc(this.$el)) {
     this._callHook('attached')

src/fragment/fragment.js

@@ -31,7 +31,9 @@ function Fragment (linker, vm, frag, host, scope, parentFrag) {
   } else {
     this.node = _.createAnchor('fragment-start')
     this.end = _.createAnchor('fragment-end')
-    this.nodes = _.toArray(frag.childNodes)
+    this.frag = frag
+    _.prepend(this.node, frag)
+    frag.appendChild(this.end)
     this.before = multiBefore
     this.remove = multiRemove
   }
@@ -71,11 +73,11 @@ Fragment.prototype.destroy = function () {
  * Insert fragment before target, single node version
  *
  * @param {Node} target
- * @param {Boolean} trans
+ * @param {Boolean} withTransition
  */
 
-function singleBefore (target, trans) {
-  var method = trans !== false
+function singleBefore (target, withTransition) {
+  var method = withTransition !== false
     ? transition.before
     : _.before
   method(this.node, target, this.vm)
@@ -112,13 +114,9 @@ function singleRemove (destroy) {
  */
 
 function multiBefore (target) {
-  _.before(this.node, target)
-  var nodes = this.nodes
-  var vm = this.vm
-  for (var i = 0, l = nodes.length; i < l; i++) {
-    _.before(nodes[i], target, vm)
-  }
-  _.before(this.end, target)
+  _.mapNodeRange(this.node, this.end, function (node) {
+    _.before(node, target)
+  })
   this.inserted = true
   if (_.inDoc(this.node)) {
     this.callHook(attach)
@@ -132,20 +130,11 @@ function multiBefore (target) {
  */
 
 function multiRemove (destroy) {
+  var frag = this.frag
   var shouldCallRemove = _.inDoc(this.node)
-  var parent = this.node.parentNode
-  var node = this.node.nextSibling
-  var nodes = this.nodes = []
-  var vm = this.vm
-  var next
-  while (node !== this.end) {
-    nodes.push(node)
-    next = node.nextSibling
-    parent.removeChild(node, vm)
-    node = next
-  }
-  parent.removeChild(this.node)
-  parent.removeChild(this.end)
+  _.mapNodeRange(this.node, this.end, function (node) {
+    frag.appendChild(node)
+  })
   this.inserted = false
   if (shouldCallRemove) {
     this.callHook(detach)

src/instance/init.js

@@ -36,8 +36,9 @@ exports._init = function (options) {
 
   // fragment instance properties
   this._isFragment = false
-  this._fragmentStart =    // @type {CommentNode}
-  this._fragmentEnd = null // @type {CommentNode}
+  this._fragment =         // @type {DocumentFragment}
+  this._fragmentStart =    // @type {Text|Comment}
+  this._fragmentEnd = null // @type {Text|Comment}
 
   // lifecycle state
   this._isCompiled =

src/instance/lifecycle.js

@@ -65,6 +65,8 @@ exports._compile = function (el) {
     _.replace(original, el)
   }
 
+  this._isCompiled = true
+  this._callHook('compiled')
   return el
 }
 
@@ -84,7 +86,7 @@ exports._initElement = function (el) {
     if (this._fragmentStart.nodeType === 3) {
       this._fragmentStart.data = this._fragmentEnd.data = ''
     }
-    this._blockFragment = el
+    this._fragment = el
   } else {
     this.$el = el
   }

src/transition/index.js

@@ -44,22 +44,6 @@ exports.remove = function (el, vm, cb) {
   }, vm, cb)
 }
 
-/**
- * Remove by appending to another parent with transition.
- * This is only used in block operations.
- *
- * @param {Element} el
- * @param {Element} target
- * @param {Vue} vm
- * @param {Function} [cb]
- */
-
-exports.removeThenAppend = function (el, target, vm, cb) {
-  apply(el, -1, function () {
-    target.appendChild(el)
-  }, vm, cb)
-}
-
 /**
  * Apply transitions with an operation callback.
  *

src/util/dom.js

@@ -309,3 +309,21 @@ exports.findRef = function (node) {
     }
   }
 }
+
+/**
+ * Map a function to a range of nodes .
+ *
+ * @param {Node} node
+ * @param {Node} end
+ * @param {Function} op
+ */
+
+exports.mapNodeRange = function (node, end, op) {
+  var next
+  while (node !== end) {
+    next = node.nextSibling
+    op(node)
+    node = next
+  }
+  op(end)
+}

test/unit/specs/api/dom_spec.js

@@ -20,7 +20,7 @@ if (_.inBrowser) {
       parent.appendChild(sibling)
       var el = document.createElement('div')
       vm = new Vue({ el: el })
-      // block instance
+      // fragment instance
       var frag = document.createDocumentFragment()
       frag.appendChild(document.createElement('p'))
       frag.appendChild(document.createElement('span'))
@@ -38,7 +38,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(1)
       })
 
-      it('block instance', function () {
+      it('fragment instance', function () {
         vm2.$appendTo(parent, spy)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[2]).toBe(vm2._fragmentStart)
@@ -64,7 +64,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(2)
       })
 
-      it('block instance', function () {
+      it('fragment instance', function () {
         vm2.$prependTo(parent, spy)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[0]).toBe(vm2._fragmentStart)
@@ -95,7 +95,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(1)
       })
 
-      it('block instance', function () {
+      it('fragment instance', function () {
         vm2.$before(sibling, spy)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[1]).toBe(vm2._fragmentStart)
@@ -124,7 +124,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(1)
       })
 
-      it('block instance', function () {
+      it('fragment instance', function () {
         vm2.$after(target, spy)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[1]).toBe(vm2._fragmentStart)
@@ -135,7 +135,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(1)
       })
 
-      it('block instance no next sibling', function () {
+      it('fragment instance no next sibling', function () {
         vm2.$after(sibling, spy)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[2]).toBe(vm2._fragmentStart)
@@ -161,7 +161,7 @@ if (_.inBrowser) {
         expect(spy.calls.count()).toBe(1)
       })
 
-      it('block instance', function () {
+      it('fragment instance', function () {
         vm2.$before(sibling)
         expect(parent.childNodes.length).toBe(6)
         expect(parent.childNodes[1]).toBe(vm2._fragmentStart)

test/unit/specs/api/lifecycle_spec.js

@@ -96,7 +96,7 @@ if (_.inBrowser) {
           data: { test: 'frag' }
         })
         vm.$mount(frag)
-        expect(vm._blockFragment).toBe(frag)
+        expect(vm._fragment).toBe(frag)
         expect(vm.$el.nextSibling.textContent).toBe('frag')
       })
 

test/unit/specs/transition/transition_spec.js

@@ -73,13 +73,6 @@ if (_.inBrowser && !_.isIE9) {
         expect(spy).toHaveBeenCalled()
       })
 
-      it('removeThenAppend', function () {
-        transition.removeThenAppend(target, el, vm, spy)
-        expect(parent.childNodes.length).toBe(0)
-        expect(el.firstChild).toBe(target)
-        expect(spy).toHaveBeenCalled()
-      })
-
     })
 
     describe('Skipping', function () {