Skip to content

Customizable JSX/TSX mode #5546

Closed
Closed
Customizable JSX/TSX mode#5546
Labels
DuplicateAn existing issue was already createdSuggestionAn idea for TypeScript

Description

@Deathspike
Deathspike
opened on Nov 6, 2015

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 TypeScript
    In DiscussionNot yet reached consensus
    on Nov 6, 2015

  2. Lenne231 commented on Nov 22, 2015

    @Lenne231
    Lennart (Lenne231)
    on Nov 22, 2015

    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

    @bungcip
    Gigih Aji Ibrahim (bungcip)
    on Jan 13, 2016

    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
    Basarat Ali Syed (basarat)
    on Jan 13, 2016
    Contributor

    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

    @mhegazy
    Mohamed Hegazy (mhegazy)
    on Jan 13, 2016
    Contributor

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

  6. mhegazy commented on Jan 13, 2016

    @mhegazy
    Mohamed Hegazy (mhegazy)
    on Jan 13, 2016
    Contributor

    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 created
    and removed
    In DiscussionNot yet reached consensus
    on Jan 13, 2016
  9. microsoft
    locked and limited conversation to collaborators on Jun 19, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already createdSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions