[babel 8] Type checking preset-react options (#12741)

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

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

@@ -3,56 +3,20 @@ import transformReactJSX from "@babel/plugin-transform-react-jsx";
 import transformReactJSXDevelopment from "@babel/plugin-transform-react-jsx-development";
 import transformReactDisplayName from "@babel/plugin-transform-react-display-name";
 import transformReactPure from "@babel/plugin-transform-react-pure-annotations";
+import normalizeOptions from "./normalize-options";
 
 export default declare((api, opts) => {
   api.assertVersion(7);
 
-  let { pragma, pragmaFrag, development = false } = opts;
-
   const {
-    pure,
-    throwIfNamespace = true,
-    runtime = process.env.BABEL_8_BREAKING ? "automatic" : "classic",
+    development,
     importSource,
-  } = opts;
-
-  if (!process.env.BABEL_8_BREAKING) {
-    if (runtime === "classic") {
-      pragma = pragma || "React.createElement";
-      pragmaFrag = pragmaFrag || "React.Fragment";
-    }
-
-    development = !!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.",
-    );
-  }
+    pragma,
+    pragmaFrag,
+    pure,
+    runtime,
+    throwIfNamespace,
+  } = normalizeOptions(opts);
 
   return {
     plugins: [

packages/babel-preset-react/src/normalize-options.js

@@ -0,0 +1,120 @@
+import {
+  OptionValidator,
+  findSuggestion,
+} from "@babel/helper-validator-option";
+const v = new OptionValidator("@babel/preset-react");
+
+export default function normalizeOptions(options = {}) {
+  if (process.env.BABEL_8_BREAKING) {
+    if ("useSpread" in options) {
+      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 options) {
+      const useBuiltInsFormatted = JSON.stringify(options.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"]
+}`,
+      );
+    }
+
+    const TopLevelOptions = {
+      development: "development",
+      importSource: "importSource",
+      pragma: "pragma",
+      pragmaFrag: "pragmaFrag",
+      pure: "pure",
+      runtime: "runtime",
+      throwIfNamespace: "throwIfNamespace",
+    };
+    v.validateTopLevelOptions(options, TopLevelOptions);
+    const development = v.validateBooleanOption(
+      TopLevelOptions.development,
+      options.development,
+      false,
+    );
+    let importSource = v.validateStringOption(
+      TopLevelOptions.importSource,
+      options.importSource,
+    );
+    let pragma = v.validateStringOption(TopLevelOptions.pragma, options.pragma);
+    let pragmaFrag = v.validateStringOption(
+      TopLevelOptions.pragmaFrag,
+      options.pragmaFrag,
+    );
+    const pure = v.validateBooleanOption(TopLevelOptions.pure, options.pure);
+    const runtime = v.validateStringOption(
+      TopLevelOptions.runtime,
+      options.runtime,
+      "automatic",
+    );
+    const throwIfNamespace = v.validateBooleanOption(
+      TopLevelOptions.throwIfNamespace,
+      options.throwIfNamespace,
+      true,
+    );
+
+    const validRuntime = ["classic", "automatic"];
+
+    if (runtime === "classic") {
+      pragma = pragma || "React.createElement";
+      pragmaFrag = pragmaFrag || "React.Fragment";
+    } else if (runtime === "automatic") {
+      importSource = importSource || "react";
+    } else {
+      throw new Error(
+        `@babel/preset-react: 'runtime' must be one of ['automatic', 'classic'] but we have '${runtime}'\n` +
+          `- Did you mean '${findSuggestion(runtime, validRuntime)}'?`,
+      );
+    }
+
+    return {
+      development,
+      importSource,
+      pragma,
+      pragmaFrag,
+      pure,
+      runtime,
+      throwIfNamespace,
+    };
+  } else {
+    let { pragma, pragmaFrag } = options;
+
+    const {
+      pure,
+      throwIfNamespace = true,
+      runtime = "classic",
+      importSource,
+      useBuiltIns,
+      useSpread,
+    } = options;
+
+    if (runtime === "classic") {
+      pragma = pragma || "React.createElement";
+      pragmaFrag = pragmaFrag || "React.Fragment";
+    }
+
+    const development = !!options.development;
+
+    return {
+      development,
+      importSource,
+      pragma,
+      pragmaFrag,
+      pure,
+      runtime,
+      throwIfNamespace,
+      useBuiltIns,
+      useSpread,
+    };
+  }
+}