@babel/plugin-transform-react-inline-elements

What is @babel/plugin-transform-react-inline-elements?

@babel/plugin-transform-react-inline-elements is a Babel plugin that optimizes React elements by transforming them into inline elements. This can improve performance by reducing the overhead of creating React elements.

What are @babel/plugin-transform-react-inline-elements's main functionalities?

Transform React Elements to Inline Elements

This feature transforms JSX elements into a more optimized inline representation. This reduces the overhead associated with creating React elements, potentially improving performance.

const element = <div className="example">Hello World</div>;
// Transformed to
const element = { $$typeof: Symbol.for('react.element'), type: 'div', key: null, ref: null, props: { className: 'example', children: 'Hello World' }, _owner: null };

Other packages similar to @babel/plugin-transform-react-inline-elements

@babel/plugin-transform-react-constant-elements

@babel/plugin-transform-react-constant-elements is another Babel plugin that optimizes React elements by hoisting them to the highest possible scope. This can reduce the number of React elements created and improve performance, especially in cases where the same element is used multiple times.

babel-plugin-transform-react-remove-prop-types

babel-plugin-transform-react-remove-prop-types is a Babel plugin that removes PropTypes from React components in production builds. This can reduce the size of the bundle and improve performance by eliminating unnecessary type checking in production.

babel-plugin-react-remove-properties

babel-plugin-react-remove-properties is a Babel plugin that removes specified properties from React elements. This can be useful for removing development-only properties or other properties that are not needed in production, thereby reducing the size of the bundle.

README

@babel/plugin-transform-react-inline-elements

Turn JSX elements into exploded React objects

See our website @babel/plugin-transform-react-inline-elements for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-react-inline-elements

or using yarn:

yarn add @babel/plugin-transform-react-inline-elements --dev

Changelog

v7.23.3 (2023-11-09)

:bug: Bug Fix

• babel-plugin-transform-typescript
  • #16071 Strip type-only TS namespaces (@colinaaa)
• babel-generator
  • #16078 Fix indentation when generating comments with concise: true (@liuxingbaoyu)
• babel-compat-data, babel-plugin-bugfix-v8-static-class-fields-redefine-readonly, babel-preset-env
  • #14295 Add a bugfix plugin for https://crbug.com/v8/12421 (@nicolo-ribaudo)
• babel-plugin-transform-object-super
  • #15948 fix: super.x in a loop (@liuxingbaoyu)
• babel-helper-module-transforms, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-umd
  • #16015 fix: handle __proto__ exports name in CJS/AMD/UMD (@magic-akari)

:memo: Documentation

• #16044 docs: Update links in @babel/eslint-parser README (@aryehb)

:house: Internal

• babel-core, babel-preset-env
  • #15988 Refactor handling of modules plugins in preset-env (@nicolo-ribaudo)

:running_woman: Performance

• babel-generator
  • #16061 perf: Improve @babel/generator performance (@liuxingbaoyu)
• babel-traverse
  • #16060 Avoid dynamic dispatch when calling wrapCheck (@yepitschunked)

:microscope: Output optimization

• babel-plugin-transform-computed-properties
  • #6652 Optimize computed properties output (byte-wise) (@Andarist)