Support Vue output JSX with mitosis config

[kingzez]

Add api: 'jsx' to mitosis.config.js, support vue output jsx.

module.exports = {
  targets: ['vue3'],
  options: {
    vue3: {
      api: 'jsx'
    }
  }
}

mitosis code

// MyComponent.lite.tsx

import { useState } from "@builder.io/mitosis";

export default function MyComponent(props) {
  const [name, setName] = useState("Steve");

  return (
    <div class="box">
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      Hello! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
}

vue jsx/tsx code

// MyComponent.jsx

import { ref, defineComponent } from "vue";

export default defineComponent({
  name: 'MyComponent',

  props: {},

  emits: [],

  setup(props, {}) {
    const name = ref("Steve");

    const setName = (value) => name.value = value

    return () => (
      <div class="box">
        <input value={name.value} onChange={(event) => setName(event.target.value)} />
        Hello! I can run in React, Vue, Solid, or Liquid! 
      </div>
    );
  }
})

I am interested in helping provide a feature.

[findlay-best-wishes]

Nice idea!

[samijaber]

Thanks for volunteering! I like the idea.

Will try to find some time to flesh out the work needed to do this.

[wabi-habi]

This is really necessary, as many components are completely unwieldy without jsx functionality