0.0.5 • Published 6 years ago
babel-plugin-transform-html-to-primitives v0.0.5
babel-plugin-transform-html-to-primitives
Transforms HTML tags in JSX to their Primitive equivalents
Example
In
import React from 'react';
import { Image, View, Text } from 'react-primitives';
import styled from 'styled-components/primitives';
const ButtonElement = styled.button`
height: 50px;
padding: 0 10px;
border-radius: 3px;
background-color: #595959;
`;
const textStyle = {
lineHeight: 50,
color: '#FFFFFF',
textAlign: 'center'
};
const Button = ({ relative }) => (
<ButtonElement>
<img src="/photo.jpg" alt={relative} />
<span style={textStyle}>Luke, I am your <strong className="relative">{relative}</strong>.</span>
</ButtonElement>
);
Button.defaultProps = {
relative: 'father'
};
export default Button;
Out
import React from 'react';
import { Image, View, Text } from 'react-primitives';
import styled from 'styled-components/primitives';
const ButtonElement = styled(View)`
height: 50px;
padding: 0 10px;
border-radius: 3px;
background-color: #595959;
`;
const textStyle = {
lineHeight: 50,
color: '#FFFFFF',
textAlign: 'center'
};
const Button = ({ relative }) => (
<ButtonElement>
<Image source="/photo.jpg" alt={relative} />
<Text style={textStyle}>Luke, I am your <Text className="relative">{relative}</Text>.</Text>
</ButtonElement>
);
Button.defaultProps = {
relative: 'father'
};
export default Button;
Installation
$ npm install babel-plugin-transform-html-to-primitives
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["transform-html-to-primitives"]
}
With options:
{
"plugins": [
["transform-html-to-primitives", {
"primitives": {
"blockquote": "View",
"pre": "View"
},
"primitiveProp": "primitive",
"tagNameProp": "tagName"
}]
]
}
Via CLI
$ babel --plugins transform-html-to-primitives script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-html-to-primitives"]
});
Options
primitives
object
Overrides the default tag-to-primitive mapping.
In
<blockquote>something</blockquote>
Out (with default options)
{
"plugins": ["transform-html-to-primitives"]
}
<Text>something</Text>
Out (with "primitives" override)
{
"plugins": [
["transform-html-to-primitives", {
"primitives": {
"blockquote": "View"
}
}]
]
}
<View>something</View>
primitiveProp
string
The prop name that will tell the transpiler which primitive to use in this specific case. Useful for html tags that may act as different primitives in different places, like the <a> tag.
In (with default options)
<a href="/link-to-page-a">Page A</a>
Out (with default options)
{
"plugins": ["transform-html-to-primitives"]
}
<Text href="/link-to-page-a">Page A</Text>
In (with "primitiveProp")
<a href="/link-to-page-a" myCrazyPrimitive="View">Page B</a>
Out (with "primitiveProp")
{
"plugins": [
["transform-html-to-primitives", {
"primitiveProp": "myCrazyPrimitive"
}]
]
}
<View href="/link-to-page-a">Page B</View>
tagNameProp
string
The prop name that will pass the original tag name to the primitives. In case you are implementing your own primitives.
In
<span>something</span>
Out (with "tagNameProp")
{
"plugins": [
["transform-html-to-primitives", {
"tagNameProp": "theTagILoved"
}]
]
}
<Text theTagILoved="span">something</Text>