From e2dc84bf347ec7d905f3f317fb23bc3d3c86bd03 Mon Sep 17 00:00:00 2001
From: Wayne Zhang <zhanghaowei19W@gmail.com>
Date: Tue, 12 Mar 2024 07:24:13 +0800
Subject: [PATCH] feat(order-in-components): add side effects suggestions
 (#2423)

---
 docs/rules/index.md                    |   2 +-
 docs/rules/order-in-components.md      |   1 +
 lib/rules/order-in-components.js       |  97 ++++++----
 tests/lib/rules/order-in-components.js | 248 +++++++++++++++++++++++--
 4 files changed, 295 insertions(+), 53 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 8d1b7f366..ad3d06906 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -181,7 +181,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :three::two::warning: |
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :three::two::warning: |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
-| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :three::two::hammer: |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench::bulb: | :three::two::hammer: |
 | [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
 
 </rules-table>
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index bd361edfc..c23ca80f4 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -12,6 +12,7 @@ since: v3.2.0
 
 - :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 
diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
index 57247e0c2..06ff78e46 100644
--- a/lib/rules/order-in-components.js
+++ b/lib/rules/order-in-components.js
@@ -218,6 +218,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/order-in-components.html'
     },
     fixable: 'code', // null or "code" or "whitespace"
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -231,7 +232,9 @@ module.exports = {
     ],
     messages: {
       order:
-        'The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.'
+        'The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.',
+      reorderWithSideEffects:
+        'Manually move "{{name}}" property above "{{firstUnorderedPropertyName}}" property on line {{line}} (might break side effects).'
     }
   },
   /** @param {RuleContext} context */
@@ -255,6 +258,30 @@ module.exports = {
       return num == null ? -1 : num
     }
 
+    /**
+     * @param {Property} propertyNode
+     * @param {Property} unorderedPropertyNode
+     */
+    function* handleFix(fixer, propertyNode, unorderedPropertyNode) {
+      const afterComma = sourceCode.getTokenAfter(propertyNode)
+      const hasAfterComma = isComma(afterComma)
+
+      const beforeComma = sourceCode.getTokenBefore(propertyNode)
+      const codeStart = beforeComma.range[1] // to include comments
+      const codeEnd = hasAfterComma
+        ? afterComma.range[1]
+        : propertyNode.range[1]
+
+      const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
+      yield fixer.removeRange([removeStart, codeEnd])
+
+      const propertyCode =
+        sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
+      const insertTarget = sourceCode.getTokenBefore(unorderedPropertyNode)
+
+      yield fixer.insertTextAfter(insertTarget, propertyCode)
+    }
+
     /**
      * @param {(Property | SpreadElement)[]} propertiesNodes
      */
@@ -287,6 +314,18 @@ module.exports = {
 
         if (firstUnorderedProperty) {
           const line = firstUnorderedProperty.node.loc.start.line
+          const propertyNode = property.node
+          const firstUnorderedPropertyNode = firstUnorderedProperty.node
+          const hasSideEffectsPossibility = propertiesNodes
+            .slice(
+              propertiesNodes.indexOf(firstUnorderedPropertyNode),
+              propertiesNodes.indexOf(propertyNode) + 1
+            )
+            .some(
+              (property) =>
+                !isNotSideEffectsNode(property, sourceCode.visitorKeys)
+            )
+
           context.report({
             node: property.node,
             messageId: 'order',
@@ -295,44 +334,24 @@ module.exports = {
               firstUnorderedPropertyName: firstUnorderedProperty.name,
               line
             },
-            *fix(fixer) {
-              const propertyNode = property.node
-              const firstUnorderedPropertyNode = firstUnorderedProperty.node
-              const hasSideEffectsPossibility = propertiesNodes
-                .slice(
-                  propertiesNodes.indexOf(firstUnorderedPropertyNode),
-                  propertiesNodes.indexOf(propertyNode) + 1
-                )
-                .some(
-                  (property) =>
-                    !isNotSideEffectsNode(property, sourceCode.visitorKeys)
-                )
-              if (hasSideEffectsPossibility) {
-                return
-              }
-              const afterComma = sourceCode.getTokenAfter(propertyNode)
-              const hasAfterComma = isComma(afterComma)
-
-              const beforeComma = sourceCode.getTokenBefore(propertyNode)
-              const codeStart = beforeComma.range[1] // to include comments
-              const codeEnd = hasAfterComma
-                ? afterComma.range[1]
-                : propertyNode.range[1]
-
-              const removeStart = hasAfterComma
-                ? codeStart
-                : beforeComma.range[0]
-              yield fixer.removeRange([removeStart, codeEnd])
-
-              const propertyCode =
-                sourceCode.text.slice(codeStart, codeEnd) +
-                (hasAfterComma ? '' : ',')
-              const insertTarget = sourceCode.getTokenBefore(
-                firstUnorderedPropertyNode
-              )
-
-              yield fixer.insertTextAfter(insertTarget, propertyCode)
-            }
+            fix: hasSideEffectsPossibility
+              ? undefined
+              : (fixer) =>
+                  handleFix(fixer, propertyNode, firstUnorderedPropertyNode),
+            suggest: hasSideEffectsPossibility
+              ? [
+                  {
+                    messageId: 'reorderWithSideEffects',
+                    data: {
+                      name: property.name,
+                      firstUnorderedPropertyName: firstUnorderedProperty.name,
+                      line
+                    },
+                    fix: (fixer) =>
+                      handleFix(fixer, propertyNode, firstUnorderedPropertyNode)
+                  }
+                ]
+              : undefined
           })
         }
       }
diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
index 25010f483..6ddba308d 100644
--- a/tests/lib/rules/order-in-components.js
+++ b/tests/lib/rules/order-in-components.js
@@ -104,6 +104,23 @@ ruleTester.run('order-in-components', rule, {
       `,
       languageOptions
     },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          computed: {
+            ...mapStates(['foo'])
+          },
+        }
+      `,
+      languageOptions
+    },
     {
       filename: 'test.js',
       code: `
@@ -591,7 +608,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: obj.fn(),
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -612,7 +642,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: new MyClass(),
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -633,7 +676,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: i++,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -654,7 +710,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: i = 0,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -675,7 +744,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: template\`\${foo}\`,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -696,7 +778,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          [obj.fn()]: 'test',
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -717,7 +812,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: {test: obj.fn()},
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -738,7 +846,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: [obj.fn(), 1],
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -759,7 +880,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: obj.fn().prop,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -780,7 +914,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: delete obj.prop,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -801,7 +948,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: fn() + a + b,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -822,7 +982,20 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: a ? fn() : null,
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions
@@ -843,7 +1016,56 @@ ruleTester.run('order-in-components', rule, {
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: \`test \${fn()} \${a}\`,
+        };
+      `
+            }
+          ]
+        }
+      ],
+      languageOptions
+    },
+    {
+      // side-effects https://github.com/vuejs/eslint-plugin-vue/issues/2418
+      filename: 'example.vue',
+      code: `
+        export default {
+          computed: {
+            ...mapStates(['foo'])
+          },
+          data() {
+          },
+        };
+      `,
+      output: null,
+      errors: [
+        {
+          message:
+            'The "data" property should be above the "computed" property on line 3.',
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "data" property above "computed" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          data() {
+          },
+          computed: {
+            ...mapStates(['foo'])
+          },
+        };
+      `
+            }
+          ]
         }
       ],
       languageOptions