remove v-component

Author: yyx990803

examples/svg/index.html

@@ -10,9 +10,11 @@
 
     <!-- template for the polygraph component. -->
     <script type="text/x-template" id="polygraph-template">
-      <polygon v-attr="points:points"></polygon>
-      <circle cx="100" cy="100" r="80"></circle>
-      <text v-repeat="stats" v-component="axis-label"></text>
+      <g>
+        <polygon v-attr="points:points"></polygon>
+        <circle cx="100" cy="100" r="80"></circle>
+        <axis-label v-repeat="stats"></axis-label>
+      </g>
     </script>
 
     <!-- template for the axis label component. -->
@@ -24,7 +26,7 @@
     <div id="demo">
       <!-- Use the component -->
       <svg width="200" height="200">
-        <g v-component="polygraph" stats="{{stats}}"></g>
+        <polygraph stats="{{stats}}"></polygraph>
       </svg>
       <!-- controls -->
       <div v-repeat="stats">

examples/svg/svg.js

@@ -12,6 +12,7 @@ var stats = [
 Vue.component('polygraph', {
   props: ['stats'],
   template: '#polygraph-template',
+  replace: true,
   computed: {
     // a computed property for the polygon's points
     points: function () {

examples/tree/index.html

@@ -26,28 +26,28 @@
 
     <!-- item template -->
     <script type="text/x-template" id="item-template">
-      <div v-class="bold: isFolder"
-        v-on="click: toggle, dblclick: changeType">
-        {{model.name}}
-        <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
-      </div>
-      <ul v-show="open" v-if="isFolder">
-        <li class="item"
-          v-repeat="model: model.children"
-          v-component="item">
-        </li>
-        <li v-on="click: addChild">+</li>
-      </ul>
+      <li>
+        <div v-class="bold: isFolder"
+          v-on="click: toggle, dblclick: changeType">
+          {{model.name}}
+          <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+        </div>
+        <ul v-show="open" v-if="isFolder">
+          <item class="item"
+            v-repeat="model: model.children">
+          </item>
+          <li v-on="click: addChild">+</li>
+        </ul>
+      </li>
     </script>
 
     <p>(You can double click on an item to turn it into a folder.)</p>
 
     <!-- the demo root element -->
     <ul id="demo">
-      <li class="item"
-        v-component="item"
+      <item class="item"
         model="{{treeData}}">
-      </li>
+      </item>
     </ul>
 
     <!-- demo code -->

examples/tree/tree.js

@@ -32,6 +32,7 @@ var data = {
 Vue.component('item', {
   props: ['model'],
   template: '#item-template',
+  replace: true,
   data: function () {
     return {
       open: false

src/compiler/compile.js

@@ -6,7 +6,7 @@ var templateParser = require('../parsers/template')
 
 // internal directives
 var propDef = require('../directives/prop')
-// var componentDef = require('../directives/component')
+var componentDef = require('../directives/component')
 
 module.exports = compile
 
@@ -192,24 +192,19 @@ function compileElement (el, options) {
     }
     return compile(el, options._parent.$options, true, true)
   }
-  var linkFn, tag, component
-  // check custom element component, but only on non-root
-  if (!el.__vue__) {
-    tag = el.tagName.toLowerCase()
-    component =
-      tag.indexOf('-') > 0 &&
-      options.components[tag]
-    if (component) {
-      el.setAttribute(config.prefix + 'component', tag)
-    }
-  }
-  if (component || el.hasAttributes()) {
-    // check terminal direcitves
+  var linkFn
+  var hasAttrs = el.hasAttributes()
+  // check terminal direcitves (repeat & if)
+  if (hasAttrs) {
     linkFn = checkTerminalDirectives(el, options)
-    // if not terminal, build normal link function
-    if (!linkFn) {
-      linkFn = compileDirectives(el, options)
-    }
+  }
+  // check component
+  if (!linkFn) {
+    linkFn = checkComponent(el, options)
+  }
+  // normal directives
+  if (!linkFn && hasAttrs) {
+    linkFn = compileDirectives(el, options)
   }
   // if the element is a textarea, we need to interpolate
   // its content on initial render.
@@ -449,6 +444,28 @@ function makePropsLinkFn (props) {
   }
 }
 
+/**
+ * Check if an element is a component. If yes, return
+ * a component link function.
+ *
+ * @param {Element} el
+ * @param {Object} options
+ * @return {Function|undefined}
+ */
+
+function checkComponent (el, options) {
+  var componentId = _.checkComponent(el, options)
+  if (componentId) {
+    var componentLinkFn = function (vm, el, host) {
+      vm._bindDir('component', el, {
+        expression: componentId
+      }, componentDef, host)
+    }
+    componentLinkFn.terminal = true
+    return componentLinkFn
+  }
+}
+
 /**
  * Check an element for terminal directives in fixed order.
  * If it finds one, return a terminal link function.

src/compiler/transclude.js

@@ -73,18 +73,19 @@ function transcludeTemplate (el, options) {
     _.warn('Invalid template option: ' + template)
   } else {
     var rawContent = options._content || _.extractContent(el)
+    var replacer = frag.firstChild
     if (options.replace) {
       if (
         frag.childNodes.length > 1 ||
+        replacer.nodeType !== 1 ||
         // when root node has v-repeat, the instance ends up
         // having multiple top-level nodes, thus becoming a
         // block instance. (#835)
-        frag.firstChild.hasAttribute(config.prefix + 'repeat')
+        replacer.hasAttribute(config.prefix + 'repeat')
       ) {
         transcludeContent(frag, rawContent)
         return frag
       } else {
-        var replacer = frag.firstChild
         options._replacerAttrs = extractAttrs(replacer)
         mergeAttrs(el, replacer)
         transcludeContent(replacer, rawContent)
@@ -199,7 +200,6 @@ function insertContentAt (outlet, contents) {
 
 function extractAttrs (el) {
   var attrs = el.attributes
-  if (!attrs) return
   var res = {}
   var i = attrs.length
   while (i--) {

src/config.js

@@ -71,8 +71,7 @@ module.exports = {
 
   _terminalDirectives: [
     'repeat',
-    'if',
-    'component'
+    'if'
   ]
 
 }

src/directives/index.js

@@ -23,5 +23,5 @@ exports.events     = require('./events')
 
 // internal directives that should not be used directly
 // but we still want to expose them for advanced usage.
-exports.component = require('./component')
+exports._component = require('./component')
 exports._prop      = require('./prop')

src/directives/repeat.js

@@ -92,8 +92,8 @@ module.exports = {
 
   checkComponent: function () {
     this.componentState = UNRESOLVED
-    var id = _.attr(this.el, 'component')
     var options = this.vm.$options
+    var id = _.checkComponent(this.el, options)
     if (!id) {
       // default constructor
       this.Ctor = _.Vue

src/util/index.js

@@ -5,4 +5,26 @@ extend(exports, lang)
 extend(exports, require('./env'))
 extend(exports, require('./dom'))
 extend(exports, require('./filter'))
-extend(exports, require('./debug'))
+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
+  }
+}

test/unit/specs/async_component_spec.js

@@ -19,7 +19,7 @@ describe('Async components', function () {
     it('normal', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-component="test"></div>',
+        template: '<test></test>',
         components: {
           test: function (resolve) {
             setTimeout(function () {
@@ -40,7 +40,7 @@ describe('Async components', function () {
     it('dynamic', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-component="{{view}}"></div>',
+        template: '<component type="{{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: '<div v-component="{{view}}"></div>',
+        template: '<component type="{{view}}"></component>',
         data: {
           view: 'a'
         },
@@ -124,12 +124,12 @@ describe('Async components', function () {
     it('invalidate pending on teardown', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-component="a"></div>',
+        template: '<test></test>',
         data: {
           view: 'a'
         },
         components: {
-          a: function (resolve) {
+          test: function (resolve) {
             setTimeout(function () {
               resolve({
                 template: 'A'
@@ -157,10 +157,10 @@ describe('Async components', function () {
       var vm = new Vue({
         el: el,
         template:
-          '<div v-component="a"></div>' +
-          '<div v-component="a"></div>',
+          '<test></test>' +
+          '<test></test>',
         components: {
-          a: factory
+          test: factory
         }
       })
       function factory (resolve) {
@@ -192,7 +192,7 @@ describe('Async components', function () {
     it('normal', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-repeat="list" v-component="test"></div>',
+        template: '<test v-repeat="list"></test>',
         data: {
           list: [1, 2, 3]
         },
@@ -216,7 +216,7 @@ describe('Async components', function () {
     it('only resolve once', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-repeat="list" v-component="test"></div>',
+        template: '<test v-repeat="list"></test>',
         data: {
           list: [1, 2, 3]
         },
@@ -250,7 +250,7 @@ describe('Async components', function () {
     it('invalidate on teardown', function (done) {
       var vm = new Vue({
         el: el,
-        template: '<div v-repeat="list" v-component="test"></div>',
+        template: '<test v-repeat="list"></test>',
         data: {
           list: [1, 2, 3]
         },
@@ -277,7 +277,7 @@ describe('Async components', function () {
     it('warn when used with dynamic v-repeat', function () {
       var vm = new Vue({
         el: el,
-        template: '<div v-repeat="list" v-component="{{c}}"></div>',
+        template: '<component v-repeat="list" type="{{c}}"></component>',
         data: {
           list: [1, 2, 3],
           c: 'test'