Fix: bugs about multiple statements in v-on

Author: mysticatea

docs/ast.md

@@ -4,10 +4,35 @@ Some types are featured from [ESTree].
 
 - [Program]
 - [Node]
+- [Statement]
+- [BlockStatement]
 - [Expression]
 - [Literal]
 - [Pattern]
 
+You can use the type definition of this AST:
+
+```ts
+import {AST} from "vue-eslint-parser"
+
+export function create(context) {
+    context.parserServices.registerTemplateBodyVisitor(context, {
+        VElement(node: AST.VElement): void {
+            //...
+        }
+    })
+
+    return {
+        Program(node: AST.ESLintProgram): void {
+            //...
+        }
+    }
+}
+```
+
+`AST` has the types of ESLint's AST with the prefix `ESLint`.<br>
+See details: [../src/ast/nodes.ts](../src/ast/nodes.ts)
+
 ## Node
 
 ```js
@@ -70,14 +95,20 @@ interface VForExpression <: Expression {
     left: [ Pattern ]
     right: Expression
 }
+
+interface VOnExpression <: Expression {
+    type: "VOnExpression"
+    body: [ Statement ]
+}
 ```
 
 - This is mustaches or directive values.
 - If syntax errors exist, `VExpressionContainer#expression` is `null`.
 - `Reference` is objects but not `Node`. Those are external references which are in the expression.
-- `VForExpression` is an expression node like [ForInStatement] but it has an array as `left` property and does not have `body` property. This is the value of `v-for` directives.
+- `VForExpression` is an expression node like [ForInStatement] but it has an array as `left` property and does not have `body` property. This is the value of [`v-for` directives].
+- `VOnExpression` is an expression node like [BlockStatement] but it does not have braces. This is the value of [`v-on` directives].
 
-> Note: `vue-eslint-parser` transforms `v-for="(x, i) in list"` to `for(let [x, i] in list);` then gives the configured parser (`espree` by default) it. This implies that it needs the capability to parse ES2015 destructuring in order to parse `v-for` directives.
+> Note: `vue-eslint-parser` transforms `v-for="(x, i) in list"` to `for(let [x, i] in list);` then gives the configured parser (`espree` by default) it. This implies that it needs the capability to parse ES2015 destructuring in order to parse [`v-for` directives].
 
 ## VDirectiveKey
 
@@ -177,14 +208,17 @@ extend interface Program {
 This spec enhances [Program] nodes as it has the root node of `<template>`.
 This supports only HTML for now. However, I'm going to add other languages Vue.js supports. The AST of other languages may be different form to VElement.
 
-[ESTree]:     https://github.com/estree/estree
-[Program]:    https://github.com/estree/estree/blob/master/es5.md#programs
-[Node]:       https://github.com/estree/estree/blob/master/es5.md#node-objects
-[Expression]: https://github.com/estree/estree/blob/master/es5.md#expression
-[Literal]:    https://github.com/estree/estree/blob/master/es5.md#literal
-[Pattern]:    https://github.com/estree/estree/blob/master/es5.md#patterns
+[ESTree]: https://github.com/estree/estree
+[Program]: https://github.com/estree/estree/blob/master/es5.md#programs
+[Node]: https://github.com/estree/estree/blob/master/es5.md#node-objects
+[Statement]: https://github.com/estree/estree/blob/master/es5.md#statements
+[BlockStatement]: https://github.com/estree/estree/blob/master/es5.md#blockstatement
+[Expression]: https://github.com/estree/estree/blob/master/es5.md#expressions
+[Literal]: https://github.com/estree/estree/blob/master/es5.md#literal
+[Pattern]: https://github.com/estree/estree/blob/master/es5.md#patterns
 [Identifier]: https://github.com/estree/estree/blob/master/es5.md#identifier
 [ForInStatement]: https://github.com/estree/estree/blob/master/es5.md#forinstatement
 
-[`v-for` directives]: https://vuejs.org/v2/guide/list.html#v-for
-[scope]:              https://vuejs.org/v2/guide/components.html#Scoped-Slots
+[`v-for` directives]: https://vuejs.org/v2/api/#v-for
+[`v-on` directives]: https://vuejs.org/v2/api/#v-on
+[scope]: https://vuejs.org/v2/guide/components.html#Scoped-Slots

src/ast/nodes.ts

@@ -21,7 +21,7 @@ export interface HasParent {
 /**
  * The union type for all nodes.
  */
-export type Node = ESLintNode | VNode | VForExpression
+export type Node = ESLintNode | VNode | VForExpression | VOnExpression
 
 //------------------------------------------------------------------------------
 // Script
@@ -73,7 +73,7 @@ export interface ESLintEmptyStatement extends HasLocation, HasParent {
 
 export interface ESLintBlockStatement extends HasLocation, HasParent {
     type: "BlockStatement"
-    body: ESLintStatement
+    body: ESLintStatement[]
 }
 
 export interface ESLintExpressionStatement extends HasLocation, HasParent {
@@ -575,6 +575,15 @@ export interface VForExpression extends HasLocation, HasParent {
     right: ESLintExpression
 }
 
+/**
+ * The node of `v-on` directives.
+ */
+export interface VOnExpression extends HasLocation, HasParent {
+    type: "VOnExpression"
+    parent: VExpressionContainer
+    body: ESLintStatement[]
+}
+
 /**
  * The union type of any nodes.
  */
@@ -607,7 +616,7 @@ export interface VText extends HasLocation, HasParent {
 export interface VExpressionContainer extends HasLocation, HasParent {
     type: "VExpressionContainer"
     parent: VDocumentFragment | VElement | VDirective
-    expression: ESLintExpression | VForExpression | null
+    expression: ESLintExpression | VForExpression | VOnExpression | null
     references: Reference[]
 }
 

src/script/index.ts

@@ -3,7 +3,8 @@
  * @copyright 2017 Toru Nagashima. All rights reserved.
  * See LICENSE file in root directory for full license.
  */
-import {traverseNodes, ESLintArrayPattern, ESLintExpression, ESLintExpressionStatement, ESLintExtendedProgram, ESLintForInStatement, ESLintForOfStatement, ESLintPattern, ESLintProgram, ESLintVariableDeclaration, Node, ParseError, Reference, Token, Variable, VElement, VExpressionContainer, VForExpression} from "../ast"
+import * as lodash from "lodash"
+import {traverseNodes, ESLintArrayPattern, ESLintBlockStatement, ESLintExpression, ESLintExpressionStatement, ESLintExtendedProgram, ESLintForInStatement, ESLintForOfStatement, ESLintPattern, ESLintProgram, ESLintVariableDeclaration, Node, ParseError, Reference, Token, Variable, VElement, VForExpression, VOnExpression} from "../ast"
 import {debug} from "../common/debug"
 import {LocationCalculator} from "../common/location-calculator"
 import {analyzeExternalReferences, analyzeVariablesAndExternalReferences} from "./scope-analyzer"
@@ -12,6 +13,7 @@ import {analyzeExternalReferences, analyzeVariablesAndExternalReferences} from "
 // [2] = aliases.
 // [3] = all after the aliases.
 const ALIAS_PARENS = /^(\s*)\(([\s\S]+)\)(\s*(?:in|of)\b[\s\S]+)$/
+const DUMMY_PARENT: any = {}
 
 /**
  * The interface of ESLint custom parsers.
@@ -86,6 +88,25 @@ function normalizeLeft(left: ESLintVariableDeclaration | ESLintPattern, replaced
     return [id]
 }
 
+/**
+ * Remove references by name.
+ * @param references The array of references to remove.
+ * @param name The name of target references.
+ */
+function removeByName(references: Reference[], name: string): void {
+    let i = 0
+    while (i < references.length) {
+        const reference = references[i]
+
+        if (reference.id.name === name) {
+            references.splice(i, 1)
+        }
+        else {
+            i += 1
+        }
+    }
+}
+
 /**
  * Parse the given source code.
  *
@@ -114,7 +135,7 @@ function parseScriptFragment(code: string, locationCalculator: LocationCalculato
  * The result of parsing expressions.
  */
 export interface ExpressionParseResult {
-    expression: ESLintExpression | VForExpression
+    expression: ESLintExpression | VForExpression | VOnExpression
     tokens: Token[]
     comments: Token[]
     references: Reference[]
@@ -245,7 +266,7 @@ export function parseVForExpression(code: string, locationCalculator: LocationCa
         type: "VForExpression",
         range: [firstToken.range[0], lastToken.range[1]],
         loc: {start: firstToken.loc.start, end: lastToken.loc.end},
-        parent: {} as VExpressionContainer,
+        parent: DUMMY_PARENT,
         left,
         right,
     }
@@ -273,3 +294,49 @@ export function parseVForExpression(code: string, locationCalculator: LocationCa
 
     return {expression, tokens, comments, references, variables}
 }
+
+/**
+ * Parse the source code of inline scripts.
+ * @param code The source code of inline scripts.
+ * @param locationCalculator The location calculator for the inline script.
+ * @param parserOptions The parser options.
+ * @returns The result of parsing.
+ */
+export function parseVOnExpression(code: string, locationCalculator: LocationCalculator, parserOptions: any): ExpressionParseResult {
+    debug("[script] parse v-on expression: \"{%s}\"", code)
+
+    const ast = parseScriptFragment(
+        `{${code}}`,
+        locationCalculator.getSubCalculatorAfter(-1),
+        parserOptions
+    ).ast
+    const references = analyzeExternalReferences(ast, parserOptions)
+    const block = ast.body[0] as ESLintBlockStatement
+    const body = block.body
+    const first = lodash.first(body)
+    const last = lodash.last(body)
+    const expression: VOnExpression = {
+        type: "VOnExpression",
+        range: [
+            (first != null) ? first.range[0] : block.range[0] + 1,
+            (last != null) ? last.range[1] : block.range[1] - 1,
+        ],
+        loc: {
+            start: (first != null) ? first.loc.start : locationCalculator.getLocation(1),
+            end: (last != null) ? last.loc.end : locationCalculator.getLocation(code.length + 1),
+        },
+        parent: DUMMY_PARENT,
+        body,
+    }
+    const tokens = ast.tokens || []
+    const comments = ast.comments || []
+
+    // Remvoe braces.
+    tokens.shift()
+    tokens.pop()
+
+    // Remove $event: https://vuejs.org/v2/api/#v-on
+    removeByName(references, "$event")
+
+    return {expression, tokens, comments, references, variables: []}
+}

src/template/index.ts

@@ -7,7 +7,7 @@ import * as lodash from "lodash"
 import {ParseError, Reference, Token, Variable, VAttribute, VDirective, VDirectiveKey, VDocumentFragment, VExpressionContainer, VIdentifier, VLiteral, VNode} from "../ast"
 import {debug} from "../common/debug"
 import {LocationCalculator} from "../common/location-calculator"
-import {ExpressionParseResult, parseExpression, parseVForExpression} from "../script"
+import {ExpressionParseResult, parseExpression, parseVForExpression, parseVOnExpression} from "../script"
 
 /**
  * Extract the variable declarations of scope attributes.
@@ -22,25 +22,6 @@ function extractScopeVariables(references: Reference[], outVariables: Variable[]
     }
 }
 
-/**
- * Remove references by name.
- * @param references The array of references to remove.
- * @param name The name of target references.
- */
-function removeByName(references: Reference[], name: string): void {
-    let i = 0
-    while (i < references.length) {
-        const reference = references[i]
-
-        if (reference.id.name === name) {
-            references.splice(i, 1)
-        }
-        else {
-            i += 1
-        }
-    }
-}
-
 /**
  * Get the belonging document of the given node.
  * @param leafNode The node to get.
@@ -237,9 +218,9 @@ function insertError(document: VDocumentFragment | null, error: ParseError): voi
  * @param parserOptions The parser options to parse expressions.
  * @param globalLocationCalculator The location calculator to adjust the locations of nodes.
  * @param node The attribute node to replace. This function modifies this node directly.
- * @param vFor The flag which indicates that this directive is `v-for`.
+ * @param directiveName The name of this directive.
  */
-function parseAttributeValue(code: string, parserOptions: any, globalLocationCalculator: LocationCalculator, node: VLiteral, vFor: boolean): ExpressionParseResult {
+function parseAttributeValue(code: string, parserOptions: any, globalLocationCalculator: LocationCalculator, node: VLiteral, directiveName: string): ExpressionParseResult {
     if (node.value.trim() === "") {
         throw new ParseError(
             "Unexpected empty",
@@ -253,9 +234,11 @@ function parseAttributeValue(code: string, parserOptions: any, globalLocationCal
     const firstChar = code[node.range[0]]
     const quoted = (firstChar === "\"" || firstChar === "'")
     const locationCalculator = globalLocationCalculator.getSubCalculatorAfter(node.range[0] + (quoted ? 1 : 0))
-    const result = vFor
-        ? parseVForExpression(node.value, locationCalculator, parserOptions)
-        : parseExpression(node.value, locationCalculator, parserOptions)
+    const result = (
+        directiveName === "for" ? parseVForExpression(node.value, locationCalculator, parserOptions) :
+        directiveName === "on" ? parseVOnExpression(node.value, locationCalculator, parserOptions) :
+        /* otherwise */ parseExpression(node.value, locationCalculator, parserOptions)
+    )
 
     // Add the tokens of quotes.
     if (quoted) {
@@ -299,15 +282,7 @@ export function convertToDirective(code: string, parserOptions: any, locationCal
     const document = getOwnerDocument(node)
 
     try {
-        const vFor = directive.key.name === "for"
-        const vOn = directive.key.name === "on"
-        const ret = parseAttributeValue(code, parserOptions, locationCalculator, node.value, vFor)
-
-        // https://vuejs.org/v2/api/#v-on
-        // $event is not external references.
-        if (vOn) {
-            removeByName(ret.references, "$event")
-        }
+        const ret = parseAttributeValue(code, parserOptions, locationCalculator, node.value, directive.key.name)
 
         directive.value = {
             type: "VExpressionContainer",
@@ -359,7 +334,7 @@ export function defineScopeAttributeVariable(code: string, parserOptions: any, l
     }
 
     try {
-        const ret = parseAttributeValue(code, parserOptions, locationCalculator, node.value, false)
+        const ret = parseAttributeValue(code, parserOptions, locationCalculator, node.value, "scope")
         extractScopeVariables(ret.references, node.parent.parent.variables)
     }
     catch (err) {