babel-plugin-react-pug
Chuck out JSX and use Pug!
A tiny, performant babel plugin that lets you use Pug over JSX, giving you a productive and readable alternative for defining React Component templates. In essence, the plugin transforms Pug templates into React function calls. Supports React Native!
This is not the official Pug plugin for converting Pug into JSX. Please see babel-plugin-transform-react-pug!
Example
In
Component ... { return pug` #profile.profile__container h1.profile__name ` }
Out
Component ... { return React; }
Installation
$ yarn add babel-plugin-react-pug --dev
Features
babel-plugin-react-pug
supports Pug features that make the most sense when using Pug as a template language for React.
Attributes
Class
Using the pug class syntax will automatically rename the attribute to className
- so you won't have to worry about this!
Component ... { return pug` .profile__card ` }
Other Attributes / Events
Component ... { return pug` #profile__01.profile__card(title="Profile Title") ` }
...or with interpolations:
Component ... { return pug` #profile__01.profile__card(onClick=) ` }
Conditionals
Component ... { return thisstateprofileslength ? pug`ul#profile__list Your list of profiles.` : pug`p.profile__error An error has occurred.` }
Loops
Component ... { return pug` ul#profile__list ` }
Components
To include components you don't need to use interpolation, just ensure that the component name is capitalised. For example:
Component ... { return pug` ProfileCard(cardImage=) ` }
Include
You can include pug templates into your components, for example say you have tpls/profile-footer.pug
:
.profile__footer .profile__footer__img img(src="http://placehold.it/200x200")
...now you can include the file in the component:
Component ... { return pug` .profile__container h1.profile__title .profile__body h2.profile__subtitle include ./tpls/profile-footer.pug ` }
Extends
You can harness the awesome power of Pug's extends
to have component template inheritance!
For example, you could specify a base component template (tpls/base-profile.pug
):
.profile__container .profile__header block content.profile__footer h3 This is the footer! block footer p This is the sub footer text!
...now reference this in the component:
Component ... { return pug` extends ./tpls/base-profile.pug block content h2.profile__title block footer ul.profile__links ` }
Block append / prepend
You can also use append
and prepend
blocks in your React components.
For example, if you have the following base component template (tpls/base-profile.pug
):
.profile__container block content h1.profile__title Profile.profile__footer h3 This is the footer! block footer p This is the sub footer text!
...now reference this in the component, with the added keyword append
to the block:
Component ... { return pug` extends ./tpls/base-profile.pug block append content h2.profile__name block footer ul.profile__links ` }
Usage
Via .babelrc
"plugins": "react-pug"
Via CLI
$ babel --plugins react-pug index.js
Via Node API
require.transform;
React Native
Just install babel-plugin-react-pug
in your React Native project, add react-pug
to your .babelrc
and bam!
"presets": "react-native" "plugins": "react-pug"
Issues and Potential Features
If you have any issues or bugs concerning babel-plugin-react-pug
, please do not hesitate to raise an issue!
Furthermore, if there are any features in Pug that you feel would be awesome to have - please raise an issue and I'll get back to you!
Contributions
Any sort of contribution is welcome, just follow these steps:
- Fork the repo
- Create a feature branch
git checkout -b new-feature
- Ensure the code meets the
standard
code style - just runnpm run static-test
- Write a
fixture
test - Commit and push your changes
- Submit a pull request!
Licence
MIT