[Feat] New JSX support - vue-jsx-runtime

[dolymood]

What problem does this feature solve?

Same as #5085 (comment)

Tis issue #5085 is closed. So i created this new issue.

The repo

I created a repo for support JSX runtime vue-jsx-runtime and examples vue-jsx-runtime-examples.

all vue-jsx-runtime unit test cases are came from vue jsx-next

Runtime size:

• minify Iife: 2.53Kb (no gzip)
• ES Module: 8.79kb (no minify)

About examples( used TS):

• vite with esbuild usage
• vue-cli with babel usage
• swc

Different with vue jsx-next

• jsx-next is a plugin for Babel only.
• vue-jsx-runtime can be used with Babel, TypeScript, swc, esbuild and more.

vue-jsx-runtime limits:

• can not merge ele/component props
• v-model syntax is little different with jsx-next - v-model

First of all

We should forget the react xx, something like babel-plugin-transform-react-jsx. Maybe babel and other tools can be renamed to other name, like: jsx-runtime. 😆

The advantages

• "Standard" JSX supported, runtime jsx. It can be used with Babel, TypeScript, swc, esbuild and more...
• Runtime transform JSX ast to vue render(). Simple and easy to extend and maintain
• Maybe we can share transform logic with compile-core and compile-dom in the future

What does the proposed API look like?

Babel

// babel plugin
plugins: [
  [
    // add @babel/plugin-transform-react-jsx
    '@babel/plugin-transform-react-jsx',
    {
      throwIfNamespace: false,
      runtime: 'automatic', 
      importSource: 'vue-jsx-runtime'
    }
  ],
],

TS

{
  "compilerOptions": {
    "jsx": "react-jsxdev",
    "jsxImportSource": "vue-jsx-runtime"
  }
}

SWC

{
  "jsc": {
    "transform": {
      "react": {
        "runtime": "automatic",
        "importSource": "vue-jsx-runtime"
      }
    }
  }
}

More tools supported in the future...

[yyx990803]

How React transforms JSX is not a standard. JSX itself has no runtime semantics, and it's up to frameworks to decide how to compile it. Vue does not aim to be compatible with how React decides to compile JSX.

[morlay]

@yyx990803 Could we re-open this? It is important for developer use vue-jsx without babel.

react-jsx now is standard interface to pass JSX tag key, and props ( includes children )

jsx(type, props: { children, ...otherProps }, key) for single child
jsxs(type, props: { children, ...otherProps }, key) for multi children.

It could just wrap h for quick #5085 (comment)