Transform JSX syntax on the server in a .NET app

77 views Asked by At

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.

0

There are 0 answers