fix(eslint-plugin-vue): [valid-v-bind-sync] Added Case: when valid is…

… then valid .sync (#1335)

* fix(eslint-plugin-vue): [valid-v-bind-sync] If Valid Is then .sync is Valid

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* Formatted Document

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* fix: [v-bind-sync] added check for :is bind attribute

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* fix: [valid-v-bind-sync] add unit tests for `v-bind:is`

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* Update tests/lib/rules/valid-v-bind-sync.js

* Update package.json

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

lib/rules/valid-v-bind-sync.js

@@ -82,6 +82,22 @@ function maybeNullObjectMemberExpression(node) {
   return false
 }
 
+function isValidIs(node) {
+  const { attributes } = node
+  const isAttribute = attributes.some((attr) => {
+    // check for `VAttribute`
+    if (attr.type === 'VAttribute') {
+      // check for `is` attribute
+      if (attr.key.type === 'VIdentifier' && attr.key.name === 'is') return true
+
+      // check for `:is` `bind` attribute
+      if (attr.key.type === 'VDirectiveKey' && attr.key.argument.name === 'is')
+        return true
+    }
+  })
+  return isAttribute
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -120,7 +136,7 @@ module.exports = {
         const element = node.parent.parent
         const name = element.name
 
-        if (!isValidElement(element)) {
+        if (!isValidElement(element) && !isValidIs(node.parent)) {
           context.report({
             node,
             loc: node.loc,

tests/lib/rules/valid-v-bind-sync.js

@@ -145,6 +145,48 @@ tester.run('valid-v-bind-sync', rule, {
     {
       filename: 'empty-value.vue',
       code: '<template><MyComponent :foo.sync="" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <table>
+          <tr is="my-row"
+            :some-prop.sync="somePropValue"
+            :some-other-prop.sync="someOtherPropValue">
+            <td></td>
+          </tr>
+        </table>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <table>
+          <tr :is="my-row"
+            :some-prop.sync="somePropValue"
+            :some-other-prop.sync="someOtherPropValue">
+            <td></td>
+          </tr>
+        </table>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <table>
+          <tr v-bind:is="myRow"
+            :some-prop.sync="somePropValue"
+            :some-other-prop.sync="someOtherPropValue">
+            <td></td>
+          </tr>
+        </table>
+      </template>
+      `
     }
   ],
   invalid: [