prop-name-casing fix introduce breaking changes

[panstromek]

Expected:

I expected this rule to not fix anything at all actually. See below ;).

Actual

Props got renamed in component, but their usages were not.

Context

I ran fix on whole project and then I spent lot of time debugging bunch of code because this fix renames props but doesn't rename their usages. So props like __hiddenProp or user_id got renamed but their usage stayed as __hidden-prop :user_id. Not to mention attributes passed by v-bind="propsObject". Every now and then I find some little bug caused by this big fix. I found one now after few weeks so I decided to report it in the end.

Proposed solution

I feel like it would be better to completely disable this fix, because there is so many edge cases where it might break, so it's better if the user explicitly fixes naming instead of trying to find out what is broken afterwards.

Thx for your work, cheers ;)

[mysticatea]

Thank you for the report.

I think this is a duplicate of #862.
Please track that issue.

[panstromek]

Ok, great. I started writing this as a comment on that issue at first, but I thought this is more general case in the end so I opened a new one.

[panstromek]

Well, when I read it it's different really. I am talking more about renaming usages of the props, whereas #862 is about specific case with $ in prop name and fixing it's declaration (in my case, declarations were fixed properly).

Solution to #862 is just to handle that case, but solution to this one is either implement bunch of non-local renaming or disable the fix altogether (which I would prefer for the reasons mentioned above)..

Maybe consider reopening this, please.

[mysticatea]

I think that the root cause is the same bug. Our naming utility removes non-ASCII characters for some reason. (related: #694)

[panstromek]

But the problem here is not the renaming itself - that works well. Problem is that USAGES are not renamed at all.

Eg.

<template>
  <div>{{ some_prop }}</div>
</template>

<script>
export default {
  props: {
    some_prop: {
      type: String,
      default: ''
    }
  }
}
</script>

If you fix this file, it will only rename the declaration, but not the usage in template. And this is all in same file, usages in other files (v-binds) are not renamed either.

I understand that this is very complicated and error-prone to do, that's why I wouldn't even expect the fix to exist in here - It's better to do nothing and let user fix it himself, instead of creating a breaking change that is hard to find.

I hope it's clear now ;)