babel-plugin-transform-react-jsx-location

Adds data- attributes containing source file name and line number

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-react-jsx-location
1300.2.04 years ago6 years agoMinified + gzip package size for babel-plugin-transform-react-jsx-location in KB

Readme

babel-plugin-transform-react-jsx-location
Adds a data-source attribute to JSX tags containing the file name and line number of the original source.
Use this plugin to locate which file is generating an element in your page/app. Simply right click on an element in your favourite browser, then hit Inspect and the location of the source is revealed in the data-source attribute.
This plugin is intended to help with debugging while developing; use in production is not recommended!
data-source attributes can be viewed in the elements inspector elements inspector for the mzabriskie/react-example app

Installation

npm install babel-plugin-transform-react-jsx-location

Usage

Via .babelrc (Recommended)

// without options
{
  "plugins": ["transform-react-jsx-location"]
}

// with options
{
  "plugins": [
  	["transform-react-jsx-location", { 
  	    "filename": "compact",
  	    "attributeName": "source",
  	    "exclude": ["div"] // defaults to ["Fragment"]
    }]
  ]
}

Via CLI

babel --plugins transform-react-jsx-location script.js

Via Node API

require('babel').transform('code', {
	plugins: ['transform-react-jsx-location']
})