component syntax type -> is

Author: yyx990803

component.json

@@ -71,6 +71,7 @@
     "src/util/index.js",
     "src/util/lang.js",
     "src/util/merge-option.js",
+    "src/util/misc.js",
     "src/vue.js",
     "src/watcher.js"
   ]

src/util/index.js

@@ -6,25 +6,4 @@ extend(exports, require('./env'))
 extend(exports, require('./dom'))
 extend(exports, require('./filter'))
 extend(exports, require('./debug'))
-
-/**
- * Check if an element is a component, if yes return its
- * component id.
- *
- * @param {Element} el
- * @param {Object} options
- * @return {String|undefined}
- */
-
-exports.checkComponent = function (el, options) {
-  var tag = el.tagName.toLowerCase()
-  if (options.components[tag]) {
-    return tag
-  }
-  // dynamic syntax
-  if (tag === 'component') {
-    var exp = el.getAttribute('type')
-    el.removeAttribute('type')
-    return exp
-  }
-}
+extend(exports, require('./misc'))

src/util/misc.js

@@ -0,0 +1,20 @@
+/**
+ * Check if an element is a component, if yes return its
+ * component id.
+ *
+ * @param {Element} el
+ * @param {Object} options
+ * @return {String|undefined}
+ */
+
+exports.checkComponent = function (el, options) {
+  var tag = el.tagName.toLowerCase()
+  if (tag === 'component') {
+    // dynamic syntax
+    var exp = el.getAttribute('is')
+    el.removeAttribute('is')
+    return exp
+  } else if (options.components[tag]) {
+    return tag
+  }
+}

test/unit/specs/async_component_spec.js

@@ -40,7 +40,7 @@ describe('Async components', function () {
     it('dynamic', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<component type="{{view}}"></component>',
+        template: '<component is="{{view}}"></component>',
         data: {
           view: 'a'
         },
@@ -84,7 +84,7 @@ describe('Async components', function () {
     it('invalidate pending on dynamic switch', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<component type="{{view}}"></component>',
+        template: '<component is="{{view}}"></component>',
         data: {
           view: 'a'
         },
@@ -277,7 +277,7 @@ describe('Async components', function () {
     it('warn when used with dynamic v-repeat', function () {
       var vm = new Vue({
         el: el,
-        template: '<component v-repeat="list" type="{{c}}"></component>',
+        template: '<component v-repeat="list" is="{{c}}"></component>',
         data: {
           list: [1, 2, 3],
           c: 'test'

test/unit/specs/directives/component_spec.js

@@ -87,7 +87,7 @@ if (_.inBrowser) {
     it('dynamic', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<component type="{{view}}" v-attr="view:view"></component>',
+        template: '<component is="{{view}}" v-attr="view:view"></component>',
         data: {
           view: 'a'
         },
@@ -125,7 +125,7 @@ if (_.inBrowser) {
       var spyB = jasmine.createSpy()
       var vm = new Vue({
         el: el,
-        template: '<component type="{{view}}" keep-alive></component>',
+        template: '<component is="{{view}}" keep-alive></component>',
         data: {
           view: 'a'
         },
@@ -252,7 +252,7 @@ if (_.inBrowser) {
         data: {
           view: 'a'
         },
-        template: '<component type="{{view}}" wait-for="ok"></component>',
+        template: '<component is="{{view}}" wait-for="ok"></component>',
         components: {
           a: {
             template: 'AAA'
@@ -282,7 +282,7 @@ if (_.inBrowser) {
         data: {
           view: 'a'
         },
-        template: '<component type="{{view}}" v-transition="test" transition-mode="in-out"></component>',
+        template: '<component is="{{view}}" v-transition="test" transition-mode="in-out"></component>',
         components: {
           a: { template: 'AAA' },
           b: { template: 'BBB' }
@@ -322,7 +322,7 @@ if (_.inBrowser) {
         data: {
           view: 'a'
         },
-        template: '<component type="{{view}}" v-transition="test" transition-mode="out-in"></component>',
+        template: '<component is="{{view}}" v-transition="test" transition-mode="out-in"></component>',
         components: {
           a: { template: 'AAA' },
           b: { template: 'BBB' }
@@ -356,7 +356,7 @@ if (_.inBrowser) {
     it('teardown', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<component type="{{view}}" keep-alive></component>',
+        template: '<component is="{{view}}" keep-alive></component>',
         data: {
           view: 'test'
         },

test/unit/specs/directives/if_spec.js

@@ -116,7 +116,7 @@ if (_.inBrowser) {
           ok: false,
           view: 'a'
         },
-        template: '<component type="{{view}}" v-if="ok"></component>',
+        template: '<component is="{{view}}" v-if="ok"></component>',
         components: {
           a: {
             template: 'AAA'

test/unit/specs/directives/ref_spec.js

@@ -34,7 +34,7 @@ if (_.inBrowser) {
         el: el,
         components: components,
         data: { test: 'test' },
-        template: '<component type="{{test}}" v-ref="test"></component>'
+        template: '<component is="{{test}}" v-ref="test"></component>'
       })
       expect(vm.$.test.$options.id).toBe('test')
       vm.test = 'test2'
@@ -52,7 +52,7 @@ if (_.inBrowser) {
       var vm = new Vue({
         el: el,
         data: { view: 'test1' },
-        template: '<component type="{{view}}"></component>',
+        template: '<component is="{{view}}"></component>',
         components: {
           test1: {
             id: 'test1',

test/unit/specs/directives/repeat_spec.js

@@ -254,7 +254,7 @@ if (_.inBrowser) {
     it('dynamic component type based on instance data', function () {
       var vm = new Vue({
         el: el,
-        template: '<component v-repeat="list" type="view-{{type}}"></component>',
+        template: '<component v-repeat="list" is="view-{{type}}"></component>',
         data: {
           list: [
             { type: 'a' },
@@ -278,7 +278,7 @@ if (_.inBrowser) {
       // #458 meta properties
       vm = new Vue({
         el: el,
-        template: '<component v-repeat="list" type="view-{{$value}}"></component>',
+        template: '<component v-repeat="list" is="view-{{$value}}"></component>',
         data: {
           list: ['a', 'b', 'c']
         },