As a user of vue.js，i use jsx to write code. There are a lot of .value in my code.

[John-Oldman-Wang]

As a user of vue.js，i use jsx to write code. There are a lot of .value in my code.
For example:

import { defineComponent } from 'vue';

const UserInfo = defineComponent({
    props: {},
    setup() {
        const userName = useRequest('/api/get-username')
        const starCount = useRequest('/api/get-star-count')
        return () => {
            return (
                <div>
                    <div>
                        <span>name:</span>
                        <span>{userName.value}</span>
                    </div>
                    <div>
                        <span>starCount:</span>
                        <span>{starCount.value}</span>
                    </div>
                </div>
            );
        };
    },
});

When I have a variable, I need to write a .value in the code.

I thought of a solution. This solution is to check whether it is ref when rendering node. If it is ref, take out the value of ref as the rendering result.

For example:

// code
<div>{ref(123)}</div>
// render result
<div>123</div>

[liulinboyi]

You can use like this:

export default {
  setup() {
    const msg = ref('')
    watch(msg, (val) => {
     console.log(val)
    })

    const data = reactive({
      msg,
    })

    return () => (
        <div>
          <h2>{ data.msg }</h2>
          <input value={ data.msg } onInput={ (e) => data.msg = e.target.value  } />
        </div>
      );
  },
};

If the ref is in the reactive, when you get the ref's value will auto get the .value's value.

And there is a simple Vue JSX playground.

[baiwusanyu-c]

I understand that you don’t want to use the .value syntax in many places, but I don’t think using ref(xxx) will bring about a big improvement in the development experience.

[Alfred-Skyblue]

In fact, you can also write like this:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const instance = getCurrentInstance()
    let msg = 'Hello World'

    function setState(cb: () => void) {
      cb()
      instance?.proxy?.$forceUpdate()
    }

    return () => {
      return (
        <div>
          <h1>{msg}</h1>
          <button onClick={() => setState(() => (msg = 'Hello Vue 3'))}>
            Click
          </button>
        </div>
      )
    }
  }
})

Don't mind if you are naughty😄

[Soya-xy]

Maybe You can try https://vue-macros.sxzz.moe/features/jsx-directive.html it

[mbokil]

That is cool. JSX with Vue template directives.