Some Ideas about JSX support

[xiaoxinghu]

Don't know if this is going to reach anyone, but it seems to be a nice feature of github that might save me some time from building a forum. I think I am going to try and post some ideas here.

I am currently working on webpack loader for orga, it will enable direct jsx integration, without being tied to specific frameworks like gatsbyjs. Just like MDX for markdown. It's mostly working right now but it's a pretty big change, there's still work left to do. It needs some polish and test. stay tuned.

I need input from you org users for a design choice. Currently, I am using the built-in HTML export tags as indicators of embedded jsx code. So in your file it will look like this:

#+BEGIN_EXPORT html
input { MyButton } from './button'
<MyButton>Go!</MuButton>
#+END_EXPORT

or this for oneliners.

#+HTML: export Layout from './layout'

or inline components like this (this syntax is not implemented yet):

this is @@html:<span style={{ color: 'red' }}>red text</span>@@

Any concerns about this design? Should we create a new type of export for jsx only? E.g. #+BEGIN_EXPORT jsx. I can't think of any drawbacks for using the built-in html type directly. Any input is appreciated.

[Qkessler]

Great! JSX support for orga is one of the most wanted features, glad you are finally taking a dab at it!
In my opinion, there is no real need of adding a new export type with the HTML export type working perfectly.
Keep up the good work! 😄

[BlackGlory]

I don't recommend any imitation of MDX, MDX is not Markdown that supports JSX, but JSX that supports Markdown.

Developing orgajs into MDX means that you are turning a markup language into a literate programming language.

The following are the main disadvantages of MDX:

• No dependency inversion.
• You will have to rely on some JavaScript or JSX parser modules.

[xiaoxinghu]

Yes, I agree MDX is more of source code than markup language. Mainly because the way it is implemented is to mix JSX syntax into markdown directly. I guess it can be traced back to the origin of markdown, it's basically an extension of html. They even have to use a different file extension (.mdx), which most text editors don't recognize out of the box. But org-mode is much more powerful. We have built-in mechanisms for exporting content into html. So the way I implemented it is 100% non-intrusive to the org-mode syntax. The basic parser remains untouched, by utilizing the plugin system, we can add a little bit of treatment to the export blocks (#+begain_export html and #+html:). Then we integrate into react world. it's totally optional.