JSX optimization

[edimitchel]

• Start Date: 2021-09-01
• Target Major Version: 3.x

Summary

Provide optimizations available on Vue templates to JSX rendering.

Motivation

Using JSX with Vue is not recommanded but is today a way most of developer would prefer. But using it will prevent to benefit hosting and block optimizations.

As I mostly see on last RFCs (especially on script setup and ref sugar), these features is provided thanks to a compilation step which is transparent for the developer:

• setup function is rewritten into a runnable version
• ref sugar makes .value appear
• and the template optimization introduced by the 3rd Vue version

Why not using the same way to recompile JSX by hoisting static elements and make group optimization ?

Detailed design

<script>
const { ref } from 'vue';

const text = ref('Hello');
return () => (
  <div>
    <span>static dom</span>
    <p>{text} world !</p>
  </div>
);
</script>

Compiled into

import { ref } from 'vue'

const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "static dom", -1 /* HOISTED */)
const __sfc__ = {
  setup(__props) {
    const text = ref('Hello World!')

    return (_ctx, _cache) => _createVNode("div", null, [_hoisted_1, _createVNode("p", null, [text, _createTextVNode(" world !")])]);
  }
}

[nicolidin]

Do you know if it's possible to use TSX with script setup or composable function?

[edimitchel]

Yes, with the new JSX engine of Vue.
https://github.com/vuejs/jsx-next

[Maxim-Mazurok]

Totally agree, would be great to have the same optimizations in JSX, created issue: vuejs/babel-plugin-jsx#720