babel-plugin-common-jsx
babel-plugin-common-jsx
is a babel plugin that can translate JSX syntax code into JavaScript. It translates the JSX syntax structure into the form of nested calling functions, and supports developers to specify the function name to be called, and also has full JSX syntax support.
This README is also available in other languages:
Install
npm install --save-dev babel-plugin-common-jsx
Usage
.babelrc
"plugins": "babel-plugin-common-jsx" options
Options
-
functionName: Function name to be called when creating a new JSX tag (default: 'createElement').
-
fragmentName: Function name to be called when creating a new JSX fragment (default: 'createFragment').
-
tagMode: Handle whether tag name is translated to
variable reference
:-
normal:
normal
mode. Tag names starting with uppercase letters are translated tovariable references
, others are translated to strings, and the normal mode is used by default. -
scope:
scope
mode. Find whether a variable with the same name as the tag exists in the local scope where the tag is located. If it exists, it is translated to avariable reference
. -
static:
static
mode. Need to provide an additional parameterstaticTags
describing which tag names should be translated to strings, while other tags are translated tovariable references
.
-
-
staticTags: This parameter is required when the
tagMode
value isstatic
. This parameter is an array of several strings. When the tag name is included in the array, the tag name is translated to a string.
example:
"plugins": "babel-plugin-common-jsx" "functionName": "createElement" "fragmentName": "createFragment" "tagMode": "normal"
Example
JSXElement:
// Beforeconst el = <div></div>;// Afterconst el = ;
JSXFragment:
// Beforeconst el = <><div></div></>;// Afterconst el = ;
JSXAttributes:
// Beforeconst el = <div foo="baz"></div>;// Afterconst el = ;
JSXSpreadAttribute:
// Beforeconst el = <div foo ...props bar="baz"></div>;// Afterconst el = ;
JSXChildExpression:
// Beforeconst el = <div><span></span> {}</div>;// Afterconst el = ;
JSX syntax reference
Detail: Draft: JSX Specification
JSX syntax support
All syntaxes have been implemented except for JSXNamespacedName
.
Test
npm run test
npm run test-coverage