remove monacoLoader and import monaco directly within Editor class

app/assets/javascripts/ide/components/repo_editor.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import * as monaco from 'monaco-editor';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import { activityBarViews, viewerTypes } from '../constants';
@@ -83,12 +82,10 @@ export default {
     this.editor.dispose();
   },
   mounted() {
-    if (this.editor && monaco) {
-      this.initMonaco();
-    } else {
-      this.editor = Editor.create(monaco);
-      this.initMonaco();
+    if (!this.editor) {
+      this.editor = Editor.create();
     }
+    this.initMonaco();
   },
   methods: {
     ...mapActions([

app/assets/javascripts/ide/lib/diff/controller.js

@@ -1,4 +1,4 @@
-/* global monaco */
+import { Range } from 'monaco-editor';
 import { throttle } from 'underscore';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
@@ -16,7 +16,7 @@ export const getDiffChangeType = change => {
 };
 
 export const getDecorator = change => ({
-  range: new monaco.Range(change.lineNumber, 1, change.endLineNumber, 1),
+  range: new Range(change.lineNumber, 1, change.endLineNumber, 1),
   options: {
     isWholeLine: true,
     linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,

app/assets/javascripts/ide/lib/editor.js

@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import * as monaco from 'monaco-editor';
 import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
@@ -17,15 +18,14 @@ export const clearDomElement = el => {
 };
 
 export default class Editor {
-  static create(monaco) {
-    if (this.editorInstance) return this.editorInstance;
-
-    this.editorInstance = new Editor(monaco);
-
+  static create() {
+    if (!this.editorInstance) {
+      this.editorInstance = new Editor();
+    }
     return this.editorInstance;
   }
 
-  constructor(monaco) {
+  constructor() {
     this.monaco = monaco;
     this.currentModel = null;
     this.instance = null;

app/assets/javascripts/ide/monaco_loader.js

@@ -1,16 +0,0 @@
-import monacoContext from 'monaco-editor/dev/vs/loader';
-
-monacoContext.require.config({
-  paths: {
-    vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
-  },
-});
-
-// ignore CDN config and use local assets path for service worker which cannot be cross-domain
-const relativeRootPath = (gon && gon.relative_url_root) || '';
-const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`;
-window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` };
-
-// eslint-disable-next-line no-underscore-dangle
-window.__monaco_context__ = monacoContext;
-export default monacoContext.require;

spec/javascripts/ide/components/repo_editor_spec.js

@@ -3,7 +3,6 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
 import repoEditor from '~/ide/components/repo_editor.vue';
-import monacoLoader from '~/ide/monaco_loader';
 import Editor from '~/ide/lib/editor';
 import { activityBarViews } from '~/ide/constants';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
@@ -25,13 +24,10 @@ describe('RepoEditor', () => {
     f.tempFile = true;
     vm.$store.state.openFiles.push(f);
     Vue.set(vm.$store.state.entries, f.path, f);
-    vm.monaco = true;
 
     vm.$mount();
 
-    monacoLoader(['vs/editor/editor.main'], () => {
-      setTimeout(done, 0);
-    });
+    Vue.nextTick(() => setTimeout(done));
   });
 
   afterEach(() => {

spec/javascripts/ide/lib/common/model_manager_spec.js

@@ -1,18 +1,13 @@
-/* global monaco */
+import * as monaco from 'monaco-editor';
 import eventHub from '~/ide/eventhub';
-import monacoLoader from '~/ide/monaco_loader';
 import ModelManager from '~/ide/lib/common/model_manager';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library model manager', () => {
   let instance;
 
-  beforeEach(done => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      instance = new ModelManager(monaco);
-
-      done();
-    });
+  beforeEach(() => {
+    instance = new ModelManager(monaco);
   });
 
   afterEach(() => {

spec/javascripts/ide/lib/common/model_spec.js

@@ -1,23 +1,18 @@
-/* global monaco */
+import * as monaco from 'monaco-editor';
 import eventHub from '~/ide/eventhub';
-import monacoLoader from '~/ide/monaco_loader';
 import Model from '~/ide/lib/common/model';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library model', () => {
   let model;
 
-  beforeEach(done => {
+  beforeEach(() => {
     spyOn(eventHub, '$on').and.callThrough();
 
-    monacoLoader(['vs/editor/editor.main'], () => {
-      const f = file('path');
-      f.mrChange = { diff: 'ABC' };
-      f.baseRaw = 'test';
-      model = new Model(monaco, f);
-
-      done();
-    });
+    const f = file('path');
+    f.mrChange = { diff: 'ABC' };
+    f.baseRaw = 'test';
+    model = new Model(monaco, f);
   });
 
   afterEach(() => {

spec/javascripts/ide/lib/decorations/controller_spec.js

@@ -1,6 +1,5 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
+import * as monaco from 'monaco-editor';
+import Editor from '~/ide/lib/editor';
 import DecorationsController from '~/ide/lib/decorations/controller';
 import Model from '~/ide/lib/common/model';
 import { file } from '../../helpers';
@@ -10,16 +9,12 @@ describe('Multi-file editor library decorations controller', () => {
   let controller;
   let model;
 
-  beforeEach(done => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      editorInstance = editor.create(monaco);
-      editorInstance.createInstance(document.createElement('div'));
+  beforeEach(() => {
+    editorInstance = Editor.create();
+    editorInstance.createInstance(document.createElement('div'));
 
-      controller = new DecorationsController(editorInstance);
-      model = new Model(monaco, file('path'));
-
-      done();
-    });
+    controller = new DecorationsController(editorInstance);
+    model = new Model(monaco, file('path'));
   });
 
   afterEach(() => {

spec/javascripts/ide/lib/diff/controller_spec.js

@@ -1,6 +1,5 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
+import * as monaco from 'monaco-editor';
+import Editor from '~/ide/lib/editor';
 import ModelManager from '~/ide/lib/common/model_manager';
 import DecorationsController from '~/ide/lib/decorations/controller';
 import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/ide/lib/diff/controller';
@@ -14,20 +13,16 @@ describe('Multi-file editor library dirty diff controller', () => {
   let decorationsController;
   let model;
 
-  beforeEach(done => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      editorInstance = editor.create(monaco);
-      editorInstance.createInstance(document.createElement('div'));
+  beforeEach(() => {
+    editorInstance = Editor.create();
+    editorInstance.createInstance(document.createElement('div'));
 
-      modelManager = new ModelManager(monaco);
-      decorationsController = new DecorationsController(editorInstance);
+    modelManager = new ModelManager(monaco);
+    decorationsController = new DecorationsController(editorInstance);
 
-      model = modelManager.addModel(file('path'));
+    model = modelManager.addModel(file('path'));
 
-      controller = new DirtyDiffController(modelManager, decorationsController);
-
-      done();
-    });
+    controller = new DirtyDiffController(modelManager, decorationsController);
   });
 
   afterEach(() => {

spec/javascripts/ide/lib/editor_spec.js

@@ -1,6 +1,4 @@
-/* global monaco */
-import monacoLoader from '~/ide/monaco_loader';
-import editor from '~/ide/lib/editor';
+import Editor from '~/ide/lib/editor';
 import { file } from '../helpers';
 
 describe('Multi-file editor library', () => {
@@ -8,18 +6,14 @@ describe('Multi-file editor library', () => {
   let el;
   let holder;
 
-  beforeEach(done => {
+  beforeEach(() => {
     el = document.createElement('div');
     holder = document.createElement('div');
     el.appendChild(holder);
 
     document.body.appendChild(el);
 
-    monacoLoader(['vs/editor/editor.main'], () => {
-      instance = editor.create(monaco);
-
-      done();
-    });
+    instance = Editor.create();
   });
 
   afterEach(() => {
@@ -29,11 +23,11 @@ describe('Multi-file editor library', () => {
   });
 
   it('creates instance of editor', () => {
-    expect(editor.editorInstance).not.toBeNull();
+    expect(Editor.editorInstance).not.toBeNull();
   });
 
   it('creates instance returns cached instance', () => {
-    expect(editor.create(monaco)).toEqual(instance);
+    expect(Editor.create()).toEqual(instance);
   });
 
   describe('createInstance', () => {

spec/javascripts/ide/monaco_loader_spec.js

@@ -1,15 +0,0 @@
-import monacoContext from 'monaco-editor/dev/vs/loader';
-import monacoLoader from '~/ide/monaco_loader';
-
-describe('MonacoLoader', () => {
-  it('calls require.config and exports require', () => {
-    expect(monacoContext.require.getConfig()).toEqual(
-      jasmine.objectContaining({
-        paths: {
-          vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
-        },
-      }),
-    );
-    expect(monacoLoader).toBe(monacoContext.require);
-  });
-});