jsx development status for vue 3

[noor-tg]

any news about the support of jsx in vue 3 ?

[Amour1688]

https://github.com/vueComponent/jsx

Babel Plugin JSX for Vue 3.0

To add Vue JSX support.

Installation

Install the plugin with:

npm install @ant-design-vue/babel-plugin-jsx

Then add the plugin to .babelrc:

{
  "plugins": ["@ant-design-vue/babel-plugin-jsx"]
}

Syntax

Content

functional component

const App = () => <div></div>

with render

const App = {
  render() {
    return <div>Vue 3.0</div>
  }
}

const App = defineComponent(() => {
  const count = ref(0);

  const inc = () => {
    count.value++;
  };

  return () => (
    <div onClick={inc}>
      {count.value}
    </div>
  )
})

fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
)

Attributes/Props

const App = () => <input type="email" />

with a dynamic binding:

const placeholderText = 'email'
const App = () => (
  <input
    type="email"
    placeholder={placeholderText}
  />
)

Directives

It is recommended to use camelCase version of it (vModel) in JSX, but you can use kebab-case too (v-model).

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input vShow={this.visible} />;
  },
};

v-model

• You should use underscore (_) instead of dot (.) for modifiers (vModel_trim={this.test})

export default {
  data: () => ({
    test: 'Hello World',
  }),
  render() {
    return (
      <>
        <input type="text" vModel_trim={this.test} />
        {this.test}
      </>
    )
  },
}

[noor-tg]

can this plugin used with the setup method ?

[Amour1688]

can this plugin used with the setup method ?

Yeah, It's also compatible with Vue 2

[noor-tg]

some thing like

export default {
  setup () {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={inc}>
        {count.value}
      </div>
    )
 }
}

[Amour1688]

It works

[noor-tg]

there is error when setup with vue 3 , vue router next . and this plugin
the home view

export default {
setup () {
   return () => (
      <div> hi </div>
   )
}
}

router index

import Home from "@/views/Home.jsx"

const routes = [
{
path: "/",
name: "home",
component: Home
}
]
const router = createRouter ({
history: createWebHistory(),
routes
})
export default router

error when open home route

TypeError: Cannot read property '$createElement' of undefined
    at setup (Home.jsx?6389:3)

[Amour1688]

plz show you babel config and you can create an issue in jsx

[noor-tg]

I will open issue there .

[haoqunjiang]

Closing in favor of #141