Breaking: change the AST of v-for directives

Author: mysticatea

docs/ast.md

@@ -17,8 +17,8 @@ extend interface Node {
 ```
 
 - This AST spec enhances the [Node] nodes like ESLint.
-- The `range` property is an array which has 2 integers.  
-  The 1st integer is the offset of the start location of the node.  
+- The `range` property is an array which has 2 integers.
+  The 1st integer is the offset of the start location of the node.
   The 2nd integer is the offset of the end location of the node.
 
 ## VIdentifier
@@ -64,11 +64,20 @@ interface Reference {
     id: Identifier
     mode: "rw" | "r" | "w"
 }
+
+interface VForExpression <: Expression {
+    type: "VForExpression"
+    left: [ Pattern ]
+    right: Expression
+}
 ```
 
 - This is mustaches or directive values.
 - If syntax errors exist, `expression` is `null` and `syntaxError` is an error object. Otherwise, `expression` is an [Expression] node and `syntaxError` 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.
+
+> Note: `vue-eslint-parser` transforms `v-for="(x, i) in list"` to `for([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
 
@@ -110,7 +119,7 @@ interface VAttribute <: Node {
 }
 ```
 
-- If the `directive` property is `true`, this is a directive of Vue.js.  
+- If the `directive` property is `true`, this is a directive of Vue.js.
   In that case, the `key` property is a `VDirectiveKey` node and the `value` property is a `VExpressionContainer` node.
 - Otherwise, the `key` property is a `VIdentifier` node and the `value` property is a `VAttributeValue` node.
 - If the `value` property is `null`, their attribute value does not exist.
@@ -174,6 +183,7 @@ This supports only HTML for now. However, I'm going to add other languages Vue.j
 [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

lib/script-parser.js

@@ -9,6 +9,7 @@
 // Requirements
 //------------------------------------------------------------------------------
 
+const debug = require("debug")("vue-eslint-parser")
 const sortedIndexBy = require("lodash.sortedindexby")
 const analyzeReferences = require("./analyze-references")
 const decodeHtmlEntities = require("./decode-html-entities")
@@ -20,6 +21,7 @@ const traverseNodes = require("./traverse-nodes")
 
 const NON_LT = /[^\r\n\u2028\u2029]/g
 const SPACE = /\s/
+const ALIAS_PARENS = /^(\s*)\(([\s\S]+)\)(\s*(?:in|of)\b[\s\S]+)$/
 
 /**
  * Get the 1st element of the given array.
@@ -100,6 +102,19 @@ function postprocess(ast, tokens, comments, tokenGenerator, gaps, codeStart) {
     }
 }
 
+/**
+ * Replace parentheses which wrap the alias of 'v-for' directive values by array brackets in order to avoid syntax errors.
+ * @param {string} code The code to replace.
+ * @returns {string} The replaced code.
+ */
+function replaceAliasParens(code) {
+    const match = ALIAS_PARENS.exec(code)
+    if (match != null) {
+        return `${match[1]}[${match[2]}]${match[3]}`
+    }
+    return code
+}
+
 /**
  * The script parser.
  */
@@ -192,6 +207,8 @@ class ScriptParser {
         const code = this.text.slice(codeStart, codeEnd)
         const gaps = []
         const decodedCode = decodeHtmlEntities(code, gaps)
+
+        debug("parse", codeStart, codeEnd, JSON.stringify(`(${decodedCode})`))
         const ast = this._parseScript(`${prefix}(${decodedCode})`)
 
         if (ast.body.length === 0) {
@@ -221,6 +238,85 @@ class ScriptParser {
 
         return {expression, tokens, comments, references}
     }
+
+    /**
+     * Parse the script which is on the given range.
+     * @param {number} start The start offset to parse.
+     * @param {number} end The end offset to parse.
+     * @param {TokenGenerator} tokenGenerator The token generator to fix loc.
+     * @returns {{expression:ASTNode, tokens:ASTNode[], comments:ASTNode[], references:Reference[]}} The result of parsing.
+     */
+    parseVForExpression(start, end, tokenGenerator) {
+        const codeStart = this.getInlineScriptStart(start)
+        const codeEnd = this.getInlineScriptEnd(end)
+        if (codeStart >= codeEnd) {
+            throw new Error("Expected an expression but got no code.")
+        }
+
+        const prefix = this.text.slice(0, codeStart - 4).replace(NON_LT, " ")
+        const code = this.text.slice(codeStart, codeEnd)
+        const gaps = []
+        const decodedCode = decodeHtmlEntities(code, gaps)
+        const processedCode = replaceAliasParens(decodedCode)
+        const replaced = processedCode !== decodedCode
+
+        debug("parse", codeStart, codeEnd, JSON.stringify(`for(${decodedCode});`))
+        const ast = this._parseScript(`${prefix}for(${processedCode});`)
+
+        if (ast.body.length === 0) {
+            throw new Error("Expected an expression but got no code.")
+        }
+        if (ast.body.length >= 2) {
+            throw new Error(
+                "Expected an expression but got multiple statements."
+            )
+        }
+
+        const references = analyzeReferences(ast)
+        const statement = ast.body[0]
+        const left = replaced ? statement.left.elements : [statement.left]
+        const right = statement.right
+        const expression = {
+            type: "VForExpression",
+            range: [codeStart, codeEnd],
+            loc: tokenGenerator.getLoc(codeStart, codeEnd),
+            left,
+            right,
+        }
+        const tokens = ast.tokens || []
+        const comments = ast.comments || []
+        tokens.shift()
+        tokens.shift()
+        tokens.pop()
+        tokens.pop()
+
+        // Restore parentheses from array brackets.
+        if (replaced) {
+            const open = statement.left.range[0]
+            const close = statement.left.range[1] - 1
+
+            for (const token of tokens) {
+                if (token.range[0] === open) {
+                    token.value = "("
+                }
+                else if (token.range[0] === close) {
+                    token.value = ")"
+                    break
+                }
+            }
+        }
+
+        postprocess(
+            expression,
+            tokens,
+            comments,
+            tokenGenerator,
+            gaps,
+            codeStart
+        )
+
+        return {expression, tokens, comments, references}
+    }
 }
 
 //------------------------------------------------------------------------------

lib/transform-html.js

@@ -31,39 +31,33 @@ const INVALID_PAIRS = new Set("\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3
  * @param {ASTNode} leafNode The Identifier node which is the name of a reference.
  * @returns {boolean} `true` if the Identifier node is a variable declaration of v-for directives.
  */
-function isVForVariable(leafNode) { //eslint-disable-line complexity
+function isVForVariable(leafNode) {
     let node = leafNode
     let parent = node.parent
 
     while (parent != null && node.type !== "VExpressionContainer") {
         switch (parent.type) {
-            case "SequenceExpression":
-            case "ObjectExpression":
-            case "ArrayExpression":
             case "ObjectPattern":
             case "ArrayPattern":
-            case "SpreadElement":
             case "RestElement":
-            case "SpreadProperty":             // ※ Legacy.
-            case "ExperimentalSpreadProperty": // ※ Legacy.
-            case "RestProperty":               // ※ Legacy.
-            case "ExperimentalRestProperty":   // ※ Legacy.
+            case "RestProperty":             // ※ Legacy for babel-eslint.
+            case "ExperimentalRestProperty": // ※ Legacy for expree.
                 break
 
             case "Property":
-                if (parent.computed || parent.key !== node) {
+                if (parent.value !== node) {
                     return false
                 }
                 break
 
-            case "BinaryExpression":
-                if (parent.operator !== "in" || parent.left !== node) {
+            case "AssignmentPattern":
+                if (parent.left !== node) {
                     return false
                 }
                 break
 
-            case "VExpressionContainer":
-                return true
+            case "VForExpression":
+                return parent.right !== node
 
             default:
                 return false
@@ -97,16 +91,21 @@ function extractScopeVariables(references, variables) {
  */
 function extractVForVariables(references, variables) {
     let i = 0
+    let prevId = null
     while (i < references.length) {
         const reference = references[i]
 
         if (isVForVariable(reference.id)) {
             references.splice(i, 1)
-            variables.push({id: reference.id})
+            if (reference.id !== prevId) {
+                variables.push({id: reference.id})
+            }
         }
         else {
             i += 1
         }
+
+        prevId = reference.id
     }
 }
 
@@ -275,10 +274,20 @@ class HTMLTransformer {
             loc: this.getLoc(start, end),
             expression: null,
             syntaxError: null,
+            references: null,
         }
+        const vFor = (
+            parent.type === "VAttribute" &&
+            parent.directive &&
+            parent.key.name === "for"
+        )
 
         try {
-            const parsed = this.scriptParser.parseExpression(
+            const parse = vFor
+                ? this.scriptParser.parseVForExpression
+                : this.scriptParser.parseExpression
+            const parsed = parse.call(
+                this.scriptParser,
                 start + quoteSize,
                 end - quoteSize,
                 this.tokenGenerator
@@ -292,7 +301,9 @@ class HTMLTransformer {
             result.expression.parent = result
         }
         catch (error) {
+            debug(error.stack)
             result.syntaxError = error
+            result.references = []
         }
 
         this.appendToken("Punctuator", end - quoteSize, end)

lib/traverse-nodes.js

@@ -82,6 +82,7 @@ const KEYS = {
     VIdentifier: [],
     VText: [],
     VExpressionContainer: ["expression"],
+    VForDirectiveValue: ["left", "right"],
     VDirectiveKey: [],
     VAttributeValue: [],
     VAttribute: ["key", "value"],

test/fixtures/template-ast/directive-arguments.ast.json

@@ -348,7 +348,8 @@
                                     }
                                 },
                                 "expression": null,
-                                "syntaxError": {}
+                                "syntaxError": {},
+                                "references": []
                             }
                         }
                     ],