From 644f97d463f0d740fe1de806fff866650a58356b Mon Sep 17 00:00:00 2001
From: Pavel Lozinsky <pavel@lozinsky.dev>
Date: Thu, 5 Dec 2024 14:58:22 +0300
Subject: [PATCH 1/4] feat: add `vue/no-implicit-coercion` rule

---
 docs/rules/index.md                     |   1 +
 docs/rules/no-implicit-coercion.md      |  32 ++++
 lib/index.js                            |   1 +
 lib/rules/no-implicit-coercion.js       |  12 ++
 tests/lib/rules/no-implicit-coercion.js | 190 ++++++++++++++++++++++++
 5 files changed, 236 insertions(+)
 create mode 100644 docs/rules/no-implicit-coercion.md
 create mode 100644 lib/rules/no-implicit-coercion.js
 create mode 100644 tests/lib/rules/no-implicit-coercion.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 074f4bd46..476f40e09 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -323,6 +323,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/no-constant-condition](./no-constant-condition.md) | Disallow constant expressions in conditions in `<template>` |  | :warning: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | Disallow empty destructuring patterns in `<template>` |  | :warning: |
 | [vue/no-extra-parens](./no-extra-parens.md) | Disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/no-implicit-coercion](./no-implicit-coercion.md) | Disallow shorthand type conversions in `<template>` | :wrench: | :hammer: |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  | :warning: |
 | [vue/no-loss-of-precision](./no-loss-of-precision.md) | Disallow literal numbers that lose precision in `<template>` |  | :warning: |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | Disallow specified syntax in `<template>` |  | :hammer: |
diff --git a/docs/rules/no-implicit-coercion.md b/docs/rules/no-implicit-coercion.md
new file mode 100644
index 000000000..6a65d5039
--- /dev/null
+++ b/docs/rules/no-implicit-coercion.md
@@ -0,0 +1,32 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-implicit-coercion
+description: Disallow shorthand type conversions in `<template>`
+since: v9.33.0
+---
+
+# vue/no-implicit-coercion
+
+> Disallow shorthand type conversions in `<template>`
+
+- :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.
+
+This rule is the same rule as core [no-implicit-coercion] rule but it applies to the expressions in `<template>`.
+
+## :books: Further Reading
+
+- [no-implicit-coercion]
+
+[no-implicit-coercion]: https://eslint.org/docs/rules/no-implicit-coercion
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.33.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-implicit-coercion.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-implicit-coercion.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-implicit-coercion)</sup>
diff --git a/lib/index.js b/lib/index.js
index ce562f458..ecb8ce5e1 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -126,6 +126,7 @@ const plugin = {
     'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),
     'no-expose-after-await': require('./rules/no-expose-after-await'),
     'no-extra-parens': require('./rules/no-extra-parens'),
+    'no-implicit-coercion': require('./rules/no-implicit-coercion'),
     'no-invalid-model-keys': require('./rules/no-invalid-model-keys'),
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
     'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
diff --git a/lib/rules/no-implicit-coercion.js b/lib/rules/no-implicit-coercion.js
new file mode 100644
index 000000000..b0cda39b4
--- /dev/null
+++ b/lib/rules/no-implicit-coercion.js
@@ -0,0 +1,12 @@
+/**
+ * @author lozinsky <https://github.com/lozinsky>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = utils.wrapCoreRule('no-implicit-coercion', {
+  applyDocument: true
+})
diff --git a/tests/lib/rules/no-implicit-coercion.js b/tests/lib/rules/no-implicit-coercion.js
new file mode 100644
index 000000000..80cf785ff
--- /dev/null
+++ b/tests/lib/rules/no-implicit-coercion.js
@@ -0,0 +1,190 @@
+/**
+ * @author lozinsky <https://github.com/lozinsky>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-implicit-coercion')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-implicit-coercion', rule, {
+  valid: [
+    `<template><div :data-foo="Boolean(foo)" /></template>`,
+    `<template><div :data-foo="foo.indexOf('.') !== -1" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      options: [
+        {
+          boolean: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      options: [
+        {
+          boolean: false
+        }
+      ]
+    },
+    `<template><div :data-foo="Number(foo)" /></template>`,
+    `<template><div :data-foo="foo * 1/4" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="+foo" /></template>`,
+      options: [
+        {
+          number: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="1 * foo" /></template>`,
+      options: [
+        {
+          number: false
+        }
+      ]
+    },
+    `<template><div :data-foo="String(foo)" /></template>`,
+    `<template><div :data-foo="\`\${foo}\`" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="'' + foo" /></template>`,
+      options: [
+        {
+          string: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\` + foo" /></template>`,
+      options: [
+        {
+          string: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      options: [
+        {
+          allow: ['!!']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      options: [
+        {
+          allow: ['~']
+        }
+      ]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      output: `<template><div :data-foo="Boolean(foo)" /></template>`,
+      errors: [
+        {
+          message: 'use `Boolean(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      output: null,
+      errors: [
+        {
+          message: "use `foo.indexOf('.') !== -1` instead.",
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="+foo" /></template>`,
+      output: `<template><div :data-foo="Number(foo)" /></template>`,
+      errors: [
+        {
+          message: 'use `Number(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="1 * foo" /></template>`,
+      output: `<template><div :data-foo="Number(foo)" /></template>`,
+      errors: [
+        {
+          message: 'use `Number(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="'' + foo" /></template>`,
+      output: `<template><div :data-foo="String(foo)" /></template>`,
+      errors: [
+        {
+          message: 'use `String(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\` + foo" /></template>`,
+      output: `<template><div :data-foo="String(foo)" /></template>`,
+      errors: [
+        {
+          message: 'use `String(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\${foo}\`" /></template>`,
+      output: `<template><div :data-foo="String(foo)" /></template>`,
+      options: [
+        {
+          disallowTemplateShorthand: true
+        }
+      ],
+      errors: [
+        {
+          message: 'use `String(foo)` instead.',
+          line: 1,
+          column: 27
+        }
+      ]
+    }
+  ]
+})

From 4d51667a68b77ba72f4a6d7e8e122d59e5015777 Mon Sep 17 00:00:00 2001
From: Pavel Lozinsky <pavel@lozinsky.dev>
Date: Thu, 5 Dec 2024 17:47:09 +0300
Subject: [PATCH 2/4] chore: add version checking to some test cases

---
 tests/lib/rules/no-implicit-coercion.js | 143 ++++++++++++++++++------
 1 file changed, 110 insertions(+), 33 deletions(-)

diff --git a/tests/lib/rules/no-implicit-coercion.js b/tests/lib/rules/no-implicit-coercion.js
index 80cf785ff..5b00d26fb 100644
--- a/tests/lib/rules/no-implicit-coercion.js
+++ b/tests/lib/rules/no-implicit-coercion.js
@@ -4,7 +4,8 @@
  */
 'use strict'
 
-const RuleTester = require('../../eslint-compat').RuleTester
+const { RuleTester, ESLint } = require('../../eslint-compat')
+const semver = require('semver')
 const rule = require('../../../lib/rules/no-implicit-coercion')
 
 const tester = new RuleTester({
@@ -38,7 +39,9 @@ tester.run('no-implicit-coercion', rule, {
       ]
     },
     `<template><div :data-foo="Number(foo)" /></template>`,
-    `<template><div :data-foo="foo * 1/4" /></template>`,
+    ...(semver.gte(ESLint.version, '8.28.0')
+      ? [`<template><div :data-foo="foo * 1/4" /></template>`]
+      : []),
     {
       filename: 'test.vue',
       code: `<template><div :data-foo="+foo" /></template>`,
@@ -103,7 +106,9 @@ tester.run('no-implicit-coercion', rule, {
       output: `<template><div :data-foo="Boolean(foo)" /></template>`,
       errors: [
         {
-          message: 'use `Boolean(foo)` instead.',
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? 'Unexpected implicit coercion encountered. Use `Boolean(foo)` instead.'
+            : 'use `Boolean(foo)` instead.',
           line: 1,
           column: 27
         }
@@ -115,7 +120,9 @@ tester.run('no-implicit-coercion', rule, {
       output: null,
       errors: [
         {
-          message: "use `foo.indexOf('.') !== -1` instead.",
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? "Unexpected implicit coercion encountered. Use `foo.indexOf('.') !== -1` instead."
+            : "use `foo.indexOf('.') !== -1` instead.",
           line: 1,
           column: 27
         }
@@ -124,67 +131,137 @@ tester.run('no-implicit-coercion', rule, {
     {
       filename: 'test.vue',
       code: `<template><div :data-foo="+foo" /></template>`,
-      output: `<template><div :data-foo="Number(foo)" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="Number(foo)" /></template>`,
       errors: [
         {
-          message: 'use `Number(foo)` instead.',
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? 'Unexpected implicit coercion encountered. Use `Number(foo)` instead.'
+            : 'use `Number(foo)` instead.',
           line: 1,
-          column: 27
+          column: 27,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'Number(foo)' },
+                  output: '<template><div :data-foo="Number(foo)" /></template>'
+                }
+              ]
+            : []
         }
       ]
     },
     {
       filename: 'test.vue',
       code: `<template><div :data-foo="1 * foo" /></template>`,
-      output: `<template><div :data-foo="Number(foo)" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="Number(foo)" /></template>`,
       errors: [
         {
-          message: 'use `Number(foo)` instead.',
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? 'Unexpected implicit coercion encountered. Use `Number(foo)` instead.'
+            : 'use `Number(foo)` instead.',
           line: 1,
-          column: 27
+          column: 27,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'Number(foo)' },
+                  output: '<template><div :data-foo="Number(foo)" /></template>'
+                }
+              ]
+            : []
         }
       ]
     },
     {
       filename: 'test.vue',
       code: `<template><div :data-foo="'' + foo" /></template>`,
-      output: `<template><div :data-foo="String(foo)" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="String(foo)" /></template>`,
       errors: [
         {
-          message: 'use `String(foo)` instead.',
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
+            : 'use `String(foo)` instead.',
           line: 1,
-          column: 27
+          column: 27,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'String(foo)' },
+                  output: '<template><div :data-foo="String(foo)" /></template>'
+                }
+              ]
+            : []
         }
       ]
     },
     {
       filename: 'test.vue',
       code: `<template><div :data-foo="\`\` + foo" /></template>`,
-      output: `<template><div :data-foo="String(foo)" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="String(foo)" /></template>`,
       errors: [
         {
-          message: 'use `String(foo)` instead.',
+          message: semver.gte(ESLint.version, '9.0.0')
+            ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
+            : 'use `String(foo)` instead.',
           line: 1,
-          column: 27
+          column: 27,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'String(foo)' },
+                  output: '<template><div :data-foo="String(foo)" /></template>'
+                }
+              ]
+            : []
         }
       ]
     },
-    {
-      filename: 'test.vue',
-      code: `<template><div :data-foo="\`\${foo}\`" /></template>`,
-      output: `<template><div :data-foo="String(foo)" /></template>`,
-      options: [
-        {
-          disallowTemplateShorthand: true
-        }
-      ],
-      errors: [
-        {
-          message: 'use `String(foo)` instead.',
-          line: 1,
-          column: 27
-        }
-      ]
-    }
+    ...(semver.gte(ESLint.version, '7.24.0')
+      ? [
+          {
+            filename: 'test.vue',
+            code: `<template><div :data-foo="\`\${foo}\`" /></template>`,
+            output: semver.gte(ESLint.version, '9.0.0')
+              ? null
+              : `<template><div :data-foo="String(foo)" /></template>`,
+            options: [
+              {
+                disallowTemplateShorthand: true
+              }
+            ],
+            errors: [
+              {
+                message: semver.gte(ESLint.version, '9.0.0')
+                  ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
+                  : 'use `String(foo)` instead.',
+                line: 1,
+                column: 27,
+                suggestions: semver.gte(ESLint.version, '9.0.0')
+                  ? [
+                      {
+                        messageId: 'useRecommendation',
+                        data: { recommendation: 'String(foo)' },
+                        output:
+                          '<template><div :data-foo="String(foo)" /></template>'
+                      }
+                    ]
+                  : []
+              }
+            ]
+          }
+        ]
+      : [])
   ]
 })

From c2772ef8efed029be24cd1fcfe142db537d33f43 Mon Sep 17 00:00:00 2001
From: Pavel Lozinsky <pavel@lozinsky.dev>
Date: Thu, 5 Dec 2024 18:54:09 +0300
Subject: [PATCH 3/4] refactor: add expected error message helper function

---
 tests/lib/rules/no-implicit-coercion.js | 38 +++++++++++--------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/tests/lib/rules/no-implicit-coercion.js b/tests/lib/rules/no-implicit-coercion.js
index 5b00d26fb..4b49bb3d3 100644
--- a/tests/lib/rules/no-implicit-coercion.js
+++ b/tests/lib/rules/no-implicit-coercion.js
@@ -8,6 +8,16 @@ const { RuleTester, ESLint } = require('../../eslint-compat')
 const semver = require('semver')
 const rule = require('../../../lib/rules/no-implicit-coercion')
 
+/**
+ * @param {string} suggestedCode
+ * @returns {string}
+ */
+function getExpectedErrorMessage(suggestedCode) {
+  return semver.gte(ESLint.version, '9.0.0')
+    ? `Unexpected implicit coercion encountered. Use \`${suggestedCode}\` instead.`
+    : `use \`${suggestedCode}\` instead.`
+}
+
 const tester = new RuleTester({
   languageOptions: {
     parser: require('vue-eslint-parser'),
@@ -106,9 +116,7 @@ tester.run('no-implicit-coercion', rule, {
       output: `<template><div :data-foo="Boolean(foo)" /></template>`,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? 'Unexpected implicit coercion encountered. Use `Boolean(foo)` instead.'
-            : 'use `Boolean(foo)` instead.',
+          message: getExpectedErrorMessage('Boolean(foo)'),
           line: 1,
           column: 27
         }
@@ -120,9 +128,7 @@ tester.run('no-implicit-coercion', rule, {
       output: null,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? "Unexpected implicit coercion encountered. Use `foo.indexOf('.') !== -1` instead."
-            : "use `foo.indexOf('.') !== -1` instead.",
+          message: getExpectedErrorMessage("foo.indexOf('.') !== -1"),
           line: 1,
           column: 27
         }
@@ -136,9 +142,7 @@ tester.run('no-implicit-coercion', rule, {
         : `<template><div :data-foo="Number(foo)" /></template>`,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? 'Unexpected implicit coercion encountered. Use `Number(foo)` instead.'
-            : 'use `Number(foo)` instead.',
+          message: getExpectedErrorMessage('Number(foo)'),
           line: 1,
           column: 27,
           suggestions: semver.gte(ESLint.version, '9.0.0')
@@ -161,9 +165,7 @@ tester.run('no-implicit-coercion', rule, {
         : `<template><div :data-foo="Number(foo)" /></template>`,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? 'Unexpected implicit coercion encountered. Use `Number(foo)` instead.'
-            : 'use `Number(foo)` instead.',
+          message: getExpectedErrorMessage('Number(foo)'),
           line: 1,
           column: 27,
           suggestions: semver.gte(ESLint.version, '9.0.0')
@@ -186,9 +188,7 @@ tester.run('no-implicit-coercion', rule, {
         : `<template><div :data-foo="String(foo)" /></template>`,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
-            : 'use `String(foo)` instead.',
+          message: getExpectedErrorMessage('String(foo)'),
           line: 1,
           column: 27,
           suggestions: semver.gte(ESLint.version, '9.0.0')
@@ -211,9 +211,7 @@ tester.run('no-implicit-coercion', rule, {
         : `<template><div :data-foo="String(foo)" /></template>`,
       errors: [
         {
-          message: semver.gte(ESLint.version, '9.0.0')
-            ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
-            : 'use `String(foo)` instead.',
+          message: getExpectedErrorMessage('String(foo)'),
           line: 1,
           column: 27,
           suggestions: semver.gte(ESLint.version, '9.0.0')
@@ -243,9 +241,7 @@ tester.run('no-implicit-coercion', rule, {
             ],
             errors: [
               {
-                message: semver.gte(ESLint.version, '9.0.0')
-                  ? 'Unexpected implicit coercion encountered. Use `String(foo)` instead.'
-                  : 'use `String(foo)` instead.',
+                message: getExpectedErrorMessage('String(foo)'),
                 line: 1,
                 column: 27,
                 suggestions: semver.gte(ESLint.version, '9.0.0')

From 03046508ce24866b3903bf740d41978008366173 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 8 Jan 2025 18:31:17 +0900
Subject: [PATCH 4/4] Update no-implicit-coercion.md

---
 docs/rules/no-implicit-coercion.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/rules/no-implicit-coercion.md b/docs/rules/no-implicit-coercion.md
index 6a65d5039..0e222c32f 100644
--- a/docs/rules/no-implicit-coercion.md
+++ b/docs/rules/no-implicit-coercion.md
@@ -3,7 +3,6 @@ pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-implicit-coercion
 description: Disallow shorthand type conversions in `<template>`
-since: v9.33.0
 ---
 
 # vue/no-implicit-coercion