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

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

packages/babel-preset-react/package.json

@@ -17,6 +17,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "@babel/helper-plugin-utils": "workspace:^7.12.13",
+    "@babel/helper-validator-option": "workspace:^7.12.17",
     "@babel/plugin-transform-react-display-name": "workspace:^7.12.13",
     "@babel/plugin-transform-react-jsx": "workspace:^7.12.13",
     "@babel/plugin-transform-react-jsx-development": "workspace:^7.12.12",

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,
+    };
+  }
+}

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

@@ -6,4 +6,25 @@ describe("react preset", () => {
       react({ version: "6.5.0" });
     }).toThrow(Error, /Requires Babel "\^7.0.0-0"/);
   });
+  (process.env.BABEL_8_BREAKING ? it : it.skip)(
+    "throws when unknown option is passed",
+    () => {
+      expect(() => {
+        react({ assertVersion() {} }, { runtine: true });
+      }).toThrowErrorMatchingInlineSnapshot(`
+        "@babel/preset-react: 'runtine' is not a valid top-level option.
+        - Did you mean 'runtime'?"
+      `);
+    },
+  );
+  (process.env.BABEL_8_BREAKING ? it : it.skip)(
+    "throws when option is of incorrect type",
+    () => {
+      expect(() => {
+        react({ assertVersion() {} }, { runtime: true });
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"@babel/preset-react: 'runtime' option must be a string."`,
+      );
+    },
+  );
 });

packages/babel-preset-react/test/normalize-options.spec.js

@@ -0,0 +1,128 @@
+import normalizeOptions from "../src/normalize-options";
+describe("normalize options", () => {
+  (process.env.BABEL_8_BREAKING ? describe : describe.skip)("Babel 8", () => {
+    it("should throw on unknown options", () => {
+      expect(() => normalizeOptions({ throwIfNamespaces: true })).toThrowError(
+        "@babel/preset-react: 'throwIfNamespaces' is not a valid top-level option.\n- Did you mean 'throwIfNamespace'?",
+      );
+    });
+    it.each(["development", "pure", "throwIfNamespace"])(
+      "should throw when `%p` is not a boolean",
+      optionName => {
+        expect(() => normalizeOptions({ [optionName]: 0 })).toThrow(
+          `@babel/preset-react: '${optionName}' option must be a boolean.`,
+        );
+      },
+    );
+    it.each(["importSource", "pragma", "pragmaFrag", "runtime"])(
+      "should throw when `%p` is not a string",
+      optionName => {
+        expect(() => normalizeOptions({ [optionName]: 0 })).toThrow(
+          `@babel/preset-react: '${optionName}' option must be a string.`,
+        );
+      },
+    );
+    it("should throw on Babel 7 'useBuiltIns' option", () => {
+      expect(() => normalizeOptions({ useBuiltIns: true }))
+        .toThrowErrorMatchingInlineSnapshot(`
+        "@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: true\`, you can use the following config
+        {
+          \\"plugins\\": [
+            [\\"@babel/plugin-proposal-object-rest-spread\\", { \\"loose\\": true, \\"useBuiltIns\\": true }]
+          ],
+          \\"presets\\": [\\"@babel/preset-react\\"]
+        }"
+      `);
+    });
+    it("should throw on Babel 7 'useSpread' option", () => {
+      expect(() =>
+        normalizeOptions({ useSpread: true }),
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"@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."`,
+      );
+    });
+    it("should throw on unknown 'runtime' option", () => {
+      expect(() => normalizeOptions({ runtime: "classical" }))
+        .toThrowErrorMatchingInlineSnapshot(`
+        "@babel/preset-react: 'runtime' must be one of ['automatic', 'classic'] but we have 'classical'
+        - Did you mean 'classic'?"
+      `);
+    });
+    it("should not throw when options are not defined", () => {
+      expect(() => normalizeOptions()).not.toThrowError();
+    });
+    it("default values", () => {
+      expect(normalizeOptions({})).toMatchInlineSnapshot(`
+        Object {
+          "development": false,
+          "importSource": "react",
+          "pragma": undefined,
+          "pragmaFrag": undefined,
+          "pure": undefined,
+          "runtime": "automatic",
+          "throwIfNamespace": true,
+        }
+      `);
+      expect(normalizeOptions({ runtime: "classic" })).toMatchInlineSnapshot(`
+        Object {
+          "development": false,
+          "importSource": undefined,
+          "pragma": "React.createElement",
+          "pragmaFrag": "React.Fragment",
+          "pure": undefined,
+          "runtime": "classic",
+          "throwIfNamespace": true,
+        }
+      `);
+    });
+  });
+  (process.env.BABEL_8_BREAKING ? describe.skip : describe)("Babel 7", () => {
+    it("should not throw on unknown options", () => {
+      expect(() =>
+        normalizeOptions({ throwIfNamespaces: true }),
+      ).not.toThrowError();
+    });
+    it.each(["development", "pure", "throwIfNamespace"])(
+      "should not throw when `%p` is not a boolean",
+      optionName => {
+        expect(() => normalizeOptions({ [optionName]: 0 })).not.toThrowError();
+      },
+    );
+    it.each(["importSource", "pragma", "pragmaFrag", "runtime"])(
+      "should throw when `%p` is not a string",
+      optionName => {
+        expect(() => normalizeOptions({ [optionName]: 0 })).not.toThrowError();
+      },
+    );
+    it("default values", () => {
+      expect(normalizeOptions({})).toMatchInlineSnapshot(`
+        Object {
+          "development": false,
+          "importSource": undefined,
+          "pragma": "React.createElement",
+          "pragmaFrag": "React.Fragment",
+          "pure": undefined,
+          "runtime": "classic",
+          "throwIfNamespace": true,
+          "useBuiltIns": undefined,
+          "useSpread": undefined,
+        }
+      `);
+      expect(normalizeOptions({ runtime: "automatic" })).toMatchInlineSnapshot(`
+        Object {
+          "development": false,
+          "importSource": undefined,
+          "pragma": undefined,
+          "pragmaFrag": undefined,
+          "pure": undefined,
+          "runtime": "automatic",
+          "throwIfNamespace": true,
+          "useBuiltIns": undefined,
+          "useSpread": undefined,
+        }
+      `);
+    });
+  });
+});