feat: auto load file when file content changed

package.json

@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
+    "chokidar": "^1.7.0",
     "codemirror": "^5.31.0",
     "electron-window-state": "^4.1.1",
     "markdown-it": "^8.4.0",

src/main/actions.js

@@ -1,11 +1,29 @@
 'use strict'
 
 import fs from 'fs'
+import chokidar from 'chokidar'
 import path from 'path'
 import { dialog, ipcMain, BrowserWindow } from 'electron'
 import createWindow from './createWindow'
 import { EXTENSIONS } from './config'
 
+const watchAndReload = (pathname, win) => {
+  const watcher = chokidar.watch(pathname, {
+    persistent: true
+  })
+  const filename = path.basename(pathname)
+  watcher.on('change', path => {
+    fs.readFile(pathname, 'utf-8', (err, file) => {
+      if (err) return console.log(err)
+      win.webContents.send('AGANI::file-change', {
+        file,
+        filename,
+        pathname
+      })
+    })
+  })
+}
+
 ipcMain.on('AGANI:response-file-save', (e, { markdown, pathname }) => {
   const win = BrowserWindow.fromWebContents(e.sender)
   if (pathname) {
@@ -21,9 +39,9 @@ ipcMain.on('AGANI:response-file-save', (e, { markdown, pathname }) => {
       const filename = path.basename(filePath)
       fs.writeFile(filePath, markdown, 'utf-8', err => {
         if (err) return console.log('save as file failed')
-        win.setTitle(filename)
         e.sender.send('AGANI::set-pathname', { pathname: filePath, filename })
       })
+      watchAndReload(filePath, win)
     }
   }
 })
@@ -36,7 +54,10 @@ export const open = win => {
       extensions: EXTENSIONS
     }]
   })
-  createWindow(filename[0])
+  if (filename && filename[0]) {
+    const newWindow = createWindow(filename[0])
+    watchAndReload(filename[0], newWindow)
+  }
 }
 
 export const newFile = () => {

src/main/createWindow.js

@@ -32,7 +32,6 @@ const createWindow = (pathname, options = {}) => {
     win.show()
 
     if (pathname) {
-      console.log(typeof pathname)
       const filename = path.basename(pathname)
       fs.readFile(path.resolve(pathname), 'utf-8', (err, file) => {
         if (err) return console.log(err)
@@ -41,14 +40,18 @@ const createWindow = (pathname, options = {}) => {
           filename,
           pathname
         })
-
-        win.setTitle(filename)
       })
-    } else {
-      win.setTitle('Untitled')
     }
   })
 
+  win.on('focus', () => {
+    win.webContents.send('AGANI::window-active-status', { status: true })
+  })
+
+  win.on('blur', () => {
+    win.webContents.send('AGANI::window-active-status', { status: false })
+  })
+
   win.on('close', () => { // before closed
     if (windows.has(win.id)) {
       windows.delete(win.id)
@@ -56,6 +59,7 @@ const createWindow = (pathname, options = {}) => {
   })
 
   windows.set(win.id, win)
+  return win
 }
 
 export default createWindow

src/renderer/App.vue

@@ -2,6 +2,7 @@
   <div class="editor-container">
     <title-bar
       :filename="filename"
+      :active="windowActive"
     ></title-bar>
     <editor
       :markdown="markdown"
@@ -21,12 +22,14 @@
       TitleBar
     },
     computed: {
-      ...mapState(['filename', 'markdown'])
+      ...mapState(['filename', 'markdown', 'windowActive'])
     },
     created () {
+      this.$store.dispatch('LINTEN_WIN_STATUS')
       this.$store.dispatch('LISTEN_FOR_SAVE')
       this.$store.dispatch('GET_FILENAME')
       this.$store.dispatch('LISTEN_FOR_FILE_LOAD')
+      this.$store.dispatch('LISTEN_FOR_FILE_CHANGE')
     }
   }
 </script>

src/renderer/bus/index.js

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()

src/renderer/components/Editor.vue

@@ -5,6 +5,7 @@
 
 <script>
   import Aganippe from '../../editor'
+  import bus from '../bus'
 
   export default {
     props: {
@@ -23,12 +24,7 @@
         const ele = this.$refs.editor
         this.editor = new Aganippe(ele)
 
-        const unwatch = this.$watch('markdown', newValue => {
+        bus.$on('file-loaded', this.handleFileLoaded)
-          if (newValue !== '' && this.editor) {
-            this.editor.setMarkdown(newValue)
-            unwatch()
-          }
-        })
 
         this.editor.on('auto-save', markdown => {
           console.log('auto-save')
@@ -36,7 +32,13 @@
         })
       })
     },
-    destroyed () {
+    methods: {
+      handleFileLoaded (file) {
+        this.editor && this.editor.setMarkdown(file)
+      }
+    },
+    beforeDestroy () {
+      bus.$off('file-loaded', this.handleFileLoaded)
       this.editor = null
     }
   }

src/renderer/components/titleBar.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="title-bar active">
+  <div class="title-bar"
+    :class="{'active': active}"
+  >
     <div class="title">
       <img src="../assets/icons/markdown.svg" v-if="filename">
       {{ filename }}
@@ -10,7 +12,8 @@
 <script>
   export default {
     props: {
-      filename: String
+      filename: String,
+      active: Boolean
     }
   }
 </script>
@@ -31,7 +34,7 @@
   }
   .active {
     background: linear-gradient(180deg, #efefef, #ccc);
-    color: #666;
+    color: #333;
   }
   img {
     height: 90%;

src/renderer/store/editor.js

@@ -1,13 +1,17 @@
 import { ipcRenderer } from 'electron'
-
+import bus from '../bus'
 const state = {
   filename: 'Untitled - unsaved',
   pathname: '',
   isSaved: false,
-  markdown: ''
+  markdown: '',
+  windowActive: true
 }
 
 const mutations = {
+  SET_WIN_STATUS (state, status) {
+    state.windowActive = status
+  },
   SET_FILENAME (state, filename) {
     state.filename = filename
   },
@@ -23,6 +27,12 @@ const mutations = {
 }
 
 const actions = {
+  LINTEN_WIN_STATUS ({ commit }) {
+    ipcRenderer.on('AGANI::window-active-status', (e, { status }) => {
+      console.log(status)
+      commit('SET_WIN_STATUS', status)
+    })
+  },
   LISTEN_FOR_SAVE ({ commit, state }) {
     ipcRenderer.on('AGANI::ask-file-save', () => {
       const { pathname, markdown } = state
@@ -42,6 +52,19 @@ const actions = {
       commit('SET_PATHNAME', pathname)
       commit('SET_MARKDOWN', file)
       commit('SET_STATUS', true)
+      bus.$emit('file-loaded', file)
+    })
+  },
+  LISTEN_FOR_FILE_CHANGE ({ commit, state }) {
+    ipcRenderer.on('AGANI::file-change', (e, { file, filename, pathname }) => {
+      const { windowActive } = state
+      commit('SET_FILENAME', filename)
+      commit('SET_PATHNAME', pathname)
+      commit('SET_MARKDOWN', file)
+      commit('SET_STATUS', true)
+      if (!windowActive) {
+        bus.$emit('file-loaded', file)
+      }
     })
   },
   EDITE_FILE ({ commit }) {