Rule Proposal: no-ref-prop

[jods4]

Please describe what the rule should do:
This rule should warn users that define a component prop named ref, as it will be unusable.

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:
There are several ways to define props, here's the script-setup + TS way:

<script setup lang="ts">
defineProps<{ 
  ref: string // <- Error: "ref" is a reserved name that can't be used by props.
}>()
</script>

Additional context

You might say it should be obvious it can't be bound as the keyword ref inside a template is reserved for a different use, but it happened to a coworker of mine last week who lost half an hour not understanding why his component was not bound to the correct value.

1. Not every Vue beginner knows about ref and what it does.
2. Even so, some situations can be sneaky. In my coworker's case, he tried to bound the component through a h()-like API, actually he was trying to do: showModal(MyDialogComponent, /* props: */ { name: "abc", ref: 123 }) and it might not be immediately clear to you that ref is not gonna be bound to MyDialogComponent prop ref.

I haven't checked the format of the state bound to components, there might be other reserved names? Can't think of one right now.

[ota-meshi]

Thank you for the rule proposal!
I think that rule will help many users.
We need to find out if there are other names with similar traps. For example, "key" also has a trap.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBNeUNvbXBvbmVudCBmcm9tICcuL015Q29tcG9uZW50LnZ1ZSdcblxuY29uc3QgYSA9IFwiYVwiXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8TXlDb21wb25lbnQgOmtleT1cImFcIiA6Zm9vPVwiYVwiLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIk15Q29tcG9uZW50LnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5jb25zdCBwcm9wcyA9IGRlZmluZVByb3BzKHsga2V5OiBTdHJpbmcsIGZvbzogU3RyaW5nIH0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICBLZXk6IHt7cHJvcHMua2V5fX08YnI+XG4gIEZvbzoge3twcm9wcy5mb299fVxuPC90ZW1wbGF0ZT4ifQ==

[ota-meshi]

The documentation's Special Attributes also lists is, but the props named is seems to work.

https://v3.vuejs.org/api/special-attributes.html

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBNeUNvbXBvbmVudCBmcm9tICcuL015Q29tcG9uZW50LnZ1ZSdcblxuY29uc3QgYSA9IFwiYVwiXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8TXlDb21wb25lbnQgOmlzPVwiYVwiIDpmb289XCJhXCIvPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59IiwiTXlDb21wb25lbnQudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmNvbnN0IHByb3BzID0gZGVmaW5lUHJvcHMoeyBpczogU3RyaW5nLCBmb286IFN0cmluZyB9KVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgSXM6IHt7cHJvcHMuaXN9fTxicj5cbiAgRm9vOiB7e3Byb3BzLmZvb319XG48L3RlbXBsYXRlPiJ9

[ota-meshi]

I also need to find out about Vue2 special attributes, so it will take some time 😅.

https://vuejs.org/v2/api/#Special-Attributes

[ota-meshi]

"key", "ref", and "is" do not work in Vue2. Also, Vue will display an error.
"slot" and "slot-scope" may work in Vue2, but Vue display an error.
"scope" seems to work in Vue 2.6 (and 2.5).

We need to rename the rule because "ref" is not the only name that cannot be used. For example, no-reserved-props?

We also need to add an option to allow you to choose between Vue3 and Vue2 and switch between disallowed names.

Vue2: "key", "ref", "is", "slot", and "slot-scope".
Vue3: "key" and "ref".

[jods4]

great! Thanks for investigating all the reserved words for all versions!

no-reserved-props sounds good to me.

key and ref could always trigger the warning; and is, slot and slot-scope additionally if a new options vue-version is set to 2?

[ota-meshi]

key and ref could always trigger the warning; and is, slot and slot-scope additionally if a new options vue-version is set to 2?

Yes, that’s exactly.