Support JSX/TSX about listhen HOT 4 OPEN

From unjs/jiti#138, I try other solutions and render functions work well. All files are .ts, I just add vue as dependency and use h function to create elements. It's really amazing and more simple than my first solution with React. I can load CSS file with fs.readFile() and inject it into head element.

import { defineProps, h } from 'vue'
import head from './head'
import header from './header'
import type { Podcast } from '~/models/Podcast'

interface Props {
  podcast: Podcast
  css?: string
}

export default {
  props: defineProps<Props>(),
  setup(props: Props) {
    return h('html', [
      head.setup({ title: props.podcast.title, css: props.css }),
      h('body', [
        header.setup({ podcast: props.podcast }),
      ]),
    ])
  },
}

Of course I can render it to HTML with renderToString() from vue/server-renderer. I don't need react anymore.
If someone is interested, you can check the code here: https://github.com/kiwilan/feedrender/tree/7c55ab89ecc7bb645d97e5be229c08c11e494729/src/components

Thanks again!

from listhen.

Nice finding! Let's keep it open. I think we can improve example and docs!

from listhen.

Hi. JSX/TSX support is underway for jiti (the runtime library that powers listhen's ts support). You can follow up from here: unjs/jiti#138

from listhen.

Thanks you!

from listhen.