I am looking for a way to transform JSX code in a .NET application. For example, assume we have the following JSX file (example.jsx):
<div class="someClass">
<span>{props.randomText}</span>
</div>
I want to transform this file to (example.js) that looks like this, without leaving the .NET ecosystem (no node.js at this stage):
Factory.createElement(
"div",
{ class: "someClass" },
Factory.createElement(
"span",
null,
Factory.createTextElement(props.randomText))
)
In the compiled output I have the Factory
object with createElement
and createTextElement
methods which I need to come from a custom js library I intend to provide. There are projects like NakendJSX and render-jsx which provide client-side JSX implementations, I may end up using one of them, or it could something custom, or out could be React. The point is that I need the transformed output to look exactly like this, so I can alias Factory
later with whatever I decide.
The example above is simple but I'd be happy to have something that could also handle code fragments that produce nested JSX:
<ul>{items.map(item => (<li>{item.text}</li>) )}</ul>
So far, I am looking at Fable, as it is easy-to-use from .NET (F# is not an issue for me) and has libraries capable to deal with JSX. However, most of those produce React-compliant code, which is not what I'm trying to achieve.
I know this task is definitely a broad one, and perhaps a ready-to-use solution is not present, which means I probably have to roll-out my own. This does not bother me, but I'd be happy to know what is out there that I could use to build upon, and maybe some advice on how to get started. On the other hand, such transformation job seems to fit with the capabilities of Fable, yet I was unsuccessful with finding a good example of how to do something like this.