babel-plugin-transform-react-jsx-source

What is babel-plugin-transform-react-jsx-source?

The babel-plugin-transform-react-jsx-source package is a Babel plugin that adds source file and line number information to JSX elements. This is particularly useful for debugging purposes, as it allows developers to trace back to the original source code location of a JSX element.

What are babel-plugin-transform-react-jsx-source's main functionalities?

Add source file and line number information

This feature automatically adds metadata to JSX elements, indicating the source file and line number where the element was defined. This is extremely helpful for debugging, as it allows developers to quickly locate the source of a JSX element in their codebase.

// Input JSX code
const element = <div>Hello, world!</div>;

// Transformed code with babel-plugin-transform-react-jsx-source
const element = <div __source={{ fileName: 'path/to/file.js', lineNumber: 1 }}>Hello, world!</div>;

Other packages similar to babel-plugin-transform-react-jsx-source

babel-plugin-transform-react-jsx-self

The babel-plugin-transform-react-jsx-self package is another Babel plugin that adds a `__self` prop to JSX elements, which points to the `this` context of the element. This can be useful for debugging and understanding the context in which a JSX element is used. Unlike babel-plugin-transform-react-jsx-source, it does not provide file and line number information.

babel-plugin-react-display-name

The babel-plugin-react-display-name package automatically adds a `displayName` property to React components. This is useful for debugging and profiling React applications, as it makes it easier to identify components in the React Developer Tools. While it aids in debugging, it does not provide the same level of detail as babel-plugin-transform-react-jsx-source, which includes file and line number information.

README

babel-plugin-transform-react-jsx-source

Adds source file and line number to JSX elements.

Example

In

<sometag />

Out

<sometag __source={ { fileName: 'this/file.js', lineNumber: 10 } } />

Installation

npm install --save-dev babel-plugin-transform-react-jsx-source

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-jsx-source"]
}

Via CLI

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

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-jsx-source"]
});