Use class name as Vue component's name (#76)

* use class name as vue component's name

* add name tests

* fix test error caused by relative path in webpack config

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./test" is not an absolute path!

Author: hjkcai

src/component.ts

@@ -26,7 +26,7 @@ export function componentFactory (
   Component: VueClass,
   options: ComponentOptions<any> = {}
 ): VueClass {
-  options.name = options.name || (Component as any)._componentTag
+  options.name = options.name || (Component as any)._componentTag || (Component as any).name
   // prototype props.
   const proto = Component.prototype
   Object.getOwnPropertyNames(proto).forEach(function (key) {

test/test.ts

@@ -114,6 +114,34 @@ describe('vue-class-component', () => {
     expect(c.b).to.equal(3)
   })
 
+  describe('name', () => {
+    it('via name option', () => {
+      @Component({ name: 'test' })
+      class MyComp extends Vue {}
+
+      const c = new MyComp()
+      expect(c.$options.name).to.equal('test')
+    })
+
+    it('via _componentTag', () => {
+      @Component
+      class MyComp extends Vue {
+        static _componentTag = 'test'
+      }
+
+      const c = new MyComp()
+      expect(c.$options.name).to.equal('test')
+    })
+
+    it('via class name', () => {
+      @Component
+      class MyComp extends Vue {}
+
+      const c = new MyComp()
+      expect(c.$options.name).to.equal('MyComp')
+    })
+  })
+
   it('other options', (done) => {
     let v: number
 

test/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
     './test/test-babel.js'
   ],
   output: {
-    path: './test',
+    path: __dirname,
     filename: 'test.build.js'
   },
   module: {