Babel plugin for JSX to JS transformation
Based on babel-plugin-transform-simple
Combined with babel-plugin-jsx-inject and babel-plugin-translate-mi2
Used in mi2js library.
You want to write code that combines HTML and JS and do it sometimes inside a JS file too.
// state: {name:'Somebody', city: 'Mordor'}
proto.initTemplate = function(h,t,state){
return <div>
<div class="name"><b>Name: </b>{state.name}</div>
<div class="city"><b>City: </b>{state.city}</div>
</div>
}The JSX is tranformed to function calls and then the code looks like this
proto.initTemplate = function(h,t,state){
return h('div', null,
h('div', {'class':'name'}, h('b', null, 'Name: '), ()=>person.name),
h('div', {'class':'city'}, h('b', null, 'City: '), ()=>person.city),
)
}the function h is implemented in such way that these calls to h result in def being:
{
"tag": "div",
"attr": null,
"children": [
{
"tag": "div",
"attr": { "class": "name" },
"children": [
{ "tag": "b", "attr": null, "children": [ "Name: " ] },
()=>person.name
]
},
{
"tag": "div",
"attr": { "class": "city" },
"children": [
{ "tag": "b", "attr": null, "children": [ "City: " ] },
()=>person.city
]
}
]
}the library will use returned structure and call mi2js.insertHtml function to generate(eventually) HTML based on data structured like that
so the final result in HTML is:
<div>
<div class="name"><b>Name: </b>Somebody</div>
<div class="city"><b>City: </b>Mordor</div>
</div>quick explanation: the JS expressions are wrapped in arrow function so they can be reevaluated later when state changes (for more details check the explanation in the library).
To call the translations immediately in the generated code (instead of wrapping in a function call) change the plugin definition from
"jsx-mi2"
to
["jsx-mi2", {staticTranslation:true}],