support "is" attribute on normal elements

Author: yyx990803

src/compiler/compile.js

@@ -284,7 +284,7 @@ function compileElement (el, options) {
   }
   // check component
   if (!linkFn) {
-    linkFn = checkComponent(el, options)
+    linkFn = checkComponent(el, options, hasAttrs)
   }
   // normal directives
   if (!linkFn && hasAttrs) {

src/compiler/transclude.js

@@ -81,15 +81,11 @@ function transcludeTemplate (el, options) {
         // non-element template
         replacer.nodeType !== 1 ||
         // single nested component
-        tag === 'component' ||
         _.resolveAsset(options, 'components', tag) ||
-        replacer.hasAttribute(config.prefix + 'component') ||
         // element directive
         _.resolveAsset(options, 'elementDirectives', tag) ||
-        // repeat block
-        replacer.hasAttribute(config.prefix + 'repeat') ||
-        // for block
-        replacer.hasAttribute(config.prefix + 'for')
+        // attribue based fragment cases
+        isFragment(replacer)
       ) {
         return frag
       } else {
@@ -145,3 +141,27 @@ function mergeAttrs (from, to) {
     }
   }
 }
+
+/**
+ * Check if a replacer element needs to force the instance
+ * into fragment mode.
+ *
+ * @param {Element} el
+ * @return {Boolean}
+ */
+
+function isFragment (el) {
+  return el.hasAttributes() && (
+    // alternative component syntax
+    el.hasAttribute('is') ||
+    el.hasAttribute(':is') ||
+    el.hasAttribute('bind-is') ||
+    el.hasAttribute(config.prefix + 'component') ||
+    // repeat block
+    el.hasAttribute(config.prefix + 'repeat') ||
+    // for block
+    el.hasAttribute(config.prefix + 'for') ||
+    // if block
+    el.hasAttribute(config.prefix + 'if')
+  )
+}

src/deprecations.js

@@ -226,6 +226,12 @@ if (process.env.NODE_ENV !== 'production') {
         'The "prefix" global config will be deprecated in 1.0.0. All directives ' +
         'will consistently use the v- or v. prefixes.'
       )
+    },
+
+    V_COMPONENT: function () {
+      warn(
+        'v-component will be deprecated in 1.0.0. Use "is" attribute instead.'
+      )
     }
 
   }

src/directives/repeat.js

@@ -108,7 +108,7 @@ module.exports = {
   checkComponent: function () {
     this.componentState = UNRESOLVED
     var options = this.vm.$options
-    var id = _.checkComponent(this.el, options)
+    var id = _.checkComponent(this.el, options, this.el.hasAttributes())
     if (!id) {
       // default constructor
       this.Component = _.Vue

src/util/component.js

@@ -10,43 +10,64 @@ var _ = require('./index')
  */
 
 exports.commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/
-exports.checkComponent = function (el, options) {
+exports.checkComponent = function (el, options, hasAttrs) {
   var tag = el.tagName.toLowerCase()
-  if (tag === 'component') {
-    // dynamic syntax
-    var exp = el.getAttribute('is')
-    if (exp != null) {
-      if (process.env.NODE_ENV !== 'production' && /{{.*}}/.test(exp)) {
-        _.deprecation.BIND_IS()
-      }
-      el.removeAttribute('is')
-    } else {
-      exp = _.getBindAttr(el, 'is')
-      if (exp != null) {
-        // leverage literal dynamic for now.
-        // TODO: make this cleaner
-        exp = '{{' + exp + '}}'
-      }
-    }
-    return exp
-  } else if (!exports.commonTagRE.test(tag)) {
+  if (!exports.commonTagRE.test(tag) && tag !== 'component') {
     if (_.resolveAsset(options, 'components', tag)) {
+      // custom element component
       return tag
-    } else if (process.env.NODE_ENV !== 'production') {
-      if (tag.indexOf('-') > -1 ||
-          /HTMLUnknownElement/.test(Object.prototype.toString.call(el))) {
-        _.warn(
-          'Unknown custom element: <' + tag + '> - did you ' +
-          'register the component correctly?'
-        )
+    } else {
+      var exp = hasAttrs && checkComponentAttribute(el)
+      if (exp) return exp
+      if (process.env.NODE_ENV !== 'production') {
+        if (tag.indexOf('-') > -1 ||
+            /HTMLUnknownElement/.test(Object.prototype.toString.call(el))) {
+          _.warn(
+            'Unknown custom element: <' + tag + '> - did you ' +
+            'register the component correctly?'
+          )
+        }
       }
     }
+  } else if (hasAttrs) {
+    return checkComponentAttribute(el)
   }
+}
+
+/**
+ * Check possible component denoting attributes, e.g.
+ * is, bind-is and v-component.
+ *
+ * @param {Elemnent} el
+ * @return {String|null}
+ */
+
+function checkComponentAttribute (el) {
+  var exp
   /* eslint-disable no-cond-assign */
-  if (tag = _.attr(el, 'component')) {
+  if (exp = _.attr(el, 'component')) {
   /* eslint-enable no-cond-assign */
-    return tag
+    if (process.env.NODE_ENV !== 'production') {
+      _.deprecation.V_COMPONENT()
+    }
+    return exp
+  }
+  // dynamic syntax
+  exp = el.getAttribute('is')
+  if (exp != null) {
+    if (process.env.NODE_ENV !== 'production' && /{{.*}}/.test(exp)) {
+      _.deprecation.BIND_IS()
+    }
+    el.removeAttribute('is')
+  } else {
+    exp = _.getBindAttr(el, 'is')
+    if (exp != null) {
+      // leverage literal dynamic for now.
+      // TODO: make this cleaner
+      exp = '{{' + exp + '}}'
+    }
   }
+  return exp
 }
 
 /**

test/unit/specs/compiler/transclude_spec.js

@@ -61,6 +61,11 @@ if (_.inBrowser) {
       res = transclude(el, options)
       expect(res instanceof DocumentFragment).toBe(true)
 
+      // single component: is
+      options.template = '<div is="test"></div>'
+      res = transclude(el, options)
+      expect(res instanceof DocumentFragment).toBe(true)
+
       // single component: custom element
       options.template = '<test></test>'
       options.components = { test: {}}

test/unit/specs/directives/component_spec.js

@@ -65,6 +65,23 @@ if (_.inBrowser) {
       expect(_.warn).not.toHaveBeenCalled()
     })
 
+    it('allow "is" attribute on normal elements', function () {
+      var vm = new Vue({
+        el: el,
+        template: '<table><tbody><tr is="test"></tr></tbody></table>',
+        components: {
+          test: {
+            data: function () {
+              return { a: 123 }
+            },
+            template: '<td>{{a}}</td>'
+          }
+        }
+      })
+      expect(el.innerHTML).toBe(vm.$options.template.replace(/<tr.*\/tr>/, '<tr><td>123</td></tr>'))
+      expect(_.warn).not.toHaveBeenCalled()
+    })
+
     it('inline-template', function () {
       new Vue({
         el: el,

test/unit/specs/util/component_spec.js

@@ -1,15 +1,15 @@
 var _ = require('../../../../src/util')
 
-describe('Util - Misc', function () {
+describe('Util - Component', function () {
 
   it('checkComponent', function () {
     var el = document.createElement('component')
     // <component> with no is attr
     var res = _.checkComponent(el)
-    expect(res).toBe(null)
+    expect(res).toBeUndefined()
     // <component is="...">
     el.setAttribute('is', '{{what}}')
-    res = _.checkComponent(el)
+    res = _.checkComponent(el, {}, true)
     expect(res).toBe('{{what}}')
     // custom element, not defined
     el = document.createElement('test')