pug-as-jsx loader for webpack
![](https://camo.githubusercontent.com/3a875506b92189b5bc7ad3e28b8ef495e07f94eae8388554a022ab63bea2aa6e/68747470733a2f2f626c756577696e67732e6769746875622e696f2f7075672d61732d6a73782d6c6f616465722f7374617469632f696d672f7472792d69742d6f75742e706e67)
npm install pug-as-jsx-loader --save-dev
Documentation: Using loaders
var jsx = require("pug-as-jsx-loader!./file.pug");
// => returns file.pug content as jsx
div
h1 {period.start} ~ {period.end}
ul
li(@repeat='items as item')
i.ico(@if='item.icon', className='{"ico-" + item.icon}')
ItemDetail(item='{item}')
import React from 'react';
export default function (params = {}) {
const { items, period, ItemDetail } = params;
return (
<div>
<h1>
{period.start} ~ {period.end}
</h1>
<ul>
{items.map((item, i) =>
<li key={i}>
{(item.icon) && (
<i className={`ico ico-${item.icon}`} />
)}
<ItemDetail item={item} />
</li>
)}
</ul>
</div>
);
};
import React from 'react';
import template from './file.pug'; // ← import pug template
import ItemDetail from './ItemDetail';
class Report extends React.Component {
render() {
const {
items,
period,
} = this.props;
return template.call(this, { // ← use transpiled function
// variables
items,
period,
// components
ItemDetail,
});
}
};
MIT (http://www.opensource.org/licenses/mit-license.php)