{"id":14967504,"url":"https://github.com/pugjs/babel-plugin-transform-react-pug","last_synced_at":"2025-05-15T16:08:36.070Z","repository":{"id":37445141,"uuid":"48664679","full_name":"pugjs/babel-plugin-transform-react-pug","owner":"pugjs","description":"A plugin for transpiling pug templates to jsx","archived":false,"fork":false,"pushed_at":"2022-12-09T06:53:37.000Z","size":754,"stargazers_count":816,"open_issues_count":51,"forks_count":48,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-08T19:54:46.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pugjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-27T23:37:08.000Z","updated_at":"2025-04-26T09:20:58.000Z","dependencies_parsed_at":"2023-01-25T18:46:20.123Z","dependency_job_id":null,"html_url":"https://github.com/pugjs/babel-plugin-transform-react-pug","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugjs%2Fbabel-plugin-transform-react-pug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugjs%2Fbabel-plugin-transform-react-pug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugjs%2Fbabel-plugin-transform-react-pug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugjs%2Fbabel-plugin-transform-react-pug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pugjs","download_url":"https://codeload.github.com/pugjs/babel-plugin-transform-react-pug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253492529,"owners_count":21916959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:38:09.311Z","updated_at":"2025-05-15T16:08:36.025Z","avatar_url":"https://github.com/pugjs.png","language":"JavaScript","readme":"# babel-plugin-transform-react-pug\n\nUse Pug templates to write react components.\n\n[![npm version](https://img.shields.io/npm/v/babel-plugin-transform-react-pug.svg?longCache)](https://www.npmjs.com/package/babel-plugin-transform-react-pug) [![Build Status](https://travis-ci.org/pugjs/babel-plugin-transform-react-pug.svg?branch=master)](https://travis-ci.org/pugjs/babel-plugin-transform-react-pug) [![Codecov](https://img.shields.io/codecov/c/github/pugjs/babel-plugin-transform-react-pug.svg?longCache)\n](https://codecov.io/gh/pugjs/babel-plugin-transform-react-pug)\n\n`babel-plugin-transform-react-pug` is a plugin for babel which transpiles pug syntax within template literals to jsx.\n\nWrite your components this way:\n\n```jsx\nexport const ReactComponent = props =\u003e pug`\n  .wrapper\n    if props.shouldShowGreeting\n      p.greeting Hello World!\n\n    button(onClick=props.notify) Click Me\n`\n```\n\nAnd it will be transpiled into:\n\n```jsx\nexport const ReactComponent = props =\u003e (\n  \u003cdiv className=\"wrapper\"\u003e\n    {props.shouldShowGreeting ? (\n      \u003cp className=\"greeting\"\u003eHello World!\u003c/p\u003e\n    ) : null}\n    \u003cbutton onClick={props.notify}\u003eClick Me\u003c/button\u003e\n  \u003c/div\u003e\n)\n```\n\n* [Usage](#usage)\n  * [Syntax](#syntax)\n  * [Eslint integration](#eslint-integration)\n  * [CSS Modules](#css-modules)\n* [Install](#install)\n  * [Configuration](#configuration)\n  * [create-react-app](#create-react-app)\n  * [React Native](#react-native)\n* [How it works](#how-it-works)\n* [Limitations](#limitations)\n* [FAQ](#faq)\n  * [Can I import template from other files?](#can-i-import-template-from-other-files)\n  * [How to get syntax highlighting in IDE (or text editors)?](#how-to-get-syntax-highlighting-in-ide-or-text-editors)\n* [License](#license)\n\n## Usage\n\n### Syntax\n\nFull information of the syntax you can find in official documentation: [pugjs.org](https://pugjs.org/).\n\n#### Basic example\n\n```jsx\nconst Component = props =\u003e pug`          //- const Component = props =\u003e (\n  div                                    //-   \u003cdiv\u003e\n    if props.amount \u003e MAX_AMOUNT         //-     {props.amount \u003e MAX_AMOUNT ? (\n      OtherComponent(fluid crucial)      //-       \u003cOtherComponent fluid={true} crucial={true} /\u003e\n    else                                 //-     ) : (\n      p You can set bigger amount ;)     //-       \u003cp\u003eYou can set bigger amount ;)\u003c/p\u003e\n                                         //-     )}\n    each item, index in props.items      //-     {props.items.map((item, index) =\u003e (\n      div(key=item.id)                   //-       \u003cdiv key={item.id}\u003e\n        h3 Header #{index + 1}           //-         \u003ch3\u003eHeader {index + 1}\u003c/h3\u003e\n        = item.body                      //-         {item.body}\n                                         //-       \u003c/div\u003e\n                                         //-     )}\n                                         //-   \u003c/div\u003e\n                                         //- )\n`;\n```\n\n#### How to pass functions and other primitives\n\n```jsx\nconst Component = props =\u003e pug`          //- const Component = props =\u003e (\n  div                                    //-   \u003cdiv\u003e\n    button(                              //-     \u003cbutton\n      type=\"button\"                      //-       type=\"button\"\n      onClick=props.onClick              //-       onClick={props.onClick}\n    ) Click Me                           //-     \u003eClick Me\u003c/button\u003e\n                                         //-\n    OtherComponent(                      //-     \u003cOtherComponent\n      ...props.objectWithPropsForChild   //-       {...props.objectWithPropsForChild}\n      fluid                              //-       fluid={true}\n      data-array=[1, 2, 3]               //-       data-array={[1, 2, 3]}\n    )                                    //-     /\u003e\n                                         //-   \u003c/div\u003e\n                                         //- )\n`;\n```\n\n#### Define local variables and use javascript in attributes\n\n```jsx\nconst Component = props =\u003e pug`          //- const Component = props =\u003e (\n  Fragment                               //-   \u003cFragment\u003e\n    button(                              //-     \u003cbutton\n      ...one                             //-       {...one}\n      ...two                             //-       {...two}\n      onClick=() =\u003e alert('Hello')       //-       onClick={() =\u003e alert('Hello')}\n      text='number ' + 10                //-       text={'number ' + 10}\n      condition=foo === bar ? foo : bar  //-       condition={foo === bar ? foo : bar}\n    )                                    //-     \u003e\u003c/button\u003e\n                                         //-\n    - const variable = format(props.no)  //-\n    p Variable is #{variable}            //-     \u003cp\u003eVariable is {format(props.no)}\u003c/p\u003e\n                                         //-   \u003c/Fragment\u003e\n                                         //- )\n`;\n```\n\n#### Interpolation\n\nIf you'd prefer to use interpolation, you can. This is possible by using `${}` within your template.\n\n```jsx\nconst Component = props =\u003e pug`\n  ul(className=${props.modifier})\n    ${props.items.map((item, index) =\u003e pug`li(key=${index}) ${item}`)}\n`;\n```\n\n### Eslint integration\n\nInstall [eslint-plugin-react-pug](https://github.com/ezhlobo/eslint-plugin-react-pug) if you use [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react).\n\n### CSS Modules\n\nWhether you use babel plugin to turn on CSS Modules specifically for JSX (e.g. [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)) or use webpack loader for that to transform styles into key-value object, it's possible to use it with pug.\n\n* With [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules) you need to set [`classAttribute`](#classattribute) option to `styleName` value and that's it.\n\n  ```rc\n  {\n    \"plugins\": [\n      [\"transform-react-pug\", {\n        \"classAttribute\": \"styleName\"\n      }]\n    ]\n  }\n  ```\n\n  ```jsx\n  import './styles.css' // .hello{color:red}\n\n  const withCorrectStyles = pug`\n    div.hello I am a red text\n  `\n  ```\n\n* With webpack loader or other approaches which transform styles into object\n\n  ```jsx\n  import classes from './styles.css' // .hello{color:green}\n\n  const withCorrectStyles = pug`\n    div(className=classes.hello) I am a green text\n  `\n  ```\n\n  The developer experience can be improved here by setting [`classAttribute`](#classattribute) option to `styleName` value and adding [babel-plugin-transform-jsx-css-modules](https://github.com/ezhlobo/babel-plugin-transform-jsx-css-modules)\n\n  ```rc\n  {\n    \"plugins\": [\n      [\"transform-react-pug\", {\n        \"classAttribute\": \"styleName\"\n      }],\n      \"transform-jsx-css-modules\"\n    ]\n  }\n  ```\n\n  ```jsx\n  import './styles.css' // .hello{color:green}\n\n  const withCorrectStyles = pug`\n    div.hello I am a green text\n  `\n  ```\n\n## Install\n\n1.  Install via yarn or npm\n\n    ```\n    yarn add --dev babel-plugin-transform-react-pug\n    ```\n\n    ```\n    npm install --save-dev babel-plugin-transform-react-pug\n    ```\n\n2.  Add to babel configuration before transpiling jsx (usually in `.babelrc`)\n\n    ```\n    {\n      \"plugins\": [\n        \"transform-react-pug\",\n        \"transform-react-jsx\"\n      ]\n    }\n    ```\n\n3.  Now all your templates written with pug are understood by react and browsers.\n\n### Configuration\n\n| Name | Type | Default | Description\n| - | - | - | -\n| [`classAttribute`](#classattribute) | `String` | `className` | Attribute name which considered by PUG as \"class\"\n\n#### `classAttribute`\n\nDefault:\n\n```\npug`p.one`\n\n=\u003e\n\u003cp className=\"one\" /\u003e\n```\n\nWith \"styleName\" as value:\n\n```\npug`p.one`\n\n=\u003e\n\u003cp styleName=\"one\" /\u003e\n```\n\n### create-react-app\n\nIntegrating with [create-react-app][link to cra] is tricky because it does not allow you to modify babel configuration. There are two documented possibilities:\n\n* [eject][link to cra eject]\n\n  That is easy, you will get `.babelrc` file in your root directory, just add `transform-react-pug` before `transform-react-jsx` there.\n\n* [react-app-rewired][link to rewired cra]\n\n  Go through official instruction to rewire your application. Then modify your `config-overrides.js`:\n\n  ```diff\n  + const {injectBabelPlugin} = require('react-app-rewired');\n    module.exports = function override(config, env) {\n  -   //do stuff with the webpack config...\n  +   config = injectBabelPlugin('transform-react-pug', config);\n      return config;\n    }\n  ```\n\n[link to cra]: https://github.com/facebook/create-react-app/\n[link to cra eject]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject\n[link to rewired cra]: https://github.com/timarney/react-app-rewired#1-injectbabelplugin\n\n### React Native\n\nJust add this plugin to the list in `.babelrc` file.\n\n```diff\n  {\n-   \"presets\": [\"react-native\"]\n+   \"presets\": [\"react-native\"],\n+   \"plugins\": [\"transform-react-pug\"]\n  }\n```\n\n_We don't need `transform-react-jsx` here because it's coming with `react-native` preset._\n\n## How it works\n\n_Coming soon..._\n\n## Limitations\n\n* We can't use dots in component names because pugjs treats everything after dot as a className. For example, `React.Fragment` becomes `\u003cReact className=\"Fragment\" /\u003e`, not `\u003cReact.Fragment /\u003e`\n\n  A nice workaround is made by [babel-plugin-transform-jsx-classname-components](https://github.com/ezhlobo/babel-plugin-transform-jsx-classname-components). Just add it to `.babelrc`:\n\n  ```rc\n  {\n    \"plugins\": [\n      [\"transform-jsx-classname-components\", {\n        \"objects\": [\"React\"]\n      }]\n    ]\n  }\n  ```\n\n* We don't support html language in pug templates. This is different than [what Pug promises](https://pugjs.org/language/plain-text.html#inline-in-a-tag).\n\n  However, you can still use [tag interpolation](https://pugjs.org/language/interpolation.html#tag-interpolation):\n\n  ```pug\n  p Good #[strong Morning]\n  ```\n\n## FAQ\n\n### Can I import template from other files?\n\nThe short answer is no and we are not going to implement that in near future. Take a look at [initial request with small explanation (#15)](https://github.com/pugjs/babel-plugin-transform-react-pug/issues/15).\n\n### How to get syntax highlighting in IDE (or text editors)?\n\n* [WebStorm](#webstorm)\n* [Atom](#atom)\n* [Visual Studio Code](#visual-studio-code)\n\n#### WebStorm\n\n1. Open settings\n2. **\"Editor\"** -\u003e **\"Language Injections\"**\n3. Click on **Add new \"Generic Js\"** injection\n\n   *[See how to find this section (youtrack.jetbrains.com/issue/WEB-22106#focus=streamItem-27-2451611-0-0)](https://youtrack.jetbrains.com/issue/WEB-22106#focus=streamItem-27-2451611-0-0)*\n\n   * Name: `Pug In Template Literals (JavaScript)`\n   * ID: `Vue (Vue.js template)` (current version of pug plugin is created in HTML scope, so we use workaround here)\n   * Prefix: `\u003ctemplate lang=\"pug\"\u003e`\n   * Suffix: `\u003c/template\u003e`\n   * Places Patterns: `+ taggedString(\"pug\")`\n\n4. Click \"OK\" and \"Apply\"\n\n#### Atom\n\n1.  Install [language-babel](https://atom.io/packages/language-babel) and [language-pug-jade](https://atom.io/packages/language-pug-jade)\n\n    _I suggest language-pug-jade because it works better for me. But there are more approaches for building pugjs grammar: [language-pug](https://atom.io/packages/language-pug) and [atom-pug](https://atom.io/packages/atom-pug), and you can try them too._\n\n2.  Open settings of language-babel in atom\n3.  Find the field under \"JavaScript Tagged Template Literal Grammar Extensions\"\n4.  Enter: `pug:source.pug`\n\n    More details: [gandm/language-babel#javascript-tagged-template-literal-grammar-extensions](https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions)\n\n5.  Restart the atom\n\n#### Visual Studio Code\n\n1. Open settings of extensions\n2. Search \"[vscode-react-pug](https://github.com/kaminaly/vscode-react-pug)\" by the search field\n3. Click \"Install\" and \"Reload\"\n4. If you use any grammar other than default one (e.g. Babel JavaScript which is quite popular), you might need to add supporting of Atom's Grammar ([Microsoft/vscode-js-atom-grammar](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar)).\n\n   *Check out the history beyond that: [kaminaly/vscode-react-pug#4](https://github.com/kaminaly/vscode-react-pug/issues/4).*\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpugjs%2Fbabel-plugin-transform-react-pug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpugjs%2Fbabel-plugin-transform-react-pug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpugjs%2Fbabel-plugin-transform-react-pug/lists"}