alibaba / rax

🐰 Rax is a progressive framework for building universal application. https://rax.js.org
Other
8k stars 627 forks source link

[Feature] Rax and Mdx #2276

Closed citrus327 closed 2 years ago

citrus327 commented 2 years ago

Mdx is a way to write React(or jsx) code in markdown, it can be used with remark/rehype plugins, which is a huge ecosystem.

I've checked some source code of our component document demo implementation, which separate each coding blocks using Regex, then compile them and combine the raw markdown part(using marked). This approach is a bit hacky.

I think embracing unified ecosystem is such a nice move in the future.

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like

  1. Provide 'rax/jsx-runtime' exactly like React did in the new jsx transforming. For speed and for bundle size. MDX support custom jsx runtime: https://v2.mdxjs.com/packages/mdx/#optionsjsxruntime
  2. Provide more remark/rehype plugins to fit the need.
SoloJiang commented 2 years ago
  1. We will provide it in rax 1.3.0, more detail you can see https://github.com/alibaba/rax/pull/2101
  2. We don't have enough time to provide remark/rehype plugins, if you are interseted it, can you help us finish it?
citrus327 commented 2 years ago
  1. Thanks for the update. To fully support mdx (get into unified world), We still need implement render fn for each markdown element, which replace MdxProvider and MdxLayout.

I will do if I have time, thanks.

fengzilong commented 2 years ago

Hey, I'm also a big fan of MDX 😀

Provide 'rax/jsx-runtime' exactly like React did in the new jsx transforming

For what you metioned above in step 1, did you try options.pragma to be compatible with current version of Rax?

{
  jsxRuntime: 'classic',
  pragma: 'Rax.createElement',
  pragmaFrag: 'Rax.Fragment',
  pragmaImportSource: 'rax'
}

If it works, in theory, we only need to provide some package like @mdx-js/rax which exports MdxProvider/... to combine Rax with MDX. If you haven't started working on @mdx-js/rax yet, refer to @mdx-js/preact, it's only 93 lines, hope it helps

FYI: you also metioned remark/rehype plugins, they are all about handling markdown and html syntax, it's irrelevant to Rax I think

citrus327 commented 2 years ago

@fengzilong I thought about the pragma, and I'm still trying to get rax into this. For the MdxProvider, I will check @mdx-js/preact. Thank you for the tip. I haven't got time for this, but sure i will check that later. XD

And for the remark/rehype plugins, sure it's irrelevant to rax.