@babel/plugin-transform-react-jsx-self

What is @babel/plugin-transform-react-jsx-self?

The @babel/plugin-transform-react-jsx-self plugin is used with Babel to transform JSX code in React. It adds a __self attribute to JSX elements which is used by React for development tools to provide more informative error messages and warnings. This attribute includes a reference to the component that created each element, which can be helpful for debugging purposes.

What are @babel/plugin-transform-react-jsx-self's main functionalities?

Adding __self attribute to JSX elements

This feature automatically adds a __self attribute to every JSX element, which is set to 'this' (the current React component instance). This is useful for React's development mode error messages and warnings, as it helps identify which component the JSX element came from.

class MyComponent extends React.Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

// Transformed JSX with @babel/plugin-transform-react-jsx-self
// <div __self={this}>Hello, world!</div>

Other packages similar to @babel/plugin-transform-react-jsx-self

@babel/plugin-transform-react-jsx

This plugin transforms JSX syntax into createElement calls. It is similar to @babel/plugin-transform-react-jsx-self but does not automatically add the __self attribute. It is a more general JSX transformation plugin.

@babel/plugin-transform-react-jsx-source

Similar to @babel/plugin-transform-react-jsx-self, this plugin adds source information to JSX elements by adding a __source attribute. This includes the file name and line number of the JSX element, which is also useful for debugging. It complements the __self attribute by providing additional context about where the element was defined.

react-hot-loader

While not a Babel plugin, react-hot-loader is a package that enables hot reloading for React components. It also helps with debugging by preserving the internal state of components when the code is updated. It's similar in the sense that it enhances the development experience, but it does not modify the JSX syntax like @babel/plugin-transform-react-jsx-self.

README

@babel/plugin-transform-react-jsx-self

Add a __self prop to all JSX Elements

See our website @babel/plugin-transform-react-jsx-self for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-react-jsx-self

or using yarn:

yarn add @babel/plugin-transform-react-jsx-self --dev

Changelog

v7.25.7 (2024-10-02)

:bug: Bug Fix

• babel-helper-validator-identifier
  • #16825 fix: update identifier to unicode 16 (@JLHwung)
• babel-traverse
  • #16814 fix: issue with node path keys updated on unrelated paths (@DylanPiercey)
• babel-plugin-transform-classes
  • #16797 Use an inclusion rather than exclusion list for super() check (@nicolo-ribaudo)
• babel-generator
  • #16788 Fix printing of TS infer in compact mode (@nicolo-ribaudo)
  • #16785 Print TS type annotations for destructuring in assignment pattern (@nicolo-ribaudo)
  • #16778 Respect [no LineTerminator here] after nodes (@nicolo-ribaudo)

:nail_care: Polish

• babel-types
  • #16852 Add deprecated JSDOC for fields (@liuxingbaoyu)

:house: Internal

• babel-core
  • #16820 Allow sync loading of ESM when --experimental-require-module (@nicolo-ribaudo)
• babel-helper-compilation-targets, babel-helper-plugin-utils, babel-preset-env
  • #16858 Add browserslist config to external dependency (@JLHwung)
• babel-plugin-proposal-destructuring-private, babel-plugin-syntax-decimal, babel-plugin-syntax-import-reflection, babel-standalone
  • #16809 Archive syntax-import-reflection and syntax-decimal (@nicolo-ribaudo)
• babel-generator
  • #16779 Simplify logic for [no LineTerminator here] before nodes (@nicolo-ribaudo)

:running_woman: Performance

• babel-plugin-transform-typescript
  • #16875 perf: Avoid extra cloning of namespaces (@liuxingbaoyu)
• babel-types
  • #16842 perf: Improve @babel/types builders (@liuxingbaoyu)
  • #16828 Only access BABEL_TYPES_8_BREAKING at startup (@nicolo-ribaudo)