Customizable JSX/TSX mode

[Deathspike]

We currently have two jsx modes, preserve and react. Using preserve leaves the <Something /> for an additional compilation step, and react ties you into using the React library. I want to propose a compiler option which allows you to define the emitted types. For example setting:

"jsx": {createElement: "el"}

Which would transform this code:

let test = <div><span /><span /></div>;

Into this result:

var test = el("div", null, el("span", null), el("span", null));

Essentially, replacing React.createElement with el. Now I can define an el function like:

(name: string, properties: {[key: string]: string}, ...children: MyElement[]) => MyElement

To implement an own library. Why? Because some of us don't like being forced into using React, and this would allow us to either create our own libraries or use an existing DSL such as virtual-hyperscript (perhaps with some minor modifications there).

[Lenne231]

There are more and more frameworks using JSX coming up, i.e. https://github.com/garbles/yolk. So this would be very useful.

[bungcip]

Yes, I want this feature. However, not all library have same convention like react. So, simple renaming createElement to "el" name like @Deathspike example will not work for some library.

msx (https://github.com/insin/msx) will transform

<div id="example">
  <h1>Test</h1>
  <Uploader onchange={ctrl.files}/>
  <my-element name="test"/>
</div>

to like this.

{tag: "div", attrs: {id:"example"}, children: [
  m.component(Uploader, {onchange:ctrl.files}),
  {tag: "h1", attrs: {}, children: ["Test"]},
  {tag: "my-element", attrs: {name:"test"}}
]}

[basarat]

@bungcip : As a quick workaround you can wrap the JSX -> React.createElement generated js with another runtime javascript function that returns an object literal of the desired structure (or am I wrong?) 🌹

[mhegazy]

To follow up on this issue. this issue has been discussed

[mhegazy]

sorry hit comment too soon.

this issue has been discussed in #3788. you can find the current decesion at: #6146 (comment)

with #6146, --reactNamespace option allows you to define alternative JSX factories to React.

anything more involved will need to wait for #5595.

this issue seems to be a duplicate of #3788 and is fixed by #6146 now.