joestanton / babel-transform-js-to-jsx Goto Github PK

For mapping internal components such as YAMLEditor() to <YAMLEditor />

Hello:

I have code like React.DOM.tr({ className: 'blah-blah' }, React.DOM.td({}, ...), ...)

This package doesn't pick it up, but I have a feeling it probably could with only minor adjustment. Thoughts?

Much appreciated!

I believe babel changed their naming for plug-ins, trying to run the following:

require("babel-core").transform(code, {
  plugins: ["js-to-jsx", "syntax-jsx"],
}).code

Give me this error:

<path>../node_modules/babel-core/lib/transformation/file/options/option-manager.js:212
          throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
          ^

ReferenceError: Unknown plugin "js-to-jsx" specified in "base" at 0, attempted to resolve relative to

However if I rename the folder:
mv node_modules/babel-js-to-jsx node_modules/babel-plugin-js-to-jsx
it is able to find the module.

Consider changing the name of this project to babel-plugin-js-to-jsx.

Seems to be related to having two destructured imports in one file:

{div, label, select, option} = require 'react-dom-bridge'
{map, filter, unique-by, compact} = require 'prelude-ls'

I narrowed it down to the AssignmentExpression part of the Modules plugin. The code above gets transpiled to:

var ref$, div, label, select, option, map, filter, uniqueBy, compact;
ref$ = require('react-dom-bridge'), div = ref$.div, label = ref$.label...
ref$ = require('prelude-ls'), map = ref$.map, filter = ref$.filter...

We delete the binding for ref$ once we've converted the react-dom-bridge import and so it doesn't exist when we try to convert the prelude-ls import. That means... 💥

This may be completely my fault, and/or I may be misunderstanding the purpose of this library. I am working on a project where the goal is to "borrow" React components from other sites. I was hoping that this library would allow me to avoid forking React Dev Tools and hacking it. Is the point of this project to turn a bundled es5 script into jsx? Or does it work only on components? Or am I way off?

Anyway, here's the error. I am trying to use it on a large file containing a lot of the logic for airbnb's results page, and it is throwing

TypeError: unknown: Property children[0] of JSXElement expected node to be of a type ["JSXText","JSXExpressionContainer","JSXElement"] but instead got "StringLiteral"

One major annoyance left over from Livescript compilation is the consistent separation of variable declaration and assignment. Effectively making the JS hoisting property explicit. Eg.

a = 1

Transpiles to:

var a;
a = 1;

In non-trivial scenarios this is even worse, as Livescript will join together multiple declarations within the same scope into a single line, eg.

var a, b, c;
a = 1;
b = 2;
c = 3;

It'd help to provide an optional transform that reverses this effect. I think it's achievable by transforming the first assignment to the declaration itself, and removing the original declaration iff both statements are within the same scope. If this isn't true I don't think it can be performed safely.

Will be fixed by: babel/babel#3195

this line : let {DOM} = require("react").
has a error:SyntaxError: Unexpected token {

i always use webpack,and I try to use a variety of methods to use your plug.finally i failed.
can you get me a success example? i really want to js to jsx.
thanks :)

Thanks for the tool! Not sure if I'm doing something completely wrong here, but it seems that node doesn't like something about js-to-jsx when I use it from the command line...

$ cat autocomplete.js | lsc -cb --no-header | js-to-jsx 
/usr/local/lib/node_modules/babel-js-to-jsx/index.js:1
let {DOM} = require("react");
    ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at Module._extensions..js (module.js:406:10)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-js-to-jsx/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
    at /usr/local/lib/node_modules/babel-js-to-jsx/node_modules/babel-core/lib/transformation/file/options/option-manager.js:191:20
    at Array.map (native)

I think we can get nicer output than we're getting now. More whitespace especially.

Would you mind providing an example on how i can provide a list of js files to convert ? It's unclear to me what options are available. many thanks/!