@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

Readme

Source

@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
  pre?: Function; // function called with (state: ElementState) before building attribs
  post?: Function; // function called with (state: ElementState) after building attribs
};

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

  pre: function (state: ElementState) {
    // called before building the element
  },

  post: function (state: ElementState) {
    // called after building the element
  }
});

FAQs

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

Is @babel/helper-builder-react-jsx popular?

Is @babel/helper-builder-react-jsx well maintained?

Last updated on 30 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install