Improved autofix of vue/order-in-components rule to understand "Nullish Coalescing". (#1183)

Author: ota-meshi

lib/rules/order-in-components.js

@@ -64,7 +64,7 @@ function isComma (node) {
   return node.type === 'Punctuator' && node.value === ','
 }
 
-const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '%', '**']
+const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '%', '**'/* es2016 */]
 const BITWISE_OPERATORS = ['&', '|', '^', '~', '<<', '>>', '>>>']
 const COMPARISON_OPERATORS = ['==', '!=', '===', '!==', '>', '>=', '<', '<=']
 const RELATIONAL_OPERATORS = ['in', 'instanceof']
@@ -74,7 +74,7 @@ const ALL_BINARY_OPERATORS = [].concat(
   COMPARISON_OPERATORS,
   RELATIONAL_OPERATORS
 )
-const LOGICAL_OPERATORS = ['&&', '||']
+const LOGICAL_OPERATORS = ['&&', '||', '??'/* es2020 */]
 
 /*
  * Result `true` if the node is sure that there are no side effects
@@ -94,17 +94,15 @@ const LOGICAL_OPERATORS = ['&&', '||']
  */
 function isNotSideEffectsNode (node, visitorKeys) {
   let result = true
-  const noSideEffectsNodes = new Set()
+  let skipNode = false
   traverseNodes(node, {
     visitorKeys,
-    enterNode (node, parent) {
-      if (!result) {
+    enterNode (node) {
+      if (!result || skipNode) {
         return
       }
 
       if (
-        // parent has no side effects
-        noSideEffectsNodes.has(parent) ||
         // no side effects node
         node.type === 'FunctionExpression' ||
         node.type === 'Identifier' ||
@@ -113,7 +111,7 @@ function isNotSideEffectsNode (node, visitorKeys) {
         node.type === 'ArrowFunctionExpression' ||
         node.type === 'TemplateElement'
       ) {
-        noSideEffectsNodes.add(node)
+        skipNode = node
       } else if (
         node.type !== 'Property' &&
         node.type !== 'ObjectExpression' &&
@@ -131,7 +129,11 @@ function isNotSideEffectsNode (node, visitorKeys) {
         result = false
       }
     },
-    leaveNode () {}
+    leaveNode (node) {
+      if (skipNode === node) {
+        skipNode = null
+      }
+    }
   })
 
   return result

tests/lib/rules/order-in-components.js

@@ -10,7 +10,7 @@ const RuleTester = require('eslint').RuleTester
 const ruleTester = new RuleTester()
 
 const parserOptions = {
-  ecmaVersion: 2018,
+  ecmaVersion: 2020,
   sourceType: 'module'
 }
 
@@ -751,6 +751,7 @@ ruleTester.run('order-in-components', rule, {
           testConditional: a ? b : c,
           testYield: function* () {},
           testTemplate: \`a:\${a},b:\${b},c:\${c}.\`,
+          testNullish: a ?? b,
           name: 'burger',
         };
       `,
@@ -768,11 +769,12 @@ ruleTester.run('order-in-components', rule, {
           testConditional: a ? b : c,
           testYield: function* () {},
           testTemplate: \`a:\${a},b:\${b},c:\${c}.\`,
+          testNullish: a ?? b,
         };
       `,
       errors: [{
         message: 'The "name" property should be above the "data" property on line 3.',
-        line: 13
+        line: 14
       }]
     }
   ]