Inlining elements

[Roman]

Coupled with babel-plugin-transform-react-inline-elements, this doesn't work:

echo '<a class="link">b</a>' |
babel --presets react --plugins react-html-attrs,babel-plugin-transform-react-inline-elements

Output:

_jsx("a", {
  "class": "link"
}, void 0, "b");

No substitutions (for "class") observed. Expected:

_jsx("a", {
  className: "link"
}, void 0, "b");

I've tinkered with it to make it work, but I'm not much of an expert in babel / plugins / visitors mechanics not to break other use cases.

transform-react-inline-elements doesn't touch JSXAttribute, so replacing it (although leaving it doesn't change a thing) with JSXElement entry does the trick -- with or without inlining.

--- a/lib/index.js
+++ b/lib/index.js
@@ -8,9 +8,12 @@ var TRANSLATIONS = {
 module.exports = function() {
   return {
     visitor: {
-      JSXAttribute: function(node) {
-        if (node.node.name.name in TRANSLATIONS) {
-          node.node.name.name = TRANSLATIONS[node.node.name.name]
+      JSXElement: function(path, file) {
+        for (var i in path.node.openingElement.attributes) {
+          var name = path.node.openingElement.attributes[i].name
+          if (name.name in TRANSLATIONS) {
+            name.name = TRANSLATIONS[name.name]
+          }
         }
       }
     }