Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
babel-plugin-jsx-pragmatic
Advanced tools
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.transform(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.transform(code, {
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "whatever",
}],
["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "whatever"
}],
]
})
Results in:
import {default as whatever} from "/something/whatever";
module
String. Module ID or pathname. The value of the ModuleSpecifier
of an import. Required.
import
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",
}],
["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "x"
}],
]
}
{
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "x.y",
}],
["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "x"
}],
]
}
export
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.
FAQs
Insert code to load a module corresponding to JSX pragma.
We found that babel-plugin-jsx-pragmatic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.