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

import { declare } from "@babel/helper-plugin-utils";
import helper from "@babel/helper-builder-react-jsx";
import { types as t } from "@babel/core";

export default declare(api => {
  api.assertVersion(7);

  function hasRefOrSpread(attrs) {
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      if (t.isJSXSpreadAttribute(attr)) return true;
      if (isJSXAttributeOfName(attr, "ref")) return true;
    }
    return false;
  }

  function isJSXAttributeOfName(attr, name) {
    return (
      t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: name })
    );
  }

  const visitor = helper({
    filter(node) {
      return (
        // Regular JSX nodes have an `openingElement`. JSX fragments, however, don't have an
        // `openingElement` which causes `node.openingElement.attributes` to throw.
        node.openingElement && !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)));
      }

      state.pure = true;
    },
  });
  return {
    name: "transform-react-inline-elements",
    visitor,
  };
});