Support automatic ref unwrapping in plugin-vue-jsx

[bbugh]

Clear and concise description of the problem

I searched around and was surprised not to see any issues about this topic; I apologize if it's a duplicate.

JSX with Vue works great in vite, but it's very easy to forget which items are computed/refs and require .value

const App = defineComponent({
  setup() {
    const quantity = 100;
    const uom = "kg";
    const amount = computed(() => `${quantity} ${uom}`);

    return () => (
      <div class="bg-red-300">
        quantity: {quantity}, uom: {uom};{" "}
        {/* ☹️ Invalid VNode type: undefined (undefined) at <App> */}
        You have {amount} of potatoes.
      </div>
    );
  },
});

Suggested solution

It would be really nice if the compiler was able to automatically unwrap ComputedRef and Ref without having to explicitly state .value, like SFCs do.

Alternative

Using .value everywhere in templates

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[patak-dev]

Hey @bbugh, this is not something in the scope of Vite Core. Check out vuejs/rfcs#228 if you would like to see some ideas that the Vue community is thinking on to tackle this issue, but for reference Vite Core is framework agnostic so this kind of features should be implemented by each framework community through plugins.

[bbugh]

Oh dang, sorry. That explains why I couldn't find anything. Thank you!