flying-sheep / babel-plugin-transform-react-createelement-to-jsx Goto Github PK
View Code? Open in Web Editor NEW:leftwards_arrow_with_hook: Transforms React.createElement calls to JSX syntax
License: GNU General Public License v3.0
:leftwards_arrow_with_hook: Transforms React.createElement calls to JSX syntax
License: GNU General Public License v3.0
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 ?.
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?
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)
While trying to use the plugin, it simply returns the same code as before
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?
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?
Would it be possible for this plugin to strip the /* @__PURE__ */
comments before each React.createElement
call?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.