Re-arrange <script> tags before <template> tags in .vue files3612-update-script-template-order-in-vue-files

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38743

12 files changed, 121 insertions, 97 deletions

diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index b8a16356576..b4067d229aa 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="cell">
-    <code-cell
-      type="input"
-      :raw-code="rawInputCode"
-      :count="cell.execution_count"
-      :code-css-class="codeCssClass" />
-    <output-cell
-      v-if="hasOutput"
-      :count="cell.execution_count"
-      :output="output"
-      :code-css-class="codeCssClass" />
-  </div>
-</template>
-
 <script>
 import CodeCell from './code/index.vue';
 import OutputCell from './output/index.vue';
@@ -51,6 +36,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="cell">
+    <code-cell
+      type="input"
+      :raw-code="rawInputCode"
+      :count="cell.execution_count"
+      :code-css-class="codeCssClass" />
+    <output-cell
+      v-if="hasOutput"
+      :count="cell.execution_count"
+      :output="output"
+      :code-css-class="codeCssClass" />
+  </div>
+</template>
+
 <style scoped>
 .cell {
   flex-direction: column;
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 31b30f601e2..0f3083f05b2 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,17 +1,3 @@
-<template>
-  <div :class="type">
-    <prompt
-      :type="promptType"
-      :count="count" />
-    <pre
-      class="language-python"
-      :class="codeCssClass"
-      ref="code"
-      v-text="code">
-    </pre>
-  </div>
-</template>
-
 <script>
   import Prism from '../../lib/highlight';
   import Prompt from '../prompt.vue';
@@ -55,3 +41,17 @@
     },
   };
 </script>
+
+<template>
+  <div :class="type">
+    <prompt
+      :type="promptType"
+      :count="count" />
+    <pre
+      class="language-python"
+      :class="codeCssClass"
+      ref="code"
+      v-text="code">
+    </pre>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 814d2ea92b4..82c51a1068c 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="cell text-cell">
-    <prompt />
-    <div class="markdown" v-html="markdown"></div>
-  </div>
-</template>
-
 <script>
   /* global katex */
   import marked from 'marked';
@@ -95,6 +88,13 @@
   };
 </script>
 
+<template>
+  <div class="cell text-cell">
+    <prompt />
+    <div class="markdown" v-html="markdown"></div>
+  </div>
+</template>
+
 <style>
 .markdown .katex {
   display: block;
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index 0f39cd138df..2110a9de7ed 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="output">
-    <prompt />
-    <div v-html="rawCode"></div>
-  </div>
-</template>
-
 <script>
 import Prompt from '../prompt.vue';
 
@@ -20,3 +13,10 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="output">
+    <prompt />
+    <div v-html="rawCode"></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue
index f3b873bbc0f..fbb39ea6e2d 100644
--- a/app/assets/javascripts/notebook/cells/output/image.vue
+++ b/app/assets/javascripts/notebook/cells/output/image.vue
@@ -1,11 +1,3 @@
-<template>
-  <div class="output">
-    <prompt />
-    <img
-      :src="'data:' + outputType + ';base64,' + rawCode" />
-  </div>
-</template>
-
 <script>
 import Prompt from '../prompt.vue';
 
@@ -25,3 +17,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="output">
+    <prompt />
+    <img
+      :src="'data:' + outputType + ';base64,' + rawCode" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 23c9ea78939..05af0bf1e8e 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -1,12 +1,3 @@
-<template>
-  <component :is="componentName"
-    type="output"
-    :outputType="outputType"
-    :count="count"
-    :raw-code="rawCode"
-    :code-css-class="codeCssClass" />
-</template>
-
 <script>
 import CodeCell from '../code/index.vue';
 import Html from './html.vue';
@@ -81,3 +72,12 @@ export default {
   },
 };
 </script>
+
+<template>
+  <component :is="componentName"
+    type="output"
+    :outputType="outputType"
+    :count="count"
+    :raw-code="rawCode"
+    :code-css-class="codeCssClass" />
+</template>
diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue
index 4540e4248d8..039fb99293d 100644
--- a/app/assets/javascripts/notebook/cells/prompt.vue
+++ b/app/assets/javascripts/notebook/cells/prompt.vue
@@ -1,11 +1,3 @@
-<template>
-  <div class="prompt">
-    <span v-if="type && count">
-      {{ type }} [{{ count }}]:
-    </span>
-  </div>
-</template>
-
 <script>
   export default {
     props: {
@@ -21,6 +13,14 @@
   };
 </script>
 
+<template>
+  <div class="prompt">
+    <span v-if="type && count">
+      {{ type }} [{{ count }}]:
+    </span>
+  </div>
+</template>
+
 <style scoped>
 .prompt {
   padding: 0 10px;
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index fd62c1231ef..e88806431af 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -1,14 +1,3 @@
-<template>
-  <div v-if="hasNotebook">
-    <component
-      v-for="(cell, index) in cells"
-      :is="cellType(cell.cell_type)"
-      :cell="cell"
-      :key="index"
-      :code-css-class="codeCssClass" />
-  </div>
-</template>
-
 <script>
   import {
     MarkdownCell,
@@ -59,6 +48,17 @@
   };
 </script>
 
+<template>
+  <div v-if="hasNotebook">
+    <component
+      v-for="(cell, index) in cells"
+      :is="cellType(cell.cell_type)"
+      :cell="cell"
+      :key="index"
+      :code-css-class="codeCssClass" />
+  </div>
+</template>
+
 <style>
 .cell,
 .input,
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index b874e484d45..c8a2f778ee8 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -1,13 +1,3 @@
-<template>
-  <div class="pdf-viewer" v-if="hasPDF">
-    <page v-for="(page, index) in pages"
-      :key="index"
-      :v-if="!loading"
-      :page="page"
-      :number="index + 1" />
-  </div>
-</template>
-
 <script>
   import pdfjsLib from 'vendor/pdf';
   import workerSrc from 'vendor/pdf.worker.min';
@@ -64,6 +54,16 @@
   };
 </script>
 
+<template>
+  <div class="pdf-viewer" v-if="hasPDF">
+    <page v-for="(page, index) in pages"
+      :key="index"
+      :v-if="!loading"
+      :page="page"
+      :number="index + 1" />
+  </div>
+</template>
+
 <style>
   .pdf-viewer {
     background: url('./assets/img/bg.gif');
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index 7b74ee4eb2e..be38f7cc129 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -1,10 +1,3 @@
-<template>
-  <canvas
-    class="pdf-page"
-    ref="canvas"
-    :data-page="number" />
-</template>
-
 <script>
   export default {
     props: {
@@ -48,6 +41,13 @@
   };
 </script>
 
+<template>
+  <canvas
+    class="pdf-page"
+    ref="canvas"
+    :data-page="number" />
+</template>
+
 <style>
 .pdf-page {
   margin: 8px auto 0 auto;
diff --git a/changelogs/unreleased/3612-update-script-template-order-in-vue-files.yml b/changelogs/unreleased/3612-update-script-template-order-in-vue-files.yml
new file mode 100644
index 00000000000..cea6cb2e48b
--- /dev/null
+++ b/changelogs/unreleased/3612-update-script-template-order-in-vue-files.yml
@@ -0,0 +1,5 @@
+---
+title: Re-arrange <script> tags before <template> tags in .vue files
+merge_request: 14671
+author:
+type: changed
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md
index c8d23609280..77ae6d2a0ea 100644
--- a/doc/development/fe_guide/style_guide_js.md
+++ b/doc/development/fe_guide/style_guide_js.md
@@ -470,7 +470,25 @@ On those a default key should not be provided.
   ```
 
 #### Ordering
-1. Order for a Vue Component:
+
+1. Tag order in `.vue` file
+
+  ```
+  <script>
+    // ...
+  </script>
+
+  <template>
+    // ...
+  </template>
+
+  // We don't use scoped styles but there are few instances of this
+  <style>
+    // ...
+  </style>
+  ```
+
+1. Properties in a Vue Component:
   1. `name`
   1. `props`
   1. `mixins`
@@ -490,6 +508,7 @@ On those a default key should not be provided.
   1. `beforeDestroy`
   1. `destroyed`
 
+
 #### Vue and Bootstrap
 
 1. Tooltips: Do not rely on `has-tooltip` class name for Vue components