pug-as-jsx loader for webpack
![npm badge](https://camo.githubusercontent.com/f550f2d34cd4654b63f53efdb79a6bb7e0820f32c3daa05bef105c5e7ec7b51b/68747470733a2f2f6e6f6465692e636f2f6e706d2f7075672d61732d6a73782d6c6f616465722e706e67)
![](https://camo.githubusercontent.com/d92ccfcb38d127acac70e82b7174a1d0c78b18409f06b68b9fba06d606a49ab7/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)