Add root vue instance

app/assets/javascripts/repo/index.js

 /* global monaco */
 import $ from 'jquery';
-import Sidebar from './repo_sidebar';
+import Vue from 'vue';
+import RepoSidebar from './repo_sidebar.vue';
 import EditButton from './repo_edit_button';
 import CommitSection from './repo_commit_section';
 import Service from './repo_service';
 import Store from './repo_store';
-import Helper from './repo_helper';
-import monacoLoader from './monaco_loader';
+import RepoTabs from './repo_tabs.vue';
+import RepoFileButtons from './repo_file_buttons.vue';
+import RepoBinaryViewer from './repo_binary_viewer.vue';
+import RepoEditor from './repo_editor.vue';
+import RepoMiniMixin from './repo_mini_mixin';
 
-function initMonaco(el, cb) {
-  monacoLoader(['vs/editor/editor.main'], () => {
-    const monacoInstance = monaco.editor.create(el, {
-      model: null,
-      readOnly: true,
-      contextmenu: false,
-    });
+function initRepo() {
+  const repo = document.getElementById('repo');
 
-    cb(monacoInstance);
+  Store.service = Service;
+  Store.service.url = repo.dataset.url;
+
+  new Vue({
+    el: repo,
+    data: () => Store,
+    template: `
+      <div class="tree-content-holder">
+        <repo-sidebar/>
+        <div class="panel-right">
+          <repo-tabs/>
+          <repo-file-buttons/>
+          <repo-editor/>
+          <repo-binary-viewer/>
+        </div>
+      </div>
+    `,
+    mixins: [RepoMiniMixin],
+    components: {
+      'repo-sidebar': RepoSidebar,
+      'repo-tabs': RepoTabs,
+      'repo-file-buttons': RepoFileButtons,
+      'repo-binary-viewer': RepoBinaryViewer,
+      'repo-editor': RepoEditor,
+    },
   });
-}
 
-function initRepo() {
-  const sidebar = document.getElementById('sidebar');
   const editButton = document.getElementById('editable-mode');
   const commitSection = document.getElementById('commit-area');
 
-  Store.service = Service;
-  Store.service.url = sidebar.dataset.url;
-
   Store.editButton = new EditButton(editButton);
   Store.commitSection = new CommitSection(commitSection);
-
-  initMonaco(sidebar, (monacoInstance) => {
-    Store.monacoInstance = monacoInstance;
-    Store.sidebar = new Sidebar(sidebar);
-    Helper.getContent();
-  });
 }
 
 $(initRepo);

app/assets/javascripts/repo/repo_editor.vue

@@ -3,12 +3,24 @@
 import Vue from 'vue';
 import Store from './repo_store';
 import Helper from './repo_helper';
+import monacoLoader from './monaco_loader';
 
 const RepoEditor = {
   data: () => Store,
 
   mounted() {
+    monacoLoader(['vs/editor/editor.main'], () => {
+      const monacoInstance = monaco.editor.create(this.$el, {
+        model: null,
+        readOnly: true,
+        contextmenu: false,
+      });
+
+      Store.monacoInstance = monacoInstance;
+
       this.addMonacoEvents();
+
+      Helper.getContent().then(() => {
         this.showHide();
 
         if (this.blobRaw === '') return;
@@ -16,6 +28,8 @@ const RepoEditor = {
         const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext');
 
         this.monacoInstance.setModel(newModel);
+      });
+    });
   },
 
   methods: {
@@ -28,12 +42,12 @@ const RepoEditor = {
     },
 
     addMonacoEvents() {
-      this.monacoEditor.onMouseUp(this.onMonacoEditorMouseUp);
-      this.monacoEditor.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
+      this.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
+      this.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
     },
 
     onMonacoEditorKeysPressed() {
-      Store.setActiveFileContents(this.monacoEditor.getValue());
+      Store.setActiveFileContents(this.monacoInstance.getValue());
     },
 
     onMonacoEditorMouseUp(e) {

app/assets/javascripts/repo/repo_helper.js

@@ -96,7 +96,7 @@ const RepoHelper = {
   getContent(treeOrFile, cb) {
     let file = treeOrFile;
     // const loadingData = RepoHelper.setLoading(true);
-    Service.getContent()
+    return Service.getContent()
     .then((response) => {
       const data = response.data;
       // RepoHelper.setLoading(false, loadingData);

app/assets/javascripts/repo/repo_sidebar.js

-import Vue from 'vue';
-import Service from './repo_service';
-import Helper from './repo_helper';
-import Store from './repo_store';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFileOptions from './repo_file_options.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
-import RepoTabs from './repo_tabs.vue';
-import RepoFileButtons from './repo_file_buttons.vue';
-import RepoBinaryViewer from './repo_binary_viewer.vue';
-import RepoEditor from './repo_editor.vue';
-import RepoMiniMixin from './repo_mini_mixin';
-
-export default class RepoSidebar {
-  constructor(el) {
-    this.initVue(el);
-  }
-
-  initVue(el) {
-    this.vue = new Vue({
-      el,
-      mixins: [RepoMiniMixin],
-      components: {
-        'repo-file-options': RepoFileOptions,
-        'repo-previous-directory': RepoPreviousDirectory,
-        'repo-file': RepoFile,
-        'repo-loading-file': RepoLoadingFile,
-        'repo-tabs': RepoTabs,
-        'repo-file-buttons': RepoFileButtons,
-        'repo-binary-viewer': RepoBinaryViewer,
-        'repo-editor': RepoEditor,
-      },
-
-      created() {
-        this.addPopEventListener();
-      },
-
-      data: () => Store,
-
-      methods: {
-        addPopEventListener() {
-          window.addEventListener('popstate', () => {
-            if (location.href.indexOf('#') > -1) return;
-            this.linkClicked({
-              url: location.href,
-            });
-          });
-        },
-
-        linkClicked(clickedFile) {
-          let url = '';
-          let file = clickedFile;
-          if (typeof file === 'object') {
-            file.loading = true;
-            if (file.type === 'tree' && file.opened) {
-              file = Store.removeChildFilesOfTree(file);
-              file.loading = false;
-            } else {
-              url = file.url;
-              Service.url = url;
-              // I need to refactor this to do the `then` here.
-              // Not a callback. For now this is good enough.
-              // it works.
-              Helper.getContent(file, () => {
-                file.loading = false;
-                Helper.scrollTabsRight();
-              });
-            }
-          } else if (typeof file === 'string') {
-            // go back
-            url = file;
-            Service.url = url;
-            Helper.getContent(null, () => {
-              Helper.scrollTabsRight();
-            });
-          }
-        },
-      },
-    });
-  }
-}

app/assets/javascripts/repo/repo_sidebar.vue

+<script>
+import Vue from 'vue';
+import Service from './repo_service';
+import Helper from './repo_helper';
+import Store from './repo_store';
+import RepoPreviousDirectory from './repo_prev_directory.vue';
+import RepoFileOptions from './repo_file_options.vue';
+import RepoFile from './repo_file.vue';
+import RepoLoadingFile from './repo_loading_file.vue';
+import RepoMiniMixin from './repo_mini_mixin';
+
+const RepoSidebar = {
+  mixins: [RepoMiniMixin],
+  components: {
+    'repo-file-options': RepoFileOptions,
+    'repo-previous-directory': RepoPreviousDirectory,
+    'repo-file': RepoFile,
+    'repo-loading-file': RepoLoadingFile,
+  },
+
+  created() {
+    this.addPopEventListener();
+  },
+
+  data: () => Store,
+
+  methods: {
+    addPopEventListener() {
+      window.addEventListener('popstate', () => {
+        if (location.href.indexOf('#') > -1) return;
+        this.linkClicked({
+          url: location.href,
+        });
+      });
+    },
+
+    linkClicked(clickedFile) {
+      let url = '';
+      let file = clickedFile;
+      if (typeof file === 'object') {
+        file.loading = true;
+        if (file.type === 'tree' && file.opened) {
+          file = Store.removeChildFilesOfTree(file);
+          file.loading = false;
+        } else {
+          url = file.url;
+          Service.url = url;
+          // I need to refactor this to do the `then` here.
+          // Not a callback. For now this is good enough.
+          // it works.
+          Helper.getContent(file, () => {
+            file.loading = false;
+            Helper.scrollTabsRight();
+          });
+        }
+      } else if (typeof file === 'string') {
+        // go back
+        url = file;
+        Service.url = url;
+        Helper.getContent(null, () => {
+          Helper.scrollTabsRight();
+        });
+      }
+    },
+  },
+};
+
+export default RepoSidebar;
+</script>
+
+<template>
+<div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak>
+  <table class="table">
+    <thead v-if="!isMini">
+      <th v-if="!isMini">
+        Name
+      </th>
+      <th v-else>
+        Project
+      </th>
+      <th class="hidden-sm hidden-xs" v-if="!isMini">
+        Last Commit
+      </th>
+      <th class="hidden-xs" v-if="!isMini">
+        Last Update
+      </th>
+    </thead>
+    <tbody>
+      <repo-file-options
+        :is-mini="isMini"
+        project-name="TODO"/>
+      <repo-previous-directory
+        :prev-url="prevURL"
+        @linkclicked="linkClicked(prevURL)"/>
+      <repo-loading-file
+        v-for="n in 5"
+        :loading="loading"
+        :has-files="!!files.length"
+        :is-mini="isMini"/>
+      <repo-file
+        v-for="file in files"
+        :key="file.id"
+        :file="file"
+        :is-mini="isMini"
+        @linkclicked="linkClicked(file)"
+        :is-tree="isTree"
+        :has-files="!!files.length"
+        :active-file="activeFile"/>
+    </tbody>
+  </table>
+</div>
+</template>

app/assets/javascripts/repo/repo_tabs.vue

@@ -7,7 +7,7 @@ import RepoMiniMixin from './repo_mini_mixin';
 const RepoTabs = {
   mixins: [RepoMiniMixin],
 
-components: {
+  components: {
     'repo-tab': RepoTab,
   },
 

app/views/projects/tree/_tree_content.html.haml

-.tree-content-holder
-  #sidebar{ ":class" => "{'sidebar-mini' : isMini}", "v-cloak" => "1", data: { url: repo_url(@project) } }<
-    %table.table
-      %thead{ "v-if" => "!isMini" }
-        %th{ "v-if" => "!isMini" }
-          Name
-        %th{ "v-else" => "1" }
-          Project
-        %th.hidden-sm.hidden-xs{ "v-if" => "!isMini" }
-          Last Commit
-        %th.hidden-xs{ "v-if" => "!isMini" }
-          Last Update
-      %tbody
-        %tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
-        %tr{ is: "repo-previous-directory", ":prev-url" => "prevURL", "@linkclicked" => "linkClicked(prevURL)" }
-        %tr{ is: "repo-loading-file", "v-for" => "n in 5", ":loading" => "loading", ":has-files" => "!!files.length", ":is-mini" => "isMini" }
-        %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
-  .panel-right>
-    %repo-tabs
-    %repo-file-buttons
-    %repo-editor
-    %repo-binary-viewer
+#repo{ data: { url: repo_url(@project) } }
   #commit-area{ "v-if" => "changedFiles.length" }
     %form.form-horizontal
       %fieldset