big rewrite for block-handling

Author: yyx990803

examples/commits/app.js

@@ -1,5 +1,5 @@
 var apiURL = 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha='
-var isPhantom = true//navigator.userAgent.indexOf('PhantomJS') > -1
+var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
 
 /**
  * Test mocks

examples/todomvc/index.html

@@ -79,13 +79,15 @@ <h1>todos</h1>
 
         <!-- testing/benchmark only -->
         <script>
-            if (navigator.userAgent.indexOf('PhantomJS') > -1) {
+            var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
+            if (isPhantom) {
                 localStorage.clear()
+            } else {
+                var now = window.performance && window.performance.now
+                    ? function () { return window.performance.now() }
+                    : Date.now
+                var metrics = { beforeLoad: now() }
             }
-            var now = window.performance && window.performance.now
-                ? function () { return window.performance.now() }
-                : Date.now
-            var metrics = { beforeLoad: now() }
         </script>
         <!-- end testing/bench -->
 

examples/todomvc/js/perf.js

@@ -1,4 +1,6 @@
 setTimeout(function () {
+
+    if (window.isPhantom) return
 
     // Initial load & render metrics
 

src/compile/compile.js

@@ -381,8 +381,8 @@ function makeParamsLinkFn (params, options) {
 
 var terminalDirectives = [
   'repeat',
-  'component',
-  'if'
+  'if',
+  'component'
 ]
 
 function skip () {}

src/compile/transclude.js

@@ -19,11 +19,14 @@ module.exports = function transclude (el, options) {
   if (el.tagName === 'TEMPLATE') {
     el = templateParser.parse(el)
   }
-  if (options.template) {
-    return transcludeTemplate(el, options)
-  } else {
-    return el
+  if (options && options.template) {
+    el = transcludeTemplate(el, options)
+  }
+  if (el instanceof DocumentFragment) {
+    _.prepend(document.createComment('v-start'), el)
+    el.appendChild(document.createComment('v-end'))
   }
+  return el
 }
 
 /**

src/directive.js

@@ -158,7 +158,7 @@ p._teardown = function () {
     if (watcher && watcher.active) {
       watcher.removeCb(this._update)
       if (!watcher.active) {
-        this.vm._watchers[this.expression] = null
+        this.vm._watchers[this.raw] = null
       }
     }
     this._bound = false

src/directives/component.js

@@ -1,34 +1,25 @@
 var _ = require('../util')
-var Watcher = require('../watcher')
 var templateParser = require('../parse/template')
 
 module.exports = {
 
   isLiteral: true,
 
   /**
-   * Setup. Need to check a few possible permutations:
+   * Setup. Two possible usages:
    *
-   * - literal:
+   * - static:
    *   v-component="comp"
    *
    * - dynamic:
    *   v-component="{{currentView}}"
-   *
-   * - conditional:
-   *   v-component="comp" v-if="abc"
-   *
-   * - dynamic + conditional:
-   *   v-component="{{currentView}}" v-if="abc"
    */
 
   bind: function () {
     if (!this.el.__vue__) {
       // create a ref anchor
       this.ref = document.createComment('v-component')
       _.replace(this.el, this.ref)
-      // check v-if conditionals
-      this.checkIf()
       // check keep-alive options
       this.checkKeepAlive()
       // if static, build right now.
@@ -44,46 +35,6 @@ module.exports = {
     }
   },
 
-  /**
-   * Check if v-component is being used together with v-if.
-   * If yes, we created a watcher for the v-if value and
-   * react to its value change in `this.ifCallback`.
-   */
-
-  checkIf: function () {
-    var condition = _.attr(this.el, 'if')
-    if (condition !== null) {
-      var self = this
-      this.ifWatcher = new Watcher(
-        this.vm,
-        condition,
-        function (value) {
-          self.toggleIf(value)
-        }
-      )
-      this.active = this.ifWatcher.value
-    } else {
-      this.active = true
-    }
-  },
-
-  /**
-   * Callback when v-if value changes.
-   * Marks the active flag.
-   *
-   * @param {*} value
-   */
-
-  toggleIf: function (value) {
-    if (value) {
-      this.active = true
-      this.build()
-    } else {
-      this.active = false
-      this.unbuild(true)
-    }
-  },
-
   /**
    * Check if the "keep-alive" flag is present.
    * If yes, instead of destroying the active vm when
@@ -119,9 +70,6 @@ module.exports = {
    */
 
   build: function () {
-    if (!this.active) {
-      return
-    }
     if (this.keepAlive) {
       var vm = this.cache[this.ctorId]
       if (vm) {
@@ -178,16 +126,12 @@ module.exports = {
   /**
    * Unbind.
    * Make sure keepAlive is set to false so that the
-   * instance is always destroyed. Teardown v-if watcher
-   * if present.
+   * instance is always destroyed.
    */
 
   unbind: function () {
     this.keepAlive = false
     this.unbuild()
-    if (this.ifWatcher) {
-      this.ifWatcher.teardown()
-    }
   }
 
 }

src/directives/if.js

@@ -8,12 +8,16 @@ module.exports = {
   bind: function () {
     var el = this.el
     if (!el.__vue__) {
-      this.ref = document.createComment('v-if')
-      _.replace(el, this.ref)
-      this.isBlock = el.tagName === 'TEMPLATE'
-      this.template = this.isBlock
-        ? templateParser.parse(el, true)
-        : el
+      this.start = document.createComment('v-if-start')
+      this.end = document.createComment('v-if-end')
+      _.replace(el, this.end)
+      _.before(this.start, this.end)
+      if (el.tagName === 'TEMPLATE') {
+        this.template = templateParser.parse(el, true)
+      } else {
+        this.template = document.createDocumentFragment()
+        this.template.appendChild(el)
+      }
       // compile the nested partial
       this.linker = compile(
         this.template,
@@ -40,28 +44,13 @@ module.exports = {
 
   insert: function () {
     var vm = this.vm
-    var el = templateParser.clone(this.template)
-    var ref = this.ref
-    var decompile = this.linker(vm, el)
-    if (this.isBlock) {
-      var blockStart = el.firstChild
-      this.decompile = function () {
-        decompile()
-        var node = blockStart
-        var next
-        while (node !== ref) {
-          next = node.nextSibling
-          transition.remove(node, vm)
-          node = next
-        }
-      }
-    } else {
-      this.decompile = function () {
-        decompile()
-        transition.remove(el, vm)
-      }
+    var frag = templateParser.clone(this.template)
+    var decompile = this.linker(vm, frag)
+    this.decompile = function () {
+      decompile()
+      transition.blockRemove(this.start, this.end, vm)
     }
-    transition.before(el, ref, vm)
+    transition.blockAppend(frag, this.end, vm)
   },
 
   teardown: function () {

src/directives/partial.js

@@ -1,22 +1,27 @@
 var _ = require('../util')
 var templateParser = require('../parse/template')
+var transition = require('../transition')
 
 module.exports = {
 
   isLiteral: true,
 
   bind: function () {
     var el = this.el
+    this.start = document.createComment('v-partial-start')
+    this.end = document.createComment('v-partial-end')
     if (el.nodeType !== 8) {
       el.innerHTML = ''
     }
-    if (el.tagName === 'TEMPLATE') {
-      this.el = document.createComment('v-partial')
-      _.replace(el, this.el)
+    if (el.tagName === 'TEMPLATE' || el.nodeType === 8) {
+      _.replace(el, this.end)
+    } else {
+      el.appendChild(this.end)
     }
+    _.before(this.start, this.end)
     if (!this._isDynamicLiteral) {
       this.compile(this.expression)
-    } 
+    }
   },
 
   update: function (id) {
@@ -30,32 +35,14 @@ module.exports = {
     if (!partial) {
       return
     }
-    partial = templateParser.parse(partial, true)
-    var el = this.el
     var vm = this.vm
-    var decompile = vm.$compile(partial)
-    if (el.nodeType === 8) {
-      // comment ref node means inline partial
-      var blockStart = partial.firstChild
-      this.decompile = function () {
-        decompile()
-        var node = blockStart
-        var next
-        while (node !== el) {
-          next = node.nextSibling
-          _.remove(node)
-          node = next
-        }
-      }
-      _.before(partial, el)
-    } else {
-      // just append to container
-      this.decompile = function () {
-        decompile()
-        el.innerHTML = ''
-      }
-      el.appendChild(partial)
+    var frag = templateParser.parse(partial, true)
+    var decompile = vm.$compile(frag)
+    this.decompile = function () {
+      decompile()
+      transition.blockRemove(this.start, this.end, vm)
     }
+    transition.blockAppend(frag, this.end, vm)
   },
 
   teardown: function () {

src/directives/repeat.js

@@ -95,14 +95,18 @@ module.exports = {
 
   checkComponent: function () {
     var id = _.attr(this.el, 'component')
+    var options = this.vm.$options
     if (!id) {
       this.Ctor = _.Vue // default constructor
       this.inherit = true // inline repeats should inherit
-      this._linker = compile(this.template, this.vm.$options)
+      // important: transclude with no options, just
+      // to ensure block start and block end
+      this.template = transclude(this.template)
+      this._linker = compile(this.template, options)
     } else {
       var tokens = textParser.parse(id)
       if (!tokens) { // static component
-        var Ctor = this.Ctor = this.vm.$options.components[id]
+        var Ctor = this.Ctor = options.components[id]
         _.assertAsset(Ctor, 'component', id)
         if (Ctor) {
           // merge an empty object with owner vm as parent