Make automatic runtime the default for JSX compilation (#11436)

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", "react"]
+  "presets": [
+    "env",
+    ["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", "react"]
+  "presets": [
+    "env",
+    ["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/index.js

@@ -5,14 +5,14 @@ import transformAutomatic from "./transform-automatic";
 import { declare } from "@babel/helper-plugin-utils";
 
 export default declare((api, options) => {
-  const { runtime = "classic" } = options;
+  const { runtime = "automatic" } = options;
 
   // we throw a warning in helper-builder-react-jsx-experimental if runtime
   // is neither automatic or classic because we will remove this file
   // in v8.0.0
   if (runtime === "classic") {
     return transformClassic(api, options);
-  } else {
-    return transformAutomatic(api, options);
   }
+
+  return transformAutomatic(api, options);
 });

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

@@ -0,0 +1 @@
+<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-classic-runtime/output.js

@@ -0,0 +1 @@
+React.createElement("div", null);

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

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

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

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

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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", { "pure": false }]
-  ]
+  ],
+  "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/input.js

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

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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", { "pragma": "h", "pure": false }]
-  ]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
 }

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

@@ -0,0 +1 @@
+<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-classic-runtime/output.js

@@ -0,0 +1,2 @@
+/*#__PURE__*/
+React.createElement("div", null);

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

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

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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", { "pure": true }]
-  ]
+  ],
+  "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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", { "pragma": "h", "pure": true }]
-  ]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
 }

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-classic-runtime/output.js

@@ -0,0 +1,2 @@
+/*#__PURE__*/
+React.createElement("div", null);

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

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

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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", {}]
-  ]
+  ],
+  "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 +1,6 @@
 {
   "plugins": [
     ["transform-react-jsx", { "pragma": "h" }]
-  ]
+  ],
+  "throws": "pragma and pragmaFrag cannot be set when runtime is automatic."
 }

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-react-display-name",
     "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/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/transform-to-babel-extend/assignment/output.js

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

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

@@ -1,4 +1,4 @@
 {
-  "plugins": [["transform-react-jsx", { "useBuiltIns": false }]],
+  "plugins": [["transform-react-jsx", { "runtime": "classic", "useBuiltIns": false }]],
   "rejects": "transform-react-jsx: Since \"useBuiltIns\" is removed in Babel 8, you must remove it from your config.\n- Babel 8 now transforms JSX spread to object spread. If you need to transpile object spread with\n`useBuiltIns: false`, you can use the following config\n{\n  \"plugins\": [\n    \"@babel/plugin-transform-react-jsx\",\n    [\"@babel/plugin-proposal-object-rest-spread\", { \"loose\": true, \"useBuiltIns\": false }]\n  ]\n}"
 }

packages/babel-plugin-transform-react-jsx/test/fixtures/transform-to-object-assign/assignment/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-react-jsx/test/fixtures/transform-to-object-assign/invalid-use-builtins-true/options.json

@@ -1,4 +1,4 @@
 {
-  "plugins": [["transform-react-jsx", { "useBuiltIns": true }]],
+  "plugins": [["transform-react-jsx", { "runtime": "classic", "useBuiltIns": true }]],
   "rejects": "transform-react-jsx: Since \"useBuiltIns\" is removed in Babel 8, you must remove it from your config.\n- Babel 8 now transforms JSX spread to object spread. If you need to transpile object spread with\n`useBuiltIns: true`, you can use the following config\n{\n  \"plugins\": [\n    \"@babel/plugin-transform-react-jsx\",\n    [\"@babel/plugin-proposal-object-rest-spread\", { \"loose\": true, \"useBuiltIns\": true }]\n  ]\n}"
 }

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

@@ -1,4 +1,4 @@
 {
-  "plugins": [["transform-react-jsx", { "useSpread": false }]],
+  "plugins": [["transform-react-jsx", { "runtime": "classic", "useSpread": false }]],
   "rejects": "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/transform-to-object-assign/invalid-use-spread-true/options.json

@@ -1,4 +1,4 @@
 {
-  "plugins": [["transform-react-jsx", { "useSpread": true }]],
+  "plugins": [["transform-react-jsx", { "runtime": "classic", "useSpread": true }]],
   "rejects": "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-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

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

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