babel-plugin-transform-simple-jsx

Introduction

Babel plugin for simple jsx to string transformation

Usage

npm install\
  babel-plugin-transform-simple-jsx\
  babel-preset-env\
  --save-dev

In your .babelrc:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["babel-plugin-transform-simple-jsx"]
}

The plugin transpiles the following E4X code:

const fooId = 'foo-id';
const barText = 'bar text';

const html = (
  <div>
    <span id={fooId}>{barText}</span>
  </div>
);

To the following JavaScript:

var JSX = require("simple-jsx");

var fooId = 'foo-id';
var barText = 'bar text';

var html = JSX("<div><span id=\"" + (fooId) + "\">" + (barText) + "</span></div>");

See tests for more examples and details.

Examples

Web Rendering

• Client side web rendering example using jsx
• Server side web rendering example using jsx

Requirements

• Babel 7 compatible

Developing

Built with

• simple-jsx

Folder structure

• root: Contains the README.md, the main configuration to execute the project such as package.json or any other configuration files.
• lib: Contains the source code for plugin.
• test: Contains library tests and examples.
• examples: Contains library examples.
• node_modules: Contains third party JS libraries used in this project

Setting up Dev

Download the code

git clone [email protected]:pikamachu/pika-babel-plugin-transform-simple-jsx.git
cd pika-babel-plugin-transform-simple-jsx

Install dependencies

bash pika install

Run application tests.

bash pika test