adds store and editor files.

app/assets/javascripts/dispatcher.js

@@ -55,6 +55,7 @@ import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
 import initSettingsPanels from './settings_panels';
+import RepoBundle from './repo/repo_bundle';
 
 (function() {
   var Dispatcher;
@@ -323,15 +324,13 @@ import initSettingsPanels from './settings_panels';
           break;
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
-          new TreeView();
-          new BlobViewer();
+          new RepoBundle();
           break;
         case 'projects:find_file:show':
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          new BlobViewer();
-          initBlob();
+          new RepoBundle();
           break;
         case 'projects:blame:show':
           initBlob();

app/assets/javascripts/repo/repo_bundle.js

 /* global monaco */
 import Sidebar from './repo_sidebar'
+import Editor from './repo_editor'
 import Service from './repo_service'
+import Store from './repo_store'
 
-class RepoBundle {
-  constructor(id, url) {
-    this.service = Service;
-    this.service.url = url;
-    this.sidebar = new Sidebar(url);
+export default class RepoBundle {
+  constructor() {
+    const url = document.getElementById('ide').dataset.url;
+    Store.service = Service;
+    Store.service.url = url;
+    Store.sidebar = new Sidebar(url);
+    Store.editor = new Editor();
+    Store.sidebar.getContent();
   }
 }
-
-window.require.config({ paths: { vs: '/monaco-editor/min/vs' } });
-window.require(['vs/editor/editor.main'], () => {
-  var editor = monaco.editor.create(document.getElementById('ide'), {
-    value: "function hello() {\n\talert('Hello world!');\n}",
-    language: 'javascript',
-  });
-});
-document.addEventListener('DOMContentLoaded', ()=> {
-  const ideRoot = document.getElementById('ide');
-  const bundle = new RepoBundle(
-    ideRoot,
-    ideRoot.dataset.url
-  );
-});

app/assets/javascripts/repo/repo_editor.js

+import Vue from 'vue';
+import Store from './repo_store'
+
+export default class RepoEditor {
+  constructor() {
+    this.initMonaco();
+  }
+
+  initMonaco() {
+    window.require.config({ paths: { vs: '/monaco-editor/min/vs' } });
+    window.require(['vs/editor/editor.main'], () => {
+      this.monaco = monaco.
+      create(
+        document.getElementById('ide'), {
+          model: null
+        }
+      )
+      console.log("HELLLOOOO!!!")
+      this.initVue();
+    });
+  }
+
+  initVue() {
+    const editor = this.editor;
+    this.vue = new Vue({
+      el: '#ide',
+      data: () => Store,
+      
+      created () {
+        if(this.blobRaw !== ''){
+          console.log('models', this.monaco.getModels());
+        }
+      },
+
+      watch: {
+        blobRaw() {
+          if(this.isTree) {
+          } else {
+            // this.blobRaw
+            console.log('models', editor.getModels())
+          }
+        }
+      }
+    });
+  }
+}
\ No newline at end of file

app/assets/javascripts/repo/repo_helper.js

+let RepoHelper = {
+  isTree(data) {
+    return data.hasOwnProperty('blobs');
+  }
+};
+
+export default RepoHelper;
\ No newline at end of file

app/assets/javascripts/repo/repo_service.js

@@ -7,7 +7,7 @@ let RepoService = {
     this.url = url;
   },
 
-  getTree() {
+  getContent() {
     return axios.get(this.url);
   }
 };

app/assets/javascripts/repo/repo_sidebar.js

 import Service from './repo_service'
+import Helper from './repo_helper'
 import Vue from 'vue';
+import Store from './repo_store'
 
 export default class RepoSidebar {
   constructor(url) {
     this.url = url;
-    this.getTree();
     this.initVue();
   }
 
-  getTree() {
-    Service.getTree()
+  // may be tree or file.
+  getContent() {
+    Service.getContent()
     .then((response)=> {
-      console.log('response', response.data);
+      let data = response.data;
+      Store.isTree = Helper.isTree(data);
+      if(!Store.isTree) {
+        Store.blobRaw = data.plain;
+      }
     })
     .catch((response)=> {
       console.log('error response', response);

app/assets/javascripts/repo/repo_store.js

+let RepoStore = {
+  service: '',
+  editor: '',
+  sidebar: '',
+
+  isTree: false,
+  trees: [],
+  blobs: [],
+  submodules: [],
+  blobRaw: '',
+  blobRendered: ''
+};
+export default RepoStore;

app/views/projects/blob/_blob.html.haml

@@ -8,6 +8,4 @@
   = render "projects/blob/auxiliary_viewer", blob: blob
 
 #blob-content-holder.blob-content-holder
-  %article.file-holder
-    = render "projects/blob/header", blob: blob
-    = render 'projects/blob/content', blob: blob
+  #ide{ data: { url: repo_url }, style: "height:400px;" }