eslint-plugin-vuetify icon indicating copy to clipboard operation
eslint-plugin-vuetify copied to clipboard

[Bug] v-btn text prop wrongly converted to variant="text"

Open mtdvlpr opened this issue 1 year ago • 9 comments

When I try to use the new text prop of v-btn (<v-btn text="Click me!" />) it gets converted to <v-btn variant="text" />.

The conversion should only occur for <v-btn text /> or <v-btn :text="true" />.

mtdvlpr avatar May 05 '23 13:05 mtdvlpr

This plugin is only really intended to be used for migration from v2-v3, not for existing v3 projects.

KaelWD avatar May 05 '23 13:05 KaelWD

Well, I find it useful to keep using it, so I can prevent accidentally using my old knowledge of Vuetify 2.

mtdvlpr avatar May 05 '23 13:05 mtdvlpr

Suppose you started converting your code from v2 to v3 manually and only later discovered this plugin. You wouldn't want the plugin to suddenly remove your button texts.

mtdvlpr avatar May 05 '23 13:05 mtdvlpr

:text="variable" is replaced with :variant="variable && 'text'" so it isn't really possible to have a rule that works for both

KaelWD avatar May 05 '23 14:05 KaelWD

No easy way to distinguish boolean variables from string variables? If not, I'll figure something out. It's not a biggie.

mtdvlpr avatar May 05 '23 14:05 mtdvlpr

Not variables. Static strings is possible, the way rules are defined internally though is just text: { name: 'variant', value: 'text' } which is also shared with other props so probably not easy to add an override just for this.

I could add a config like 'vuetify/no-deprecated-props': ['error', { ignore: { VBtn: ['text'] } }]

KaelWD avatar May 05 '23 14:05 KaelWD

@KaelWD the ignore config would be great!

mtdvlpr avatar May 05 '23 14:05 mtdvlpr

One solution would be to make this a special case at the warn level. The rule description could highlight that the prop has changed and direct people to manually switch to the variant prop instead. As a separate rule it could be disabled individually once the project has made the conversions. I would guess there aren't too many cases like this where a v2 prop is deprecated but there's a new v3 prop that does a totally different thing.

The ignore config would also be helpful.

abea avatar May 25 '23 16:05 abea

Another option would be something like settings.vuetify.migrationMode = false https://eslint.org/docs/latest/use/configure/configuration-files#adding-shared-settings

KaelWD avatar May 25 '23 16:05 KaelWD