fix(runtime-code): warn using array created without ref as a ref inside v for in script setup (fix: #10655)

[quiteeasy]

In production mode, after inlining the <script setup>, variables created are not exposed in the setupResult nor compiled to provide ref props with the actual reference, as it is for references created using ref(). This causes string refs to lose their reactivity in the renderTemplateRef.ts file. However, in development mode, all variables are exposed in the setupResult, and string refs with array values work as expected.

To address this issue, I have added a warning in the PR for this specific case. One potential solution could be to forbid the use of string refs other than those created with ref(), as other cases (e.g., reactive, ...) seem to be unhandled in renderTemplateRef.ts. We could introduce a compile-time error if anything other than ref() is used as a string ref for <script setup>.

Implementation details: I could not use setupResults as it unrefs the ref, and reactive and ref are indistinguishable, so I used devtoolsRawSetupState. However, there might be a better way or a need to introduce another rawSetupState variable specifically for the development mode. I'm open to suggestions on how to handle this more effectively.

I'm looking forward to the team's input and suggestions on how to best resolve this issue. Please share your thoughts and insights to help us find an optimal solution.

Screen.Recording.2024-04-24.at.5.46.32.PM.mov

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.7 kB	34.5 kB	31.1 kB
vue.global.prod.js	148 kB	53.8 kB	48.1 kB

Usages

Name	Size	Gzip	Brotli
createApp	50.7 kB	19.8 kB	18.1 kB
createSSRApp	54.1 kB	21.2 kB	19.3 kB
defineCustomElement	53 kB	20.6 kB	18.8 kB
overall	64.5 kB	24.9 kB	22.6 kB

[quiteeasy]

As an alternative option, we could expose other values to the template, similar to how we expose values using the ref() function when using string refs in templates. However, we need to decide on a consistent approach. Should we stick to using string refs and leverage the existing ref() mechanism, or should we forbid using other values but ref() in the templates?