From d1660232b0525cb96299c036a90cb8dfaf1eec2a Mon Sep 17 00:00:00 2001
From: HEGGRIA <bshengtao@gmail.com>
Date: Thu, 29 Aug 2024 21:31:08 +0800
Subject: [PATCH 1/3] Fix the `vue/v-on-handler-style` breaking change (#2538)

---
 lib/rules/v-on-handler-style.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/rules/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
index 10ff9b6b1..c4b862c81 100644
--- a/lib/rules/v-on-handler-style.js
+++ b/lib/rules/v-on-handler-style.js
@@ -314,6 +314,10 @@ module.exports = {
             return null
           }
           const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+          // disable the auto-fixed when the node does't have params
+          if (paramCount == 0) {
+            return null
+          }
           if (paramCount != null && paramCount > 0) {
             // The behavior of target method can change given the arguments.
             return null
@@ -368,7 +372,8 @@ module.exports = {
           ) {
             return null
           }
-          if (!isSameParamsAndArgs(idCallExpr)) {
+          // disable the auto-fixed when the node does't have params
+          if (node.params.length === 0 || !isSameParamsAndArgs(idCallExpr)) {
             // It is not a call with the arguments given as is.
             return null
           }

From 6498a892493bb8c6e34139e8a68882500cd64cba Mon Sep 17 00:00:00 2001
From: HEGGRIA <bshengtao@gmail.com>
Date: Fri, 30 Aug 2024 11:09:45 +0800
Subject: [PATCH 2/3] Modify test of`vue/v-on-handler-style` (#2538)

---
 lib/rules/v-on-handler-style.js       |  2 +-
 tests/lib/rules/v-on-handler-style.js | 65 +++++----------------------
 2 files changed, 13 insertions(+), 54 deletions(-)

diff --git a/lib/rules/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
index c4b862c81..5b43fac97 100644
--- a/lib/rules/v-on-handler-style.js
+++ b/lib/rules/v-on-handler-style.js
@@ -315,7 +315,7 @@ module.exports = {
           }
           const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
           // disable the auto-fixed when the node does't have params
-          if (paramCount == 0) {
+          if (idCallExpr.arguments.length === 0 || paramCount === 0) {
             return null
           }
           if (paramCount != null && paramCount > 0) {
diff --git a/tests/lib/rules/v-on-handler-style.js b/tests/lib/rules/v-on-handler-style.js
index a169402f7..7859596c8 100644
--- a/tests/lib/rules/v-on-handler-style.js
+++ b/tests/lib/rules/v-on-handler-style.js
@@ -81,11 +81,7 @@ tester.run('v-on-handler-style', rule, {
         <button @click="foo()" />
         <button @click="() => foo()" />
       </template>`,
-      output: `<template>
-        <button @click="foo" />
-        <button @click="foo" />
-        <button @click="foo" />
-      </template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -107,11 +103,7 @@ tester.run('v-on-handler-style', rule, {
         <button @click="foo()" />
         <button @click="() => foo()" />
       </template>`,
-      output: `<template>
-        <button @click="foo" />
-        <button @click="foo" />
-        <button @click="foo" />
-      </template>`,
+      output: null,
       errors: [
         {
           message: 'Prefer method handler over inline handler in v-on.',
@@ -181,7 +173,7 @@ tester.run('v-on-handler-style', rule, {
     {
       filename: 'test.vue',
       code: '<template><div @click="foo( )" /></template>',
-      output: `<template><div @click="foo" /></template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -266,13 +258,7 @@ tester.run('v-on-handler-style', rule, {
         <button @click="{ fn(); }" />
         <button @click="{(fn());;;}" />
       </template>`,
-      output: `
-      <template>
-        <button @click="fn" />
-        <button @click="fn" />
-        <button @click="fn" />
-        <button @click="fn" />
-      </template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -304,11 +290,7 @@ tester.run('v-on-handler-style', rule, {
         <div @click=" beforeSpace()" />
         <div @click='afterSpace() ' />
       </template>`,
-      output: `
-      <template>
-        <div @click="beforeSpace" />
-        <div @click='afterSpace' />
-      </template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -329,10 +311,7 @@ tester.run('v-on-handler-style', rule, {
       <template>
         <button @click=" &#x66;oo ( ) " />
       </template>`,
-      output: `
-      <template>
-        <button @click="&#x66;oo" />
-      </template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -353,15 +332,7 @@ tester.run('v-on-handler-style', rule, {
         }
       }
       </script>`,
-      output: `
-      <template><button @click="foo" /></template>
-      <script>
-      export default {
-        methods: {
-          foo() {}
-        }
-      }
-      </script>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -382,15 +353,7 @@ tester.run('v-on-handler-style', rule, {
         }
       }
       </script>`,
-      output: `
-      <template><button @click="foo" /></template>
-      <script>
-      export default {
-        methods: {
-          foo: () => {}
-        }
-      }
-      </script>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -545,11 +508,7 @@ tester.run('v-on-handler-style', rule, {
           <button @click="e()" />
         </template>
       </template>`,
-      output: `<template>
-        <template v-for="e in list">
-          <button @click="e" />
-        </template>
-      </template>`,
+      output: null,
       options: [['method', 'inline-function']],
       errors: [
         {
@@ -716,9 +675,9 @@ tester.run('v-on-handler-style', rule, {
         <button @click="() => { foo() }" />
       </template>`,
       output: `<template>
+        <button @click="() => foo()" />
         <button @click="foo" />
-        <button @click="foo" />
-        <button @click="foo" />
+        <button @click="() => { foo() }" />
       </template>`,
       options: [['method', 'inline']],
       errors: [
@@ -1008,7 +967,7 @@ tester.run('v-on-handler-style', rule, {
       </template>`,
       output: `<template>
         <template v-for="e in list">
-          <button @click="e" />
+          <button @click="() => e()" />
           <button @click="e" />
           <button @click="e" />
         </template>

From 45b45576fb187b65f7069fb9c2814683c711837f Mon Sep 17 00:00:00 2001
From: HEGGRIA <bshengtao@gmail.com>
Date: Mon, 2 Sep 2024 21:34:50 +0800
Subject: [PATCH 3/3] feat(v-on-handler-style): change errors into suggestions

---
 docs/rules/index.md                   |   2 +-
 docs/rules/v-on-style.md              |   1 +
 lib/rules/v-on-handler-style.js       |  71 +++++++--
 tests/lib/rules/v-on-handler-style.js | 215 ++++++++++++++++++++++++--
 4 files changed, 261 insertions(+), 28 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 9624111c6..2a0ad7bfa 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -162,7 +162,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: | :three::two::lipstick: |
 | [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
 | [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
-| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench::bulb: | :three::two::hammer: |
 | [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :three::two::hammer: |
 
 </rules-table>
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 56bcb2221..75736ca94 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -12,6 +12,7 @@ since: v3.0.0
 
 - :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue3-recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/vue2-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/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
index 5b43fac97..0d6671f15 100644
--- a/lib/rules/v-on-handler-style.js
+++ b/lib/rules/v-on-handler-style.js
@@ -112,6 +112,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/v-on-handler-style.html'
     },
     fixable: 'code',
+    hasSuggestions: true,
     schema: [
       {
         oneOf: [
@@ -157,7 +158,11 @@ module.exports = {
       preferInlineFunctionOverMethod:
         'Prefer inline function over method handler in v-on.',
       preferInlineFunctionOverInline:
-        'Prefer inline function over inline handler in v-on.'
+        'Prefer inline function over inline handler in v-on.',
+      removeParenthesesOverInline:
+        'Remove the parentheses from the inline handler in v-on.',
+      removeParenthesesOverInlineFunction:
+        'Remove the parentheses from the inline function in v-on.'
     }
   },
   /** @param {RuleContext} context */
@@ -300,6 +305,36 @@ module.exports = {
         return false
       }
 
+      // disable the auto-fixed when the node does't have params
+      if (
+        !hasComment /* The statement contains comment and cannot be fixed. */ &&
+        idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ &&
+        idCallExpr.arguments.length === 0
+      ) {
+        const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+        if (
+          idCallExpr &&
+          (idCallExpr.arguments.length === 0 || paramCount === 0)
+        ) {
+          context.report({
+            node,
+            messageId: 'preferMethodOverInline',
+            suggest: [
+              {
+                messageId: 'removeParenthesesOverInline',
+                fix(fixer) {
+                  return fixer.replaceTextRange(
+                    rangeWithoutQuotes,
+                    context.getSourceCode().getText(idCallExpr.callee)
+                  )
+                }
+              }
+            ]
+          })
+          return true
+        }
+      }
+
       context.report({
         node,
         messageId: idCallExpr
@@ -314,10 +349,6 @@ module.exports = {
             return null
           }
           const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
-          // disable the auto-fixed when the node does't have params
-          if (idCallExpr.arguments.length === 0 || paramCount === 0) {
-            return null
-          }
           if (paramCount != null && paramCount > 0) {
             // The behavior of target method can change given the arguments.
             return null
@@ -328,6 +359,7 @@ module.exports = {
           )
         }
       })
+
       return true
     }
     /**
@@ -360,6 +392,30 @@ module.exports = {
         return false
       }
 
+      // disable the auto-fixed when the node does't have params
+      if (
+        !hasComment /* The statement contains comment and cannot be fixed. */ &&
+        idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ &&
+        (node.params.length === 0 || !isSameParamsAndArgs(idCallExpr))
+      ) {
+        context.report({
+          node,
+          messageId: 'preferMethodOverInlineFunction',
+          suggest: [
+            {
+              messageId: 'removeParenthesesOverInlineFunction',
+              fix(fixer) {
+                return fixer.replaceTextRange(
+                  rangeWithoutQuotes,
+                  context.getSourceCode().getText(idCallExpr.callee)
+                )
+              }
+            }
+          ]
+        })
+        return true
+      }
+
       context.report({
         node,
         messageId: idCallExpr
@@ -372,11 +428,6 @@ module.exports = {
           ) {
             return null
           }
-          // disable the auto-fixed when the node does't have params
-          if (node.params.length === 0 || !isSameParamsAndArgs(idCallExpr)) {
-            // It is not a call with the arguments given as is.
-            return null
-          }
           const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
           if (
             paramCount != null &&
diff --git a/tests/lib/rules/v-on-handler-style.js b/tests/lib/rules/v-on-handler-style.js
index 7859596c8..4915bf507 100644
--- a/tests/lib/rules/v-on-handler-style.js
+++ b/tests/lib/rules/v-on-handler-style.js
@@ -87,12 +87,32 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `<template>
+        <button @click="foo" />
+        <button @click="foo" />
+        <button @click="() => foo()" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline function in v-on.',
           line: 4,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInlineFunction',
+              output: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="foo" />
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -108,12 +128,32 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `<template>
+        <button @click="foo" />
+        <button @click="foo" />
+        <button @click="() => foo()" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline function in v-on.',
           line: 4,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInlineFunction',
+              output: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="foo" />
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -179,7 +219,13 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 1,
-          column: 24
+          column: 24,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `<template><div @click="foo" /></template>`
+            }
+          ]
         }
       ]
     },
@@ -264,22 +310,70 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <button @click="fn" />
+        <button @click="fn();;" />
+        <button @click="{ fn(); }" />
+        <button @click="{(fn());;;}" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 4,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <button @click="fn();" />
+        <button @click="fn" />
+        <button @click="{ fn(); }" />
+        <button @click="{(fn());;;}" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 5,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <button @click="fn();" />
+        <button @click="fn();;" />
+        <button @click="fn" />
+        <button @click="{(fn());;;}" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 6,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <button @click="fn();" />
+        <button @click="fn();;" />
+        <button @click="{ fn(); }" />
+        <button @click="fn" />
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -296,12 +390,32 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 23
+          column: 23,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <div @click="beforeSpace" />
+        <div @click='afterSpace() ' />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 4,
-          column: 22
+          column: 22,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <div @click=" beforeSpace()" />
+        <div @click='afterSpace' />
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -317,7 +431,16 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 26
+          column: 26,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template>
+        <button @click="&#x66;oo" />
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -338,7 +461,21 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 2,
-          column: 33
+          column: 33,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template><button @click="foo" /></template>
+      <script>
+      export default {
+        methods: {
+          foo() {}
+        }
+      }
+      </script>`
+            }
+          ]
         }
       ]
     },
@@ -359,7 +496,21 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 2,
-          column: 33
+          column: 33,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `
+      <template><button @click="foo" /></template>
+      <script>
+      export default {
+        methods: {
+          foo: () => {}
+        }
+      }
+      </script>`
+            }
+          ]
         }
       ]
     },
@@ -514,7 +665,17 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline handler in v-on.',
           line: 3,
-          column: 27
+          column: 27,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInline',
+              output: `<template>
+        <template v-for="e in list">
+          <button @click="e" />
+        </template>
+      </template>`
+            }
+          ]
         }
       ]
     },
@@ -684,7 +845,17 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline function in v-on.',
           line: 2,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInlineFunction',
+              output: `<template>
+        <button @click="foo" />
+        <button @click="(a, b) => foo(a, b)" />
+        <button @click="() => { foo() }" />
+      </template>`
+            }
+          ]
         },
         {
           message: 'Prefer method handler over inline function in v-on.',
@@ -694,7 +865,17 @@ tester.run('v-on-handler-style', rule, {
         {
           message: 'Prefer method handler over inline function in v-on.',
           line: 4,
-          column: 25
+          column: 25,
+          suggestions: [
+            {
+              messageId: 'removeParenthesesOverInlineFunction',
+              output: `<template>
+        <button @click="() => foo()" />
+        <button @click="(a, b) => foo(a, b)" />
+        <button @click="foo" />
+      </template>`
+            }
+          ]
         }
       ]
     },