Skip to content

Turn on Babel helpers #5093

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.

Sign up for GitHub

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

Merged
Timer merged 14 commits into from
Sep 25, 2018
Merged

Turn on Babel helpers #5093

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
775387a
Turn on helpers and test importing something with async/await works
Timer Sep 25, 2018
ca2777f
Compiling babel runtime breaks itself
Timer Sep 25, 2018
b86f9bd
Add helpers option to babel plugin with defaults
Timer Sep 25, 2018
937d786
Make helpers off by default and on in our configuration
Timer Sep 25, 2018
b74852a
Hit eject and e2e
Timer Sep 25, 2018
3cdbbfe
meh
Timer Sep 25, 2018
3dbc5f8
copy'n'paste
Timer Sep 25, 2018
2b06e8b
change again
Timer Sep 25, 2018
8ef839d
Turn off helpers by default in /prod, /dev, /test
Timer Sep 25, 2018
55a605b
oops
Timer Sep 25, 2018
071aa4f
Spread undefined
Timer Sep 25, 2018
82c82f8
Use object assign not object spread
Timer Sep 25, 2018
a404acc
Put preset in template since it's needed
Timer Sep 25, 2018
5bb2ee2
Fix e2e tests
Timer Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/babel-preset-react-app/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ module.exports = function(api, opts, env) {
var isEnvProduction = env === 'production';
var isEnvTest = env === 'test';
var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true);
Copy link
Contributor

@gaearon gaearon Sep 25, 2018

Choose a reason for hiding this comment

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

Wait, shouldn't default be false?

Copy link
Contributor Author

@Timer Timer Sep 25, 2018

Choose a reason for hiding this comment

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

This is the non-dependency version.

Copy link
Contributor

@gaearon gaearon Sep 25, 2018

Choose a reason for hiding this comment

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

Ah it's for app code. Hmm.

Would it break these instructions?

https://reactjs.org/docs/add-react-to-a-website.html#run-jsx-preprocessor

If so I think it should still be off by default.

Copy link
Contributor Author

@Timer Timer Sep 25, 2018

Choose a reason for hiding this comment

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

See https://github.com/facebook/create-react-app/pull/5093/files#diff-e4eb38a3161bed144100754a3e97763dR26

Copy link
Contributor

@gaearon gaearon Sep 25, 2018

Choose a reason for hiding this comment

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

Right but I don't want this to break non-commonjs usage.

Copy link
Contributor

@gaearon gaearon Sep 25, 2018

Choose a reason for hiding this comment

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

Or maybe we should have a separate entry point for "standalone" usage.


if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
throw new Error(
Expand Down Expand Up @@ -113,7 +114,7 @@ module.exports = function(api, opts, env) {
require('@babel/plugin-transform-runtime').default,
{
corejs: false,
helpers: false,
helpers: areHelpersEnabled,
regenerator: true,
// https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
// We should turn this on once the lowest version of Node LTS
Expand Down
15 changes: 14 additions & 1 deletion packages/babel-preset-react-app/dependencies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,18 @@
*/
'use strict';

const validateBoolOption = (name, value, defaultValue) => {
if (typeof value === 'undefined') {
value = defaultValue;
}

if (typeof value !== 'boolean') {
throw new Error(`Preset react-app: '${name}' option must be a boolean.`);
}

return value;
};

module.exports = function(api, opts) {
if (!opts) {
opts = {};
Expand All @@ -21,6 +33,7 @@ module.exports = function(api, opts) {
var isEnvDevelopment = env === 'development';
var isEnvProduction = env === 'production';
var isEnvTest = env === 'test';
var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false);
if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
throw new Error(
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
Expand Down Expand Up @@ -76,7 +89,7 @@ module.exports = function(api, opts) {
require('@babel/plugin-transform-runtime').default,
{
corejs: false,
helpers: false,
helpers: areHelpersEnabled,
regenerator: true,
// https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
// We should turn this on once the lowest version of Node LTS
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-preset-react-app/dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
const create = require('./create');

module.exports = function(api, opts) {
return create(api, opts, 'development');
return create(api, Object.assign({ helpers: false }, opts), 'development');
};
2 changes: 1 addition & 1 deletion packages/babel-preset-react-app/prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
const create = require('./create');

module.exports = function(api, opts) {
return create(api, opts, 'production');
return create(api, Object.assign({ helpers: false }, opts), 'production');
};
2 changes: 1 addition & 1 deletion packages/babel-preset-react-app/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
const create = require('./create');

module.exports = function(api, opts) {
return create(api, opts, 'test');
return create(api, Object.assign({ helpers: false }, opts), 'test');
};
5 changes: 4 additions & 1 deletion packages/react-error-overlay/webpack.config.iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,15 @@ module.exports = {
// Dependencies
{
test: /\.js$/,
exclude: /@babel\/runtime/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
compact: false,
presets: ['babel-preset-react-app/dependencies'],
presets: [
['babel-preset-react-app/dependencies', { helpers: true }],
],
},
},
},
Expand Down
6 changes: 5 additions & 1 deletion packages/react-scripts/config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ module.exports = {
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.js$/,
exclude: /@babel\/runtime/,
use: [
// This loader parallelizes code compilation, it is optional but
// improves compile time on larger projects
Expand All @@ -290,7 +291,10 @@ module.exports = {
babelrc: false,
compact: false,
presets: [
require.resolve('babel-preset-react-app/dependencies'),
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// Don't waste time on Gzipping the cache
Expand Down
6 changes: 5 additions & 1 deletion packages/react-scripts/config/webpack.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ module.exports = {
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.js$/,
exclude: /@babel\/runtime/,
use: [
// This loader parallelizes code compilation, it is optional but
// improves compile time on larger projects
Expand All @@ -324,7 +325,10 @@ module.exports = {
babelrc: false,
compact: false,
presets: [
require.resolve('babel-preset-react-app/dependencies'),
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// Save disk space when time isn't as important
Expand Down
4 changes: 0 additions & 4 deletions tasks/e2e-kitchensink.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,6 @@ PORT=3001 \
nohup yarn start &>$tmp_server_log &
grep -q 'You can now view' <(tail -f $tmp_server_log)

# Before running Mocha, specify that it should use our preset
# TODO: this is very hacky and we should find some other solution
echo '{"presets":["react-app"]}' > .babelrc
Copy link
Contributor

@gaearon gaearon Sep 25, 2018

Choose a reason for hiding this comment

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

Nice find

Copy link
Contributor Author

@Timer Timer Sep 25, 2018

Choose a reason for hiding this comment

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

Bad find, this broke the tests.


# Test "development" environment
E2E_URL="http://localhost:3001" \
REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
Expand Down