React component in pogo

react-component.pogo

module.exports = {
    
    render () =
        div (
            h1 { id = 'main_heading' } (props.heading)
            p  (props.introduction)
        )

}

react-example.pogo

React = require 'react'
dslify = require 'dslify'

component = require "./react-component.pogo"
render js = component.render.to string()
transformed render = dslify.transform (render js)

tag (react dom method) =
    @{
        args = Array.prototype.slice.call(arguments)
        if (is not attributes (args.0))
            args := [null].concat (args)
        
        react dom method.apply(this, args)
    }
 
is not attributes (obj) =
    !(obj :: Object) || (obj._lifeCycleState)
 
DSL (props) =
    this.props = props
    this
 
for @(key) in (React.DOM)
    DSL.prototype.(key) = tag (React.DOM.(key))

component.render () = transformed render (@new DSL (this.props))
 
Component = React.create class (component)
 
howdy = Component { heading = "Doody", introduction = "Good day" }

React.renderComponentToString(howdy) @(html)
    console.log (html)

react-output.html

<div data-reactid=".r[3fjcy]" data-react-checksum="589508296">
  <h1 id="main_heading" data-reactid=".r[3fjcy].[0]">Doody</h1>
  <p data-reactid=".r[3fjcy].[1]">Good day</p>
</div>