Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX Mode Feature Request #505

Open
Beraliv opened this issue Nov 4, 2024 · 2 comments
Open

JSX Mode Feature Request #505

Beraliv opened this issue Nov 4, 2024 · 2 comments

Comments

@Beraliv
Copy link

Beraliv commented Nov 4, 2024

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
Copy link
Owner

hmsk commented Nov 4, 2024

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
Copy link
Author

Beraliv commented Dec 26, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants