perf: only send updated or removed file on that case (#76)

package.json

@@ -71,6 +71,7 @@
     "@babel/types": "^7.0.0",
     "eslint": "^5.3.0",
     "hash-sum": "^1.0.2",
+    "lodash.debounce": "^4.0.8",
     "postcss": "^7.0.2",
     "postcss-safe-parser": "^4.0.1",
     "postcss-selector-parser": "^5.0.0-rc.3",
@@ -83,6 +84,7 @@
     "@types/eslint-scope": "^3.7.0",
     "@types/eslint-visitor-keys": "^1.0.0",
     "@types/jest": "^23.3.1",
+    "@types/lodash.debounce": "^4.0.4",
     "@types/ws": "^6.0.0",
     "@vue/cli-plugin-eslint": "^3.0.1",
     "@vue/cli-plugin-typescript": "^3.0.1",

src/repositories/vue-file-repository.ts

@@ -1,3 +1,4 @@
+import assert from 'assert'
 import { EventEmitter } from 'events'
 import { VueFile, resolveImportPath, parseVueFile } from '../parser/vue-file'
 import { Modifiers, modify } from '../parser/modifier'
@@ -139,7 +140,7 @@ export class VueFileRepository extends EventEmitter {
     this.save(uri, updated)
   }
 
-  on(event: 'update', fn: () => void): this {
+  on(event: 'update', fn: (vueFile: VueFile) => void): this {
     return super.on(event, fn)
   }
 
@@ -153,7 +154,11 @@ export class VueFileRepository extends EventEmitter {
 
   private save(uri: string, code: string): void {
     this.set(uri, code)
-    this.emit('update')
+
+    const vueFile = this.get(uri)!
+    assert(vueFile, `VueFile object '${uri}' not found after saving it`)
+    this.emit('update', vueFile)
+
     // We don't wait until the file is saved
     this.fs.writeFile(uri, code)
   }

src/server/subject-type.ts

@@ -7,7 +7,13 @@ export interface SubjectType {
   initSharedStyle: {
     style: string
   }
-  changeDocument: {
+  changeActiveDocument: {
+    uri: string
+  }
+  saveDocument: {
+    vueFile: VueFilePayload
+  }
+  removeDocument: {
     uri: string
   }
 }

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

@@ -57,8 +57,16 @@ export class ProjectActions extends Actions<
         this.mutations.setSharedStyle(style)
       },
 
-      changeDocument: ({ uri }) => {
-        this.mutations.changeDocument(uri)
+      changeActiveDocument: ({ uri }) => {
+        this.mutations.changeActiveDocument(uri)
+      },
+
+      saveDocument: ({ vueFile }) => {
+        this.mutations.setDocument(vueFile)
+      },
+
+      removeDocument: ({ uri }) => {
+        this.mutations.removeDocument(uri)
       }
     })
 
@@ -67,7 +75,7 @@ export class ProjectActions extends Actions<
         initVueFiles(vueFiles)
         this.mutations.setSharedStyle(sharedStyle)
         if (activeUri) {
-          this.mutations.changeDocument(activeUri)
+          this.mutations.changeActiveDocument(activeUri)
         }
       })
     })

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

@@ -13,7 +13,15 @@ export class ProjectMutations extends Mutations<ProjectState>() {
     this.state.documents = vueFiles
   }
 
-  changeDocument(uri: string): void {
+  setDocument(vueFile: VueFilePayload): void {
+    Vue.set(this.state.documents, vueFile.uri, vueFile)
+  }
+
+  removeDocument(uri: string): void {
+    Vue.delete(this.state.documents, uri)
+  }
+
+  changeActiveDocument(uri: string): void {
     const { state } = this
     if (state.currentUri !== uri) {
       state.currentUri = uri

src/vue-designer.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode'
 import * as path from 'path'
 import { AddressInfo } from 'net'
+import debounce from 'lodash.debounce'
 import { startStaticServer, startWebSocketServer } from './server/main'
 import { AssetResolver } from './asset-resolver'
 import { Watcher } from './vscode/watcher'
@@ -116,33 +117,30 @@ function connectToSubject(
     return _vueFileToPayload(vueFile, assetResolver)
   }
 
-  vueFiles.on('update', () => {
-    // TODO: change this notification more clean and optimized way
-    subject.notify('initProject', { vueFiles: vueFiles.map(vueFileToPayload) })
-  })
+  const notifySaveVueFileByUri = async (uri: vscode.Uri) => {
+    const vueFile = await vueFiles.read(uri.toString())
+    subject.notify('saveDocument', {
+      vueFile: vueFileToPayload(vueFile)
+    })
+  }
 
-  watcher.onDidEditComponent(async uri => {
-    await vueFiles.read(uri.toString())
-    // TODO: change this notification more clean and optimized way
-    subject.notify('initProject', { vueFiles: vueFiles.map(vueFileToPayload) })
+  vueFiles.on('update', vueFile => {
+    subject.notify('saveDocument', {
+      vueFile: vueFileToPayload(vueFile)
+    })
   })
 
-  watcher.onDidCreateComponent(async uri => {
-    await vueFiles.read(uri.toString())
-    // TODO: change this notification more clean and optimized way
-    subject.notify('initProject', { vueFiles: vueFiles.map(vueFileToPayload) })
-  })
+  // Since editing component will be happened in high frequency
+  // we need to debounce the notification to avoid high load.
+  watcher.onDidEditComponent(debounce(notifySaveVueFileByUri, 200))
 
-  watcher.onDidChangeComponent(async uri => {
-    await vueFiles.read(uri.toString())
-    // TODO: change this notification more clean and optimized way
-    subject.notify('initProject', { vueFiles: vueFiles.map(vueFileToPayload) })
-  })
+  watcher.onDidCreateComponent(notifySaveVueFileByUri)
+  watcher.onDidChangeComponent(notifySaveVueFileByUri)
 
   watcher.onDidDeleteComponent(uri => {
-    vueFiles.delete(uri.toString())
-    // TODO: change this notification more clean and optimized way
-    subject.notify('initProject', { vueFiles: vueFiles.map(vueFileToPayload) })
+    const uriStr = uri.toString()
+    vueFiles.delete(uriStr)
+    subject.notify('removeDocument', { uri: uriStr })
   })
 
   watcher.onDidChangeSharedStyle(async () => {
@@ -153,7 +151,7 @@ function connectToSubject(
 
   watcher.onDidSwitchComponent(uri => {
     editor.activeDocumentUrl = uri.toString()
-    subject.notify('changeDocument', { uri: editor.activeDocumentUrl })
+    subject.notify('changeActiveDocument', { uri: editor.activeDocumentUrl })
   })
 }
 

tests/helpers/template.ts

@@ -25,7 +25,7 @@ export function render(
 ): Wrapper<VueComponent> {
   const store = createStore(module().child('project', project))
 
-  store.mutations.project.changeDocument('file:///Test.vue')
+  store.mutations.project.changeActiveDocument('file:///Test.vue')
   store.mutations.project.refreshScope({
     uri: 'file:///Test.vue',
     props,

yarn.lock

@@ -182,6 +182,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.1.tgz#fcaa655260285b8061850789f8268c51a4ec8ee1"
   integrity sha512-NVQEMviDWjuen3UW+mU1J6fZ0WhOfG1yRce/2OTcbaz+fgmTw2cahx6N2wh0Yl+a+hg2UZj/oElZmtULWyGIsA==
 
+"@types/lodash.debounce@^4.0.4":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.4.tgz#a3d082628ef1bb1964c2b6a2d4f45acae7209e7a"
+  integrity sha512-W3oJCQXSCmOE9uIqOdrUWT08YNSXyqXed8JhxJKCe4SH40yxz5HSdtStN1ZQYkvT7S/tae8PA34Y0TO5C7Z8Ng==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.118"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.118.tgz#247bab39bfcc6d910d4927c6e06cbc70ec376f27"
+  integrity sha512-iiJbKLZbhSa6FYRip/9ZDX6HXhayXLDGY2Fqws9cOkEQ6XeKfaxB0sC541mowZJueYyMnVUmmG+al5/4fCDrgw==
+
 "@types/node@*", "@types/node@^10.11.7":
   version "10.12.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.10.tgz#4fa76e6598b7de3f0cb6ec3abacc4f59e5b3a2ce"