This package is a fork of babel-plugin-jsx-pragmatic to support React Fragments.
The original README of babel-plugin-jsx-pragmatic with some modifications is shown below.
@babel/plugin-transform-react-jsx has a pragma
option that's used when transforming JSX to function calls instead of the default function React.createElement
.
This Babel plugin is a companion to that feature that allows you to dynamically load a module associated with the pragma
value.
Example:
Given this file:
<Some jsx="element" />
babel would normally transform the JSX to:
React.createElement(Some, { jsx: 'element' })
By setting the pragma
option like this:
babel.transformSync(code, {
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'whatever'
}
]
]
})
It would instead transform it to:
whatever(Some, { jsx: 'element' })
However, you might need to load a module corresponding to whatever
in each module containing JSX:
import whatever from 'whatever'
// or
var whatever = require('whatever')
This plugin allows you to make that part dynamic as well:
babel.transformSync(code, {
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'whatever'
}
],
[
'@emotion/babel-plugin-jsx-pragmatic',
{
module: '/something/whatever',
import: 'whatever'
}
]
]
})
Results in:
import { default as whatever } from '/something/whatever'
String. Module ID or pathname. The value of the ModuleSpecifier
of an import. Required.
String. The identifier that you want to import the module
with. This should correspond to the root identifier of the pragma
value. Required. Examples:
{
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'x'
}
],
[
'@emotion/babel-plugin-jsx-pragmatic',
{
module: '/something/whatever',
import: 'x'
}
]
]
}
{
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'x.y'
}
],
[
'@emotion/babel-plugin-jsx-pragmatic',
{
module: '/something/whatever',
import: 'x'
}
]
]
}
String. The export that you want to import as import
from module
. Default value is default
(the default export). Examples:
// Will import the default export (`default`)
{
module: "whatever",
import: "x"
}
// import {default as x} from "whatever"
// Will import the default export (`default`)
{
module: "whatever",
import: "x",
export: "default",
}
// import {default as x} from "whatever"
// Will import the export named `something`
{
module: "whatever",
import: "x",
export: "something",
}
// import {something as x} from "whatever"
-
Doesn't do anything special in the case that the file being transformed already imports or declares an identifier with the same name as
import
. -
Doesn't take into account when a file actually contains a JSX pragma comment.