Skip to content

Rule Proposal: no-ref-prop #1676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jods4 opened this issue Oct 25, 2021 · 6 comments · Fixed by #1678
Closed

Rule Proposal: no-ref-prop #1676

jods4 opened this issue Oct 25, 2021 · 6 comments · Fixed by #1678

Comments

@jods4
Copy link

jods4 commented Oct 25, 2021

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
Copy link
Member

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
Copy link
Member

"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
Copy link
Author

jods4 commented Oct 26, 2021

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants