Tool to transpile from js to jsx
12,267
I haven't tried it myself, but there is apparently now a babel plugin to do exactly what you ask.
babel-js-to-jsx
https://github.com/JoeStanton/babel-js-to-jsx
Per the documentation:
Babel 6 plugin to convert from desugared React.DOM CallExpressions -> the equivalent JSX. Currently used to migrate to ES6+ from other compile to JS languages.
It can be used as a plugin:
require("babel-core").transform(code, {
plugins: ["js-to-jsx", "syntax-jsx"],
}).code
Or from the command line for composition with other tools:
npm install babel-plugin-js-to-jsx
cat example.ls | lsc -cb --no-header | js-to-jsx | esformatter -c format.json
Author by
Admin
Updated on June 19, 2022Comments
-
Admin almost 2 years
I'm curious if any of the transpiling tools will convert from plain JS to JSX. Babel will transpile JSX to JS, but as far as I know it cannot go back to JSX.
From the example:
var Nav; // Input (JSX): var app = <Nav color="blue" />; // Output (JS): var app = React.createElement(Nav, {color:"blue"});
Are there tools that go the other direction:
var Nav; // Input (JS): var app = React.createElement(Nav, {color:"blue"}); // Output (JSX): var app = <Nav color="blue" />;
Thanks!