Support template literals in vue/no-deprecated-model-definition (#2258)

Author: FloEdelmann

lib/rules/no-deprecated-model-definition.js

@@ -12,7 +12,7 @@ const allowedEventNames = new Set(['update:modelValue', 'update:model-value'])
 /**
  * @param {ObjectExpression} node
  * @param {string} key
- * @returns {Literal | undefined}
+ * @returns {Literal | TemplateLiteral | undefined}
  */
 function findPropertyValue(node, key) {
   const property = node.properties.find(
@@ -24,7 +24,7 @@ function findPropertyValue(node, key) {
   if (
     !property ||
     property.type !== 'Property' ||
-    property.value.type !== 'Literal'
+    !utils.isStringLiteral(property.value)
   ) {
     return undefined
   }
@@ -33,7 +33,7 @@ function findPropertyValue(node, key) {
 
 /**
  * @param {RuleFixer} fixer
- * @param {Literal} node
+ * @param {Literal | TemplateLiteral} node
  * @param {string} text
  */
 function replaceLiteral(fixer, node, text) {
@@ -93,10 +93,12 @@ module.exports = {
       if (
         !propName ||
         !eventName ||
-        typeof propName.value !== 'string' ||
-        typeof eventName.value !== 'string' ||
-        !allowedPropNames.has(propName.value) ||
-        !allowedEventNames.has(eventName.value)
+        !allowedPropNames.has(
+          utils.getStringLiteralValue(propName, true) ?? ''
+        ) ||
+        !allowedEventNames.has(
+          utils.getStringLiteralValue(eventName, true) ?? ''
+        )
       ) {
         context.report({
           node: modelProperty,

tests/lib/rules/no-deprecated-model-definition.js

@@ -52,6 +52,20 @@ tester.run('no-deprecated-model-definition', rule, {
         </script>
       `,
       options: [{ allowVue3Compat: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`model-value\`,
+            event: \`update:model-value\`
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }]
     }
   ],
   invalid: [
@@ -320,6 +334,58 @@ tester.run('no-deprecated-model-definition', rule, {
           ]
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`foo-bar\`,
+            event: \`update:foo-bar\`
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12,
+          suggestions: [
+            {
+              desc: 'Change to `modelValue`/`update:modelValue`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`modelValue\`,
+            event: \`update:modelValue\`
+          }
+        })
+        </script>
+      `
+            },
+            {
+              desc: 'Change to `model-value`/`update:model-value`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`model-value\`,
+            event: \`update:model-value\`
+          }
+        })
+        </script>
+      `
+            }
+          ]
+        }
+      ]
     }
   ]
 })