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

Turn on Babel helpers #5093

Merged
merged 14 commits into from
Sep 25, 2018
Merged

Turn on Babel helpers #5093

merged 14 commits into from
Sep 25, 2018

Conversation

Timer
Copy link
Contributor

@Timer Timer commented Sep 25, 2018

This turns on Babel helpers to reduce bundle size.

Resolves long standing #238 and recently opened #5092.

closes #5092

@Timer
Copy link
Contributor Author

Timer commented Sep 25, 2018

x-ref: babel/babel#5442

@@ -27,6 +17,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

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

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

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

Choose a reason for hiding this comment

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

Copy link
Contributor

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

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.

*/
'use strict';

const validateBoolOption = (name, value, defaultValue) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Copy paste is your friend! Although I don't care

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As in you'd rather it be copypasta instead of a util file? 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

If it's something trivial like this, yeah I don't mind copy pasta.

@@ -10,6 +10,6 @@
const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer({
presets: [require.resolve('babel-preset-react-app')],
presets: [[require.resolve('babel-preset-react-app'), { helpers: true }]],
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't matter for Jest though?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Probably not, how about eject? This is why I'd rather it by on by default, see eject.js.

@@ -234,7 +234,12 @@ module.exports = {
options: {
// @remove-on-eject-begin
Copy link
Contributor

Choose a reason for hiding this comment

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

This is removed on eject. Where do we decide what to write on eject? Seems like we'd lose this. Maybe it means I wasn't right about the app default.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@gaearon
Copy link
Contributor

gaearon commented Sep 25, 2018

If we go ahead we'll need to figure out what to change our standalone JSX instructions to before this hits stable.

Actually it might be sufficient to just disable helpers in /dev and /prod exports, but leave it on in the main one.

@Timer
Copy link
Contributor Author

Timer commented Sep 25, 2018

Hmm, OK. We'll make helpers on by default for apps, helpers off by default for dependencies, and helpers off by default for /dev, /prod.

What about /test?

Copy link
Contributor

@gaearon gaearon left a comment

Choose a reason for hiding this comment

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

Let's make it on by default for app (any env), off by default for node_modules (any env).

But also let's make it off for /dev, /prod, /test entry points which are probably mostly used by people without config (and possibly without commonjs). /test is a funny one but let's treat it like other standalones.

@Timer
Copy link
Contributor Author

Timer commented Sep 25, 2018

Ready for review, I dropped the e2e changes for tersity and will have a follow up PR.

@@ -9,5 +9,5 @@
const create = require('./create');

module.exports = function(api, opts) {
return create(api, opts, 'development');
return create(api, { helpers: false, ...(opts || {}) }, 'development');
Copy link
Contributor

Choose a reason for hiding this comment

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

It's fine to spread undefined. I don't think you need || {}

Copy link
Contributor

Choose a reason for hiding this comment

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

This is object spread though. Is it supported in all envs we target?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

look at that. they thought of everything.

@@ -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

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

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.

@@ -146,6 +146,10 @@ PORT=3001 \
nohup yarn start &>$tmp_server_log &
grep -q 'You can now view' <(tail -f $tmp_server_log)

# We haven't ejected yet which means there's no `babel` key
# in package.json yet
echo '{"presets":["react-app"]}' > .babelrc
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we just put it in our jest integration config or something? Why does it have to be at the root?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I dunno what's best, but during eject we add it to package.json. Will file follow up issue.

Copy link
Contributor

Choose a reason for hiding this comment

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

I just mean that in this case we only need it for integration test itself. So it's unrelated to our app and I'd like it to stay unrelated (if that makes sense)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That makes sense. We'll figure something out.

@Timer Timer merged commit adfb20c into facebook:next Sep 25, 2018
@Timer Timer deleted the feature/enable-helpers branch September 26, 2018 00:53
zmitry pushed a commit to zmitry/create-react-app that referenced this pull request Sep 30, 2018
* Turn on helpers and test importing something with async/await works

* Compiling babel runtime breaks itself

* Add helpers option to babel plugin with defaults

* Make helpers off by default and on in our configuration

* Hit eject and e2e

* meh

* copy'n'paste

* change again

* Turn off helpers by default in /prod, /dev, /test

* oops

* Spread undefined

* Use object assign not object spread

* Put preset in template since it's needed

* Fix e2e tests
@lock lock bot locked and limited conversation to collaborators Jan 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants