Move monaco loader init function to its own helper and moved repo vm init to...

Move monaco loader init function to its own helper and moved repo vm init to its own file to be invoked by bundle entry point

app/assets/javascripts/repo/helpers/monaco_loader_helper.js

+/* global monaco */
+import RepoEditor from '../components/repo_editor.vue';
+import RepoStore from '../stores/repo_store';
+import monacoLoader from '../monaco_loader';
+
+function repoEditorLoader() {
+  return new Promise((resolve) => {
+    monacoLoader(['vs/editor/editor.main'], () => {
+      RepoStore.monaco = monaco;
+
+      resolve(RepoEditor);
+    });
+  });
+}
+
+const MonacoLoaderHelper = {
+  repoEditorLoader,
+};
+
+export default MonacoLoaderHelper;

app/assets/javascripts/repo/index.js

-/* global monaco */
 import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '../vue_shared/translate';
-import RepoSidebar from './components/repo_sidebar.vue';
 import EditButton from './repo_edit_button';
 import Service from './services/repo_service';
 import Store from './stores/repo_store';
-import RepoCommitSection from './components/repo_commit_section.vue';
-import RepoTabs from './components/repo_tabs.vue';
-import RepoFileButtons from './components/repo_file_buttons.vue';
-import RepoBinaryViewer from './components/repo_binary_viewer.vue';
-import RepoEditor from './components/repo_editor.vue';
-import monacoLoader from './monaco_loader';
-import RepoMixin from './mixins/repo_mixin';
-import PopupDialog from '../vue_shared/components/popup_dialog.vue';
+import { initRepoViewModel } from './view_models/repo_view_model';
 
 Vue.use(Translate);
 
-function repoEditorLoader() {
-  return new Promise((resolve) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      Store.monaco = monaco;
-
-      resolve(RepoEditor);
-    });
-  });
-}
-
 function initDropdowns() {
   $('.project-refs-target-form').hide();
   $('.fa-long-arrow-right').hide();
@@ -48,65 +29,25 @@ function addEventsForNonVueEls() {
   };
 }
 
-function initRepo() {
-  const repo = document.getElementById('repo');
-
+function setInitialStore(data) {
   Store.service = Service;
-  Store.service.url = repo.dataset.url;
-  Store.service.refsUrl = repo.dataset.refsUrl;
-  Store.projectId = repo.dataset.projectId;
-  Store.projectName = repo.dataset.projectName;
-  Store.projectUrl = repo.dataset.projectUrl;
+  Store.service.url = data.url;
+  Store.service.refsUrl = data.refsUrl;
+  Store.projectId = data.projectId;
+  Store.projectName = data.projectName;
+  Store.projectUrl = data.projectUrl;
   Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
   Store.checkIsCommitable();
-  addEventsForNonVueEls();
-  initDropdowns();
+}
 
-  this.vm = new Vue({
-    el: repo,
-    data: () => Store,
-    template: `
-      <div class="tree-content-holder">
-        <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
-          <repo-tabs/>
-          <repo-file-buttons/>
-          <repo-editor/>
-          <repo-binary-viewer/>
-        </div>
-        <repo-commit-section/>
-        <popup-dialog
-          :primary-button-label="__('Discard changes')"
-          :open="dialog.open"
-          kind="warning"
-          :title="__('Are you sure?')"
-          :body="__('Are you sure you want to discard your changes?')"
-          @toggle="dialogToggled"
-          @submit="dialogSubmitted"
-        />
-      </div>
-    `,
-    mixins: [RepoMixin],
-    components: {
-      'repo-sidebar': RepoSidebar,
-      'repo-tabs': RepoTabs,
-      'repo-file-buttons': RepoFileButtons,
-      'repo-binary-viewer': RepoBinaryViewer,
-      'repo-editor': repoEditorLoader,
-      'repo-commit-section': RepoCommitSection,
-      'popup-dialog': PopupDialog,
-    },
+function initRepo() {
+  const repo = document.getElementById('repo');
 
-    methods: {
-      dialogToggled(toggle) {
-        this.dialog.open = toggle;
-      },
+  setInitialStore(repo.dataset);
+  addEventsForNonVueEls();
+  initDropdowns();
 
-      dialogSubmitted(status) {
-        this.dialog.open = false;
-        this.dialog.status = status;
-      },
-    },
-  });
+  initRepoViewModel(repo);
 
   const editButton = document.getElementById('editable-mode');
   Store.editButton = new EditButton(editButton);

app/assets/javascripts/repo/view_models/repo_view_model.js

+import Vue from 'vue';
+import RepoSidebar from '../components/repo_sidebar.vue';
+import RepoCommitSection from '../components/repo_commit_section.vue';
+import RepoTabs from '../components/repo_tabs.vue';
+import RepoFileButtons from '../components/repo_file_buttons.vue';
+import RepoBinaryViewer from '../components/repo_binary_viewer.vue';
+import RepoMixin from '../mixins/repo_mixin';
+import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
+import Store from '../stores/repo_store';
+import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
+
+const Repo = {
+  el: undefined,
+  data: () => Store,
+  template: `
+    <div class="tree-content-holder">
+      <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
+        <repo-tabs/>
+        <repo-file-buttons/>
+        <repo-editor/>
+        <repo-binary-viewer/>
+      </div>
+      <repo-commit-section/>
+      <popup-dialog
+        :primary-button-label="__('Discard changes')"
+        :open="dialog.open"
+        kind="warning"
+        :title="__('Are you sure?')"
+        :body="__('Are you sure you want to discard your changes?')"
+        @toggle="dialogToggled"
+        @submit="dialogSubmitted"
+      />
+    </div>
+  `,
+  mixins: [RepoMixin],
+  components: {
+    'repo-sidebar': RepoSidebar,
+    'repo-tabs': RepoTabs,
+    'repo-file-buttons': RepoFileButtons,
+    'repo-binary-viewer': RepoBinaryViewer,
+    'repo-editor': MonacoLoaderHelper.repoEditorLoader,
+    'repo-commit-section': RepoCommitSection,
+    'popup-dialog': PopupDialog,
+  },
+
+  methods: {
+    dialogToggled(toggle) {
+      this.dialog.open = toggle;
+    },
+
+    dialogSubmitted(status) {
+      this.dialog.open = false;
+      this.dialog.status = status;
+    },
+  },
+};
+
+function initRepoViewModel(el) {
+  Repo.el = el;
+
+  return new Vue(Repo);
+}
+
+export {
+  Repo as default,
+  initRepoViewModel,
+};