Move repoEditorLoader to index and change repo_editor to vue comp

app/assets/javascripts/repo/index.js

@@ -9,10 +9,21 @@ import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
-import { repoEditorLoader } from './repo_editor';
+import RepoEditor from './repo_editor.vue';
+import monacoLoader from './monaco_loader';
 import RepoMixin from './repo_mixin';
 import PopupDialog from '../vue_shared/components/popup_dialog.vue'
 
+function repoEditorLoader() {
+  return new Promise((resolve) => {
+    monacoLoader(['vs/editor/editor.main'], () => {
+      Store.monaco = monaco;
+
+      resolve(RepoEditor);
+    });
+  });
+}
+
 function addEventsForNonVueEls() {
   $(document).on('change', '.dropdown', () => {
     Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();

app/assets/javascripts/repo/repo_editor.js → app/assets/javascripts/repo/repo_editor.vue

+<script>
 /* global monaco */
 import Store from './repo_store';
 import Helper from './repo_helper';
-import monacoLoader from './monaco_loader';
 
 const RepoEditor = {
   data: () => Store,
 
-  template: '<div id="ide"></div>',
-
   mounted() {
     const monacoInstance = this.monaco.editor.create(this.$el, {
       model: null,
@@ -106,17 +104,9 @@ const RepoEditor = {
   },
 };
 
-function repoEditorLoader() {
-  return new Promise((resolve) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      Store.monaco = monaco;
+export default RepoEditor;
+</script>
 
-      resolve(RepoEditor);
-    });
-  });
-}
-
-export {
-  RepoEditor as default,
-  repoEditorLoader,
-};
+<template>
+<div id="ide"></div>
+</template>

spec/javascripts/repo/repo_editor_spec.js

 import Vue from 'vue';
-import repoEditor from '~/repo/repo_editor';
+import repoEditor from '~/repo/repo_editor.vue';
 import RepoStore from '~/repo/repo_store';
 
 describe('RepoEditor', () => {