Add JSX support

[ClassicOldSong]

Jsx is now widely used in multiple frontend frameworks like React and Vue.js. After a while of thinking I found that having jsx in ef.js projects is pretty possible. Here is an example:

const {t} = ef

const MyDiv = t`
>div.{{className}}
  #my-component
  #style = {{style}}
  +children
`

const Hello = t`
>h1.{{className}}
  #my-component
  #style = {{style}}
  .Hello, {{name}}!
`

const MyTextInput = t`
>input.{{className}}
  #my-component
  #type = text
  #style = {{style}}
  @input = input:{{value}}
  %value = {{value}}
`

const myHelloInstance = new Hello()

const myComponent = <MyDiv
  $data={{
    className: 'some class names',
    style: 'background-color: #CCC;'
  }}
>
  {myHelloInstance},
  <MyTextInput
    $methods={{
      input({value}) {
        myHelloInstance.$data.name = value
      }
    }}
  />
</MyDiv>

myComponent.$mount({target: document.body})

the jsx part will be transpiled into:

const myComponent = new MyDiv({
  $data: {
    className: 'some class names',
    style: 'background-color: #CCC;'
  },
  children: [
    myHelloInstance,
    new MyTextInput({
      $methods: {
        input({value}) {
          myHelloInstance.$data.name = value
        }
    })
  ]
)

or with ef.createElement:

const myComponent = ef.createElement(MyDiv, {...propsForMyDiv}, myHelloInstance, ef.createElement(MyTextInput, {...propsForMyTextInput}))

If we map needed props to the component class it self, things could be more easy like:

const myComponent = <MyDiv className='some class names' style='background-color: #CCC;'>
  {myHelloInstance}
  <MyInput input={({value}) => {
    myHelloInstance.name = value
  }/>
</MyDiv>

Using the first implementation we should write our own transpilers, while with the second implementation, we could just use the existing jsx transpilers to have the transpiling done like babel and buble. Using the second approach could be more convenient when project bootstraps.

[ClassicOldSong]

Fully implemented in v0.9.1