[transform-react-jsx] Add useSpread option to transform JSX (#10572)

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

* Add validation for default option

* Add error when using useSpread and useBuiltIns at the same time

* Move useSpread to convertAttribute helper function

* Add useSpread option to presect-react

* Remove casting useSpread to boolean in preset-react option.

Co-Authored-By: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

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

@@ -87,6 +87,10 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
   function convertAttribute(node) {
     const value = convertAttributeValue(node.value || t.booleanLiteral(true));
 
+    if (t.isJSXSpreadAttribute(node)) {
+      return t.spreadElement(node.argument);
+    }
+
     if (t.isStringLiteral(value) && !t.isJSXExpressionContainer(node.value)) {
       value.value = value.value.replace(/\n\s+/g, " ");
 
@@ -170,6 +174,14 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
     let _props = [];
     const objs = [];
 
+    const { useSpread = false } = file.opts;
+    if (typeof useSpread !== "boolean") {
+      throw new Error(
+        "transform-react-jsx currently only accepts a boolean option for " +
+          "useSpread (defaults to false)",
+      );
+    }
+
     const useBuiltIns = file.opts.useBuiltIns || false;
     if (typeof useBuiltIns !== "boolean") {
       throw new Error(
@@ -178,6 +190,18 @@ You can turn on the 'throwIfNamespace' flag to bypass this warning.`,
       );
     }
 
+    if (useSpread && useBuiltIns) {
+      throw new Error(
+        "transform-react-jsx currently only accepts useBuiltIns or useSpread " +
+          "but not both",
+      );
+    }
+
+    if (useSpread) {
+      const props = attribs.map(convertAttribute);
+      return t.objectExpression(props);
+    }
+
     while (attribs.length) {
       const prop = attribs.shift();
       if (t.isJSXSpreadAttribute(prop)) {

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-use-builtin/input.js

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

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

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "useSpread": true, "useBuiltIns": true }]
+  ],
+  "throws": "transform-react-jsx currently only accepts useBuiltIns or useSpread but not both"
+}

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 }]]
+}

packages/babel-preset-react/src/index.js

@@ -13,6 +13,7 @@ export default declare((api, opts) => {
     opts.throwIfNamespace === undefined ? true : !!opts.throwIfNamespace;
   const development = !!opts.development;
   const useBuiltIns = !!opts.useBuiltIns;
+  const { useSpread } = opts;
 
   if (typeof development !== "boolean") {
     throw new Error(
@@ -24,7 +25,7 @@ export default declare((api, opts) => {
     plugins: [
       [
         transformReactJSX,
-        { pragma, pragmaFrag, throwIfNamespace, useBuiltIns },
+        { pragma, pragmaFrag, throwIfNamespace, useBuiltIns, useSpread },
       ],
       transformReactDisplayName,