Hacker News Reader

Comment by JonnieCache | Hacker News Reader

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?

View on HN

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. More code at http://github.com/rattrayalex/splashreaderapp)

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'

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.

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.

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

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

React.DOM is still in 0.13.

Thanks, good to know. That gives us a nice path to upgrade our CoffeeScript components.

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

I am assuming you could use coffeescript as well?

Reply on news.ycombinator.com