Add No Props Destructure rule issue #143

[sagi-daniel]

Summary

I have created a new rule that checks the practice of props destructuring in Vue components. The goal of this rule is to ensure code readability, maintainability, and functionality by preventing issues arising from improper handling of props changes.

I also prepared documentation that details the problems associated with props destructuring and its impact on Vue components, following the style of other documentation examples.

Description

Basic Destructuring Check: Verifies that props destructuring is not done directly with defineProps, which can lead to reactivity issues.

Related Issues

Fixes #143

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

[sagi-daniel]

I have no idea, I'll check my vs code tomorrow.

…

On Mon, 19 Aug 2024 at 23:05, David Peña Avila ***@***.***> wrote: I think you have a a different linter setup? 🤔 @rrd108 <https://github.com/rrd108> — Reply to this email directly, view it on GitHub <#158 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXSN2LHXWZZ6R3LHO5FLTVLZSJM3BAVCNFSM6AAAAABMYSQGFSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJXGQ2TKNJZGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[David-Pena]

No no I deleted my comment. It was my mistake 🫡

[rrd108]

@sagi-daniel I have a few requests and comments about the PR.

Are you ok with English or should I do it in Hungarian?

[sagi-daniel]

@sagi-daniel I have a few requests and comments about the PR.

Are you ok with English or should I do it in Hungarian?

Yes, totaly. We can speak in english. It s good opportunity improve my soft skills and hard skills at the same time.

But i couldn't find your comments and requests. :S can you tell me where i can found exactly.

[rrd108]

I didn't commented yet as was waiting for your answer.

The first thing:
When you open the project it supposed to ask you to install the recommended extensions. One of them is eslint.

It helps us to follow the same formatting.

Please install it.

When you open any of the files you changed and do formatting it should remove the semicolumns.

Now it is harder to review the pr because I do not see what is code change at what is code change.

After you fixed it you should just commit the changes, it will update the pr and I will review that.

I am in a car this afternoon so I may need some time to check it.

And the most important part, thanks for the contribution!

[sagi-daniel]

I didn't commented yet as was waiting for your answer.

The first thing: When you open the project it supposed to ask you to install the recommended extensions. One of them is eslint.

It helps us to follow the same formatting.

Please install it.

When you open any of the files you changed and do formatting it should remove the semicolumns.

Now it is harder to review the pr because I do not see what is code change at what is code change.

After you fixed it you should just commit the changes, it will update the pr and I will review that.

I am in a car this afternoon so I may need some time to check it.

And the most important part, thanks for the contribution!

Thank you! I m going to install it, I thought npm install added all necessary depedency... maybe i didnt recognize some npm warning while the project initialization.

question: Do I have to make a new branch before the PR? or just push it to the main?

[rrd108]

It is not npm, they are vscode extensions.

You can create a new branch, but not necesarry as the PR will be merged in one step anyway.

[David-Pena]

I think its important to add that is possible to destructure props but using toRefs()

Example

<script setup>
const props = defineProps<{ name: string }>()
const { name } = toRefs(props) // It will keep reactivity
</script>

What do you think? @rrd108 @sagi-daniel

[rrd108]

I think its important to add that is possible to destructure props but using toRefs()

Example

<script setup>
const props = defineProps<{ name: string }>()
const { name } = toRefs(props) // It will keep reactivity
</script>

What do you think? @rrd108 @sagi-daniel

toRefs approach is worth a dedicated rule. Keep this one here clear and simple.