automatically infer component display name from __file injected by vue-loader

yyx990803 · yyx990803 · commit b3787ea00a0e · 2017-01-27T11:48:59.000-05:00
diff --git a/shells/dev/target/Counter.vue b/shells/dev/target/Counter.vue
@@ -10,7 +10,6 @@
 import { mapState } from 'vuex'
 
 export default {
-  name: 'Counter',
   created () {
     // simulate firebase binding
     this.$firebaseRefs = {
diff --git a/shells/dev/target/EventChild.vue b/shells/dev/target/EventChild.vue
@@ -8,7 +8,6 @@
 
 <script>
 export default {
-  name: 'EventChild',
   methods: {
     emitEvent () {
       let data = {
@@ -25,12 +24,12 @@ export default {
     emitEvent2 () {
       let complexData = {
         componentName: 'EventChild',
-        string: 'Lorem ipsum', 
-        complex: { 
-          string: 'Lorem ipsum', 
-          object: { 
-            number: 23, 
-            boolean: true, 
+        string: 'Lorem ipsum',
+        complex: {
+          string: 'Lorem ipsum',
+          object: {
+            number: 23,
+            boolean: true,
             array: [1,2,3,4,5]
           }
         }
@@ -39,4 +38,4 @@ export default {
     }
   }
 }
-</script>
+</script>
diff --git a/shells/dev/target/EventChild1.vue b/shells/dev/target/EventChild1.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  name: 'EventChild1',
   methods: {
     emitLogEvent () {
       this.$emit('log')
diff --git a/shells/dev/target/EventChildCond.vue b/shells/dev/target/EventChildCond.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  name: 'EventChildCond',
   methods: {
     emitLogEvent () {
       let data = {
diff --git a/shells/dev/target/Events.vue b/shells/dev/target/Events.vue
@@ -13,8 +13,7 @@ import EventChild from './EventChild.vue'
 import EventChild1 from './EventChild1.vue'
 import EventChildCond from './EventChildCond.vue'
 export default {
-  name: 'Event',
-  components: { 
+  components: {
     EventChild,
     EventChild1,
     EventChildCond
diff --git a/shells/dev/target/Other.vue b/shells/dev/target/Other.vue
@@ -7,7 +7,6 @@
 
 <script>
 export default {
-  name: 'Other',
   props: ['id'],
   data () {
     let a = { c: function () {} }
diff --git a/shells/dev/target/Target.vue b/shells/dev/target/Target.vue
@@ -11,7 +11,6 @@
 <script>
 import Other from './Other.vue'
 export default {
-  name: 'Target',
   components: { Other },
   props: {
     msg: String,
diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
@@ -3,7 +3,7 @@ import store from './store'
 import Target from './Target.vue'
 import Other from './Other.vue'
 import Counter from './Counter.vue'
-import Event from './Event.vue'
+import Events from './Events.vue'
 
 let items = []
 for (var i = 0; i < 100; i++) {
@@ -20,7 +20,7 @@ new Vue({
       h(Counter),
       h(Target, {props:{msg:'hi'}}),
       h(Other),
-      h(Event)
+      h(Events)
     ])
   },
   data: {
diff --git a/src/backend/index.js b/src/backend/index.js
@@ -299,11 +299,16 @@ function getInstanceDetails (id) {
 
 export function getInstanceName (instance) {
   const name = instance.$options.name || instance.$options._componentTag
-  return name
-    ? classify(name)
-    : instance.$root === instance
-      ? 'Root'
-      : 'Anonymous Component'
+  if (name) {
+    return classify(name)
+  }
+  const file = instance.$options.__file // injected by vue-loader
+  if (file) {
+    return classify(require('path').basename(file).replace(/\.vue$/, ''))
+  }
+  return instance.$root === instance
+    ? 'Root'
+    : 'Anonymous Component'
 }
 
 /**
