https://github.com/bluewings/pug-as-jsx-loader

https://github.com/bluewings/pug-as-jsx-loader

jade jsx loader pug react webpack webpack-loader

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bluewings/pug-as-jsx-loader
• Owner: bluewings
• License: mit
• Created: 2016-12-30T04:49:11.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:52:24.000Z (over 1 year ago)
• Last Synced: 2024-04-14T13:12:10.265Z (6 months ago)
• Topics: jade, jsx, loader, pug, react, webpack, webpack-loader
• Language: JavaScript
• Size: 19.4 MB
• Stars: 187
• Watchers: 6
• Forks: 15
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pug-as-jsx loader for webpack

[![npm version](https://badge.fury.io/js/pug-as-jsx-loader.svg)](https://badge.fury.io/js/pug-as-jsx-loader)

[![npm badge][npm-badge-png]][package-url]

## [Try it out here...](https://bluewings.github.io/pug-as-jsx-loader/)



## Installation

```

npm install pug-as-jsx-loader --save-dev

```

## Usage

### webpack.config.js

```js

module.exports = {

  module: {

    rules: [

      {

        test: /\.pug$/,

        use: [ 'babel-loader', 'pug-as-jsx-loader' ]

      }

    ]

  }

}

```

### [pug | jade](https://pugjs.org) template (./file.pug)

```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

```jsx

import React from 'react';

export default function (params = {}) {

  const { items, period, ItemDetail } = params;

  return (

    


      


        {period.start} ~ {period.end}

      

      


        {items.map((item, i) =>

          


            {(item.icon) && (

            

            )}

            

          

        )}

      

    

  );

};

```


### import pug template

```jsx

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,

    });

  }

};

```

### integration with Typescript

```tsx

// react-app-env.d.ts

const React = require('react');

declare module '*.pug' {

  const template: (params?: { [key: string]: any }) => React.ReactElement;

  export = template;

}

```

## License

MIT (http://www.opensource.org/licenses/mit-license.php)

[npm-badge-png]: https://nodei.co/npm/pug-as-jsx-loader.png

[package-url]: https://www.npmjs.com/package/pug-as-jsx-loader