wip - current tests pass

Author: yyx990803

src/api/child.js

@@ -42,6 +42,5 @@ exports.$addChild = function (opts, BaseCtor) {
   opts._parent = parent
   opts._root = parent.$root
   var child = new ChildVue(opts)
-  this._children.push(child)
   return child
 }

src/compiler/compile.js

@@ -60,10 +60,13 @@ function compile (el, options, partial, transcluded) {
     }
     // cache childNodes before linking parent, fix #657
     var childNodes = _.toArray(el.childNodes)
-    // if transcluded, link in parent scope
-    if (transcluded) vm = vm.$parent
-    if (nodeLinkFn) nodeLinkFn(vm, el)
-    if (childLinkFn) childLinkFn(vm, childNodes)
+    // if this is a transcluded compile, linkers need to be
+    // called in source scope, and the host needs to be
+    // passed down.
+    var source = transcluded ? vm.$parent : vm
+    var host = transcluded ? vm : undefined
+    if (nodeLinkFn) nodeLinkFn(source, el, host)
+    if (childLinkFn) childLinkFn(source, childNodes, host)
 
     /**
      * If this is a partial compile, the linker function
@@ -150,7 +153,7 @@ function compileElement (el, options) {
     if (!linkFn) {
       var dirs = collectDirectives(el, options)
       linkFn = dirs.length
-        ? makeDirectivesLinkFn(dirs)
+        ? makeNodeLinkFn(dirs)
         : null
     }
   }
@@ -168,14 +171,14 @@ function compileElement (el, options) {
 }
 
 /**
- * Build a multi-directive link function.
+ * Build a link function for all directives on a single node.
  *
  * @param {Array} directives
  * @return {Function} directivesLinkFn
  */
 
-function makeDirectivesLinkFn (directives) {
-  return function directivesLinkFn (vm, el) {
+function makeNodeLinkFn (directives) {
+  return function nodeLinkFn (vm, el, host) {
     // reverse apply because it's sorted low to high
     var i = directives.length
     var dir, j, k, target
@@ -193,7 +196,7 @@ function makeDirectivesLinkFn (directives) {
         k = dir.descriptors.length
         for (j = 0; j < k; j++) {
           target._bindDir(dir.name, el,
-                      dir.descriptors[j], dir.def)
+            dir.descriptors[j], dir.def, host)
         }
       }
     }
@@ -465,13 +468,16 @@ function checkTerminalDirectives (el, options) {
   for (var i = 0; i < 3; i++) {
     dirName = terminalDirectives[i]
     if (value = _.attr(el, dirName)) {
-      return makeTeriminalLinkFn(el, dirName, value, options)
+      return makeTerminalNodeLinkFn(el, dirName, value, options)
     }
   }
 }
 
 /**
- * Build a link function for a terminal directive.
+ * Build a node link function for a terminal directive.
+ * A terminal link function terminates the current
+ * compilation recursion and handles compilation of the
+ * subtree in the directive.
  *
  * @param {Element} el
  * @param {String} dirName
@@ -480,14 +486,14 @@ function checkTerminalDirectives (el, options) {
  * @return {Function} terminalLinkFn
  */
 
-function makeTeriminalLinkFn (el, dirName, value, options) {
+function makeTerminalNodeLinkFn (el, dirName, value, options) {
   var descriptor = dirParser.parse(value)[0]
   var def = options.directives[dirName]
-  var terminalLinkFn = function (vm, el) {
-    vm._bindDir(dirName, el, descriptor, def)
+  var fn = function terminalNodeLinkFn (vm, el, host) {
+    vm._bindDir(dirName, el, descriptor, def, host)
   }
-  terminalLinkFn.terminal = true
-  return terminalLinkFn
+  fn.terminal = true
+  return fn
 }
 
 /**

src/directive.js

@@ -18,10 +18,11 @@ var expParser = require('./parsers/expression')
  *                 - {String} [arg]
  *                 - {Array<Object>} [filters]
  * @param {Object} def - directive definition object
+ * @param {Vue|undefined} host - transclusion host target
  * @constructor
  */
 
-function Directive (name, el, vm, descriptor, def) {
+function Directive (name, el, vm, descriptor, def, host) {
   // public
   this.name = name
   this.el = el
@@ -32,6 +33,7 @@ function Directive (name, el, vm, descriptor, def) {
   this.arg = descriptor.arg
   this.filters = _.resolveFilters(vm, descriptor.filters)
   // private
+  this._host = host
   this._locked = false
   this._bound = false
   // init

src/directives/component.js

@@ -87,7 +87,8 @@ module.exports = {
       var child = vm.$addChild({
         el: el,
         template: this.template,
-        _asComponent: true
+        _asComponent: true,
+        _host: this._host
       }, this.Ctor)
       if (this.keepAlive) {
         this.cache[this.ctorId] = child

src/directives/repeat.js

@@ -297,6 +297,7 @@ module.exports = {
     var vm = this.vm.$addChild({
       el: templateParser.clone(this.template),
       _asComponent: this.asComponent,
+      _host: this._host,
       _linkFn: this._linkFn,
       _meta: meta,
       data: data,

src/instance/compile.js

@@ -89,11 +89,12 @@ exports._initElement = function (el) {
  * @param {Node} node   - target node
  * @param {Object} desc - parsed directive descriptor
  * @param {Object} def  - directive definition object
+ * @param {Vue|undefined} host - transclusion host component
  */
 
-exports._bindDir = function (name, node, desc, def) {
+exports._bindDir = function (name, node, desc, def, host) {
   this._directives.push(
-    new Directive(name, node, this, desc, def)
+    new Directive(name, node, this, desc, def, host)
   )
 }
 
@@ -120,6 +121,12 @@ exports._destroy = function (remove, deferCleanup) {
     i = parent._children.indexOf(this)
     parent._children.splice(i, 1)
   }
+  // same for transclusion host.
+  var host = this._host
+  if (host && !host._isBeingDestroyed) {
+    i = host._transCpnts.indexOf(this)
+    host._transCpnts.splice(i, 1)
+  }
   // destroy all children.
   i = this._children.length
   while (i--) {

src/instance/events.js

@@ -80,7 +80,7 @@ exports._initDOMHooks = function () {
 function onAttached () {
   this._isAttached = true
   this._children.forEach(callAttach)
-  if (this._transCpnts) {
+  if (this._transCpnts.length) {
     this._transCpnts.forEach(callAttach)
   }
 }
@@ -104,7 +104,7 @@ function callAttach (child) {
 function onDetached () {
   this._isAttached = false
   this._children.forEach(callDetach)
-  if (this._transCpnts) {
+  if (this._transCpnts.length) {
     this._transCpnts.forEach(callDetach)
   }
 }

src/instance/init.js

@@ -56,7 +56,16 @@ exports._init = function (options) {
   // transcluded components that belong to the parent.
   // need to keep track of them so that we can call
   // attached/detached hooks on them.
-  this._transCpnts = null
+  this._transCpnts = []
+  this._host = options._host
+
+  // push self into parent / transclusion host
+  if (this.$parent) {
+    this.$parent._children.push(this)
+  }
+  if (this._host) {
+    this._host._transCpnts.push(this)
+  }
 
   // props used in v-repeat diffing
   this._new = true

test/unit/specs/compiler/compile_spec.js

@@ -53,10 +53,10 @@ if (_.inBrowser) {
       expect(typeof linker).toBe('function')
       linker(vm, el)
       expect(vm._bindDir.calls.count()).toBe(4)
-      expect(vm._bindDir).toHaveBeenCalledWith('a', el, descriptorB, defA)
-      expect(vm._bindDir).toHaveBeenCalledWith('a', el.firstChild, descriptorA, defA)
-      expect(vm._bindDir).toHaveBeenCalledWith('b', el.firstChild, descriptorB, defB)
-      expect(vm._bindDir).toHaveBeenCalledWith('b', el.lastChild, descriptorB, defB)
+      expect(vm._bindDir).toHaveBeenCalledWith('a', el, descriptorB, defA, undefined)
+      expect(vm._bindDir).toHaveBeenCalledWith('a', el.firstChild, descriptorA, defA, undefined)
+      expect(vm._bindDir).toHaveBeenCalledWith('b', el.firstChild, descriptorB, defB, undefined)
+      expect(vm._bindDir).toHaveBeenCalledWith('b', el.lastChild, descriptorB, defB, undefined)
       // check the priority sorting
       // the "b" on the firstNode should be called first!
       expect(vm._bindDir.calls.argsFor(1)[0]).toBe('b')
@@ -116,7 +116,7 @@ if (_.inBrowser) {
       // expect 1 call because terminal should return early and let
       // the directive handle the rest.
       expect(vm._bindDir.calls.count()).toBe(1)
-      expect(vm._bindDir).toHaveBeenCalledWith('repeat', el.firstChild, descriptor, def)
+      expect(vm._bindDir).toHaveBeenCalledWith('repeat', el.firstChild, descriptor, def, undefined)
     })
 
     it('custom element components', function () {
@@ -131,7 +131,7 @@ if (_.inBrowser) {
       var linker = compile(el, options)
       linker(vm, el)
       expect(vm._bindDir.calls.count()).toBe(1)
-      expect(vm._bindDir).toHaveBeenCalledWith('component', el.firstChild, descriptor, def)
+      expect(vm._bindDir).toHaveBeenCalledWith('component', el.firstChild, descriptor, def, undefined)
       expect(_.warn).not.toHaveBeenCalled()
     })