Support JSX/TSX

[ewilan-riviere]

Environment

• Operating System: Darwin
• Node Version: v18.16.0
• Package Manager: [email protected]
• h3 version: 1.8.0
• listhen version: 1.3.0

Reproduction

I create a stackblitz project https://stackblitz.com/github/kiwilan/feedrender

But to have better reproduction, just clone repository

git clone https://github.com/kiwilan/feedrender.git
cd feed-renderer
pnpm i
pnpm dev

Describe the bug

When we use pnpm dev shortcut for listhen -w ./src/index.ts, the output will be

 ERROR  Cannot find module './podcast-renderer'                                                                                                                           listhen 1:44:09 PM
Require stack:
- ./feed-render/src/react/index.ts

  - ./src/react/index.ts
  at ./src/react/index.ts:1:309
  at ./src/models/Podcast.ts:2:14

The error comes from src/react/index.ts with an import

import PodcastRenderer from './podcast-renderer'

The file is src/react/podcast-renderer.tsx, a simple React file.

Alternative

If I use tsx with...

pnpm dev:node

...everything works.

So I think listhen could have a problem with React import with -w flag?

Build

When I build app with tsup

pnpm build
pnpm start

I have no error and React component is correctly imported.

Additional context

Error import could have another origin but I try many solutions and listhen could be cause.

Logs

No response

[pi0]

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

[ewilan-riviere]

Thanks you!

[ewilan-riviere]

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!

[pi0]

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