@babel/helper-builder-react-jsx

What is @babel/helper-builder-react-jsx?

@babel/helper-builder-react-jsx is a Babel helper module that assists in transforming JSX syntax into JavaScript. It is primarily used internally by Babel plugins to handle JSX transformations, making it easier to convert JSX elements into the corresponding React.createElement calls or other custom JSX pragma functions.

What are @babel/helper-builder-react-jsx's main functionalities?

Transform JSX to React.createElement

This feature allows you to transform a JSX element into a React.createElement call. The code sample demonstrates how to create a JSX element and then transform it into a React.createElement call using the @babel/helper-builder-react-jsx package.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('div'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('div')),
  [t.jSXText('Hello, world!')],
  false
);

const reactElement = buildElement({
  tagExpr: t.identifier('React.createElement'),
  tagName: 'div',
  args: [t.stringLiteral('div'), t.nullLiteral(), t.stringLiteral('Hello, world!')]
});

console.log(reactElement);

Custom JSX Pragma

This feature allows you to transform a JSX element using a custom JSX pragma function instead of React.createElement. The code sample demonstrates how to create a JSX element and then transform it using a custom pragma function called MyCustomPragma.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('MyComponent'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('MyComponent')),
  [t.jSXText('Hello, custom pragma!')],
  false
);

const customPragmaElement = buildElement({
  tagExpr: t.identifier('MyCustomPragma'),
  tagName: 'MyComponent',
  args: [t.stringLiteral('MyComponent'), t.nullLiteral(), t.stringLiteral('Hello, custom pragma!')]
});

console.log(customPragmaElement);

Other packages similar to @babel/helper-builder-react-jsx

babel-plugin-transform-react-jsx

babel-plugin-transform-react-jsx is a Babel plugin that transforms JSX syntax into React.createElement calls. It is similar to @babel/helper-builder-react-jsx in that it handles JSX transformations, but it is a higher-level plugin that can be used directly in a Babel configuration.

babel-plugin-jsx-pragmatic

babel-plugin-jsx-pragmatic is a Babel plugin that allows you to specify a custom JSX pragma function to use instead of React.createElement. It provides similar functionality to @babel/helper-builder-react-jsx's custom pragma feature but is designed to be used as a standalone Babel plugin.

babel-plugin-transform-vue-jsx

babel-plugin-transform-vue-jsx is a Babel plugin that transforms JSX syntax into Vue render function calls. While it serves a similar purpose to @babel/helper-builder-react-jsx, it is specifically designed for use with Vue.js instead of React.

README

@babel/helper-builder-react-jsx

Usage

type ElementState = {
  tagExpr: Object; // tag node
  tagName: string; // raw string tag name
  args: Array<Object>; // array of call arguments
  call?: Object; // optional call property that can be set to override the call expression returned
};

require("@babel/helper-builder-react-jsx")({
  filter: function (element: JSXElement) {
    // if returns false, the element isn't transformed
  },

  pre: function (state: ElementState) {
    // function called with (state: ElementState) before building attribs
  },

  post: function (state: ElementState) {
    // function called with (state: ElementState) after building attribs
  },

  compat?: boolean // true if React is in compat mode
});