[babel 8] Use the JSX automatic runtime by default (#12630)

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>
Co-authored-by: Arun Kumar Mohan <arunmohandm@gmail.com>

packages/babel-node/test/config.json

@@ -1,7 +1,7 @@
 {
   "presets": [
     "../../babel-preset-env",
-    ["../../babel-preset-react"]
+    ["../../babel-preset-react", { "runtime": "classic" }]
   ],
   "plugins": [
     "../../babel-plugin-transform-strict-mode",

packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/options.json

@@ -2,7 +2,7 @@
   "plugins": [
     "external-helpers",
     "transform-async-to-generator",
-    "transform-react-jsx",
+    ["transform-react-jsx", { "runtime": "classic" }],
     "transform-react-constant-elements"
   ]
 }

packages/babel-plugin-transform-block-scoping/test/fixtures/general/options.json

@@ -2,7 +2,7 @@
   "plugins": [
     "transform-block-scoping",
     "syntax-jsx",
-    "transform-react-jsx",
+    ["transform-react-jsx", { "runtime": "classic" }],
     "transform-block-scoped-functions",
     "transform-arrow-functions"
   ]

packages/babel-plugin-transform-classes/test/fixtures/regression/options.json

@@ -1,4 +1,7 @@
 {
   "plugins": ["external-helpers", "proposal-class-properties"],
-  "presets": [["env", { "targets": { "browsers": "ie 6" } }], "react"]
+  "presets": [
+    ["env", { "targets": { "browsers": "ie 6" } }],
+    ["react", { "runtime": "classic" }]
+  ]
 }

packages/babel-plugin-transform-function-name/test/fixtures/function-name/export-default-arrow-renaming-3/options.json

@@ -1,3 +1,6 @@
 {
-  "presets": [["env", { "targets": { "browsers": "ie 6" } }], "react"]
+  "presets": [
+    ["env", { "targets": { "browsers": "ie 6" } }],
+    ["react", { "runtime": "classic" }]
+  ]
 }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/options.json

@@ -1,3 +1,6 @@
 {
-  "plugins": ["transform-react-jsx", "transform-react-constant-elements"]
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }],
+    "transform-react-constant-elements"
+  ]
 }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/options.json

@@ -1,3 +1,6 @@
 {
-  "plugins": ["transform-react-jsx", "transform-react-constant-elements"]
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }],
+    "transform-react-constant-elements"
+  ]
 }

packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/lowercase-member-expression/options.json

@@ -3,7 +3,7 @@
     "external-helpers",
     "syntax-jsx",
     "transform-react-inline-elements",
-    "transform-react-jsx",
+    ["transform-react-jsx", { "runtime": "classic" }],
     "transform-modules-commonjs"
   ]
 }

packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/member-expression/options.json

@@ -3,7 +3,7 @@
     "external-helpers",
     "syntax-jsx",
     "transform-react-inline-elements",
-    "transform-react-jsx",
+    ["transform-react-jsx", { "runtime": "classic" }],
     "transform-modules-commonjs"
   ]
 }

packages/babel-plugin-transform-react-inline-elements/test/fixtures/options.json

@@ -3,6 +3,6 @@
     "external-helpers",
     "syntax-jsx",
     "transform-react-inline-elements",
-    "transform-react-jsx"
+    ["transform-react-jsx", { "runtime": "classic" }]
   ]
 }

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

@@ -30,7 +30,11 @@ export default function createPlugin({ name, development }) {
       // TODO (Babel 8): It should throw if this option is used with the automatic runtime
       filter,
 
-      runtime: RUNTIME_DEFAULT = development ? "automatic" : "classic",
+      runtime: RUNTIME_DEFAULT = process.env.BABEL_8_BREAKING
+        ? "automatic"
+        : development
+        ? "automatic"
+        : "classic",
 
       importSource: IMPORT_SOURCE_DEFAULT = DEFAULT.importSource,
       pragma: PRAGMA_DEFAULT = DEFAULT.pragma,

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-default-pragma-automatic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": false, "runtime": "automatic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-default-pragma-automatic-runtime/output.js

@@ -0,0 +1,3 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+_reactJsxRuntime.jsx("div", {});

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-default-pragma-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": false, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-default-pragma/options.json

@@ -1,5 +0,0 @@
-{
-  "plugins": [
-    ["transform-react-jsx", { "pure": false }]
-  ]
-}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-comment-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": false, "runtime": "automatic" }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-comment-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": false, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-comment/options.json

@@ -1,5 +0,0 @@
-{
-  "plugins": [
-    ["transform-react-jsx", { "pure": false }]
-  ]
-}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-option-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "pure": false, "runtime": "automatic" }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-option-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "pure": false, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/false-pragma-option/options.json

@@ -1,5 +0,0 @@
-{
-  "plugins": [
-    ["transform-react-jsx", { "pragma": "h", "pure": false }]
-  ]
-}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-default-pragma-automatic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": true, "runtime": "automatic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-default-pragma-automatic-runtime/output.js

@@ -0,0 +1,4 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+/*#__PURE__*/
+_reactJsxRuntime.jsx("div", {});

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-default-pragma-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": true, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-default-pragma/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-comment-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": true, "runtime": "automatic" }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-comment-classic-runtime/input.js

@@ -0,0 +1,3 @@
+/* @jsx h */
+
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-comment-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pure": true, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-comment/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-option-automatic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-option-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "pure": true, "runtime": "automatic" }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-option-classic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-option-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "pure": true, "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/true-pragma-option/options.json

@@ -1,5 +0,0 @@
-{
-  "plugins": [
-    ["transform-react-jsx", { "pragma": "h", "pure": true }]
-  ]
-}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma-automatic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma-automatic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma-automatic-runtime/output.js

@@ -0,0 +1,4 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+/*#__PURE__*/
+_reactJsxRuntime.jsx("div", {});

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma-classic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-default-pragma/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-comment-automatic-runtime/input.js

@@ -0,0 +1,3 @@
+/* @jsx h */
+
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-comment-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-comment-classic-runtime/input.js

@@ -0,0 +1,3 @@
+/* @jsx h */
+
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-comment-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-comment/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-option-automatic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-option-automatic-runtime/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "runtime": "automatic"  }]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-option-classic-runtime/input.js

@@ -0,0 +1 @@
+<div />;

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-option-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h", "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/pure/unset-pragma-option/options.json

@@ -1,5 +0,0 @@
-{
-  "plugins": [
-    ["transform-react-jsx", { "pragma": "h" }]
-  ]
-}

packages/babel-plugin-transform-react-jsx/test/fixtures/react/honor-custom-jsx-comment-if-jsx-pragma-option-set/options.json

@@ -1,3 +1,3 @@
 {
-  "plugins": [["transform-react-jsx", { "pragma": "foo.bar" }]]
+  "plugins": [["transform-react-jsx", { "pragma": "foo.bar", "runtime": "classic" }]]
 }

packages/babel-plugin-transform-react-jsx/test/fixtures/react/honor-custom-jsx-pragma-option/options.json

@@ -1,3 +1,3 @@
 {
-  "plugins": [["transform-react-jsx", { "pragma": "dom" }]]
+  "plugins": [["transform-react-jsx", { "pragma": "dom", "runtime": "classic" }]]
 }

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

@@ -2,7 +2,7 @@
   "plugins": [
     "external-helpers",
     "syntax-jsx",
-    "transform-react-jsx",
+    ["transform-react-jsx", { "runtime": "classic" }],
     "transform-arrow-functions"
   ]
 }

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-add-quotes-es3/options.json

@@ -1,3 +1,6 @@
 {
-  "plugins": ["transform-react-jsx", "transform-property-literals"]
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }],
+    "transform-property-literals"
+  ]
 }

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-support-xml-namespaces-if-flag/options.json

@@ -4,6 +4,7 @@
       "transform-react-jsx",
       {
         "pragma": "h",
+        "runtime": "classic",
         "throwIfNamespace": false
       }
     ]

packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-throw-error-namespaces-if-not-flag/options.json

@@ -4,6 +4,7 @@
       "transform-react-jsx",
       {
         "pragma": "h",
+        "runtime": "classic",
         "throwIfNamespace": true
       }
     ]

packages/babel-plugin-transform-react-jsx/test/fixtures/regression/pragma-frag-set-default-classic-runtime/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "classic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/regression/pragma-frag-set-default/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-automatic/options.json

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

packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-automatic/output.js

@@ -0,0 +1,5 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+var x = /*#__PURE__*/_reactJsxRuntime.jsx("div", {
+  children: /*#__PURE__*/_reactJsxRuntime.jsx("span", {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classis-babel-7/input.js

@@ -0,0 +1 @@
+var x = (<div><span /></div>);

packages/babel-plugin-transform-react-jsx/test/fixtures/runtime/defaults-to-classis-babel-7/options.json

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

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

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

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

@@ -1,3 +1,5 @@
-var div = /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+var div = /*#__PURE__*/_reactJsxRuntime.jsx(Component, Object.assign({}, props, {
   foo: "bar"
 }));

packages/babel-plugin-transform-regenerator/test/fixtures/scope/8525/options.json

@@ -1,4 +1,6 @@
 {
-  "presets": ["react"],
+  "presets": [
+    ["react", { "runtime": "classic" }]
+  ],
   "plugins": ["transform-regenerator"]
 }

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

@@ -7,23 +7,23 @@ import transformReactPure from "@babel/plugin-transform-react-pure-annotations";
 export default declare((api, opts) => {
   api.assertVersion(7);
 
-  let { pragma, pragmaFrag } = opts;
+  let { pragma, pragmaFrag, development = false } = opts;
 
   const {
     pure,
     throwIfNamespace = true,
-    runtime = "classic",
+    runtime = process.env.BABEL_8_BREAKING ? "automatic" : "classic",
     importSource,
   } = opts;
 
-  // TODO: (Babel 8) Remove setting these defaults
+  if (!process.env.BABEL_8_BREAKING) {
-  if (runtime === "classic") {
+    if (runtime === "classic") {
-    pragma = pragma || "React.createElement";
+      pragma = pragma || "React.createElement";
-    pragmaFrag = pragmaFrag || "React.Fragment";
+      pragmaFrag = pragmaFrag || "React.Fragment";
-  }
+    }
 
-  // TODO: (Babel 8) Don't cast this option but validate it
+    development = !!development;
-  const development = !!opts.development;
+  }
 
   if (process.env.BABEL_8_BREAKING) {
     if ("useSpread" in opts) {

packages/babel-preset-react/test/fixtures/preset-options/development-windows/options.json

@@ -1,4 +1,4 @@
 {
-  "presets": [["react", { "development": true }]],
+  "presets": [["react", { "development": true, "runtime": "classic" }]],
   "os": ["win32"]
 }

packages/babel-preset-react/test/fixtures/preset-options/development/options.json

@@ -1,4 +1,4 @@
 {
-  "presets": [["react", { "development": true }]],
+  "presets": [["react", { "development": true, "runtime": "classic" }]],
   "os": ["linux", "darwin"]
 }

packages/babel-preset-react/test/fixtures/preset-options/empty-options-babel-7/options.json

@@ -0,0 +1,4 @@
+{
+  "BABEL_8_BREAKING": false,
+  "presets": [["react", {}]]
+}

packages/babel-preset-react/test/fixtures/preset-options/empty-options/options.json

@@ -1,3 +1,4 @@
 {
+  "BABEL_8_BREAKING": true,
   "presets": [["react", {}]]
 }

packages/babel-preset-react/test/fixtures/preset-options/empty-options/output.js

@@ -1,4 +1,6 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
 /*#__PURE__*/
-React.createElement(Foo, {
+_reactJsxRuntime.jsx(Foo, {
   bar: "baz"
 });

packages/babel-preset-react/test/fixtures/preset-options/no-options/options.json

@@ -1,3 +0,0 @@
-{
-  "presets": ["react"]
-}

packages/babel-preset-react/test/fixtures/preset-options/runtime-classic-pragma-no-frag/options.json

@@ -1,3 +1,5 @@
 {
-  "presets": ["react"]
+  "presets": [
+    ["react", { "runtime": "classic" }]
+  ]
 }

packages/babel-preset-react/test/fixtures/regression/11294/options.json

@@ -1,4 +1,4 @@
 {
   "presets": [
-    ["react", { "pragma": "__jsx" }]]
+    ["react", { "pragma": "__jsx", "runtime": "classic" }]]
 }

packages/babel-preset-react/test/fixtures/regression/another-preset-with-custom-jsx-keep-source-self/emotion-css-prop-preset.js

@@ -1,3 +1,3 @@
 module.exports = () => ({
-  plugins: [["@babel/plugin-transform-react-jsx", { pragma: "___EmotionJSX" }]],
+  plugins: [["@babel/plugin-transform-react-jsx", { pragma: "___EmotionJSX", runtime: "classic" }]],
 });

packages/babel-preset-react/test/fixtures/regression/runtime-classic-allow-multiple-source-self/my-preset.js

@@ -1,3 +1,3 @@
 module.exports = () => ({
-  presets: [["@babel/preset-react", { development: true }]],
+  presets: [["@babel/preset-react", { development: true, runtime: "classic" }]],
 });