feat(RFC0005): provide autofix fix for deprecated v-bind.prop.sync modifier

Author: przemkow

docs/rules/no-deprecated-v-bind-sync.md

@@ -7,11 +7,13 @@ description: disallow use of deprecated `.sync` modifier on `v-bind` directive (
 # vue/no-deprecated-v-bind-sync
 > disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
 
+- :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.
+
 ## :book: Rule Details
 
 This rule reports use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
 
-<eslint-code-block :rules="{'vue/no-deprecated-v-bind-sync': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-deprecated-v-bind-sync': ['error']}">
 
 ```vue
 <template>
@@ -22,6 +24,7 @@ This rule reports use of deprecated `.sync` modifier on `v-bind` directive (in V
 
   <!-- ✗ BAD -->
   <MyComponent v-bind:propName.sync="foo"/>
+  <MyComponent v-bind:[dynamiArg].sync="foo"/>
   <MyComponent v-bind.sync="foo"/>
   <MyComponent :propName.sync="foo"/>
 </template>

lib/rules/no-deprecated-v-bind-sync.js

@@ -22,7 +22,7 @@ module.exports = {
       category: undefined,
       url: 'https://eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
       syncModifierIsDeprecated: "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
@@ -35,7 +35,17 @@ module.exports = {
           context.report({
             node,
             loc: node.loc,
-            messageId: 'syncModifierIsDeprecated'
+            messageId: 'syncModifierIsDeprecated',
+            fix: (fixer) => {
+              const isUsingSpreadSyntax = node.key.argument == null
+              const hasMultipleModifiers = node.key.modifiers.length > 1
+              if (isUsingSpreadSyntax || hasMultipleModifiers) {
+                return
+              }
+
+              const bindArgument = context.getSourceCode().getText(node.key.argument)
+              return fixer.replaceText(node.key, `v-model:${bindArgument}`)
+            }
           })
         }
       }

tests/lib/rules/no-deprecated-v-bind-sync.js

@@ -30,83 +30,124 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
     {
       filename: 'test.vue',
       code: "<template><MyComponent :foo='bar'/></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><MyComponent v-bind:[dynamicArg]='bar'/></template>"
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><MyComponent :[dynamicArg]='bar'/></template>"
     }
   ],
 
   invalid: [
     {
       filename: 'test.vue',
       code: "<template><MyComponent v-bind:foo.sync='bar'/></template>",
+      output: "<template><MyComponent v-model:foo='bar'/></template>",
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: "<template><MyComponent :foo.sync='bar'/></template>",
+      output: "<template><MyComponent v-model:foo='bar'/></template>",
+      errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><MyComponent v-bind:[dynamicArg].sync='bar'/></template>",
+      output: "<template><MyComponent v-model:[dynamicArg]='bar'/></template>",
+      errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><MyComponent :[dynamicArg].sync='bar'/></template>",
+      output: "<template><MyComponent v-model:[dynamicArg]='bar'/></template>",
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: "<template><MyComponent v-bind.sync='bar'/></template>",
+      output: "<template><MyComponent v-bind.sync='bar'/></template>",
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><MyComponent :foo.sync.unknown="foo" /></template>',
+      output: '<template><MyComponent :foo.sync.unknown="foo" /></template>',
+      errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent :[dynamicArg].sync.unknown="foo" /></template>',
+      output: '<template><MyComponent :[dynamicArg].sync.unknown="foo" /></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="x.foo" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="x.foo" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[x]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[x - 1]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x - 1]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[`${x}`]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[`${x}`]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[`prefix_${x}`]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[`prefix_${x}`]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[x ? x : \'_\']" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x ? x : \'_\']" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[x || \'_\']" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x || \'_\']" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[x()]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x()]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[/r/.match(x) ? 0 : 1]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[/r/.match(x) ? 0 : 1]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[typeof x]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[typeof x]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div v-for="x in list"><MyComponent :foo.sync="foo[tag`${x}`]" /></div></div></template>',
+      output: '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[tag`${x}`]" /></div></div></template>',
       errors: ["'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."]
     }
   ]