Add useBuiltIns option to helper-builder-react-jsx (#4655)

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

@@ -118,7 +118,7 @@ export default function (opts) {
   /**
    * The logic for this is quite terse. It's because we need to
    * support spread elements. We loop over all attributes,
-   * breaking on spreads, we then push a new object containg
+   * breaking on spreads, we then push a new object containing
    * all prior attributes to an array for later processing.
    */
 
@@ -126,6 +126,11 @@ export default function (opts) {
     let _props = [];
     let objs = [];
 
+    let useBuiltIns = file.opts.useBuiltIns || false;
+    if (typeof useBuiltIns !== "boolean") {
+      throw new Error("transform-react-jsx currently only accepts a boolean option for useBuiltIns (defaults to false)");
+    }
+
     function pushProps() {
       if (!_props.length) return;
 
@@ -154,11 +159,12 @@ export default function (opts) {
         objs.unshift(t.objectExpression([]));
       }
 
+      const helper = useBuiltIns ?
+        t.memberExpression(t.identifier("Object"), t.identifier("assign")) :
+        file.addHelper("extends");
+
       // spread it
-      attribs = t.callExpression(
+      attribs = t.callExpression(helper, objs);
-        file.addHelper("extends"),
-        objs
-      );
     }
 
     return attribs;

packages/babel-plugin-transform-react-jsx/test/fixtures/useBuiltIns/assignment-invalid-option/actual.js

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

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

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

packages/babel-plugin-transform-react-jsx/test/fixtures/useBuiltIns/assignment/actual.js

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

packages/babel-plugin-transform-react-jsx/test/fixtures/useBuiltIns/assignment/expected.js

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

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

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