Neoclassical Programming Multitude

    pug-as-jsx-loader

    1.0.88 • Public • Published

    pug-as-jsx loader for webpack

    npm version

    npm badge

    Try it out here...

    Installation

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

    Usage

    webpack.config.js

    module.exports = {
      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';
     
    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 pug template

    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

    // 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)

    Keywords

    none

    Install

    npm i pug-as-jsx-loader

    DownloadsWeekly Downloads

    257

    Version

    1.0.88

    License

    MIT

    Unpacked Size

    84.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • bluewings