Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wordpress/babel-plugin-import-jsx-pragma

Package Overview
Dependencies
Maintainers
0
Versions
131
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wordpress/babel-plugin-import-jsx-pragma

Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.

  • 5.14.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Babel Plugin Import JSX Pragma

Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.

JSX is merely a syntactic sugar for a function call, typically to React.createElement when used with React. As such, it requires that the function referenced by this transform be within the scope of the file where the JSX occurs. In a typical React project, this means React must be imported in any file where JSX exists.

Babel Plugin Import JSX Pragma automates this process by introducing the necessary import automatically wherever JSX exists, allowing you to use JSX in your code without thinking to ensure the transformed function is within scope. It respects existing import statements, as well as scope variable declarations.

Installation

Install the module to your project using npm.

npm install @wordpress/babel-plugin-import-jsx-pragma

Note: This package requires Node.js version with long-term support status (check Active LTS or Maintenance LTS releases). It is not compatible with older versions.

Usage

Refer to the Babel Plugins documentation if you don't yet have experience working with Babel plugins.

Include @wordpress/babel-plugin-import-jsx-pragma (and @babel/plugin-transform-react-jsx) as plugins in your Babel configuration. If you don't include both you will receive errors when encountering JSX tokens.

// .babelrc.js
module.exports = {
	plugins: [
		'@wordpress/babel-plugin-import-jsx-pragma',
		'@babel/plugin-transform-react-jsx',
	],
};

Note: @wordpress/babel-plugin-import-jsx-pragma is included in @wordpress/babel-preset-default (default preset for WordPress development) starting from v4.0.0. If you are using this preset, you shouldn't include this plugin in your Babel config.

Options

As the @babel/plugin-transform-react-jsx plugin offers options to customize the pragma to which the transform references, there are equivalent options to assign for customizing the imports generated.

For example, if you are using the react package, you may want to use the following configuration:

// .babelrc.js
module.exports = {
	plugins: [
		[
			'@wordpress/babel-plugin-import-jsx-pragma',
			{
				scopeVariable: 'createElement',
				scopeVariableFrag: 'Fragment',
				source: 'react',
				isDefault: false,
			},
		],
		[
			'@babel/plugin-transform-react-jsx',
			{
				pragma: 'createElement',
				pragmaFrag: 'Fragment',
			},
		],
	],
};

scopeVariable

Type: String

Name of variable required to be in scope for use by the JSX pragma. For the default pragma of React.createElement, the React variable must be within scope.

scopeVariableFrag

Type: String

Name of variable required to be in scope for <></> Fragment JSX. Named <Fragment /> elements expect Fragment to be in scope and will not add the import.

source

Type: String

The module from which the scope variable is to be imported when missing.

isDefault

Type: Boolean

Whether the scopeVariable is the default import of the source module. Note that this has no impact on scopeVariableFrag.

Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main contributor guide.



Code is Poetry.

Keywords

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc