Covert vue components to single file components

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

+<script>
 const RepoFile = {
-  template: `
-  <tr v-if='!loading.tree || hasFiles' :class='{"active": activeFile.url === file.url}'>
-    <td>
-      <i class='fa' :class='file.icon' :style='{"margin-left": file.level * 10 + "px"}'></i>
-      <a :href='file.url' @click.prevent='linkClicked(file)' class='repo-file-name' :title='file.url'>{{file.name}}</a>
-    </td>
-    <td v-if='!isMini' class='hidden-sm hidden-xs'>
-      <div class='commit-message'>{{file.lastCommitMessage}}</div>
-    </td>
-    <td v-if='!isMini' class='hidden-xs'>
-      <span>{{file.lastCommitUpdate}}</span>
-    </td>
-  </tr>
-  `,
   props: {
     name: 'repo-file',
     file: Object,
@@ -29,4 +16,23 @@ const RepoFile = {
     },
   },
 };
+
 export default RepoFile;
+</script>
+
+<template>
+<tr v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
+  <td>
+    <i class="fa" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+    <a :href="file.url" @click.prevent="linkClicked(file)" class="repo-file-name" :title="file.url">{{file.name}}</a>
+  </td>
+
+  <td v-if="!isMini" class="hidden-sm hidden-xs">
+    <div class="commit-message">{{file.lastCommitMessage}}</div>
+  </td>
+
+  <td v-if="!isMini" class="hidden-xs">
+    <span>{{file.lastCommitUpdate}}</span>
+  </td>
+</tr>
+</template>

app/assets/javascripts/repo/repo_file_options.js

-const RepoFileOptions = {
-  template: `
-    <tr v-if='isMini' class='repo-file-options'>
-      <td>
-        <span class='title'>{{projectName}}</span>
-        <ul>
-          <li>
-            <a href='#' title='New File'>
-              <i class='fa fa-file-o'></i>
-            </a>
-          </li>
-          <li>
-            <a href='#' title='New Folder'>
-              <i class='fa fa-folder-o'></i>
-            </a>
-          </li>
-        </ul>
-      </td>
-    </tr>
-  `,
-  props: {
-    name: 'repo-file-options',
-    isMini: Boolean,
-    projectName: String,
-  },
-};
-
-export default RepoFileOptions;

app/assets/javascripts/repo/repo_file_options.vue

+<script>
+const RepoFileOptions = {
+  props: {
+    name: 'repo-file-options',
+    isMini: Boolean,
+    projectName: String,
+  },
+};
+
+export default RepoFileOptions;
+</script>
+
+<template>
+<tr v-if="isMini" class="repo-file-options">
+    <td>
+      <span class="title">{{projectName}}</span>
+
+      <ul>
+        <li>
+          <a href="#" title="New File">
+            <i class="fa fa-file-o"></i>
+          </a>
+        </li>
+
+        <li>
+          <a href="#" title="New Folder">
+            <i class="fa fa-folder-o"></i>
+          </a>
+        </li>
+      </ul>
+    </td>
+  </tr>
+</template>

app/assets/javascripts/repo/repo_loading_file.js

-const RepoLoadingFile = {
-  template: `
-  <tr v-if='loading.tree && !hasFiles'>
-    <td>
-      <div class="animation-container animation-container-small">
-        <div v-for="n in 6" :class="lineOfCode(n)"></div>
-      </div>
-    </td>
-    <td v-if="!isMini" class='hidden-sm hidden-xs'>
-      <div class="animation-container">
-        <div v-for="n in 6" :class="lineOfCode(n)"></div>
-      </div>
-    </td>
-    <td v-if="!isMini" class='hidden-xs'>
-      <div class="animation-container animation-container-small">
-        <div v-for="n in 6" :class="lineOfCode(n)"></div>
-      </div>
-    </td>
-  </tr>
-  `,
-
-  methods: {
-    lineOfCode(n) {
-      return `line-of-code-${n}`;
-    },
-  },
-
-  props: {
-    loading: Object,
-    hasFiles: Boolean,
-    isMini: Boolean,
-  },
-};
-export default RepoLoadingFile;

app/assets/javascripts/repo/repo_loading_file.vue

+<script>
+const RepoLoadingFile = {
+  methods: {
+    lineOfCode(n) {
+      return `line-of-code-${n}`;
+    },
+  },
+
+  props: {
+    loading: Object,
+    hasFiles: Boolean,
+    isMini: Boolean,
+  },
+};
+
+export default RepoLoadingFile;
+</script>
+
+<template>
+<tr v-if="loading.tree && !hasFiles">
+  <td>
+    <div class="animation-container animation-container-small">
+      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+    </div>
+  </td>
+
+  <td v-if="!isMini" class="hidden-sm hidden-xs">
+    <div class="animation-container">
+      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+    </div>
+  </td>
+
+  <td v-if="!isMini" class="hidden-xs">
+    <div class="animation-container animation-container-small">
+      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+    </div>
+  </td>
+</tr>
+</template>

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

+<script>
 const RepoPreviousDirectory = {
-  template: `
-  <tr>
-    <td colspan='3'>
-      <a :href='prevUrl' @click.prevent='linkClicked(prevUrl)'>..</a>
-    </td>
-  </tr>
-  `,
   props: {
     name: 'repo-previous-directory',
     prevUrl: String,
@@ -17,4 +11,14 @@ const RepoPreviousDirectory = {
     },
   },
 };
+
 export default RepoPreviousDirectory;
+</script>
+
+<template>
+<tr>
+  <td colspan="3">
+    <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a>
+  </td>
+</tr>
+</template>

app/assets/javascripts/repo/repo_sidebar.js

@@ -2,10 +2,10 @@ 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';
-import RepoFileOptions from './repo_file_options';
-import RepoFile from './repo_file';
-import RepoLoadingFile from './repo_loading_file';
+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';
 
 export default class RepoSidebar {

app/assets/javascripts/repo/repo_store.js

@@ -55,7 +55,7 @@ const RepoStore = {
 
   toggleRawPreview() {
     this.activeFile.raw = !this.activeFile.raw;
-    this.activeFileLabel = this.activeFile.raw ?  'Display rendered file' : 'Display source';
+    this.activeFileLabel = this.activeFile.raw ? 'Display rendered file' : 'Display source';
   },
 
   setActiveFiles(file) {

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

-import RepoHelper from './repo_helper';
+<script>
 import RepoStore from './repo_store';
 
 const RepoTab = {
-  template: `
-  <li>
-    <a href='#' @click.prevent='xClicked(tab)' v-if='!tab.loading'>
-      <i class='fa' :class="changedClass"></i>
-    </a>
-    <a href='#' v-if='!tab.loading' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
-    <i v-if='tab.loading' class='fa fa-spinner fa-spin'></i>
-  </li>
-  `,
   props: {
     name: 'repo-tab',
     tab: Object,
@@ -36,4 +27,18 @@ const RepoTab = {
     },
   },
 };
+
 export default RepoTab;
+</script>
+
+<template>
+<li>
+  <a href="#" @click.prevent="xClicked(tab)" v-if="!tab.loading">
+    <i class="fa" :class="changedClass"></i>
+  </a>
+
+  <a href="#" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
+
+  <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
+</li>
+</template>

app/assets/javascripts/repo/repo_tabs.js

 import Vue from 'vue';
 import Store from './repo_store';
-import RepoTab from './repo_tab';
+import RepoTab from './repo_tab.vue';
 import RepoMiniMixin from './repo_mini_mixin';
 
 export default class RepoTabs {