JSX Mode Feature Request

[Beraliv]

Hey @hmsk,

Thank you so much for your library, it is very valuable for me!

Currently, I'm building my blog with custom JSX support, e.g. I use the following ESBuild options:

  esbuild: {
    jsxFactory: "h",
    jsxFragment: "Fragment",
    jsxInject: `import { h, Fragment } from '@jsxRuntime'`,
  },

Source - https://github.com/Beraliv/beraliv.dev/pull/668/files#diff-1a38a58d386f973a06d39a50569d0d08c97ca79921fb2cf0f21d0c3eed679a3bR7-R9

At the moment, I use Mode.HTML which outputs a big HTML string during build time, so in my JS scripts in DIST folder, I see not-well-optimised JS files.

To improve it, I'd like to post-process them in a similar way Vite processes custom JSX using the ESBuild options.

As you know far more than I do, I'm curious about how complicated this piece of work is.

Ideally, the pipeline should be the following:

1. I have a Markdown file(s)
2. I import Markdown file(s) (I do a lazy-loading in the router, but it can be a normal import)
3. The config options (i.e. either as in esbuild or custom) are specified to understand the transformation to JSX
4. Each (if many) Markdown file is transformed to JSX
5. Given JSX config options, JSX syntax is transformed to valid JS
6. The output is JS module

Benefits:

1. Minimal JS output file size (compared to HTML mode)
2. Post-processing of HTML-file requires a lot of custom work (e.g. the following transformations are currently required: HTML => JSX, JSX => valid JS using custom JSX)
3. Custom JSX support (not framework/library dependant, e.g. React, Svelte, Vue, etc)

What do you think?

If I'm missing any other alternatives, please let me know

[hmsk]

Hi @Beraliv, my first gut says you can build/find another vite plugin to deal with the compilation of markdown into JSX, but I will consider what this plugin, vite-plugin-markdown, would help this week.