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>