Use .vue files instead

Former-commit-id: 70be03e7

app/assets/javascripts/blob/xlsx/components/table.js → app/assets/javascripts/blob/xlsx/components/table.vue

+<template>
+  <div class="table-responsive">
+    <table
+      class="table">
+      <thead>
+        <tr>
+          <th></th>
+          <th
+            v-for="name in sheet.columns">
+            {{ name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, index) in sheet.rows"
+          :id="index + 1"
+          :class="{ hll: currentLineNumber === index + 1 }">
+          <td>
+            <a
+              :href="linePath(index)"
+              @click="updateCurrentLineNumber(index)">
+              {{ index + 1 }}
+            </a>
+          </td>
+          <td v-for="val in row">
+            {{ val }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
 import 'vendor/jquery.scrollTo';
 export default {
@@ -20,9 +55,9 @@ export default {
       if (hash !== '') {
         return `#${hash}-L${index + 1}`;
-      } else {
-        return `#L${index + 1}`;
       }
+
+      return `#L${index + 1}`;
     },
     updateCurrentLineNumber(index) {
       this.currentLineNumber = index + 1;
@@ -40,7 +75,7 @@ export default {
         this.getCurrentLineNumberFromUrl();
       },
       deep: true,
-    }
+    },
   },
   created() {
     this.getCurrentLineNumberFromUrl();
@@ -48,37 +83,5 @@ export default {
   mounted() {
     $.scrollTo(`#${this.currentLineNumber}`);
   },
-  template: `
-    <div class="table-responsive">
-      <table
-        class="table">
-        <thead>
-          <tr>
-            <th></th>
-            <th
-              v-for="name in sheet.columns">
-              {{ name }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(row, index) in sheet.rows"
-            :id="index + 1"
-            :class="{ hll: currentLineNumber === index + 1 }">
-            <td>
-              <a
-                :href="linePath(index)"
-                @click="updateCurrentLineNumber(index)">
-                {{ index + 1 }}
-              </a>
-            </td>
-            <td v-for="val in row">
-              {{ val }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `,
 };
+</script>

app/assets/javascripts/blob/xlsx/components/tabs.js → app/assets/javascripts/blob/xlsx/components/tabs.vue

+<template>
+  <ul class="nav nav-tabs prepend-top-default">
+    <li
+      class="prepend-left-10"
+      v-for="name in sheetNames"
+      :class="{ 'active': name === currentSheetName }">
+      <a
+        href="#"
+        @click.prevent="changeSheet(name)">
+        {{ name }}
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
 import eventHub from '../eventhub';
 export default {
@@ -19,18 +35,5 @@ export default {
       eventHub.$emit('update-sheet', name);
     },
   },
-  template: `
-    <ul class="nav nav-tabs prepend-top-default">
-      <li
-        class="prepend-left-10"
-        v-for="name in sheetNames"
-        :class="{ 'active': name === currentSheetName }">
-        <a
-          href="#"
-          @click.prevent="changeSheet(name)">
-          {{ name }}
-        </a>
-      </li>
-    </ul>
-  `,
 };
+</script>

app/assets/javascripts/blob/xlsx/index.js → app/assets/javascripts/blob/xlsx/index.vue

+<template>
+  <div>
+    <div
+      class="text-center prepend-top-default append-bottom-default"
+      aria-label="Loading Excel file"
+      v-if="loading">
+      <i
+        class="fa fa-spinner fa-spin fa-2x"
+        aria-hidden="true">
+      </i>
+    </div>
+    <xlsx-tabs
+      v-if="!loading && sheetNames"
+      :current-sheet-name="currentSheetName"
+      :sheet-names="sheetNames" />
+    <xlsx-table
+      v-if="!loading && sheet"
+      :sheet="sheet" />
+  </div>
+</template>
+
+<script>
 import eventHub from './eventhub';
 import Service from './service';
-import xlsxTable from './components/table';
-import xlsxTabs from './components/tabs';
+import xlsxTable from './components/table.vue';
+import xlsxTabs from './components/tabs.vue';
 export default {
   name: 'XLSXRenderer',
@@ -53,24 +75,5 @@ export default {
     xlsxTabs,
     xlsxTable,
   },
-  template: `
-    <div>
-      <div
-        class="text-center prepend-top-default append-bottom-default"
-        aria-label="Loading Excel file"
-        v-if="loading">
-        <i
-          class="fa fa-spinner fa-spin fa-2x"
-          aria-hidden="true">
-        </i>
-      </div>
-      <xlsx-tabs
-        v-if="!loading && sheetNames"
-        :current-sheet-name="currentSheetName"
-        :sheet-names="sheetNames" />
-      <xlsx-table
-        v-if="!loading && sheet"
-        :sheet="sheet" />
-    </div>
-  `,
 };
+</script>

app/assets/javascripts/blob/xlsx_viewer.js

 /* eslint-disable no-new */
 import Vue from 'vue';
-import xlsxTable from './xlsx';
+import xlsxTable from './xlsx/index.vue';
 document.addEventListener('DOMContentLoaded', () => {
   new Vue({
@@ -13,9 +13,12 @@ document.addEventListener('DOMContentLoaded', () => {
     components: {
       xlsxTable,
     },
-    template: `
-      <xlsx-table
-        :endpoint="endpoint" />
-    `,
+    render(createElement) {
+      return createElement('xlsx-table', {
+        props: {
+          endpoint: this.endpoint,
+        },
+      });
+    },
   });
 });

yarn.lock

@@ -37,6 +37,14 @@ acorn@^4.0.11, acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
+adler-32@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.0.0.tgz#28728a71756f629666dd1653cd80793a9df18651"
+  dependencies:
+    concat-stream ""
+    exit-on-epipe ""
+    printj ""
+
 after@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
@@ -1068,6 +1076,12 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
+cfb@~0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/cfb/-/cfb-0.11.1.tgz#a96db8f272a6c3fb99dbbb23ef41223f48be1ea7"
+  dependencies:
+    commander ""
+
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1153,6 +1167,15 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+codepage@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.8.1.tgz#f1a009d5261dc2754628bacb6fbbf0e6e2abffaa"
+  dependencies:
+    commander ""
+    concat-stream ""
+    exit-on-epipe ""
+    voc ""
+
 color-convert@^1.3.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
@@ -1185,6 +1208,10 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
+colors@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
+
 colors@^1.1.0, colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1201,7 +1228,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
-commander@^2.8.1, commander@^2.9.0:
+commander@, commander@^2.8.1, commander@^2.9.0, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -1257,6 +1284,14 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+concat-stream@, concat-stream@^1.4.6:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 concat-stream@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.0.tgz#53f7d43c51c5e43f81c8fdd03321c631be68d611"
@@ -1265,14 +1300,6 @@ concat-stream@1.5.0:
     readable-stream "~2.0.0"
     typedarray "~0.0.5"
-concat-stream@^1.4.6:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 config-chain@~1.1.5:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
@@ -1373,6 +1400,14 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
+crc-32@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.0.1.tgz#2efbddb7ccbb7beb4d181803b10e33a29c9fd214"
+  dependencies:
+    concat-stream ""
+    exit-on-epipe ""
+    printj ""
+
 create-ecdh@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
@@ -2116,6 +2151,10 @@ exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+exit-on-epipe@, exit-on-epipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.0.tgz#f6e0579c8214d33a08109fd6e2e5c1dbc70463fc"
+
 expand-braces@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
@@ -2362,6 +2401,10 @@ forwarded@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+frac@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/frac/-/frac-0.3.1.tgz#577677b7fdcbe6faf7c461f1801d34137cda4354"
+
 fresh@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
@@ -4411,6 +4454,10 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+printj@:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/printj/-/printj-1.0.0.tgz#5c37de6c5772a3fed8468399c2063b5b22528867"
+
 private@^0.1.6:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
@@ -5137,6 +5184,14 @@ sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+ssf@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.9.0.tgz#eab445edc8c85bc1b637eaa62c3cf0ace92b7148"
+  dependencies:
+    colors "0.6.2"
+    frac "0.3.1"
+    voc ""
+
 sshpk@^1.7.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"
@@ -5585,6 +5640,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
+voc@:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/voc/-/voc-0.5.0.tgz#be6ca7c76e4a57d930cc80f6b31fbd80ca86045c"
+
 void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
@@ -5823,6 +5882,18 @@ xdg-basedir@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
+xlsx@^0.9.9:
+  version "0.9.10"
+  resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.9.10.tgz#86434dd92fc743d8fced728c3e1e373b22ca2820"
+  dependencies:
+    adler-32 "~1.0.0"
+    cfb "~0.11.1"
+    codepage "~1.8.0"
+    commander "~2.9.0"
+    crc-32 "~1.0.0"
+    exit-on-epipe "~1.0.0"
+    ssf "~0.9.0"
+
 xmlhttprequest-ssl@1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"