index.js

import esutils from "esutils";

/**
 * Converts JSX Spread arguments into Object Spread, avoiding Babel's helper or Object.assign injection.
 * Input:
 * 	 <div a="1" {...b} />
 * Output:
 *   <div {...{ a: "1", ...b }} />
 * ...which Babel converts to:
 *   h("div", { a: "1", ...b })
 */
export default ({ types: t }) => {
  // converts a set of JSXAttributes to an Object.assign() call
  function convertAttributesAssign(attributes) {
    const args = [];
    for (let i = 0, current; i < attributes.length; i++) {
      const node = attributes[i];
      if (t.isJSXSpreadAttribute(node)) {
        // the first attribute is a spread, avoid copying all other attributes onto it
        if (i === 0) {
          args.push(t.objectExpression([]));
        }
        current = null;
        args.push(node.argument);
      } else {
        const name = getAttributeName(node);
        const value = getAttributeValue(node);
        if (!current) {
          current = t.objectExpression([]);
          args.push(current);
        }
        current.properties.push(t.objectProperty(name, value));
      }
    }
    return t.callExpression(
      t.memberExpression(t.identifier("Object"), t.identifier("assign")),
      args
    );
  }

  // Converts a JSXAttribute to the equivalent ObjectExpression property
  function convertAttributeSpread(node) {
    if (t.isJSXSpreadAttribute(node)) {
      return t.spreadElement(node.argument);
    }

    const name = getAttributeName(node);
    const value = getAttributeValue(node);
    return t.inherits(t.objectProperty(name, value), node);
  }

  // Convert a JSX attribute name to an Object expression property name
  function getAttributeName(node) {
    if (t.isJSXNamespacedName(node.name)) {
      return t.stringLiteral(
        node.name.namespace.name + ":" + node.name.name.name
      );
    }
    if (esutils.keyword.isIdentifierNameES6(node.name.name)) {
      return t.identifier(node.name.name);
    }
    return t.stringLiteral(node.name.name);
  }

  // Convert a JSX attribute value to a JavaScript expression value
  function getAttributeValue(node) {
    let value = node.value || t.booleanLiteral(true);

    if (t.isJSXExpressionContainer(value)) {
      value = value.expression;
    } else if (t.isStringLiteral(value)) {
      value.value = value.value.replace(/\n\s+/g, " ");

      // "raw" JSXText should not be used from a StringLiteral because it needs to be escaped.
      if (value.extra && value.extra.raw) {
        delete value.extra.raw;
      }
    }

    return value;
  }

  return {
    name: "transform-jsx-spread",
    visitor: {
      JSXOpeningElement(path, state) {
        const useSpread = state.opts.useSpread === true;
        const hasSpread = path.node.attributes.some(attr =>
          t.isJSXSpreadAttribute(attr)
        );

        // ignore JSX Elements without spread or with lone spread:
        if (!hasSpread || path.node.attributes.length === 1) return;

        if (useSpread) {
          path.node.attributes = [
            t.jsxSpreadAttribute(
              t.objectExpression(
                path.node.attributes.map(convertAttributeSpread)
              )
            ),
          ];
        } else {
          path.node.attributes = [
            t.jsxSpreadAttribute(convertAttributesAssign(path.node.attributes)),
          ];
        }
      },
    },
  };
};