refactor content transclusion

Author: yyx990803

component.json

@@ -20,6 +20,7 @@
     "src/batcher.js",
     "src/cache.js",
     "src/compiler/compile.js",
+    "src/compiler/content.js",
     "src/compiler/transclude.js",
     "src/config.js",
     "src/directive.js",

src/api/lifecycle.js

@@ -64,9 +64,10 @@ exports.$destroy = function (remove, deferCleanup) {
  * decompile function.
  *
  * @param {Element|DocumentFragment} el
+ * @param {Vue} [host]
  * @return {Function}
  */
 
-exports.$compile = function (el) {
-  return compile(el, this.$options, true)(this, el)
+exports.$compile = function (el, host) {
+  return compile(el, this.$options, true, host)(this, el)
 }

src/compiler/compile.js

@@ -26,11 +26,11 @@ module.exports = compile
  * @param {Element|DocumentFragment} el
  * @param {Object} options
  * @param {Boolean} partial
- * @param {Boolean} transcluded
+ * @param {Vue} [host] - host vm of transcluded content
  * @return {Function}
  */
 
-function compile (el, options, partial, transcluded) {
+function compile (el, options, partial, host) {
   // link function for the node itself.
   var nodeLinkFn = !partial
     ? compileRoot(el, options)
@@ -53,27 +53,17 @@ function compile (el, options, partial, transcluded) {
    * @return {Function|undefined}
    */
 
-  function compositeLinkFn (vm, el) {
+  return function compositeLinkFn (vm, el) {
     // save original directive count before linking
     // so we can capture the directives created during a
     // partial compilation.
     var originalDirCount = vm._directives.length
-    var parentOriginalDirCount =
-      vm.$parent && vm.$parent._directives.length
     // cache childNodes before linking parent, fix #657
     var childNodes = _.toArray(el.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
     // link
-    if (nodeLinkFn) nodeLinkFn(source, el, host)
-    if (childLinkFn) childLinkFn(source, childNodes, host)
-
-    var selfDirs = vm._directives.slice(originalDirCount)
-    var parentDirs = vm.$parent &&
-      vm.$parent._directives.slice(parentOriginalDirCount)
+    if (nodeLinkFn) nodeLinkFn(vm, el, host)
+    if (childLinkFn) childLinkFn(vm, childNodes, host)
+    var dirs = vm._directives.slice(originalDirCount)
 
     /**
      * The linker function returns an unlink function that
@@ -83,38 +73,15 @@ function compile (el, options, partial, transcluded) {
      * @param {Boolean} destroying
      */
     return function unlink (destroying) {
-      teardownDirs(vm, selfDirs, destroying)
-      if (parentDirs) {
-        teardownDirs(vm.$parent, parentDirs)
+      var i = dirs.length
+      while (i--) {
+        dirs[i]._teardown()
+        if (!destroying) {
+          vm._directives.$remove(dirs[i])
+        }
       }
     }
   }
-
-  // transcluded linkFns are terminal, because it takes
-  // over the entire sub-tree.
-  if (transcluded) {
-    compositeLinkFn.terminal = true
-  }
-
-  return compositeLinkFn
-}
-
-/**
- * Teardown a subset of directives on a vm.
- *
- * @param {Vue} vm
- * @param {Array} dirs
- * @param {Boolean} destroying
- */
-
-function teardownDirs (vm, dirs, destroying) {
-  var i = dirs.length
-  while (i--) {
-    dirs[i]._teardown()
-    if (!destroying) {
-      vm._directives.$remove(dirs[i])
-    }
-  }
 }
 
 /**
@@ -201,13 +168,6 @@ function compileNode (node, options) {
 
 function compileElement (el, options) {
   var hasAttrs = el.hasAttributes()
-  if (hasAttrs && checkTransclusion(el)) {
-    // unwrap textNode
-    if (el.hasAttribute('__vue__wrap')) {
-      el = el.firstChild
-    }
-    return compile(el, options._parent.$options, true, true)
-  }
   // check element directives
   var linkFn = checkElementDirectives(el, options)
   // check terminal direcitves (repeat & if)
@@ -708,19 +668,4 @@ function directiveComparator (a, b) {
   a = a.def.priority || 0
   b = b.def.priority || 0
   return a > b ? 1 : -1
-}
-
-/**
- * Check whether an element is transcluded
- *
- * @param {Element} el
- * @return {Boolean}
- */
-
-var transcludedFlagAttr = '__vue__transcluded'
-function checkTransclusion (el) {
-  if (el.nodeType === 1 && el.hasAttribute(transcludedFlagAttr)) {
-    el.removeAttribute(transcludedFlagAttr)
-    return true
-  }
-}
+}

src/compiler/content.js

@@ -0,0 +1,62 @@
+var _ = require('../util')
+
+// This is the elementDirective that handles <content>
+// transclusions. It relies on the raw content of an
+// instance being stored as `$options._content` during
+// the transclude phase.
+
+module.exports = {
+
+  bind: function () {
+    var vm = this.vm
+    var contentOwner = vm
+    // we need find the content owner, which is the closest
+    // non-inline-repeater instance.
+    while (contentOwner.$options._repeat) {
+      contentOwner = contentOwner.$parent
+    }
+    var raw = contentOwner.$options._content
+    var content
+    if (!raw) {
+      // fallback content
+      // extract as a fragment
+      content = _.extractContent(this.el, true)
+      this.compile(content, vm)
+      return
+    }
+    var parent = contentOwner.$parent
+    var selector = this.el.getAttribute('select')
+    if (!selector) {
+      // default content
+      // Importent: clone the rawContent before extracting
+      // content because the <content> may be inside a v-if
+      // and need to be compiled more than once.
+      content = _.extractContent(raw.cloneNode(true), true)
+      this.compile(content, parent, vm)
+    } else {
+      // select content
+      selector = vm.$interpolate(selector)
+      content = raw.querySelector(selector)
+      // only allow top-level select
+      if (content && content.parentNode === raw) {
+        // same deal, clone the node for v-if
+        content = content.cloneNode(true)
+        this.compile(content, parent, vm)
+      }
+    }
+  },
+
+  compile: function (content, owner, host) {
+    if (owner) {
+      this.unlink = owner.$compile(content, host)
+    }
+    _.replace(this.el, content)
+  },
+
+  unbind: function () {
+    if (this.unlink) {
+      this.unlink()
+    } 
+  }
+
+}

src/compiler/transclude.js

@@ -1,7 +1,6 @@
 var _ = require('../util')
 var config = require('../config')
 var templateParser = require('../parsers/template')
-var transcludedFlagAttr = '__vue__transcluded'
 
 /**
  * Process an element or a DocumentFragment based on a
@@ -24,26 +23,6 @@ module.exports = function transclude (el, options) {
   if (options) {
     options._containerAttrs = extractAttrs(el)
   }
-  // Mark content nodes and attrs so that the compiler
-  // knows they should be compiled in parent scope.
-  if (options && options._asComponent) {
-    var i = el.childNodes.length
-    while (i--) {
-      var node = el.childNodes[i]
-      if (node.nodeType === 1) {
-        node.setAttribute(transcludedFlagAttr, '')
-      } else if (node.nodeType === 3 && node.data.trim()) {
-        // wrap transcluded textNodes in spans, because
-        // raw textNodes can't be persisted through clones
-        // by attaching attributes.
-        var wrapper = document.createElement('span')
-        wrapper.textContent = node.data
-        wrapper.setAttribute('__vue__wrap', '')
-        wrapper.setAttribute(transcludedFlagAttr, '')
-        el.replaceChild(wrapper, node)
-      }
-    }
-  }
   // for template tags, what we want is its content as
   // a documentFragment (for block instances)
   if (el.tagName === 'TEMPLATE') {
@@ -77,7 +56,7 @@ function transcludeTemplate (el, options) {
   if (!frag) {
     _.warn('Invalid template option: ' + template)
   } else {
-    var rawContent = options._content || _.extractContent(el)
+    options._content = _.extractContent(el)
     var replacer = frag.firstChild
     if (options.replace) {
       if (
@@ -88,117 +67,22 @@ function transcludeTemplate (el, options) {
         // block instance. (#835)
         replacer.hasAttribute(config.prefix + 'repeat')
       ) {
-        transcludeContent(frag, rawContent)
         return frag
       } else {
         options._replacerAttrs = extractAttrs(replacer)
         mergeAttrs(el, replacer)
-        transcludeContent(replacer, rawContent)
         return replacer
       }
     } else {
       el.appendChild(frag)
-      transcludeContent(el, rawContent)
       return el
     }
   }
 }
 
-/**
- * Resolve <content> insertion points mimicking the behavior
- * of the Shadow DOM spec:
- *
- *   http://w3c.github.io/webcomponents/spec/shadow/#insertion-points
- *
- * @param {Element|DocumentFragment} el
- * @param {Element} raw
- */
-
-function transcludeContent (el, raw) {
-  var outlets = getOutlets(el)
-  var i = outlets.length
-  if (!i) return
-  var outlet, select, selected, j, main
-
-  function isDirectChild (node) {
-    return node.parentNode === raw
-  }
-
-  // first pass, collect corresponding content
-  // for each outlet.
-  while (i--) {
-    outlet = outlets[i]
-    if (raw) {
-      select = outlet.getAttribute('select')
-      if (select) {  // select content
-        selected = raw.querySelectorAll(select)
-        if (selected.length) {
-          // according to Shadow DOM spec, `select` can
-          // only select direct children of the host node.
-          // enforcing this also fixes #786.
-          selected = [].filter.call(selected, isDirectChild)
-        }
-        outlet.content = selected.length
-          ? selected
-          : _.toArray(outlet.childNodes)
-      } else { // default content
-        main = outlet
-      }
-    } else { // fallback content
-      outlet.content = _.toArray(outlet.childNodes)
-    }
-  }
-  // second pass, actually insert the contents
-  for (i = 0, j = outlets.length; i < j; i++) {
-    outlet = outlets[i]
-    if (outlet !== main) {
-      insertContentAt(outlet, outlet.content)
-    }
-  }
-  // finally insert the main content
-  if (main) {
-    insertContentAt(main, _.toArray(raw.childNodes))
-  }
-}
-
-/**
- * Get <content> outlets from the element/list
- *
- * @param {Element|Array} el
- * @return {Array}
- */
-
-var concat = [].concat
-function getOutlets (el) {
-  return _.isArray(el)
-    ? concat.apply([], el.map(getOutlets))
-    : el.querySelectorAll
-      ? _.toArray(el.querySelectorAll('content'))
-      : []
-}
-
-/**
- * Insert an array of nodes at outlet,
- * then remove the outlet.
- *
- * @param {Element} outlet
- * @param {Array} contents
- */
-
-function insertContentAt (outlet, contents) {
-  // not using util DOM methods here because
-  // parentNode can be cached
-  var parent = outlet.parentNode
-  for (var i = 0, j = contents.length; i < j; i++) {
-    parent.insertBefore(contents[i], outlet)
-  }
-  parent.removeChild(outlet)
-}
-
 /**
  * Helper to extract a component container's attribute names
- * into a map. The resulting map will be used in compiler to
- * determine whether an attribute is transcluded.
+ * into a map.
  *
  * @param {Element} el
  * @return {Object}

src/directives/repeat.js

@@ -132,6 +132,7 @@ module.exports = {
       merged._asComponent = true
       merged._parent = this.vm
       this.template = transclude(this.template, merged)
+      this.content = merged._content
       // Important: mark the template as a root node so that
       // custom element components don't get compiled twice.
       // fixes #822
@@ -365,6 +366,8 @@ module.exports = {
       _host: this._host,
       _linkFn: this._linkFn,
       _meta: meta,
+      _content: this.content,
+      _repeat: this.inherit,
       data: data,
       inherit: this.inherit,
       template: this.inlineTempalte