4 ms·

Similarly, I'm looking for a way to use react with HAML. I just can't give it up, I have absolutely no interest in closing my tags ever again. One of the thing

Similarly, I'm looking for a way to use react with HAML. I just can't give it up, I have absolutely no interest in closing my tags ever again. One of the things I like about angular is how it deals with standard HTML. HAML doesn't care about its wacky attributes. Whats the best way to achieve this with react? Does the JSX compiler have hooks for preprocessing of any kind?

xtrumanx 12y ago
Well JSX is just compiled to JS so I guess you could have something that looks like HAML that substitutes the JSX code which in turn is compiled into JS. Best place to start I guess would be to look into the JSX compiler to see how complicated that would be.
- JonnieCache 12y ago
  Well if I can get the JSX compiler to give me a hook every time it finds an "html" block, and to let me replace it with my own content, then that would work fine I guess. Then it'd be a matter of getting JSX to recognise haml syntax as html.
briandear 12y ago
I am assuming you could use coffeescript as well?
pea 12y ago
Not what you're looking for exactly, but you could settle for using Jade? https://github.com/duncanbeevers/jade-react https://github.com/duncanbeevers/jade-react
- rapind 12y ago
  Looks nice. Just a heads up though it uses React.DOM to create your tags which has been deprecated (and possibly won't be available anymore come 0.13).
  - sebmarkbage 12y ago
    React.DOM is still in 0.13.
    - rapind 12y ago
      Thanks, good to know. That gives us a nice path to upgrade our CoffeeScript components.
rattray 12y ago
It wouldn't work with Typescript, but this is what my vanilla CoffeeScript React code looks like: div className: 'navbar-form' style: backgroundColor: "green" , div className: 'btn-group' , button type: 'button' className: 'btn btn-warning' onClick: @handleDecreaseWpmClick , span className: 'glyphicon glyphicon-chevron-down' span className: 'btn btn-default disabled' , "#{ @props.status.get('wpm') }" span className: 'hidden-xs' , " wpm" button type: 'button' className: 'btn btn-warning' onClick: @handleIncreaseWpmClick , span className: 'glyphicon glyphicon-chevron-up' (For the curious, "wpm" is short for "words per minute" - this is straight out of my code for http://splashreaderapp.com http://splashreaderapp.com. More code at http://github.com/rattrayalex/splashreaderapp http://github.com/rattrayalex/splashreaderapp)
- rapind 12y ago
  Pretty sure you can lose all of those single line "," and make it a bit nicer. div className: 'navbar-form' style: backgroundColor: "green" div className: 'btn-group' button type: 'button' className: 'btn btn-warning' onClick: @handleDecreaseWpmClick span className: 'glyphicon glyphicon-chevron-down' span className: 'btn btn-default disabled' "#{ @props.status.get('wpm') }" span className: 'hidden-xs' " wpm" button type: 'button' className: 'btn btn-warning' onClick: @handleIncreaseWpmClick span className: 'glyphicon glyphicon-chevron-up'
funksta 12y ago
It's not quite the same as HAML, but you might try JSnoX: https://github.com/af/JSnoX https://github.com/af/JSnoX

xtrumanx 12y ago

Well JSX is just compiled to JS so I guess you could have something that looks like HAML that substitutes the JSX code which in turn is compiled into JS. Best place to start I guess would be to look into the JSX compiler to see how complicated that would be.

JonnieCache 12y ago
Well if I can get the JSX compiler to give me a hook every time it finds an "html" block, and to let me replace it with my own content, then that would work fine I guess. Then it'd be a matter of getting JSX to recognise haml syntax as html.

briandear 12y ago

I am assuming you could use coffeescript as well?

pea 12y ago

Not what you're looking for exactly, but you could settle for using Jade? https://github.com/duncanbeevers/jade-react https://github.com/duncanbeevers/jade-react

rapind 12y ago
Looks nice. Just a heads up though it uses React.DOM to create your tags which has been deprecated (and possibly won't be available anymore come 0.13).
- sebmarkbage 12y ago
  React.DOM is still in 0.13.
  - rapind 12y ago
    Thanks, good to know. That gives us a nice path to upgrade our CoffeeScript components.

rattray 12y ago

It wouldn't work with Typescript, but this is what my vanilla CoffeeScript React code looks like: div className: 'navbar-form' style: backgroundColor: "green" , div className: 'btn-group' , button type: 'button' className: 'btn btn-warning' onClick: @handleDecreaseWpmClick , span className: 'glyphicon glyphicon-chevron-down' span className: 'btn btn-default disabled' , "#{ @props.status.get('wpm') }" span className: 'hidden-xs' , " wpm" button type: 'button' className: 'btn btn-warning' onClick: @handleIncreaseWpmClick , span className: 'glyphicon glyphicon-chevron-up' (For the curious, "wpm" is short for "words per minute" - this is straight out of my code for http://splashreaderapp.com http://splashreaderapp.com. More code at http://github.com/rattrayalex/splashreaderapp http://github.com/rattrayalex/splashreaderapp)

rapind 12y ago
Pretty sure you can lose all of those single line "," and make it a bit nicer. div className: 'navbar-form' style: backgroundColor: "green" div className: 'btn-group' button type: 'button' className: 'btn btn-warning' onClick: @handleDecreaseWpmClick span className: 'glyphicon glyphicon-chevron-down' span className: 'btn btn-default disabled' "#{ @props.status.get('wpm') }" span className: 'hidden-xs' " wpm" button type: 'button' className: 'btn btn-warning' onClick: @handleIncreaseWpmClick span className: 'glyphicon glyphicon-chevron-up'

funksta 12y ago

It's not quite the same as HAML, but you might try JSnoX: https://github.com/af/JSnoX https://github.com/af/JSnoX