flying-sheep / babel-plugin-transform-react-createelement-to-jsx Goto Github PK

:leftwards_arrow_with_hook: Transforms React.createElement calls to JSX syntax

License: GNU General Public License v3.0

JavaScript 100.00%

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

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?

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?

Returns the same code

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

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)

Strip @PURE comments

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

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 ?.

flying-sheep / babel-plugin-transform-react-createelement-to-jsx Goto Github PK

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

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

Use with other plugins

Returns the same code

New line indentation

RangeError: Maximum call stack size exceeded

Strip @PURE comments

How to convert the reactjs file to jsx ?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent