to provide a way to parse vue-jsx in the browser.For "jsx" enthusiasts

[masx200]

I hope that vue can provide a way to parse vue-jsx in the browser.

For novice friends, the cost of learning a pre-compiled toolchain is too high.

For "jsx" enthusiasts, using "jsx" in vue means using a precompiled toolchain

The learning cost of "jsx" is not high, compared to the "Mustache" template.

If you do not want to use the precompiled toolchain, you must use the "Mustache" template

This is an annoying problem.

I have to admit that many people don't like to use "vue" because they don't like the "Mustache" template.

Of course, using "jsx" in "vue" is not a replacement for the "Mustache" template, just giving "jsx" fans another option.

You can refer to 'Hyperscript Tagged Markup', the "jsx" parser running in the browser, the volume is less than "1kb".

https://github.com/developit/htm

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

What does the proposed API look like?

import { html } from '@vue/jsx';
const component = {
    setup() {
        const msg = 'hello world';
        function doSomething() {
        }
        return {
            doSomething,
            msg,
            activeColor: 'red',
            fontSize: 30
        };
    },
    render() {
        const {msg, doSomething, activeColor, fontSize} = this;
        return html`
<div style=${ {
            color: activeColor,
            fontSize: fontSize+  'px'
        } }></div>
<span>Message: ${ msg }</span>
<a onclick=${ doSomething }></a>
`;
    }
};
export default component;

[michaeldrotar]

I believe this is already supported (vue3 still has all the features of vue2 unless noted otherwise)
https://vuejs.org/v2/guide/render-function.html#JSX

It's not frequently mentioned, but the composition API's setup method can be used alongside the existing api as well.. there's a blurb here about how things resolve:
https://vue-composition-api-rfc.netlify.com/#usage-alongside-existing-api

[masx200]

I believe this is already supported (vue3 still has all the features of vue2 unless noted otherwise)
https://vuejs.org/v2/guide/render-function.html#JSX

It's not frequently mentioned, but the composition API's setup method can be used alongside the existing api as well.. there's a blurb here about how things resolve:
https://vue-composition-api-rfc.netlify.com/#usage-alongside-existing-api

Is "vue-jsx" in "vue 3.0" particularly close to "react-jsx"?

The "vue-jsx" in "vue 2.0" is not very popular.

What does "jsx" look like in the future "vue 3.0"?

[michaeldrotar]

Is "vue-jsx" in "vue 3.0" particularly close to "react-jsx"?
What does "jsx" look like in the future "vue 3.0"?

Unless someone can correct me, I believe jsx is jsx.. it's exactly the same everywhere.

The "vue-jsx" in "vue 2.0" is not very popular.

That's subjective, as are most of the reasons stated for opening this issue, so I can't really comment on any of that. You might find jsx easier to learn and use.. personally, I don't, but it obviously has its merits so I'm glad its an option for components that can be better expressed using it.

Also, vue's <template> is not using mustache... both use curly braces, but they're not remotely the same thing and you'll have a very hard time building a vue template if you're reading mustache docs. 😄

[yyx990803]

https://github.com/developit/htm <- this is NOT JSX. If that's something you want, it already exists for Vue 2 (and can be easily updated for Vue 3): https://github.com/egoist/vue-html