pug-as-jsx loader for webpack
Try it out here...
Installation
npm install pug-as-jsx-loader --save-dev
Usage
webpack.config.js
moduleexports = module: rules: test: /\.pug$/ use: 'babel-loader' 'pug-as-jsx-loader'
pug | jade template (./file.pug)
div h1 {period.start} ~ {period.end} ul li(@repeat='items as item') i.ico(@if='item.icon', className='{"ico-" + item.icon}') ItemDetail(item='{item}')
→ transpiled function
import React from 'react'; { const items period ItemDetail = params; return <div> <h1> periodstart ~ periodend </h1> <ul> items </ul> </div> ;};
import pug template
import React from 'react'; import template from './file.pug'; // ← import pug templateimport ItemDetail from './ItemDetail'; Component { const items period = thisprops; return template; };
integration with Typescript
// react-app-env.d.ts; declare
License
MIT (http://www.opensource.org/licenses/mit-license.php)