added web worker to calculate diffs

[ci skip]

3 files changed, 50 insertions, 45 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),
+  });
+});