Fix: make mustaches allowing empty (refs vuejs/eslint-plugin-vue#398)

Author: mysticatea

docs/ast.md

@@ -113,6 +113,7 @@ interface VSlotScopeExpression <: Expression {
 
 - This is mustaches or directive values.
 - If syntax errors exist, `VExpressionContainer#expression` is `null`.
+- If it's an empty mustache, `VExpressionContainer#expression` is `null`. (e.g., `{{ /* a comment */ }}`)
 - `Reference` is objects but not `Node`. Those are external references which are in the expression.
 - `Reference#variable` is the variable which is defined by a `VElement`. If a reference uses a global variable or a member of VM, this is `null`.
 - `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].

src/script/index.ts

@@ -9,6 +9,7 @@ import {
     traverseNodes,
     ESLintArrayPattern,
     ESLintBlockStatement,
+    ESLintCallExpression,
     ESLintExpression,
     ESLintExpressionStatement,
     ESLintExtendedProgram,
@@ -17,6 +18,7 @@ import {
     ESLintFunctionExpression,
     ESLintPattern,
     ESLintProgram,
+    ESLintSpreadElement,
     ESLintVariableDeclaration,
     ESLintUnaryExpression,
     Node,
@@ -169,6 +171,27 @@ function throwEmptyError(
     throw err
 }
 
+/**
+ * Throw syntax error for empty.
+ * @param locationCalculator The location calculator to get line/column.
+ */
+function throwUnexpectedSpreadElementError(
+    locationCalculator: LocationCalculator,
+    node: ESLintSpreadElement,
+): never {
+    const loc = locationCalculator.getLocation(node.start || 0)
+    const err = new ParseError(
+        "Unexpected spread element.",
+        undefined,
+        0,
+        loc.line,
+        loc.column,
+    )
+    locationCalculator.fixErrorLocation(err)
+
+    throw err
+}
+
 /**
  * Throw syntax error of outside of code.
  * @param locationCalculator The location calculator to get line/column.
@@ -320,26 +343,36 @@ export function parseExpression(
     code: string,
     locationCalculator: LocationCalculator,
     parserOptions: any,
+    allowEmpty = false,
 ): ExpressionParseResult {
-    debug('[script] parse expression: "(%s)"', code)
-
-    if (code.trim() === "") {
-        return throwEmptyError(locationCalculator, "an expression")
-    }
+    debug('[script] parse expression: "0(%s)"', code)
 
     try {
         const ast = parseScriptFragment(
-            `(${code})`,
-            locationCalculator.getSubCalculatorAfter(-1),
+            `0(${code})`,
+            locationCalculator.getSubCalculatorAfter(-2),
             parserOptions,
         ).ast
-        const references = analyzeExternalReferences(ast, parserOptions)
-        const expression = (ast.body[0] as ESLintExpressionStatement).expression
         const tokens = ast.tokens || []
         const comments = ast.comments || []
+        const references = analyzeExternalReferences(ast, parserOptions)
+        const statement = ast.body[0] as ESLintExpressionStatement
+        const callExpression = statement.expression as ESLintCallExpression
+        const expression = callExpression.arguments[0]
+
+        if (!allowEmpty && !expression) {
+            return throwEmptyError(locationCalculator, "an expression")
+        }
+        if (expression && expression.type === "SpreadElement") {
+            return throwUnexpectedSpreadElementError(
+                locationCalculator.getSubCalculatorAfter(-2),
+                expression,
+            )
+        }
 
         // Remvoe parens.
         tokens.shift()
+        tokens.shift()
         tokens.pop()
 
         return { expression, tokens, comments, references, variables: [] }

src/template/index.ts

@@ -466,9 +466,10 @@ export function processMustache(
             mustache.value,
             locationCalculator,
             parserOptions,
+            true,
         )
 
-        node.expression = ret.expression
+        node.expression = ret.expression || null
         node.references = ret.references
         if (ret.expression != null) {
             ret.expression.parent = node

test/fixtures/ast/error-message-empty/ast.json

@@ -1100,24 +1100,6 @@
                 },
                 "value": "{{"
             },
-            {
-                "type": "HTMLWhitespace",
-                "range": [
-                    26,
-                    27
-                ],
-                "loc": {
-                    "start": {
-                        "line": 3,
-                        "column": 6
-                    },
-                    "end": {
-                        "line": 3,
-                        "column": 7
-                    }
-                },
-                "value": " "
-            },
             {
                 "type": "VExpressionEnd",
                 "range": [
@@ -2129,12 +2111,6 @@
         ],
         "comments": [],
         "errors": [
-            {
-                "message": "Expected to be an expression, but got empty.",
-                "index": 26,
-                "lineNumber": 3,
-                "column": 6
-            },
             {
                 "message": "Expected to be an expression, but got empty.",
                 "index": 65,

test/fixtures/ast/error-message-empty/token-ranges.json

@@ -6,7 +6,6 @@
     "}}",
     "\n    ",
     "{{",
-    " ",
     "}}",
     "\n    ",
     "<div",