https://github.com/codemodsquad/babel-plugin-jsx-source-loc

add a prop like data-source-loc="src/foo.js:35:8" to every JSX element
https://github.com/codemodsquad/babel-plugin-jsx-source-loc

babel jsx react transforms

Last synced: 6 months ago
JSON representation

add a prop like data-source-loc="src/foo.js:35:8" to every JSX element

• Host: GitHub
• URL: https://github.com/codemodsquad/babel-plugin-jsx-source-loc
• Owner: codemodsquad
• License: mit
• Created: 2021-01-19T05:54:40.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-21T21:29:24.000Z (over 4 years ago)
• Last Synced: 2024-11-16T14:18:16.222Z (6 months ago)
• Topics: babel, jsx, react, transforms
• Language: JavaScript
• Size: 354 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# babel-plugin-jsx-source-loc

[![CircleCI](https://circleci.com/gh/codemodsquad/babel-plugin-jsx-source-loc.svg?style=svg)](https://circleci.com/gh/codemodsquad/babel-plugin-jsx-source-loc)

[![Coverage Status](https://codecov.io/gh/codemodsquad/babel-plugin-jsx-source-loc/branch/master/graph/badge.svg)](https://codecov.io/gh/codemodsquad/babel-plugin-jsx-source-loc)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![npm version](https://badge.fury.io/js/babel-plugin-jsx-source-loc.svg)](https://badge.fury.io/js/babel-plugin-jsx-source-loc)

Adds a `data-source-loc` prop to every JSX element, so that you can quickly look up where an element was rendered

in the React Dev Tools. This is primarily intended for dev mode, not production.

# Example

### Input

```jsx

function MyComponent() {

  return (

    


      

        {names.map(name => (

          {name}

        ))}

      

    

  )

}

```


### output

```jsx

function MyComponent() {

  return (

    


      

        {names.map(name => (

          

            {name}

          

        ))}

      

    

  )

}

```


# Usage

```

npm i --save-dev babel-plugin-jsx-source-loc

```

And add `"babel-plugin-jsx-source-loc"` to your babel configuration.