Convert Fully Qualified Import + Field Statements about babel-transform-js-to-jsx HOT 3 OPEN

Hey - you're right that A) this isn't supported, and B) it wouldn't be difficult to implement.

See here: https://github.com/JoeStanton/babel-transform-js-to-jsx/blob/master/index.js#L32

We currently visit any CallExpression, i.e. statements looking like div({ prop1: "a" }, "blah") but don't handle the case where the call is actually a MemberExpression eg. React.DOM.div({ prop1: "a" }, "blah").

You can inspect this in more detail here: https://astexplorer.net/#/WgqAsKBUcv

If you can think of a robust way to check for React.DOM.X MemberExpressions (similar to L34), then this can be easily supported 👍

from babel-transform-js-to-jsx.

Hmm, very interesting. I think I somewhat see what's going on here. Perhaps I can fiddle on this sometime soon. I'm assuming that a dirty hack would be to add a MemberExpression key to your existing visitor: { ... } set, and sniff directly for the two identifiers, React & DOM, then call into your existing exit fn? It would be nice to rather detect if React.DOM had been imported/tokenized and just check if the MemberExpression === that reference, and if there is yet another field Identifier tacked onto it.

from babel-transform-js-to-jsx.

Yes - the former is simple (in fact even simpler than you state), you'd just modify the conditional to peek inside any MemberExpression contained within the CallExpression and check if it's constituent elements are React and DOM, and if so, continue as normal with the transform.

However - making this work with all of the variations/derivations of React.DOM is non-trivial.
eg. import {DOM} from "react" and then using DOM.div would also prove problematic. Don't have a solution to this off the top of my head.

I'm not really sure if its possible to check the reference equality of a token because it hasn't actually been 'executed' at that point.

from babel-transform-js-to-jsx.