babel-plugin-transform-cx-jsx
v21.3.0
Published
Transpile JSX into Cx config objects
Downloads
747
Maintainers
Readme
babel-plugin-transform-cx-jsx
This is a Babel plugin that transforms JSX code wrapped inside <cx>
tags into plain JavaScript.
Example:
const page = (
<cx>
<div>
<h1>Cx</h1>
<p>Some text</p>
</div>
</cx>
);
becomes
const page = {
type: HtmlElement,
tag: "div",
children: [
{
type: HtmlElement,
tag: "h1",
children: ["Cx"],
},
{
type: HtmlElement,
tag: "p",
children: ["Some text"],
},
],
};
Plugin options:
autoImportHtmlElement: true
- add HtmlElement import to your file, if missingtransformFunctionalComponents: true
- transform functional componentsexpandFatArrows: false
- transform fat arrows inside string based expressions (IE)trimWhitespace: false
- remove extra whitespace to trim application sizetrimWhitespaceExceptions: []
- specify the list of elements which should preserve the whitespace (e.g. ['Md', 'code'])
Functional Components
Functional components in CxJS have to be wrapped inside a createFunctionalComponent
call.
When transformFunctionalComponents
is set to true
the plugin will automatically add the call for
expressions which immediately return a <cx>
block. i.e. (props) => <cx></cx>
;
const MySuperTextField = ({label, value}) => <cx>
<TextField value={value} label={label} mod="super" validation-mode="inline">
</cx>;
becomes
const MySuperTextField = createFunctionalComponent(({label, value}) => <cx>
<TextField value={value} label={label} mod="super" validation-mode="inline">
</cx>);
Trim Whitespace
Small gains in bundle size can be gained if trimWhitespace
is set to true
. This will remove the whitespace between elements, unless the parent element
has the ws
or preserveWhitespace
flag set. Some elements, such as code, should not be touched and this can be addressed using the trimWhitespaceExceptions
configuration parameter.
Example 1
<cx>
<div>
<div />
</div>
</cx>
const page = {
type: HtmlElement,
tag: "div",
children: [
" " //<- this line will be removed
{
type: HtmlElement,
tag: "div",
},
" " //<- this line will be removed
],
};
Example 2
<cx>
<div ws>
<div />
</div>
</cx>
const page = {
type: HtmlElement,
tag: "div",
ws: true,
children: [
" " //<- this line will be preserved because of the ws parameter
{
type: HtmlElement,
tag: "div",
},
" " //<- this line will be preserved because of the ws parameter
],
};