fix: avoid to show empty preview when changing to active editor of no…

…n-vue file (#42)

* fix: avoid to show empty preview when changing to active editor of non-vue file

* feat: display current component name in preview

src/message/bus.ts

@@ -1,3 +1,4 @@
+import * as path from 'path'
 import { MessageBus } from 'meck'
 import { Events, Commands } from './types'
 import {
@@ -19,6 +20,10 @@ import {
 import { AssetResolver } from '../asset-resolver'
 import { mapValues } from '../utils'
 
+function isInterested(uri: string): boolean {
+  return path.extname(uri) === '.vue'
+}
+
 export function observeServerEvents(
   bus: MessageBus<Events, Commands>,
   assetResolver: AssetResolver,
@@ -117,8 +122,10 @@ export function observeServerEvents(
   })
 
   bus.on('changeActiveEditor', uri => {
-    lastActiveUri = uri
-    bus.emit('changeDocument', uri)
+    if (isInterested(uri)) {
+      lastActiveUri = uri
+      bus.emit('changeDocument', uri)
+    }
   })
 
   bus.on('updateEditor', ({ uri, code }) => {

src/view/components/PageMain.vue

@@ -31,6 +31,10 @@
     </div>
 
     <div v-if="document" class="information-pane" :class="{ open: openPane }">
+      <p class="information-pane-title">
+        {{ documentName }}
+      </p>
+
       <div class="information-pane-scroller">
         <div
           v-if="selectedPath.length > 0"
@@ -123,6 +127,7 @@ export default Vue.extend({
     ...projectMapper.mapGetters({
       document: 'currentDocument',
       scope: 'currentScope',
+      documentName: 'currentDocumentName',
       renderingDocument: 'currentRenderingDocument',
       scopedDocuments: 'scopedDocuments'
     }),
@@ -194,10 +199,16 @@ export default Vue.extend({
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   transform: translateX(100%);
   transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
+}
 
-  &.open {
-    transform: translateX(0);
-  }
+.information-pane.open {
+  transform: translateX(0);
+}
+
+.information-pane-title {
+  margin: 0;
+  padding: 13px 15px 0;
+  font-size: rem(20);
 }
 
 .information-pane-scroller {

src/view/store/modules/project/project-getters.ts

@@ -42,6 +42,12 @@ export class ProjectGetters extends Getters<ProjectState>() {
     return state.documents[state.currentUri]
   }
 
+  get currentDocumentName(): string | undefined {
+    return this.currentRenderingDocument
+      ? this.currentRenderingDocument.displayName
+      : undefined
+  }
+
   get currentScope(): DocumentScope | undefined {
     const { state } = this
     if (!state.currentUri) {