Use helper-builder-react-jsx inside plugin-transform-react-inline-elements (#6294)

* Use helper-builder-react-jsx inside plugin-transform-react-inline-elements.

This avoids duplicating the logic for converting jsx elements to plain JavaScript.

* Add a comment which explains the _jsx signature, [skip ci]
so it is a little bit easier to understand what all those .splice() calls do

packages/babel-plugin-transform-react-inline-elements/src/index.js

@@ -1,3 +1,5 @@
+import helper from "babel-helper-builder-react-jsx";
+
 export default function({ types: t }) {
   function hasRefOrSpread(attrs) {
     for (let i = 0; i < attrs.length; i++) {
@@ -14,60 +16,45 @@ export default function({ types: t }) {
     );
   }
 
-  function getAttributeValue(attr) {
-    let value = attr.value;
-    if (!value) return t.booleanLiteral(true);
-    if (t.isJSXExpressionContainer(value)) value = value.expression;
-    return value;
-  }
-
-  return {
-    visitor: {
-      JSXElement(path, file) {
-        const { node } = path;
-
-        // filter
-        const open = node.openingElement;
-        if (hasRefOrSpread(open.attributes)) return;
-
-        // init
-        const props = t.objectExpression([]);
-        let key = null;
-        let type = open.name;
-
-        if (t.isJSXIdentifier(type) && t.react.isCompatTag(type.name)) {
-          type = t.stringLiteral(type.name);
-        }
-
-        function pushProp(objProps, key, value) {
-          objProps.push(t.objectProperty(key, value));
-        }
-
-        // props
-        for (const attr of (open.attributes: Array<Object>)) {
-          if (isJSXAttributeOfName(attr, "key")) {
-            key = getAttributeValue(attr);
-          } else {
-            const name = attr.name.name;
-            const propertyKey = t.isValidIdentifier(name)
-              ? t.identifier(name)
-              : t.stringLiteral(name);
-            pushProp(props.properties, propertyKey, getAttributeValue(attr));
-          }
-        }
-
-        const args = [type, props];
-        if (key || node.children.length) {
-          const children = t.react.buildChildren(node);
-          args.push(
-            key || t.unaryExpression("void", t.numericLiteral(0), true),
-            ...children,
-          );
-        }
-
-        const el = t.callExpression(file.addHelper("jsx"), args);
-        path.replaceWith(el);
-      },
+  const visitor = helper({
+    filter(node) {
+      return !hasRefOrSpread(node.openingElement.attributes);
     },
-  };
+    pre(state) {
+      const tagName = state.tagName;
+      const args = state.args;
+      if (t.react.isCompatTag(tagName)) {
+        args.push(t.stringLiteral(tagName));
+      } else {
+        args.push(state.tagExpr);
+      }
+    },
+    post(state, pass) {
+      state.callee = pass.addHelper("jsx");
+      // NOTE: The arguments passed to the "jsx" helper are:
+      //   (element, props, key, ...children) or (element, props)
+      // The argument generated by the helper are:
+      //   (element, { ...props, key }, ...children)
+
+      const props = state.args[1];
+      let hasKey = false;
+      if (t.isObjectExpression(props)) {
+        const keyIndex = props.properties.findIndex(prop =>
+          t.isIdentifier(prop.key, { name: "key" }),
+        );
+        if (keyIndex > -1) {
+          state.args.splice(2, 0, props.properties[keyIndex].value);
+          props.properties.splice(keyIndex, 1);
+          hasKey = true;
+        }
+      } else if (t.isNullLiteral(props)) {
+        state.args.splice(1, 1, t.objectExpression([]));
+      }
+
+      if (!hasKey && state.args.length > 2) {
+        state.args.splice(2, 0, t.unaryExpression("void", t.numericLiteral(0)));
+      }
+    },
+  });
+  return { visitor };
 }