Nine Percent Milk

    babel-plugin-transform-react-jsx-location

    0.2.0 • Public • Published

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

    Install

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

    DownloadsWeekly Downloads

    31

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    6

    Last publish

    Collaborators

    • adrianton3