{ render } = require \react-dom
{ create, div, a, p } = require \lsx-pug
 
main = create do
    render : ->
        div do
          a(href: \http://google.com 
            target: \blank) \hello
          p \world
 
window.onload = ->
    \app |> document.create-element |> document.body.append-child
    render do
        main ""
        \app |> document.query-selector

npm i lsx-pug

{ create, div, a, p } = require \lsx-pug

main = create do
    render : ->
        div do
            p \hello
            a(href: \http://google.com ) \world

{ create, div, a, p, button } = require \lsx-pug
 
CustomElement = (on-click: on-click)->
    button(on-click: on-click)
 
main = create do
    render : ->
        div do
            CustomElement
            a(href: \http://google.com ) \world

{ render } = require \react-dom
render do
    main ""
    \app |> document.query-selector

{ create, Component, div, a, p } = require \lsx-pug
 
main = create class Main extends Component
    render : ->
        div do
            a \hello
            p \world

 
 
div \hello
 
# <div>hello</div>

 
div ""
 
# <div />

div do 
    p ""
    p \hello
 
# <div>
#     <p />
#     <p>hello</p>
# </div>

div(test-prop : \test ,
    on-click : @test-func ,
    style : {height : 200  width : 200} ) \hello
 
# <div test-prop = "test"
#      onClick = {this.testFunc}
#      style = {
#          height:200
#          width:200
#      }>
#     hello
# <div>

{ create, type, div} = require \lsx-pug
 
test-component = create do
 
    prop-types =
        test-class : type.string
 
    get-default-props = ->
        test-class : \default
 
    render : ->
        div(class-name: @props.test-class) @props.children
 
main = create do
 
    render: ->
        div do
          test-component(test-class: \test ) \hello

 
main = create do
    render : ->
        div(title: \title ) do 
            div [div 1, div 2]
            div do
              if 5 is 5  
                 div "conditional div"
              else 
                 div "never happended"
              div "next div"
 

 
main = create do
 
    render: ->
        div do
          for i in [1 to 5]
            div i
 

 
#This syntax is not supported
 
div() 
 
#
 
div
 
#At least You need to add empty string 
 
div() "" 
 
#or 
 
div ""
 
#
#Perphaps, in next version, we are going to adjust React validations rules in order to make possible to write 
#
 
div 
 
div()