improve component constructor console output

Author: yyx990803

src/api/global.js

@@ -25,16 +25,15 @@ var cid = 1
  */
 
 exports.extend = function (extendOptions) {
+  extendOptions = extendOptions || {}
   var Super = this
-  var Sub = function (instanceOptions) {
-    _.Vue.call(this, instanceOptions)
-  }
+  var Sub = createClass(extendOptions.id || 'VueComponent')
   Sub.prototype = Object.create(Super.prototype)
   Sub.prototype.constructor = Sub
   Sub.cid = cid++
   Sub.options = mergeOptions(
     Super.options,
-    extendOptions || {}
+    extendOptions
   )
   Sub['super'] = Super
   // allow further extension
@@ -45,6 +44,23 @@ exports.extend = function (extendOptions) {
   return Sub
 }
 
+/**
+ * A function that returns a sub-class constructor with the
+ * given name. This gives us much nicer output when
+ * logging instances in the console.
+ *
+ * @param {String} name
+ * @return {Function}
+ */
+
+function createClass (name) {
+  return new Function(
+    'Vue',
+    'return function ' + _.camelize(name) +
+    ' (options) { Vue.call(this, options) }'
+  )(_.Vue)
+}
+
 /**
  * Plugin system
  *
@@ -107,6 +123,7 @@ function createAssetRegisters (Constructor) {
       return this.options.components[id]
     } else {
       if (_.isPlainObject(definition)) {
+        definition.id = id
         definition = _.Vue.extend(definition)
       }
       this.options.components[id] = definition

src/util/lang.js

@@ -56,6 +56,20 @@ exports.stripQuotes = function (str) {
     : false
 }
 
+/**
+ * Camelize a hyphen-delmited string.
+ *
+ * @param {String} str
+ * @return {String}
+ */
+
+var camelRE = /(?:^|[-_])(\w)/g
+exports.camelize = function (str) {
+  return str.replace (camelRE, function (_, c) {
+    return c ? c.toUpperCase () : '';
+  })
+}
+
 /**
  * Simple bind, faster than native
  *

src/util/merge-option.js

@@ -183,6 +183,7 @@ function guardComponents (components) {
     for (var key in components) {
       def = components[key]
       if (_.isPlainObject(def)) {
+        def.id = key
         components[key] = _.Vue.extend(def)
       }
     }

test/unit/specs/api/global_spec.js

@@ -12,12 +12,14 @@ describe('Global API', function () {
 
   it('extend', function () {
     var Test = Vue.extend({
+      id: 'test',
       a: 1,
       b: 2
     })
     expect(Test.options.a).toBe(1)
     expect(Test.options.b).toBe(2)
     expect(Test.super).toBe(Vue)
+    expect(Test.name).toBe('Test')
     var t = new Test({
       a: 2
     })
@@ -81,6 +83,7 @@ describe('Global API', function () {
       expect(typeof component).toBe('function')
       expect(component.super).toBe(Vue)
       expect(component.options.a).toBe(1)
+      expect(component.options.id).toBe('test')
       expect(Test.component('test')).toBe(component)
       // already extended
       Test.component('test2', component)

test/unit/specs/util/merge-option_spec.js

@@ -141,6 +141,7 @@ describe('Util - Option merging', function () {
       }
     })
     expect(typeof res.components.a).toBe('function')
+    expect(res.components.a.options.id).toBe('a')
     expect(res.components.a.super).toBe(Vue)
   })