Description

Deathspike

opened on Nov 6, 2015

Issue body actions

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).

Activity

1. Ryan Cavanaugh (RyanCavanaugh)

   added

   SuggestionAn idea for TypeScriptAn idea for TypeScript

   In DiscussionNot yet reached consensusNot yet reached consensus

   on Nov 6, 2015
2. Lenne231 commented on Nov 22, 2015

   

   Lennart (Lenne231)

   on Nov 22, 2015

   More actions

   There are more and more frameworks using JSX coming up, i.e. https://github.com/garbles/yolk. So this would be very useful.
3. bungcip commented on Jan 13, 2016

   

   Gigih Aji Ibrahim (bungcip)

   on Jan 13, 2016

   More actions

   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"}}
   ]}
   
4. basarat commented on Jan 13, 2016

   

   Basarat Ali Syed (basarat)

   on Jan 13, 2016

   Contributor

   More actions

   Gigih Aji Ibrahim (@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?) 🌹
5. mhegazy commented on Jan 13, 2016

   

   Mohamed Hegazy (mhegazy)

   on Jan 13, 2016

   Contributor

   More actions

   To follow up on this issue. this issue has been discussed
6. mhegazy commented on Jan 13, 2016

   

   Mohamed Hegazy (mhegazy)

   on Jan 13, 2016

   Contributor

   More actions

   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.
7. Mohamed Hegazy (mhegazy)

   closed this as completedon Jan 13, 2016
8. Mohamed Hegazy (mhegazy)

   added

   DuplicateAn existing issue was already createdAn existing issue was already created

   and removed

   In DiscussionNot yet reached consensusNot yet reached consensus

   on Jan 13, 2016
9. microsoft

   locked and limited conversation to collaborators on Jun 19, 2018

Issue actions