JSX Improvement

[Kagashino]

When using text/jsx script implement a component by JSX syntax:

<script type="text/jsx">
import { ref, h } from 'vue';

export default function () {
  const name = ref('Evan');

  return (
    <input value={name.value} onChange={(e) => { name.value = e.target.value; } } />
  );
}
</script>

The "jsx-loader-like" loader was legacy for Vue3.x , createElement function's parameter structure changed. (See rfcs0008), The attributes on JSXElement should no longer be converted into the following data:

{
  props: {
    domProps: { value: "Evan" },
    on: { change: ƒ onChange(e)}
  }
}

And the following data structure was expected to the createElement function parameter format:

{
  props: {
    onChange: ƒ onChange(e)
    value: "bar"
  }
}

I know that JSX is still WIP, but I personally prefer this way of using setup (although this may lose the performance advantage brought by template compilation). If possible, hope to share related information about 'JSX loader/plugin (I'm not sure)' at the appropriate time

[fangbinwei]

I'm using this jsx transform

babel.config.js

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        jsx: false
      }
    ]
  ],
  plugins: ['@ant-design-vue/babel-plugin-jsx']
}