From b0467db88c83dab5839b047d531c1412c1a52cfc Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 21 Nov 2018 21:52:28 +0800
Subject: [PATCH 1/4] test: add tests

---
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_vue/attributes.vue                   | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index a22e4a0cf375..fed2328473a7 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -31,6 +31,7 @@ exports[`attributes.vue - vue-verify 1`] = `
       console.log(test);
     }
   "
+  @click="doSomething()"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -87,6 +88,7 @@ exports[`attributes.vue - vue-verify 1`] = `
       console.log(test);
     }
   "
+  @click="doSomething();"
 ></div>
 
 `;
@@ -122,6 +124,7 @@ exports[`attributes.vue - vue-verify 2`] = `
       console.log(test);
     }
   "
+  @click="doSomething()"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -178,6 +181,7 @@ exports[`attributes.vue - vue-verify 2`] = `
       console.log(test);
     }
   "
+  @click="doSomething();"
 ></div>
 
 `;
diff --git a/tests/html_vue/attributes.vue b/tests/html_vue/attributes.vue
index 80a6c87bd9c1..631d651e413a 100644
--- a/tests/html_vue/attributes.vue
+++ b/tests/html_vue/attributes.vue
@@ -28,4 +28,5 @@
       console.log(test);
     }
   "
+  @click="doSomething()"
 ></div>

From 2e1d8d818c4a51fde6d92dff91c4a892e04c123b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 21 Nov 2018 21:53:06 +0800
Subject: [PATCH 2/4] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 767 +++++++++++++++++-
 tests/html_vue/jsfmt.spec.js                  |   1 +
 2 files changed, 728 insertions(+), 40 deletions(-)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index fed2328473a7..9754a28c1a62 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -186,6 +186,99 @@ exports[`attributes.vue - vue-verify 2`] = `
 
 `;
 
+exports[`attributes.vue - vue-verify 3`] = `
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
+  @click="() => {console.log(test)}"
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  v-for="item in items"
+  v-for="item of items"
+  v-for="(item, index) in items"
+  v-for="value in object"
+  v-for="(value, key) in object"
+  v-for="(value, key) of object"
+  v-for="(value, key, index) in object"
+  v-for="n in evenNumbers"
+  v-for="n in even(numbers)"
+  v-for="n in 10"
+  v-for="{ a } in [0].map(() => ({ a: 1 }))"
+  v-for="({ a }, [c]) in [0].map(() => 1)"
+  v-for="n in items.map(x => {
+    return x
+  })"
+  @click="/* hello */"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+  @click="$emit('click')"
+  @click="$emit('click')"
+  @click="
+    $emit('click')
+    if (something) {
+      for (let i = j; i < 100; i++) {}
+    } else {
+    }
+  "
+  slot-scope="{
+    destructuring: {
+      a: { b }
+    }
+  }"
+  :class="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
+  :class="
+    (() => {
+      return 'hello'
+    })()
+  "
+  :key="index /* hello */"
+  :key="
+    index // hello
+  "
+  @click="
+    () => {
+      console.log(test)
+    }
+  "
+  @click="
+    () => {
+      console.log(test)
+    }
+  "
+  @click="doSomething()"
+></div>
+
+`;
+
 exports[`board_card.vue - vue-verify 1`] = `
 <script>
 import './issue_card_inner';
@@ -502,6 +595,164 @@ export default {
 
 `;
 
+exports[`board_card.vue - vue-verify 3`] = `
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script>
+import "./issue_card_inner"
+import eventHub from "../eventhub"
+
+const Store = gl.issueBoards.BoardsStore
+
+export default {
+  name: "BoardsIssueCard",
+  components: {
+    "issue-card-inner": gl.issueBoards.IssueCardInner
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail
+    }
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      )
+    }
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true
+    },
+    mouseMove() {
+      this.showDetail = false
+    },
+    showIssue(e) {
+      if (e.target.classList.contains("js-no-trigger")) return
+
+      if (this.showDetail) {
+        this.showDetail = false
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit("clearDetailIssue")
+        } else {
+          eventHub.$emit("newDetailIssue", this.issue)
+          Store.detail.list = this.list
+        }
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
+  >
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true"
+    />
+  </li>
+</template>
+
+`;
+
 exports[`filter.vue - vue-verify 1`] = `
 <!-- vue filters are only allowed in v-bind and interpolation -->
 <template>
@@ -602,6 +853,56 @@ exports[`filter.vue - vue-verify 2`] = `
 
 `;
 
+exports[`filter.vue - vue-verify 3`] = `
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+`;
+
 exports[`interpolations.vue - vue-verify 1`] = `
 <div>Fuga magnam facilis. Voluptatem quaerat porro.{{
 
@@ -797,50 +1098,267 @@ x => {
                     
                     interpolation
 
-  }}
-  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
-</div>
+  }}
+  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+</div>
+
+<script type="text/jsx">
+export default {
+  render (h) {
+    return (
+      <ul
+        class={{
+          'a': b,
+          'c': d,
+          "e": f
+        }}
+      >
+        { this.xyz }
+      </ul>
+  )
+};
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}
+  1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }} 1234567890
+</div>
+
+`;
+
+exports[`interpolations.vue - vue-verify 3`] = `
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>
+  Fuga magnam facilis. Voluptatem quaerat porro.{{
+    x => {
+      const hello = "world"
+      return hello
+    }
+  }}
+  Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+  error
+  {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+  }}
+  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
+</div>
+
+<script type="text/jsx">
+export default {
+  render (h) {
+    return (
+      <ul
+        class={{
+          'a': b,
+          'c': d,
+          "e": f
+        }}
+      >
+        { this.xyz }
+      </ul>
+  )
+};
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}
+  1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{ something }} 1234567890
+</div>
+
+`;
+
+exports[`pre-child.vue - vue-verify 1`] = `
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
+-->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue
+-->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
 
-<script type="text/jsx">
-export default {
-  render (h) {
-    return (
-      <ul
-        class={{
-          'a': b,
-          'c': d,
-          "e": f
-        }}
-      >
-        { this.xyz }
-      </ul>
-  )
-};
-</script>
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
 
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890{{
-    something
-  }}1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890
-  {{ something }}1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890{{
-    something
-  }}
-  1234567890
-</div>
-<div>
-  1234567890123456789012345678901234567890123456789012345678901234567890
-  {{ something }} 1234567890
-</div>
+<template>
+  <pre class="woot">
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+  123{{
+      wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq ||
+        wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
 
 `;
 
-exports[`pre-child.vue - vue-verify 1`] = `
+exports[`pre-child.vue - vue-verify 2`] = `
 <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
 <pre
   ref="buildTrace"
@@ -938,7 +1456,7 @@ exports[`pre-child.vue - vue-verify 1`] = `
 
 `;
 
-exports[`pre-child.vue - vue-verify 2`] = `
+exports[`pre-child.vue - vue-verify 3`] = `
 <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
 <pre
   ref="buildTrace"
@@ -1054,6 +1572,15 @@ exports[`script_src.vue - vue-verify 2`] = `
 
 `;
 
+exports[`script_src.vue - vue-verify 3`] = `
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+
+`;
+
 exports[`self_closing.vue - vue-verify 1`] = `
 <template>
   <div />
@@ -1120,6 +1647,39 @@ foo();
 
 `;
 
+exports[`self_closing.vue - vue-verify 3`] = `
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <div />
+</template>
+
+<script>
+foo()
+</script>
+
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+
+`;
+
 exports[`self_closing_style.vue - vue-verify 1`] = `
 <template>
   <span :class="$style.root"><slot /></span>
@@ -1150,6 +1710,21 @@ exports[`self_closing_style.vue - vue-verify 2`] = `
 
 `;
 
+exports[`self_closing_style.vue - vue-verify 3`] = `
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
+
+`;
+
 exports[`template.vue - vue-verify 1`] = `
 <!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
 <template>
@@ -1270,6 +1845,66 @@ exports[`template.vue - vue-verify 2`] = `
 
 `;
 
+exports[`template.vue - vue-verify 3`] = `
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize > 0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize > 0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+`;
+
 exports[`template-lang.vue - vue-verify 1`] = `
 <template lang="pug">
   .test
@@ -1312,6 +1947,37 @@ exports[`template-lang.vue - vue-verify 2`] = `
 
 
    
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+`;
+
+exports[`template-lang.vue - vue-verify 3`] = `
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
    lang='pug'>
   .test
     #foo
@@ -1373,3 +2039,24 @@ exports[`test.vue - vue-verify 2`] = `
 </template>
 
 `;
+
+exports[`test.vue - vue-verify 3`] = `
+<script>
+</script>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script></script>
+
+<template>
+  <br />
+  <footer>foo <br /></footer>
+</template>
+
+`;
diff --git a/tests/html_vue/jsfmt.spec.js b/tests/html_vue/jsfmt.spec.js
index 89a7dccff386..cb7655fcd824 100644
--- a/tests/html_vue/jsfmt.spec.js
+++ b/tests/html_vue/jsfmt.spec.js
@@ -1,2 +1,3 @@
 run_spec(__dirname, ["vue"]);
 run_spec(__dirname, ["vue"], { trailingComma: "es5" });
+run_spec(__dirname, ["vue"], { semi: false });

From 71bfc55190d2a3b1d26e91e4b0bf4e70979f3da4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 21 Nov 2018 21:53:30 +0800
Subject: [PATCH 3/4] test: add tests

---
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 6 ++++++
 tests/html_vue/attributes.vue                   | 1 +
 2 files changed, 7 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 9754a28c1a62..5975519c6c85 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -32,6 +32,7 @@ exports[`attributes.vue - vue-verify 1`] = `
     }
   "
   @click="doSomething()"
+  @click="doSomething;"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -89,6 +90,7 @@ exports[`attributes.vue - vue-verify 1`] = `
     }
   "
   @click="doSomething();"
+  @click="doSomething;"
 ></div>
 
 `;
@@ -125,6 +127,7 @@ exports[`attributes.vue - vue-verify 2`] = `
     }
   "
   @click="doSomething()"
+  @click="doSomething;"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -182,6 +185,7 @@ exports[`attributes.vue - vue-verify 2`] = `
     }
   "
   @click="doSomething();"
+  @click="doSomething;"
 ></div>
 
 `;
@@ -218,6 +222,7 @@ exports[`attributes.vue - vue-verify 3`] = `
     }
   "
   @click="doSomething()"
+  @click="doSomething;"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -275,6 +280,7 @@ exports[`attributes.vue - vue-verify 3`] = `
     }
   "
   @click="doSomething()"
+  @click="doSomething"
 ></div>
 
 `;
diff --git a/tests/html_vue/attributes.vue b/tests/html_vue/attributes.vue
index 631d651e413a..f9ecccfcd296 100644
--- a/tests/html_vue/attributes.vue
+++ b/tests/html_vue/attributes.vue
@@ -29,4 +29,5 @@
     }
   "
   @click="doSomething()"
+  @click="doSomething;"
 ></div>

From a1ca32b524e3101f8157248e0ea3e437a0fd7ff4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 21 Nov 2018 23:40:06 +0800
Subject: [PATCH 4/4] fix(vue): tweak semicolon for single expression in event
 bindings

---
 src/common/internal-plugins.js                |  4 +
 src/language-html/printer-html.js             | 20 ++---
 src/language-html/syntax-vue.js               | 14 +++
 src/language-js/html-binding.js               | 19 ++++
 src/language-js/parser-babylon.js             | 86 +++++++++++--------
 src/language-js/printer-estree.js             | 20 ++++-
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 22 ++---
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 website/static/worker.js                      |  4 +
 9 files changed, 130 insertions(+), 61 deletions(-)

diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index d071a32d79f5..9be225ece530 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -33,6 +33,10 @@ module.exports = [
         return eval("require")("../language-js/parser-babylon").parsers
           .__vue_expression;
       },
+      get __vue_event_binding() {
+        return eval("require")("../language-js/parser-babylon").parsers
+          .__vue_event_binding;
+      },
       // JS - Flow
       get flow() {
         return eval("require")("../language-js/parser-flow").parsers.flow;
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index c849780ecea2..44bc59f49454 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -41,7 +41,11 @@ const {
 const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
-const { printVueFor, printVueSlotScope } = require("./syntax-vue");
+const {
+  printVueFor,
+  printVueSlotScope,
+  isVueEventBindingExpression
+} = require("./syntax-vue");
 const { printImgSrcset } = require("./syntax-attribute");
 
 function concat(parts) {
@@ -920,17 +924,13 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
     const jsExpressionBindingPatterns = ["^v-"];
 
     if (isKeyMatched(vueEventBindingPatterns)) {
-      // copied from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/codegen/events.js#L3-L4
-      const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/;
-      const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
-
-      const value = getValue()
-        // https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/helpers.js#L104
-        .trim();
+      const value = getValue();
       return printMaybeHug(
-        simplePathRE.test(value) || fnExpRE.test(value)
+        isVueEventBindingExpression(value)
           ? textToDoc(value, { parser: "__js_expression" })
-          : stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
+          : stripTrailingHardline(
+              textToDoc(value, { parser: "__vue_event_binding" })
+            )
       );
     }
 
diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
index 234bacaf0cb9..eb8698545633 100644
--- a/src/language-html/syntax-vue.js
+++ b/src/language-html/syntax-vue.js
@@ -66,7 +66,21 @@ function printVueSlotScope(value, textToDoc) {
   });
 }
 
+function isVueEventBindingExpression(eventBindingValue) {
+  // https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/codegen/events.js#L3-L4
+  // arrow function or anonymous function
+  const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/;
+  // simple member expression chain (a, a.b, a['b'], a["b"], a[0], a[b])
+  const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
+
+  // https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/helpers.js#L104
+  const value = eventBindingValue.trim();
+
+  return fnExpRE.test(value) || simplePathRE.test(value);
+}
+
 module.exports = {
+  isVueEventBindingExpression,
   printVueFor,
   printVueSlotScope
 };
diff --git a/src/language-js/html-binding.js b/src/language-js/html-binding.js
index 411a2e9988ad..0bcb25c173f9 100644
--- a/src/language-js/html-binding.js
+++ b/src/language-js/html-binding.js
@@ -45,6 +45,25 @@ function printHtmlBinding(path, options, print) {
   }
 }
 
+// based on https://github.com/prettier/prettier/blob/master/src/language-html/syntax-vue.js isVueEventBindingExpression()
+function isVueEventBindingExpression(node) {
+  switch (node.type) {
+    case "MemberExpression":
+      switch (node.property.type) {
+        case "Identifier":
+        case "NumericLiteral":
+        case "StringLiteral":
+          return isVueEventBindingExpression(node.object);
+      }
+      return false;
+    case "Identifier":
+      return true;
+    default:
+      return false;
+  }
+}
+
 module.exports = {
+  isVueEventBindingExpression,
   printHtmlBinding
 };
diff --git a/src/language-js/parser-babylon.js b/src/language-js/parser-babylon.js
index 00ad22e73e55..01402e55169b 100644
--- a/src/language-js/parser-babylon.js
+++ b/src/language-js/parser-babylon.js
@@ -41,44 +41,49 @@ function babylonOptions(extraOptions, extraPlugins) {
   );
 }
 
-function parse(text, parsers, opts) {
-  // Inline the require to avoid loading all the JS if we don't use it
-  const babylon = require("@babel/parser");
+function createParse(parseMethod) {
+  return (text, parsers, opts) => {
+    // Inline the require to avoid loading all the JS if we don't use it
+    const babylon = require("@babel/parser");
 
-  const combinations = [
-    babylonOptions({ strictMode: true }, ["decorators-legacy"]),
-    babylonOptions({ strictMode: false }, ["decorators-legacy"]),
-    babylonOptions({ strictMode: true }, [
-      ["decorators", { decoratorsBeforeExport: false }]
-    ]),
-    babylonOptions({ strictMode: false }, [
-      ["decorators", { decoratorsBeforeExport: false }]
-    ])
-  ];
+    const combinations = [
+      babylonOptions({ strictMode: true }, ["decorators-legacy"]),
+      babylonOptions({ strictMode: false }, ["decorators-legacy"]),
+      babylonOptions({ strictMode: true }, [
+        ["decorators", { decoratorsBeforeExport: false }]
+      ]),
+      babylonOptions({ strictMode: false }, [
+        ["decorators", { decoratorsBeforeExport: false }]
+      ])
+    ];
 
-  const parseMethod =
-    !opts || opts.parser === "babylon" ? "parse" : "parseExpression";
-
-  let ast;
-  try {
-    ast = tryCombinations(babylon[parseMethod].bind(null, text), combinations);
-  } catch (error) {
-    throw createError(
-      // babel error prints (l:c) with cols that are zero indexed
-      // so we need our custom error
-      error.message.replace(/ \(.*\)/, ""),
-      {
-        start: {
-          line: error.loc.line,
-          column: error.loc.column + 1
+    let ast;
+    try {
+      ast = tryCombinations(
+        babylon[parseMethod].bind(null, text),
+        combinations
+      );
+    } catch (error) {
+      throw createError(
+        // babel error prints (l:c) with cols that are zero indexed
+        // so we need our custom error
+        error.message.replace(/ \(.*\)/, ""),
+        {
+          start: {
+            line: error.loc.line,
+            column: error.loc.column + 1
+          }
         }
-      }
-    );
-  }
-  delete ast.tokens;
-  return postprocess(ast, Object.assign({}, opts, { originalText: text }));
+      );
+    }
+    delete ast.tokens;
+    return postprocess(ast, Object.assign({}, opts, { originalText: text }));
+  };
 }
 
+const parse = createParse("parse");
+const parseExpression = createParse("parseExpression");
+
 function tryCombinations(fn, combinations) {
   let error;
   for (let i = 0; i < combinations.length; i++) {
@@ -94,7 +99,7 @@ function tryCombinations(fn, combinations) {
 }
 
 function parseJson(text, parsers, opts) {
-  const ast = parse(text, parsers, Object.assign({}, opts, { parser: "json" }));
+  const ast = parseExpression(text, parsers, opts);
 
   ast.comments.forEach(assertJsonNode);
   assertJsonNode(ast);
@@ -164,17 +169,20 @@ const babylon = Object.assign(
   { parse, astFormat: "estree", hasPragma },
   locFns
 );
+const babylonExpression = Object.assign({}, babylon, {
+  parse: parseExpression
+});
 
 // Export as a plugin so we can reuse the same bundle for UMD loading
 module.exports = {
   parsers: {
     babylon,
-    json: Object.assign({}, babylon, {
+    json: Object.assign({}, babylonExpression, {
       hasPragma() {
         return true;
       }
     }),
-    json5: babylon,
+    json5: babylonExpression,
     "json-stringify": Object.assign(
       {
         parse: parseJson,
@@ -183,8 +191,10 @@ module.exports = {
       locFns
     ),
     /** @internal */
-    __js_expression: babylon,
+    __js_expression: babylonExpression,
     /** for vue filter */
-    __vue_expression: babylon
+    __vue_expression: babylonExpression,
+    /** for vue event binding to handle semicolon */
+    __vue_event_binding: babylon
   }
 };
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 8a8f265d6275..94a32d910a8f 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -34,7 +34,10 @@ const clean = require("./clean");
 const insertPragma = require("./pragma").insertPragma;
 const handleComments = require("./comments");
 const pathNeedsParens = require("./needs-parens");
-const { printHtmlBinding } = require("./html-binding");
+const {
+  printHtmlBinding,
+  isVueEventBindingExpression
+} = require("./html-binding");
 const preprocess = require("./preprocess");
 const {
   hasNode,
@@ -494,6 +497,21 @@ function printPathNoParens(path, options, print, args) {
       if (n.directive) {
         return concat([nodeStr(n.expression, options, true), semi]);
       }
+
+      if (options.parser === "__vue_event_binding") {
+        const parent = path.getParentNode();
+        if (
+          parent.type === "Program" &&
+          parent.body.length === 1 &&
+          parent.body[0] === n
+        ) {
+          return concat([
+            path.call(print, "expression"),
+            isVueEventBindingExpression(n.expression) ? ";" : ""
+          ]);
+        }
+      }
+
       // Do not append semicolon after the only JSX element in a program
       return concat([
         path.call(print, "expression"),
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 5975519c6c85..6435d6b8de58 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -52,9 +52,9 @@ exports[`attributes.vue - vue-verify 1`] = `
     return x;
   })"
   @click="/* hello */"
-  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click');"
-  @click="$emit('click');"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+  @click="$emit('click')"
+  @click="$emit('click')"
   @click="
     $emit('click');
     if (something) {
@@ -89,7 +89,7 @@ exports[`attributes.vue - vue-verify 1`] = `
       console.log(test);
     }
   "
-  @click="doSomething();"
+  @click="doSomething()"
   @click="doSomething;"
 ></div>
 
@@ -147,9 +147,9 @@ exports[`attributes.vue - vue-verify 2`] = `
     return x;
   })"
   @click="/* hello */"
-  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click');"
-  @click="$emit('click');"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */ /* 5 */"
+  @click="$emit('click')"
+  @click="$emit('click')"
   @click="
     $emit('click');
     if (something) {
@@ -184,7 +184,7 @@ exports[`attributes.vue - vue-verify 2`] = `
       console.log(test);
     }
   "
-  @click="doSomething();"
+  @click="doSomething()"
   @click="doSomething;"
 ></div>
 
@@ -280,7 +280,7 @@ exports[`attributes.vue - vue-verify 3`] = `
     }
   "
   @click="doSomething()"
-  @click="doSomething"
+  @click="doSomething;"
 ></div>
 
 `;
@@ -429,7 +429,7 @@ export default {
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event);"
+    @mouseup="showIssue($event)"
   >
     <issue-card-inner
       :list="list"
@@ -587,7 +587,7 @@ export default {
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event);"
+    @mouseup="showIssue($event)"
   >
     <issue-card-inner
       :list="list"
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index ca2f55b1b1a9..4d16cbb3cdc2 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -72,7 +72,7 @@ exports[`template-bind.vue - vue-verify 1`] = `
   <div v-bind:id="'&quot;' + id"></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
-  <button @click="foo(arg, 'string');"></button>
+  <button @click="foo(arg, 'string')"></button>
 </template>
 
 `;
diff --git a/website/static/worker.js b/website/static/worker.js
index e51a2e6181bc..3bdae4ffd336 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -37,6 +37,10 @@ var parsers = {
     importScriptOnce("lib/parser-babylon.js");
     return prettierPlugins.babylon.parsers.__vue_expression;
   },
+  get __vue_event_binding() {
+    importScriptOnce("lib/parser-babylon.js");
+    return prettierPlugins.babylon.parsers.__vue_event_binding;
+  },
   // JS - Flow
   get flow() {
     importScriptOnce("lib/parser-flow.js");