JSPM

babel-plugin-transform-react-jsx-location

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 845
  • Score
    100M100P100Q101097F
  • License MIT

Adds data- attributes containing source file name and line number

Package Exports

  • babel-plugin-transform-react-jsx-location

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-transform-react-jsx-location) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

// 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']
})