Add jsx/tsx support

[cereschen]

Now if I write code like this:

new Vue({
  setup() {
    const count = ref(0);
    return () => (
      <div>
        <button onClick={() => count.value++}>the count is</button>
        {count.value}
      </div>
    );
  }
}).$mount("#app");

Will report this error

Error in data(): "TypeError: Cannot read property '$createElement' of undefined"

I checked the official plugin vuejs/jsx/babel-sugar-inject-h

          t.variableDeclaration('const', [
                t.variableDeclarator(
                  t.identifier('h'),
                  isRender
                    ? t.memberExpression(t.identifier('arguments'), t.numericLiteral(0), true)
                    : t.memberExpression(t.thisExpression(), t.identifier('$createElement')),
                ),
              ]),

Looks like we need the this prop $createElement

After fix, it won't affect the original function
Just pass a config when you use the plugin
Vue.use(compositionApi, { jsx: { enable: true} });

You can learn everything here
https://codesandbox.io/s/loving-sunset-m43pd?file=/src/main.js

[pikax]

Thank you, but this should be able handled by the jsx plugin.

Closing this is favour of vuejs/jsx-vue2#142

[cereschen]

Thank you, but this should be able handled by the jsx plugin.

Closing this is favour of vuejs/jsx#142

That plan is better. I hope to see the change soon