From 1e3ef0568558eeabb0c95e02102e40b30169df9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= Date: Fri, 26 Mar 2021 15:11:39 -0400 Subject: [PATCH] [babel 8] Type checking preset-react options (#12741) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nicolò Ribaudo --- Gulpfile.mjs | 14 +- packages/babel-preset-react/package.json | 1 + packages/babel-preset-react/src/index.js | 52 ++----- .../src/normalize-options.js | 120 ++++++++++++++++ packages/babel-preset-react/test/index.js | 21 +++ .../test/normalize-options.spec.js | 128 ++++++++++++++++++ yarn.lock | 1 + 7 files changed, 290 insertions(+), 47 deletions(-) create mode 100644 packages/babel-preset-react/src/normalize-options.js create mode 100644 packages/babel-preset-react/test/normalize-options.spec.js diff --git a/Gulpfile.mjs b/Gulpfile.mjs index 21fdd85839..2b9afdf0cb 100644 --- a/Gulpfile.mjs +++ b/Gulpfile.mjs @@ -288,11 +288,18 @@ function buildRollup(packages, targetBrowsers) { input, external, onwarn(warning, warn) { - if (warning.code !== "CIRCULAR_DEPENDENCY") { + if (warning.code === "CIRCULAR_DEPENDENCY") return; + if (warning.code === "UNUSED_EXTERNAL_IMPORT") { warn(warning); - // https://github.com/babel/babel/pull/12011#discussion_r540434534 - throw new Error("Rollup aborted due to warnings above"); + return; } + + // We use console.warn here since it prints more info than just "warn", + // in case we want to stop throwing for a specific message. + console.warn(warning); + + // https://github.com/babel/babel/pull/12011#discussion_r540434534 + throw new Error("Rollup aborted due to warnings above"); }, plugins: [ rollupBabelSource(), @@ -424,6 +431,7 @@ function copyDts(packages) { const libBundles = [ "packages/babel-parser", "packages/babel-plugin-proposal-optional-chaining", + "packages/babel-preset-react", "packages/babel-preset-typescript", "packages/babel-helper-member-expression-to-functions", "packages/babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining", diff --git a/packages/babel-preset-react/package.json b/packages/babel-preset-react/package.json index 0e1243921c..cdfb5b8e75 100644 --- a/packages/babel-preset-react/package.json +++ b/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", diff --git a/packages/babel-preset-react/src/index.js b/packages/babel-preset-react/src/index.js index 4a7e904f0a..46af67c8f8 100644 --- a/packages/babel-preset-react/src/index.js +++ b/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: [ diff --git a/packages/babel-preset-react/src/normalize-options.js b/packages/babel-preset-react/src/normalize-options.js new file mode 100644 index 0000000000..9061f07276 --- /dev/null +++ b/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, + }; + } +} diff --git a/packages/babel-preset-react/test/index.js b/packages/babel-preset-react/test/index.js index a695b4e8e6..17a19f5f5d 100644 --- a/packages/babel-preset-react/test/index.js +++ b/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."`, + ); + }, + ); }); diff --git a/packages/babel-preset-react/test/normalize-options.spec.js b/packages/babel-preset-react/test/normalize-options.spec.js new file mode 100644 index 0000000000..f042f13790 --- /dev/null +++ b/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, + } + `); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 27913ffafd..b468428e1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3198,6 +3198,7 @@ __metadata: "@babel/core": "workspace:*" "@babel/helper-plugin-test-runner": "workspace:*" "@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"