Parsing prop variables with path to string for easy debugging.

[yogeshgalav]

Problem:
For any component or input field,
if a developer wants to know where it's getting props from,
then they have to search in template by class or id or component name,
and this process become lengthier when webpage or component becomes bigger.

Solution:
The very easy solution to it could be to show developer the actual variable name or path in data-props- attribute.

For example, if a component or an input field looks like this in code,

<my-component :my-prop="product.details" />
<input v-model="product.details" >

then it could look like this in HTML

<div data-props-my-prop="product.details">...</div>
<input data-props-value="product.details" value="...">

It may be simple and dumb requirement but the time and effort it would save for developer would be enormous.
Thank you and have a nice day!

[lizhan12]

这是来自QQ邮箱的自动回复邮件。 我已经收到了你的来信，我会尽快回复。

[yogeshgalav]

@znck What you think about this?

[znck]

This is possible in user land using a node transform.

https://github.com/vuejs/core/blob/98f1934811d8c8774cd01d18fa36ea3ec68a0a54/packages/compiler-core/src/options.ts#L184

[yogeshgalav]

@znck Where should I write the code for this, file name?
Can you also tell me some reference function or code to look at?

[znck]

You can provide it in vite plugin options.