Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(babel-preset-gatsby): remove spread operator from node builds #29346

Merged
merged 3 commits into from
Feb 5, 2021
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/babel-preset-gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-classes": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/plugin-transform-spread": "^7.12.1",
"@babel/preset-env": "^7.12.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,6 @@ Object {
"useESModules": true,
},
],
Array [
"<PROJECT_ROOT>/node_modules/@babel/plugin-transform-spread/lib/index.js",
Object {
"loose": false,
},
],
"<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
],
"presets": Array [
Expand Down Expand Up @@ -304,6 +298,12 @@ Object {
"loose": false,
},
],
Array [
"<PROJECT_ROOT>/node_modules/@babel/plugin-transform-classes/lib/index.js",
Object {
"loose": true,
},
],
"<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
Array [
"<PROJECT_ROOT>/node_modules/babel-plugin-transform-react-remove-prop-types/lib/index.js",
Expand Down Expand Up @@ -536,7 +536,7 @@ Object {
}
`;

exports[`babel-preset-gatsby should specify proper presets and plugins when stage is build-stage 1`] = `
exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop 1`] = `
Object {
"plugins": Array [
Array [
Expand Down Expand Up @@ -574,6 +574,12 @@ Object {
"loose": false,
},
],
Array [
"<PROJECT_ROOT>/node_modules/@babel/plugin-transform-classes/lib/index.js",
Object {
"loose": true,
},
],
"<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
],
"presets": Array [
Expand Down Expand Up @@ -790,7 +796,7 @@ Object {
Array [
"<PROJECT_ROOT>/node_modules/@babel/preset-react/lib/index.js",
Object {
"development": false,
"development": true,
"pragma": "React.createElement",
"runtime": "classic",
"useBuiltIns": true,
Expand All @@ -800,7 +806,7 @@ Object {
}
`;

exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop 1`] = `
exports[`babel-preset-gatsby should specify proper presets and plugins when stage is develop-html 1`] = `
Object {
"plugins": Array [
Array [
Expand Down Expand Up @@ -832,12 +838,6 @@ Object {
"useESModules": true,
},
],
Array [
"<PROJECT_ROOT>/node_modules/@babel/plugin-transform-spread/lib/index.js",
Object {
"loose": false,
},
],
"<PROJECT_ROOT>/node_modules/babel-plugin-dynamic-import-node/lib/index.js",
],
"presets": Array [
Expand Down Expand Up @@ -1047,14 +1047,16 @@ Object {
],
"loose": true,
"modules": false,
"targets": undefined,
"targets": Object {
"node": "current",
},
"useBuiltIns": "usage",
},
],
Array [
"<PROJECT_ROOT>/node_modules/@babel/preset-react/lib/index.js",
Object {
"development": true,
"development": false,
"pragma": "React.createElement",
"runtime": "classic",
"useBuiltIns": true,
Expand Down
12 changes: 11 additions & 1 deletion packages/babel-preset-gatsby/src/__tests__/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,17 @@ import * as pathSerializer from "../utils/path-serializer"
expect.addSnapshotSerializer(pathSerializer)

describe(`babel-preset-gatsby`, () => {
it.each([`build-stage`, `develop`, `build-javascript`, `build-html`])(
let currentEnv
beforeEach(() => {
currentEnv = process.env.BABEL_ENV
process.env.BABEL_ENV = `production`
})

afterEach(() => {
process.env.BABEL_ENV = currentEnv
})

it.each([`develop-html`, `develop`, `build-javascript`, `build-html`])(
`should specify proper presets and plugins when stage is %s`,
stage => {
expect(preset(null, { stage })).toMatchSnapshot()
Expand Down
18 changes: 15 additions & 3 deletions packages/babel-preset-gatsby/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,22 @@ export default function preset(_, options = {}) {
// TODO(v3): Remove process.env.GATSBY_BUILD_STAGE, needs to be passed as an option
const stage = options.stage || process.env.GATSBY_BUILD_STAGE || `test`
const pluginBabelConfig = loadCachedConfig()
let isBrowser
// unused because of cloud builds
// const absoluteRuntimePath = path.dirname(
// require.resolve(`@babel/runtime/package.json`)
// )

if (!targets) {
if (stage === `build-html` || stage === `test`) {
if (
stage === `build-html` ||
stage === `develop-html` ||
stage === `test`
) {
targets = {
node: `current`,
}
} else {
isBrowser = true
targets = pluginBabelConfig.browserslist
}
}
Expand Down Expand Up @@ -114,12 +119,19 @@ export default function preset(_, options = {}) {
// absoluteRuntime: absoluteRuntimePath,
},
],
[
// TODO allow loose mode as an option in v3
isBrowser && [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will class-transform be provided when isBrowser is true? If not, Babel will still throw on super(...args). Before 7.12.11, babel outputs untranspiled super(...args) without any warnings.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will work unless people have a custom browserslist where spread is not needed 🤔. Good call

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider switch to assumptions after Babel 7.13 is released. Ideally what we need is if you enable spread-transform because of your specified targets, do not assume "iterable is array", which what the loose mode of spread-transform did. Here we are unconditionally transpiling ... even if the target already supports it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Didn't know about assumptions yet. That will fix it. In the next major I'll add loose as a parameter so people can configure preset-env so we don't have to add a separate module for spread.

resolve(`@babel/plugin-transform-spread`),
{
loose: false, // Fixes #14848
},
],
isBrowser && [
Copy link

@JLHwung JLHwung Feb 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of transpiling both class and spread unconditionally, consider check if transform-spread is actually required for the given targets:

import { isRequired } from "@babel/helper-compilation-targets";

isRequired("transform-spread", targets)
// returns boolean, whether `transform-spread` is required.
// see https://unpkg.com/browse/@babel/compat-data@7.12.13/data/plugins.json for available feature names

You can plug in transform-classes safely because if a target does not support ... natively, it does not support class either.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL @babel/helper-compilation-targets. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@babel/helper-compilation-targets didn't accept targets how we handle it and pass it on to preset-env so I have to do some more digging and make it more resilient. I've made a ticket in our issue tracker

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@babel/preset-env uses isRequire under the hood: https://github.com/babel/babel/blob/74ed698c2e2140c0ef685b1542ef6ad8f20f0b20/packages/babel-preset-env/src/index.js#L288

It seems to me a bug of @babel/helper-compilation-targets if it didn't accept the targets passed to preset-env. Please file an issue to Babel if you can isolate the bug. Thanks!

resolve(`@babel/plugin-transform-classes`),
{
loose: true,
},
],
IS_TEST && resolve(`babel-plugin-dynamic-import-node`),
stage === `build-javascript` && [
// Remove PropTypes from production build
Expand Down