[babel 8] Remove useSpread and useBuiltIns jsx options (#12593)

* [babel 8] Remove `useSpread` and `useBuiltIns` jsx options

backport of 8cc8696851fa4bf02d7f6ae591404626d1ca32a3

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>
Co-authored-by: Brian Ng <bng412@gmail.com>

* Update fixtures (Windows)

Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com>
Co-authored-by: Brian Ng <bng412@gmail.com>
Co-authored-by: Babel Bot <babel-bot@users.noreply.github.com>

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

@@ -144,7 +144,11 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
 
     let attribs = openingPath.node.attributes;
     if (attribs.length) {
+      if (process.env.BABEL_8_BREAKING) {
+        attribs = t.objectExpression(attribs.map(convertAttribute));
+      } else {
         attribs = buildOpeningElementAttributes(attribs, file);
+      }
     } else {
       attribs = t.nullLiteral();
     }

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-babel-7/input.js

@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+  );

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-babel-7/options.json

@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": false,
+  "plugins": [["transform-react-jsx-development", { "runtime": "classic" }]],
+  "os": ["linux", "darwin"]
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-babel-7/output.js

@@ -0,0 +1,45 @@
+var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-babel-7/input.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 3,
+    columnNumber: 5
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  key: "1",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 4,
+    columnNumber: 9
+  }
+}), /*#__PURE__*/React.createElement("div", {
+  key: "2",
+  meow: "wolf",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 5,
+    columnNumber: 9
+  }
+}), /*#__PURE__*/React.createElement("div", {
+  key: "3",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 6,
+    columnNumber: 9
+  }
+}), /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  key: "4",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 7,
+    columnNumber: 9
+  }
+}))));

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime/options.json

@@ -1,4 +1,5 @@
 {
+  "BABEL_8_BREAKING": true,
   "plugins": [["transform-react-jsx-development", { "runtime": "classic" }]],
   "os": ["linux", "darwin"]
 }

packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime/output.js

@@ -1,7 +1,4 @@
 var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime/input.js";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
   __self: this,
   __source: {
@@ -34,7 +31,7 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
     lineNumber: 6,
     columnNumber: 9
   }
-}), /*#__PURE__*/React.createElement("div", _extends({}, props, {
+}), /*#__PURE__*/React.createElement("div", { ...props,
   key: "4",
   __self: this,
   __source: {
@@ -42,4 +39,4 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
     lineNumber: 7,
     columnNumber: 9
   }
-}))));
+})));

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-windows-babel-7/input.js

@@ -0,0 +1,10 @@
+var x = (
+  <>
+    <div>
+      <div key="1" />
+      <div key="2" meow="wolf" />
+      <div key="3" />
+      <div {...props} key="4" />
+    </div>
+  </>
+);

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-windows-babel-7/options.json

@@ -0,0 +1,4 @@
+{
+  "BABEL_8_BREAKING": false,
+  "plugins": [["transform-react-jsx-development", { "runtime": "classic" }]]
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-windows-babel-7/output.js

@@ -0,0 +1,45 @@
+var _jsxFileName = "<CWD>\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\classic-runtime-windows-babel-7\\input.js";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 3,
+    columnNumber: 5
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  key: "1",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 4,
+    columnNumber: 7
+  }
+}), /*#__PURE__*/React.createElement("div", {
+  key: "2",
+  meow: "wolf",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 5,
+    columnNumber: 7
+  }
+}), /*#__PURE__*/React.createElement("div", {
+  key: "3",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 6,
+    columnNumber: 7
+  }
+}), /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  key: "4",
+  __self: this,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 7,
+    columnNumber: 7
+  }
+}))));

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-windows/options.json

@@ -1,3 +1,4 @@
 {
+  "BABEL_8_BREAKING": true,
   "plugins": [["transform-react-jsx-development", { "runtime": "classic" }]]
 }

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-windows/output.js

@@ -1,7 +1,4 @@
 var _jsxFileName = "<CWD>\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\classic-runtime-windows\\input.js";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
   __self: this,
   __source: {
@@ -15,7 +12,7 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
   __source: {
     fileName: _jsxFileName,
     lineNumber: 4,
-    columnNumber: 7
+    columnNumber: 9
   }
 }), /*#__PURE__*/React.createElement("div", {
   key: "2",
@@ -24,7 +21,7 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
   __source: {
     fileName: _jsxFileName,
     lineNumber: 5,
-    columnNumber: 7
+    columnNumber: 9
   }
 }), /*#__PURE__*/React.createElement("div", {
   key: "3",
@@ -32,14 +29,14 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
   __source: {
     fileName: _jsxFileName,
     lineNumber: 6,
-    columnNumber: 7
+    columnNumber: 9
   }
-}), /*#__PURE__*/React.createElement("div", _extends({}, props, {
+}), /*#__PURE__*/React.createElement("div", { ...props,
   key: "4",
   __self: this,
   __source: {
     fileName: _jsxFileName,
     lineNumber: 7,
-    columnNumber: 7
+    columnNumber: 9
   }
-}))));
+})));

packages/babel-plugin-transform-react-jsx/src/create-plugin.js

@@ -30,10 +30,6 @@ export default function createPlugin({ name, development }) {
       // TODO (Babel 8): It should throw if this option is used with the automatic runtime
       filter,
 
-      // TODO (Babel 8): Remove `useBuiltIns` & `useSpread`
-      useSpread = false,
-      useBuiltIns = false,
-
       runtime: RUNTIME_DEFAULT = development ? "automatic" : "classic",
 
       importSource: IMPORT_SOURCE_DEFAULT = DEFAULT.importSource,
@@ -41,7 +37,31 @@ export default function createPlugin({ name, development }) {
       pragmaFrag: PRAGMA_FRAG_DEFAULT = DEFAULT.pragmaFrag,
     } = options;
 
-    // TOOD(Babel 8): If the runtime is 'automatic', we should throw when useSpread/useBuiltIns are set
+    if (process.env.BABEL_8_BREAKING) {
+      if ("useSpread" in options) {
+        throw new Error(
+          '@babel/plugin-transform-react-jsx: Since Babel 8, an inline object with spread elements is always used, and the "useSpread" option is no longer available. Please remove it from your config.',
+        );
+      }
+
+      if ("useBuiltIns" in options) {
+        const useBuiltInsFormatted = JSON.stringify(options.useBuiltIns);
+        throw new Error(
+          `@babel/plugin-transform-react-jsx: Since "useBuiltIns" is removed in Babel 8, you can remove it from the config.
+- Babel 8 now transforms JSX spread to object spread. If you need to transpile object spread with
+\`useBuiltIns: ${useBuiltInsFormatted}\`, you can use the following config
+{
+  "plugins": [
+    "@babel/plugin-transform-react-jsx"
+    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": ${useBuiltInsFormatted} }]
+  ]
+}`,
+        );
+      }
+    } else {
+      // eslint-disable-next-line no-var
+      var { useSpread = false, useBuiltIns = false } = options;
+
       if (RUNTIME_DEFAULT === "classic") {
         if (typeof useSpread !== "boolean") {
           throw new Error(
@@ -64,6 +84,7 @@ export default function createPlugin({ name, development }) {
           );
         }
       }
+    }
 
     const injectMetaPropertiesVisitor = {
       JSXOpeningElement(path, state) {
@@ -519,31 +540,9 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
      * all prior attributes to an array for later processing.
      */
     function buildCreateElementOpeningElementAttributes(file, path, attribs) {
-      // TODO (Babel 8): Only leave this branch of the code and remove the rest
-      if (
-        RUNTIME_DEFAULT === "automatic" ||
-        get(file, "runtime") === "automatic"
-      ) {
-        const props = [];
-        const found = Object.create(null);
-
-        for (const attr of attribs) {
-          const name =
-            t.isJSXAttribute(attr) &&
-            t.isJSXIdentifier(attr.name) &&
-            attr.name.name;
-
-          if (name === "__source" || name === "__self") {
-            if (found[name]) throw sourceSelfError(path, name);
-            found[name] = true;
-          }
-
-          accumulateAttribute(props, attr);
-        }
-
-        return props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
-      }
-
+      const runtime = get(file, "runtime");
+      if (!process.env.BABEL_8_BREAKING) {
+        if (runtime !== "automatic") {
           const objs = [];
           const props = attribs.reduce(accumulateAttribute, []);
 
@@ -586,6 +585,34 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
           // spread it
           return t.callExpression(helper, objs);
         }
+      }
+
+      const props = [];
+      const found = Object.create(null);
+
+      for (const attr of attribs) {
+        const name =
+          t.isJSXAttribute(attr) &&
+          t.isJSXIdentifier(attr.name) &&
+          attr.name.name;
+
+        if (
+          runtime === "automatic" &&
+          (name === "__source" || name === "__self")
+        ) {
+          if (found[name]) throw sourceSelfError(path, name);
+          found[name] = true;
+        }
+
+        accumulateAttribute(props, attr);
+      }
+
+      return props.length === 1 && t.isSpreadElement(props[0])
+        ? props[0].argument
+        : props.length > 0
+        ? t.objectExpression(props)
+        : t.nullLiteral();
+    }
   });
 
   function getSource(source, importName) {

packages/babel-plugin-transform-react-jsx/test/fixtures/react/adds-appropriate-newlines-when-using-spread-attribute-babel-7/input.js

@@ -0,0 +1,3 @@
+<Component
+  {...props}
+  sound="moo" />

packages/babel-plugin-transform-react-jsx/test/fixtures/react/adds-appropriate-newlines-when-using-spread-attribute-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/adds-appropriate-newlines-when-using-spread-attribute-babel-7/output.js

@@ -0,0 +1,4 @@
+/*#__PURE__*/
+React.createElement(Component, babelHelpers.extends({}, props, {
+  sound: "moo"
+}));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/adds-appropriate-newlines-when-using-spread-attribute/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/adds-appropriate-newlines-when-using-spread-attribute/output.js

@@ -1,4 +1,4 @@
 /*#__PURE__*/
-React.createElement(Component, babelHelpers.extends({}, props, {
+React.createElement(Component, { ...props,
   sound: "moo"
-}));
+});

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

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

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

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

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

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

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

@@ -1,3 +1,3 @@
-var div = /*#__PURE__*/React.createElement(Component, babelHelpers.extends({}, props, {
+var div = /*#__PURE__*/React.createElement(Component, { ...props,
   foo: "bar"
-}));
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/react/avoids-spread-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/does-not-add-source-self-babel-7/input.mjs

@@ -0,0 +1,10 @@
+var x = (
+  <>
+  <div>
+      <div key="1" />
+      <div key="2" meow="wolf" />
+      <div key="3" />
+      <div {...props} key="4" />
+  </div>
+  </>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/react/does-not-add-source-self-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/does-not-add-source-self-babel-7/output.mjs

@@ -0,0 +1,10 @@
+var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  key: "1"
+}), /*#__PURE__*/React.createElement("div", {
+  key: "2",
+  meow: "wolf"
+}), /*#__PURE__*/React.createElement("div", {
+  key: "3"
+}), /*#__PURE__*/React.createElement("div", babelHelpers.extends({}, props, {
+  key: "4"
+}))));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/does-not-add-source-self/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/does-not-add-source-self/output.mjs

@@ -5,6 +5,6 @@ var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/Reac
   meow: "wolf"
 }), /*#__PURE__*/React.createElement("div", {
   key: "3"
-}), /*#__PURE__*/React.createElement("div", babelHelpers.extends({}, props, {
+}), /*#__PURE__*/React.createElement("div", { ...props,
   key: "4"
-}))));
+})));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-first-spread-attributes-babel-7/input.js

@@ -0,0 +1,2 @@
+<Component { ... x } y
+={2 } z />

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-first-spread-attributes-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-first-spread-attributes-babel-7/output.js

@@ -0,0 +1,5 @@
+/*#__PURE__*/
+React.createElement(Component, babelHelpers.extends({}, x, {
+  y: 2,
+  z: true
+}));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-first-spread-attributes/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-first-spread-attributes/output.js

@@ -1,5 +1,5 @@
 /*#__PURE__*/
-React.createElement(Component, babelHelpers.extends({}, x, {
+React.createElement(Component, { ...x,
   y: 2,
   z: true
-}));
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-last-spread-attributes-babel-7/input.js

@@ -0,0 +1 @@
+<Component y={2} z { ... x } />

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-last-spread-attributes-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-last-spread-attributes-babel-7/output.js

@@ -0,0 +1,5 @@
+/*#__PURE__*/
+React.createElement(Component, babelHelpers.extends({
+  y: 2,
+  z: true
+}, x));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-last-spread-attributes/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-last-spread-attributes/output.js

@@ -1,5 +1,6 @@
 /*#__PURE__*/
-React.createElement(Component, babelHelpers.extends({
+React.createElement(Component, {
   y: 2,
-  z: true
-}, x));
+  z: true,
+  ...x
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-middle-spread-attributes-babel-7/input.js

@@ -0,0 +1 @@
+<Component y={2} { ... x } z />

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-middle-spread-attributes-babel-7/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": false
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-middle-spread-attributes-babel-7/output.js

@@ -0,0 +1,6 @@
+/*#__PURE__*/
+React.createElement(Component, babelHelpers.extends({
+  y: 2
+}, x, {
+  z: true
+}));

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-middle-spread-attributes/options.json

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/wraps-props-in-react-spread-for-middle-spread-attributes/output.js

@@ -1,6 +1,6 @@
 /*#__PURE__*/
-React.createElement(Component, babelHelpers.extends({
-  y: 2
-}, x, {
+React.createElement(Component, {
+  y: 2,
+  ...x,
   z: true
-}));
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/removed-options/invalid-use-builtins-false/options.json

@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": true,
+  "plugins": [["transform-react-jsx", { "useBuiltIns": false }]],
+  "throws": "@babel/plugin-transform-react-jsx: Since \"useBuiltIns\" is removed in Babel 8, you can remove it from the config."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/removed-options/invalid-use-builtins-true/options.json

@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": true,
+  "plugins": [["transform-react-jsx", { "useBuiltIns": true }]],
+  "throws": "@babel/plugin-transform-react-jsx: Since \"useBuiltIns\" is removed in Babel 8, you can remove it from the config."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/removed-options/invalid-use-spread-false/options.json

@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": true,
+  "plugins": [["transform-react-jsx", { "useSpread": false }]],
+  "throws": "transform-react-jsx: Since Babel 8, an inline object with spread elements is always used, and the \"useSpread\" option is no longer available. Please remove it from your config."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/removed-options/invalid-use-spread-true/options.json

@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": true,
+  "plugins": [["transform-react-jsx", { "useSpread": true }]],
+  "throws": "transform-react-jsx: Since Babel 8, an inline object with spread elements is always used, and the \"useSpread\" option is no longer available. Please remove it from your config."
+}

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

@@ -0,0 +1,3 @@
+{
+  "BABEL_8_BREAKING": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/spread-transform/transform-to-babel-extend/input.js

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

packages/babel-plugin-transform-react-jsx/test/fixtures/spread-transform/transform-to-babel-extend/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": ["transform-react-jsx", ["proposal-object-rest-spread", {
+    "loose": true,
+    "useBuiltIns": false
+  }], "external-helpers"]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/spread-transform/transform-to-babel-extend/output.js

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

packages/babel-plugin-transform-react-jsx/test/fixtures/spread-transform/transform-to-object-assign/input.js

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

packages/babel-plugin-transform-react-jsx/test/fixtures/spread-transform/transform-to-object-assign/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": ["transform-react-jsx", ["proposal-object-rest-spread", {
+    "loose": true,
+    "useBuiltIns": true
+  }]]
+}

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

@@ -1,4 +0,0 @@
-{
-  "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/options.json

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

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

@@ -1,4 +0,0 @@
-{
-  "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/options.json

@@ -1,6 +0,0 @@
-{
-  "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/output.js

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

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

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

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

@@ -25,18 +25,55 @@ export default declare((api, opts) => {
   // TODO: (Babel 8) Don't cast this option but validate it
   const development = !!opts.development;
 
+  if (process.env.BABEL_8_BREAKING) {
+    if ("useSpread" in opts) {
+      throw new Error(
+        '@babel/preset-react: Since Babel 8, an inline object with spread elements is always used, and the "useSpread" option is no longer available. Please remove it from your config.',
+      );
+    }
+
+    if ("useBuiltIns" in opts) {
+      const useBuiltInsFormatted = JSON.stringify(opts.useBuiltIns);
+      throw new Error(
+        `@babel/preset-react: Since "useBuiltIns" is removed in Babel 8, you can remove it from the config.
+- Babel 8 now transforms JSX spread to object spread. If you need to transpile object spread with
+\`useBuiltIns: ${useBuiltInsFormatted}\`, you can use the following config
+{
+  "plugins": [
+    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": ${useBuiltInsFormatted} }]
+  ],
+  "presets": ["@babel/preset-react"]
+}`,
+      );
+    }
+  }
+
+  if (typeof development !== "boolean") {
+    throw new Error(
+      "@babel/preset-react 'development' option must be a boolean.",
+    );
+  }
+
   return {
     plugins: [
       [
         development ? transformReactJSXDevelopment : transformReactJSX,
-        {
+        process.env.BABEL_8_BREAKING
+          ? {
+              importSource,
+              pragma,
+              pragmaFrag,
+              runtime,
+              throwIfNamespace,
+              pure,
+            }
+          : {
               importSource,
               pragma,
               pragmaFrag,
               runtime,
               throwIfNamespace,
               pure,
-          // TODO (Babel 8): Remove `useBuiltIns` & `useSpread`
               useBuiltIns: !!opts.useBuiltIns,
               useSpread: opts.useSpread,
             },