babel-plugin-jsx-inject-mi2

Babel plugin to inject JSX or HTML from external file.

Combined with babel-plugin-jsx-mi2 and (babel-plugin-translate-mi2 / babel-plugin-jsx-translate)

Usage

Used with babel by adding plugin to .babelrc

{
    plugins: ["jsx-inject-mi2"]
}

The plugin replaces occurrence of an return <template/> statement with JSX from external file.

If you jou have a file sample.js with:

//...
    function myFunc(h){
        return <template/>
    }
//...

and template file sample.tpl in the same folder

<div>
    <h1>Title</h1>
    <p>{state.text}</p>
</div>

the sample.tpl will be injected in the sample.js resulting in something like this

//...
    function myFunc(h){
        return <div>
            <h1>Title</h1>
            <p>{state.text}</p>
        </div>
    }
//...

arrow expression

it is good to know that for purpose of catching a return statement, an arrow expression like:

applyHtml( h=><template/> );

is pretty much the same (except of arrow expression scoping) as:

applyHtml( function(h){ return <template/>;} );