refactor slot distribution (fix vuejs#2312)

Author: yyx990803

src/compiler/compile.js

@@ -15,8 +15,7 @@ import {
   findRef,
   defineReactive,
   assertAsset,
-  getAttr,
-  hasBindAttr
+  getAttr
 } from '../util/index'
 
 // special binding prefixes
@@ -526,11 +525,8 @@ function makeChildLinkFn (linkFns) {
 
 function checkElementDirectives (el, options) {
   var tag = el.tagName.toLowerCase()
-  if (commonTagRE.test(tag)) return
-  // special case: give named slot a higher priority
-  // than unnamed slots
-  if (tag === 'slot' && hasBindAttr(el, 'name')) {
-    tag = '_namedSlot'
+  if (commonTagRE.test(tag)) {
+    return
   }
   var def = resolveAsset(options, 'elementDirectives', tag)
   if (def) {

src/compiler/index.js

@@ -1,2 +1,3 @@
 export * from './compile'
 export * from './transclude'
+export * from './scan-slots'

src/compiler/scan-slots.js

@@ -0,0 +1,85 @@
+import { parseTemplate } from '../parsers/template'
+import {
+  isTemplate,
+  toArray,
+  getBindAttr,
+  warn
+} from '../util/index'
+
+/**
+ * Scan and determine slot content distribution.
+ * We do this during transclusion instead at compile time so that
+ * the distribution is decoupled from the compilation order of
+ * the slots.
+ *
+ * @param {Element|DocumentFragment} template
+ * @param {Element} content
+ * @param {Vue} vm
+ */
+
+export function scanSlots (template, content, vm) {
+  if (!content) {
+    return
+  }
+  var contents = vm._slotContents = {}
+  var slots = template.querySelectorAll('slot')
+  if (slots.length) {
+    var hasDefault, slot, name
+    for (var i = 0, l = slots.length; i < l; i++) {
+      slot = slots[i]
+      /* eslint-disable no-cond-assign */
+      if (name = slot.getAttribute('name')) {
+        select(slot, name)
+      } else if (
+        process.env.NODE_ENV !== 'production' &&
+        (name = getBindAttr(slot, 'name'))
+      ) {
+        warn('<slot :name="' + name + '">: slot names cannot be dynamic.')
+      } else {
+        // default slot
+        hasDefault = true
+      }
+      /* eslint-enable no-cond-assign */
+    }
+    if (hasDefault) {
+      contents['default'] = extractFragment(content.childNodes, content)
+    }
+  }
+
+  function select (slot, name) {
+    // named slot
+    var selector = '[slot="' + name + '"]'
+    var nodes = content.querySelectorAll(selector)
+    if (nodes.length) {
+      contents[name] = extractFragment(nodes, content)
+    }
+  }
+}
+
+/**
+ * Extract qualified content nodes from a node list.
+ *
+ * @param {NodeList} nodes
+ * @param {Element} parent
+ * @return {DocumentFragment}
+ */
+
+function extractFragment (nodes, parent) {
+  var frag = document.createDocumentFragment()
+  nodes = toArray(nodes)
+  for (var i = 0, l = nodes.length; i < l; i++) {
+    var node = nodes[i]
+    if (node.parentNode === parent) {
+      if (
+        isTemplate(node) &&
+        !node.hasAttribute('v-if') &&
+        !node.hasAttribute('v-for')
+      ) {
+        parent.removeChild(node)
+        node = parseTemplate(node)
+      }
+      frag.appendChild(node)
+    }
+  }
+  return frag
+}

src/compiler/transclude.js

@@ -1,5 +1,5 @@
-import { parseTemplate } from '../parsers/template'
 import { parseText } from '../parsers/text'
+import { parseTemplate } from '../parsers/template'
 import {
   warn,
   isTemplate,

src/directives/element/index.js

@@ -1,8 +1,7 @@
-import { slot, namedSlot as _namedSlot } from './slot'
+import slot from './slot'
 import partial from './partial'
 
 export default {
   slot,
-  _namedSlot, // same as slot but with higher priority
   partial
 }

src/directives/element/slot.js

@@ -1,62 +1,23 @@
 import { SLOT } from '../priorities'
-
-import {
-  parseTemplate,
-  cloneNode
-} from '../../parsers/template'
-
 import {
-  extend,
   extractContent,
   replace,
-  remove,
-  isTemplate
+  remove
 } from '../../util/index'
 
-// 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.
-
-// We are exporting two versions, one for named and one
-// for unnamed, because the unnamed slots must be compiled
-// AFTER all named slots have selected their content. So
-// we need to give them different priorities in the compilation
-// process. (See #1965)
-
-export const slot = {
+export default {
 
   priority: SLOT,
+  params: ['name'],
 
   bind () {
-    var host = this.vm
-    var raw = host.$options._content
-    if (!raw) {
+    // this was resolved during component transclusion
+    var name = this.params.name || 'default'
+    var content = this.vm._slotContents && this.vm._slotContents[name]
+    if (!content || !content.hasChildNodes()) {
       this.fallback()
-      return
-    }
-    var context = host._context
-    var slotName = this.params && this.params.name
-    if (!slotName) {
-      // Default slot
-      this.tryCompile(extractFragment(raw.childNodes, raw, true), context, host)
     } else {
-      // Named slot
-      var selector = '[slot="' + slotName + '"]'
-      var nodes = raw.querySelectorAll(selector)
-      if (nodes.length) {
-        this.tryCompile(extractFragment(nodes, raw), context, host)
-      } else {
-        this.fallback()
-      }
-    }
-  },
-
-  tryCompile (content, context, host) {
-    if (content.hasChildNodes()) {
-      this.compile(content, context, host)
-    } else {
-      this.fallback()
+      this.compile(content.cloneNode(true), this.vm._context, this.vm)
     }
   },
 
@@ -101,47 +62,3 @@ export const slot = {
     }
   }
 }
-
-export const namedSlot = extend(extend({}, slot), {
-  priority: slot.priority + 1,
-  params: ['name']
-})
-
-/**
- * Extract qualified content nodes from a node list.
- *
- * @param {NodeList} nodes
- * @param {Element} parent
- * @param {Boolean} main
- * @return {DocumentFragment}
- */
-
-function extractFragment (nodes, parent, main) {
-  var frag = document.createDocumentFragment()
-  for (var i = 0, l = nodes.length; i < l; i++) {
-    var node = nodes[i]
-    // if this is the main outlet, we want to skip all
-    // previously selected nodes;
-    // otherwise, we want to mark the node as selected.
-    // clone the node so the original raw content remains
-    // intact. this ensures proper re-compilation in cases
-    // where the outlet is inside a conditional block
-    if (main && !node.__v_selected) {
-      append(node)
-    } else if (!main && node.parentNode === parent) {
-      node.__v_selected = true
-      append(node)
-    }
-  }
-  return frag
-
-  function append (node) {
-    if (isTemplate(node) &&
-        !node.hasAttribute('v-if') &&
-        !node.hasAttribute('v-for')) {
-      node = parseTemplate(node)
-    }
-    node = cloneNode(node)
-    frag.appendChild(node)
-  }
-}

src/instance/internal/lifecycle.js

@@ -1,6 +1,17 @@
 import Directive from '../../directive'
-import { replace, getAttr, isFragment } from '../../util/index'
-import { compile, compileRoot, transclude } from '../../compiler/index'
+
+import {
+  replace,
+  getAttr,
+  isFragment
+} from '../../util/index'
+
+import {
+  compile,
+  compileRoot,
+  transclude,
+  scanSlots
+} from '../../compiler/index'
 
 export default function (Vue) {
   /**
@@ -57,6 +68,10 @@ export default function (Vue) {
     var contextOptions = this._context && this._context.$options
     var rootLinker = compileRoot(el, options, contextOptions)
 
+    // scan for slot distribution before compiling the content
+    // so that it's decoupeld from slot/directive compilation order
+    scanSlots(el, options._content, this)
+
     // compile and link the rest
     var contentLinkFn
     var ctor = this.constructor

src/util/dom.js

@@ -245,7 +245,7 @@ export function removeClass (el, cls) {
  *
  * @param {Element} el
  * @param {Boolean} asFragment
- * @return {Element}
+ * @return {Element|DocumentFragment}
  */
 
 export function extractContent (el, asFragment) {

test/unit/specs/directives/element/slot_spec.js

@@ -4,6 +4,7 @@ var nextTick = Vue.nextTick
 describe('Slot Distribution', function () {
   var el, vm, options
   beforeEach(function () {
+    spyWarns()
     el = document.createElement('div')
     options = {
       el: el,
@@ -132,14 +133,14 @@ describe('Slot Distribution', function () {
     expect(el.lastChild.textContent).toBe('fallback c')
   })
 
-  it('should accept expressions in selectors', function () {
+  it('should warn expressions in slot names', function () {
     el.innerHTML = '<p>one</p><p slot="two">two</p>'
     options.template = '<slot :name="theName"></slot>'
     options.data = {
       theName: 'two'
     }
     mount()
-    expect(el.innerHTML).toBe('<p slot="two">two</p>')
+    expect(hasWarned('slot names cannot be dynamic')).toBe(true)
   })
 
   it('content should be dynamic and compiled in parent scope', function (done) {
@@ -196,21 +197,6 @@ describe('Slot Distribution', function () {
     })
   })
 
-  it('inline v-for', function () {
-    el.innerHTML = '<p slot="1">1</p><p slot="2">2</p><p slot="3">3</p>'
-    new Vue({
-      el: el,
-      template: '<div v-for="n in list"><slot :name="$index + 1"></slot></div>',
-      data: {
-        list: 0
-      },
-      beforeCompile: function () {
-        this.list = this.$options._content.querySelectorAll('p').length
-      }
-    })
-    expect(el.innerHTML).toBe('<div><p slot="1">1</p></div><div><p slot="2">2</p></div><div><p slot="3">3</p></div>')
-  })
-
   it('v-for + component + parent directive + transclusion', function (done) {
     var vm = new Vue({
       el: el,

test/unit/specs/index.js

@@ -26,6 +26,9 @@ scope.getWarnCount = function () {
 }
 
 scope.hasWarned = function (msg, silent) {
+  if (!_.warn.calls) {
+    console.warn('make sure to call spyWarns() before tests.')
+  }
   var count = _.warn.calls.count()
   var args
   while (count--) {