flying-sheep / babel-plugin-transform-react-createelement-to-jsx

:leftwards_arrow_with_hook: Transforms React.createElement calls to JSX syntax

babel-plugin-transform-react-createelement-to-jsx

Turn React.createElement calls back into JSX syntax.

This is useful for

1. Converting projects that started out in the opinion that “we need no stinking compilers”
2. Converting already-compiled JS into something maintainable (E.g. CJSX syntax → coffee-react-transform → decaffeinate → react-createelement-to-jsx → JSX syntax)

Installation

$ npm install babel-plugin-transform-react-createelement-to-jsx

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [ "transform-react-createelement-to-jsx" ]
}

Via CLI

$ babel --no-babelrc --plugins transform-react-createelement-to-jsx script.js

Via Node API

import babel from '@babel/core'

babel.transform('code', {
  plugins: ['transform-react-createelement-to-jsx'],
})

Development

If you want to help with corner cases, here are helpful resources:

• Babylon AST spec needed to understand the AST we traverse
• JSX AST spec extension of the above, needed to understand what we emit
• babel-types API helpful tests and factories for AST nodes

babel-plugin-transform-react-createelement-to-jsx's Issues

Use with other plugins

When I execute

babel --plugins transform-react-createelement-to-jsx component.js --out-file component.jsx  

I get the following error

SyntaxError: workspace.js: Unexpected token (13:14)
  11 |     class Component extends React.Component {
  12 | 
> 13 |         state = {

When I execute

babel --plugins transform-react-createelement-to-jsx,transform-class-properties workspace.js --out-file workspace.jsx  

It compiles but the class properties are transformed, I want just the createElement syntax to be jsx. Do you know if there is any option to do that?

How to convert the reactjs file to jsx ?

Can anyone please tell me how to convert the js file to jsx ?.
Readme file shows how to install the plugin and I dont know how to make it work ?.

New line indentation

Huge thanks for you for this plugin!

I found just one drawback. Plugin pose all JSX tags just in one line. How can I avoid it?

RangeError: Maximum call stack size exceeded

Getting this with

    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",

Trying to convert source file https://github.com/capaj/react-datetime/blob/master/src/YearsView.js

capaj@capaj-i7-4771:~/git_projects/react-datetime$ npx babel --plugins transform-react-createelement-to-jsx src/YearsView.js 
RangeError: Maximum call stack size exceeded
    at baseClone (/home/capaj/git_projects/react-datetime/node_modules/@babel/types/node_modules/lodash/_baseClone.js:1:1)
    at clone (/home/capaj/git_projects/react-datetime/node_modules/@babel/types/node_modules/lodash/clone.js:33:10)
    at keys.forEach.key (/home/capaj/git_projects/react-datetime/node_modules/@babel/types/lib/builders/builder.js:40:55)
    at Array.forEach (<anonymous>)
    at builder (/home/capaj/git_projects/react-datetime/node_modules/@babel/types/lib/builders/builder.js:36:8)
    at Object.MemberExpression (/home/capaj/git_projects/react-datetime/node_modules/@babel/types/lib/builders/generated/index.js:357:31)
    at id.split.map.reduce (/home/capaj/git_projects/react-datetime/node_modules/@babel/plugin-transform-react-jsx/lib/index.js:59:113)
    at Array.reduce (<anonymous>)
    at /home/capaj/git_projects/react-datetime/node_modules/@babel/plugin-transform-react-jsx/lib/index.js:59:70
    at Object.post (/home/capaj/git_projects/react-datetime/node_modules/@babel/plugin-transform-react-jsx/lib/index.js:75:47)

Returns the same code

While trying to use the plugin, it simply returns the same code as before

Strip @__PURE__ comments

Would it be possible for this plugin to strip the /* @__PURE__ */ comments before each React.createElement call?

Is there a way I can make this work from within a react rendered jsx file?

I have dynamically loaded a directory into my react application. I recurse over the directory to find references to my jsx files, so then I can render them on the screen in a pre/code format.
Only, babel has translated the code automatically to react2.default.createElement.

The original code was:

import React, {PropTypes} from 'react';

const InputText = ({strValidationType, label, name, val, placeholder}) => {
	return (
		<label>
			<span className="label">
				{label}
			</span>
			<input 
				type="text" 
				data-reg={strValidationType?strValidationType:null}
				name={name} 
				value={val}
				placeholder={placeholder}
				/>			
		</label>		
	)
}
InputText.defaultProps = {
  strValidationType:  '',
  label:'',
  name: '',
  value: '',
  placeholder:''
}

InputText.propTypes = {
  strValidationType:  PropTypes.string,
  label: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  placeholder:PropTypes.string
}
export default InputText;

Which when loading the directory into my react application seems to automatically convert it to this:

function InputText(_ref) {
		var strValidationType = _ref.strValidationType,
		    label = _ref.label,
		    name = _ref.name,
		    val = _ref.val,
		    placeholder = _ref.placeholder;

		return _react2.default.createElement(
			"label",
			null,
			_react2.default.createElement(
				"span",
				{ className: "label" },
				label
			),
			_react2.default.createElement("input", {
				type: "text",
				"data-reg": strValidationType ? strValidationType : null,
				name: name,
				value: val,
				placeholder: placeholder
			})
		);
	}

I want to restore that code back to the original jsx layout, and output that in pre/code as a documentation example to other developers. Is there a way I can pull your plugin into my react application and convert it back to jsx?