[transform-react-jsx] Add useSpread option to transform JSX

packages/babel-helper-builder-react-jsx/src/index.js

@@ -161,6 +161,14 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
     return [];
   }
 
+  function setDefaultValue(option, defaultValue) {
+    if (typeof option === "undefined") {
+      return defaultValue;
+    }
+
+    return option;
+  }
+
   /**
    * The logic for this is quite terse. It's because we need to
    * support spread elements. We loop over all attributes,
@@ -172,7 +180,15 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
     let _props = [];
     const objs = [];
 
-    const useBuiltIns = file.opts.useBuiltIns || false;
+    const useSpread = setDefaultValue(file.opts.useSpread, false);
+    if (typeof useSpread !== "boolean") {
+      throw new Error(
+        "transform-react-jsx currently only accepts a boolean option for " +
+          "useSpread (defaults to false)",
+      );
+    }
+
+    const useBuiltIns = setDefaultValue(file.opts.useBuiltIns, false);
     if (typeof useBuiltIns !== "boolean") {
       throw new Error(
         "transform-react-jsx currently only accepts a boolean option for " +
@@ -185,6 +201,9 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
       if (t.isJSXSpreadAttribute(prop)) {
         _props = pushProps(_props, objs);
         objs.push(prop.argument);
+        if (useSpread) {
+          _props.push(t.spreadElement(prop.argument));
+        }
       } else {
         _props.push(convertAttribute(prop));
       }
@@ -201,12 +220,15 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
         objs.unshift(t.objectExpression([]));
       }
 
-      const helper = useBuiltIns
-        ? t.memberExpression(t.identifier("Object"), t.identifier("assign"))
-        : file.addHelper("extends");
-
-      // spread it
-      attribs = t.callExpression(helper, objs);
+      if (useSpread) {
+        attribs = t.objectExpression(_props);
+      } else {
+        const helper = useBuiltIns
+          ? t.memberExpression(t.identifier("Object"), t.identifier("assign"))
+          : file.addHelper("extends");
+        // spread it
+        attribs = t.callExpression(helper, objs);
+      }
     }
 
     return attribs;

packages/babel-plugin-transform-react-jsx/test/fixtures/useSpread/assignment-invalid-option/input.js

@@ -0,0 +1 @@
+var div = <Component {...props} foo="bar" />

packages/babel-plugin-transform-react-jsx/test/fixtures/useSpread/assignment-invalid-option/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "useSpread": 0 }]],
+  "throws": "transform-react-jsx currently only accepts a boolean option for useSpread (defaults to false)"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/useSpread/assignment/input.js

@@ -0,0 +1 @@
+var div = <Component {...props} foo="bar" />

packages/babel-plugin-transform-react-jsx/test/fixtures/useSpread/assignment/output.js

@@ -0,0 +1,3 @@
+var div = React.createElement(Component, { ...props,
+  foo: "bar"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/useSpread/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": [["transform-react-jsx", { "useSpread": true }]]
+}