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.

[Beraliv]

@hmsk Hey! As I'm wrapping up all discussions this year, I wonder what you're thinking about this issue: are you going to work on this next year, or would you like to close it as "Won't do"? Please let me know.

In any case, I wish you a happy new year!

Alexey

[Effiti]

It might be a good idea to optionally expose the options passed to the "@babel/preset-react" preset. After that, the only thing that remains is to remove the import React from 'react' that is appended to the transformed code. Maybe the plugin really should have a Mode.JSX in which only this import is left out, and maybe the exported function is not called ReactComponentbut rather something like JsxComponent

I worked around this issue by copying the index.ts file of this plugin, modifying it to add my options to @babel/preset-react and then importing from the modified file directly.