Merge pull request #2272 from kazupon/improve/terminal-directive

Improve terminalable directive

Author: yyx990803

src/compiler/compile.js

@@ -25,14 +25,9 @@ const dirAttrRE = /^v-([^:]+)(?:$|:(.*)$)/
 const modifierRE = /\.[^\.]+/g
 const transitionRE = /^(v-bind:|:)?transition$/
 
-// terminal directives
-export const terminalDirectives = [
-  'for',
-  'if'
-]
-
 // default directive priority
 const DEFAULT_PRIORITY = 1000
+const DEFAULT_TERMINAL_PRIORITY = 2000
 
 /**
  * Compile a template and return a reusable composite link
@@ -588,14 +583,28 @@ function checkTerminalDirectives (el, options) {
       return skip
     }
   }
-  var value, dirName
-  for (var i = 0, l = terminalDirectives.length; i < l; i++) {
-    dirName = terminalDirectives[i]
-    value = el.getAttribute('v-' + dirName)
-    if (value != null) {
-      return makeTerminalNodeLinkFn(el, dirName, value, options)
+
+  var attrs, attr, name, value, matched, dirName, arg, def, termDef
+  attrs = el.attributes
+  for (var i = 0, j = attrs.length; i < j; i++) {
+    attr = attrs[i]
+    if ((matched = attr.name.match(dirAttrRE))) {
+      def = resolveAsset(options, 'directives', matched[1])
+      if (def && def.terminal) {
+        if (!termDef || ((def.priority || DEFAULT_TERMINAL_PRIORITY) > termDef.priority)) {
+          termDef = def
+          name = attr.name
+          value = attr.value
+          dirName = matched[1]
+          arg = matched[2]
+        }
+      }
     }
   }
+
+  if (termDef) {
+    return makeTerminalNodeLinkFn(el, dirName, value, options, termDef, name, arg)
+  }
 }
 
 function skip () {}
@@ -611,20 +620,28 @@ skip.terminal = true
  * @param {String} dirName
  * @param {String} value
  * @param {Object} options
- * @param {Object} [def]
+ * @param {Object} def
+ * @param {String} [attrName]
+ * @param {String} [arg]
  * @return {Function} terminalLinkFn
  */
 
-function makeTerminalNodeLinkFn (el, dirName, value, options, def) {
+function makeTerminalNodeLinkFn (el, dirName, value, options, def, attrName, arg) {
   var parsed = parseDirective(value)
   var descriptor = {
     name: dirName,
     expression: parsed.expression,
     filters: parsed.filters,
     raw: value,
-    // either an element directive, or if/for
-    // #2366 or custom terminal directive
-    def: def || resolveAsset(options, 'directives', dirName)
+    rawName: attrName,
+    def: def
+  }
+  if (attrName) {
+    descriptor.rawName = attrName
+    descriptor.modifiers = parseModifiers(attrName)
+  }
+  if (arg) {
+    descriptor.arg = arg.replace(modifierRE, '')
   }
   // check ref for v-for and router-view
   if (dirName === 'for' || dirName === 'router-view') {

src/directives/public/for.js

@@ -22,6 +22,7 @@ let uid = 0
 const vFor = {
 
   priority: FOR,
+  terminal: true,
 
   params: [
     'track-by',

src/directives/public/if.js

@@ -11,6 +11,7 @@ import {
 export default {
 
   priority: IF,
+  terminal: true,
 
   bind () {
     var el = this.el

test/unit/specs/compiler/compile_spec.js

@@ -249,6 +249,48 @@ describe('Compile', function () {
     expect(args[1]).toBe(el.firstChild)
   })
 
+  it('custom terminal directives', function () {
+    var defTerminal = {
+      terminal: true,
+      priority: Vue.options.directives.if.priority + 1
+    }
+    var options = _.mergeOptions(Vue.options, {
+      directives: { term: defTerminal }
+    })
+    el.innerHTML = '<div v-term:arg1.modifier1.modifier2="foo"></div>'
+    var linker = compile(el, options)
+    linker(vm, el)
+    expect(vm._bindDir.calls.count()).toBe(1)
+    var args = vm._bindDir.calls.argsFor(0)
+    expect(args[0].name).toBe('term')
+    expect(args[0].expression).toBe('foo')
+    expect(args[0].rawName).toBe('v-term:arg1.modifier1.modifier2')
+    expect(args[0].arg).toBe('arg1')
+    expect(args[0].modifiers.modifier1).toBe(true)
+    expect(args[0].modifiers.modifier2).toBe(true)
+    expect(args[0].def).toBe(defTerminal)
+  })
+
+  it('custom terminal directives priority', function () {
+    var defTerminal = {
+      terminal: true,
+      priority: Vue.options.directives.if.priority + 1
+    }
+    var options = _.mergeOptions(Vue.options, {
+      directives: { term: defTerminal }
+    })
+    el.innerHTML = '<div v-term:arg1 v-if="ok"></div>'
+    var linker = compile(el, options)
+    linker(vm, el)
+    expect(vm._bindDir.calls.count()).toBe(1)
+    var args = vm._bindDir.calls.argsFor(0)
+    expect(args[0].name).toBe('term')
+    expect(args[0].expression).toBe('')
+    expect(args[0].rawName).toBe('v-term:arg1')
+    expect(args[0].arg).toBe('arg1')
+    expect(args[0].def).toBe(defTerminal)
+  })
+
   it('custom element components', function () {
     var options = _.mergeOptions(Vue.options, {
       components: {
@@ -627,17 +669,4 @@ describe('Compile', function () {
     expect(el.textContent).toBe('worked!')
     expect(getWarnCount()).toBe(0)
   })
-
-  it('allow custom terminal directive', function () {
-    Vue.mixin({}) // #2366 conflict with custom terminal directive
-    Vue.compiler.terminalDirectives.push('foo')
-    Vue.directive('foo', {})
-
-    new Vue({
-      el: el,
-      template: '<div v-foo></div>'
-    })
-
-    expect(getWarnCount()).toBe(0)
-  })
 })