Extend no-duplicate-attributes with new option allowedDOMProps

[mrzdevcore]

What rule do you want to change? no-duplicate-attributes

Does this change cause the rule to produce more or fewer warnings?

How will the change be implemented? (New option, new default behavior, etc.)? New option: allowedDOMProps

Please provide some example code that this change will affect:

{
  "vue/no-duplicate-attributes": ["error", {
    "allowCoexistClass": true,
    "allowCoexistStyle": true,
    "allowedDOMProps": ["name"]
  }]
}

 <MyComponent :name="'test'" :name.prop="def" />

What does the rule currently do for this code? nothing

What will the rule do after it's changed?

• allowedDOMProps (Array<string>) ... Enables [v-bind:attribute-name.prop] directive to coexist with [v-bind:attribute-name] or [attribute-name] attribute. Default is []

Additional context

Pull request

[ota-meshi]

Thank you for posting issue.

I think we need to set allowedDOMProps for each component. This is because when a property is specified without .prop, it depends on each component whether or not it is applied directly to the DOM.

I think it makes sense to make the option an object so that you can specify a component name or pattern for the key, or use an array of objects with the component name or pattern and property name. What do you think?

[mrzdevcore]

Hello @ota-meshi

I think it's a good idea. I will do it like that then.

{
  "vue/no-duplicate-attributes": ["error", {
    "allowCoexistClass": true,
    "allowCoexistStyle": true,
    "allowedDOMProps": [
         {
             "name": "<components-pattern>",
             "props": ["id", "name"]
         }
     ]
  }]
}

Is that ok for you ? @ota-meshi

[ota-meshi]

It sounds almost good!

I don't think <> is necessary.

{
  "vue/no-duplicate-attributes": ["error", {
    "allowCoexistClass": true,
    "allowCoexistStyle": true,
    "allowedDOMProps": [
         {
             "name": "components-pattern",
             "props": ["id", "name"]
         }
     ]
  }]
}

---

I think you can use toRegExp to use the pattern in the component name when implementing.

https://github.com/vuejs/eslint-plugin-vue/blob/71622f29e6f826c04e6dba7083ed65670e2edbf3/lib/utils/regexp.js#L27