added web worker to calculate diffs

[ci skip]

5 files changed, 79 insertions, 47 deletions

diff --git a/app/assets/javascripts/repo/lib/diff/controller.js b/app/assets/javascripts/repo/lib/diff/controller.js
index 9b6c164a81c..cd1a2025f17 100644
--- a/app/assets/javascripts/repo/lib/diff/controller.js
+++ b/app/assets/javascripts/repo/lib/diff/controller.js
@@ -1,6 +1,5 @@
 /* global monaco */
-import DirtyDiffWorker from './diff';
-console.log(DirtyDiffWorker);
+import DirtyDiffWorker from 'worker-loader!./worker.diff';
 import Disposable from '../common/disposable';
 
 export const getDiffChangeType = (change) => {
@@ -34,8 +33,9 @@ export default class DirtyDiffController {
     this.editorSimpleWorker = null;
     this.modelManager = modelManager;
     this.decorationsController = decorationsController;
-    console.log(DirtyDiffWorker);
-    // this.dirtyDiffWorker = new DirtyDiffWorker();
+    this.dirtyDiffWorker = new DirtyDiffWorker();
+
+    this.dirtyDiffWorker.addEventListener('message', e => this.decorate(e));
   }
 
   attachModel(model) {
@@ -43,20 +43,24 @@ export default class DirtyDiffController {
   }
 
   computeDiff(model) {
-    this.decorate(model, this.dirtyDiffWorker.compute(model));
+    this.dirtyDiffWorker.postMessage({
+      path: model.path,
+      originalContent: model.getOriginalModel().getValue(),
+      newContent: model.getModel().getValue(),
+    });
   }
 
-  // eslint-disable-next-line class-methods-use-this
   reDecorate(model) {
     this.decorationsController.decorate(model);
   }
 
-  decorate(model, changes) {
-    const decorations = changes.map(change => getDecorator(change));
-    this.decorationsController.addDecorations(model, 'dirtyDiff', decorations);
+  decorate({ data }) {
+    const decorations = data.changes.map(change => getDecorator(change));
+    this.decorationsController.addDecorations(data.path, 'dirtyDiff', decorations);
   }
 
   dispose() {
     this.disposable.dispose();
+    this.dirtyDiffWorker.terminate();
   }
 }
diff --git a/app/assets/javascripts/repo/lib/diff/diff.js b/app/assets/javascripts/repo/lib/diff/diff.js
index bc183fec70a..ada24740688 100644
--- a/app/assets/javascripts/repo/lib/diff/diff.js
+++ b/app/assets/javascripts/repo/lib/diff/diff.js
@@ -1,38 +1,29 @@
 import { diffLines } from 'diff';
 
-// export default class DirtyDiffWorker {
-//   // eslint-disable-next-line class-methods-use-this
-//   compute(model) {
-//     console.time('a');
-//     const originalContent = model.getOriginalModel().getValue();
-//     const newContent = model.getModel().getValue();
-//     const changes = diffLines(originalContent, newContent);
-//
-//     let lineNumber = 1;
-//     const a = changes.reduce((acc, change) => {
-//       const findOnLine = acc.find(c => c.lineNumber === lineNumber);
-//
-//       if (findOnLine) {
-//         Object.assign(findOnLine, change, {
-//           modified: true,
-//           endLineNumber: (lineNumber + change.count) - 1,
-//         });
-//       } else if ('added' in change || 'removed' in change) {
-//         acc.push(Object.assign({}, change, {
-//           lineNumber,
-//           modified: undefined,
-//           endLineNumber: (lineNumber + change.count) - 1,
-//         }));
-//       }
-//
-//       if (!change.removed) {
-//         lineNumber += change.count;
-//       }
-//
-//       return acc;
-//     }, []);
-//     console.timeEnd('a');
-//
-//     return a;
-//   }
-// }
+export const computeDiff = (originalContent, newContent) => {
+  const changes = diffLines(originalContent, newContent);
+
+  let lineNumber = 1;
+  return changes.reduce((acc, change) => {
+    const findOnLine = acc.find(c => c.lineNumber === lineNumber);
+
+    if (findOnLine) {
+      Object.assign(findOnLine, change, {
+        modified: true,
+        endLineNumber: (lineNumber + change.count) - 1,
+      });
+    } else if ('added' in change || 'removed' in change) {
+      acc.push(Object.assign({}, change, {
+        lineNumber,
+        modified: undefined,
+        endLineNumber: (lineNumber + change.count) - 1,
+      }));
+    }
+
+    if (!change.removed) {
+      lineNumber += change.count;
+    }
+
+    return acc;
+  }, []);
+};
diff --git a/app/assets/javascripts/repo/lib/diff/worker.diff.js b/app/assets/javascripts/repo/lib/diff/worker.diff.js
new file mode 100644
index 00000000000..e74c4046330
--- /dev/null
+++ b/app/assets/javascripts/repo/lib/diff/worker.diff.js
@@ -0,0 +1,10 @@
+import { computeDiff } from './diff';
+
+self.addEventListener('message', (e) => {
+  const data = e.data;
+
+  self.postMessage({
+    path: data.path,
+    changes: computeDiff(data.originalContent, data.newContent),
+  });
+});
diff --git a/package.json b/package.json
index 5b4676bf4ae..8f06ffc1b6d 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.4",
     "nodemon": "^1.11.0",
-    "webpack-dev-server": "^2.6.1"
+    "webpack-dev-server": "^2.6.1",
+    "worker-loader": "^1.1.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 2050f9eeed7..f631c0167e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -116,6 +116,15 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.0.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.4.0.tgz#32d1cf08dbc80c432f426f12e10b2511f6b46474"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 ajv@^5.1.5:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
@@ -2531,6 +2540,10 @@ fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
 
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
 fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
@@ -3847,7 +3860,7 @@ loader-utils@^0.2.15, loader-utils@^0.2.5:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -5538,6 +5551,12 @@ sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -6605,6 +6624,13 @@ wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
+worker-loader@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-1.1.0.tgz#8cf21869a07add84d66f821d948d23c1eb98e809"
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.3.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"