Clean up babel messages when testing

[Lukazovic]

What does this PR do?

Fixes console warnings when running yarn test. Nowadays it shows multiple messages like:

The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-methods", { "loose": false }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "true" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "false" for @babel/plugin-proposal-class-properties.

It closes #5416

Where should the reviewer start?

.babelrc
package.json

What testing has been done on this PR?

yarn test

How should this be manually tested?

Running: yarn test

Any background context you want to provide?

What are the relevant issues?

#5416

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No.

Should this PR be mentioned in the release notes?

No.

Is this change backwards compatible or is it a breaking change?

No.

[halocline]

Hi @Lukazovic, Thank you for helping out here!

While this does eliminate the warning, I am wondering if you could share any insights as to the root cause of this issue and why this is the proper fix? I'd like to learn more.

From my investigation, this warning seems to have been introduced on Babel's side and has been a bug which has been reported and re-surfaced from time to time.

Additionally, the warning speaks to @babel/preset-env

Though the "loose" option was set to "true" in your @babel/preset-env config, it will not be used ...

Storybook .babelrc uses @babel/preset-env, but I don't see any configurations specifying loose as true.

I'd like to understand any potential side-effects that could be introduced. Any insights you could share would be much appreciated.

[Lukazovic]

Hello @halocline.

Yeah, from my investigation, it looks like this bug is probably caused by @babel/preset-env. But unfortunately, I don't know much more than you do about it.

I can share some issues I found while I was trying to understanding this warning:

• Odd 'loose' mode configuration must be the same... babel/babel#11622
• Babel "loose" option error spamming in console on fresh project nuxt/nuxt#9224

I'd like to understand any potential side-effects that could be introduced

I think we should be good because we have some other configs on storybook /storybook/.babelrc. But I agree we should test it and understand it better.

While this does eliminate the warning, I am wondering if you could share any insights as to the root cause of this issue and why this is the proper fix? I'd like to learn more.

I found a PR that fixed this warning on Nuxt.js, and that's how they solved it:

• fix(babel): loose option for babel class-properties and private-methods nuxt/nuxt#9232

If you find something else, please, let me know. I'd like to learn more about it as well

[halocline]

Hello @halocline.

Yeah, from my investigation, it looks like this bug is probably caused by @babel/preset-env. But unfortunately, I don't know much more than you do about it.

I can share some issues I found while I was trying to understanding this warning:

• Odd 'loose' mode configuration must be the same... babel/babel#11622
• Babel "loose" option error spamming in console on fresh project nuxt/nuxt.js#9224

I'd like to understand any potential side-effects that could be introduced

I think we should be good because we have some other configs on storybook /storybook/.babelrc. But I agree we should test it and understand it better.

While this does eliminate the warning, I am wondering if you could share any insights as to the root cause of this issue and why this is the proper fix? I'd like to learn more.

I found a PR that fixed this warning on Nuxt.js, and that's how they solved it:

• fix(babel): loose option for babel class-properties and private-methods nuxt/nuxt.js#9232

If you find something else, please, let me know. I'd like to learn more about it as well

Thank you for the additional details. I appreciate it. I'd like to do a bit more investigation prior to proceeding. Will pick this back up next week. Thanks again for your help!

[halocline]

Hello @halocline.
Yeah, from my investigation, it looks like this bug is probably caused by @babel/preset-env. But unfortunately, I don't know much more than you do about it.
I can share some issues I found while I was trying to understanding this warning:

• Odd 'loose' mode configuration must be the same... babel/babel#11622
• Babel "loose" option error spamming in console on fresh project nuxt/nuxt.js#9224

I'd like to understand any potential side-effects that could be introduced

I think we should be good because we have some other configs on storybook /storybook/.babelrc. But I agree we should test it and understand it better.

While this does eliminate the warning, I am wondering if you could share any insights as to the root cause of this issue and why this is the proper fix? I'd like to learn more.

I found a PR that fixed this warning on Nuxt.js, and that's how they solved it:

• fix(babel): loose option for babel class-properties and private-methods nuxt/nuxt.js#9232

If you find something else, please, let me know. I'd like to learn more about it as well

Thank you for the additional details. I appreciate it. I'd like to do a bit more investigation prior to proceeding. Will pick this back up next week. Thanks again for your help!

I'd also been looking at where this logic is being applied to make sense of it here but had gotten interrupted and haven't gotten back to it.

[Lukazovic]

Cool, if I find something else I'll add a comment to this PR.

[ericsoderberghp]

Any reason we cannot remove loose: true, from tools/grommet-babel-preset-es2015.js?

[halocline]

Any reason we cannot remove loose: true, from tools/grommet-babel-preset-es2015.js?

So, it looks like we get significant savings in our bundle size when using loose: true. If we switch to loose: false, grommet.min.js is 32% larger.

loose: true ==> grommet.min.js (503 KiB)

loose: false ==> grommet.min.js (662 KiB)

Because of the increase in bundle size and the setting loose: true has been in place 3-4 years without issue, I recommend we:

• leave loose: true in tools/grommet-babel-preset-es2015.js
• modify

  grommet/.babelrc

  Line 5 in 4b1359f

  "@babel/plugin-proposal-class-properties"

  to read ["@babel/plugin-proposal-class-properties", { "loose": true }]

This approach will align the usage of loose across plugins, eliminate babel's warning, and keep bundle size reduced.

[halocline]

Because of the increase in bundle size and the setting loose: true has been in place 3-4 years without issue, I recommend we:

• leave loose: true in tools/grommet-babel-preset-es2015.js
• modify

  grommet/.babelrc

  Line 5 in 4b1359f

  "@babel/plugin-proposal-class-properties"

  
  to read ["@babel/plugin-proposal-class-properties", { "loose": true }]

This approach will align the usage of loose across plugins, eliminate babel's warning, and keep bundle size reduced.

@Lukazovic, would you like to modify this PR to reflect this ☝️ approach? Otherwise, I can open a separate PR. Let me know your preference.

[Lukazovic]

@Lukazovic, would you like to modify this PR to reflect this approach? Otherwise, I can open a separate PR. Let me know your preference.

@halocline I'd like to modify this PR, I'll do it today

[halocline]

@Lukazovic, would you like to modify this PR to reflect this approach? Otherwise, I can open a separate PR. Let me know your preference.

@halocline I'd like to modify this PR, I'll do it today

Awesome. Thank you!

[halocline]

Thank you for collaborating on this with us @Lukazovic! We appreciate your help.

[Lukazovic]

Thank you for collaborating on this with us @Lukazovic! We appreciate your help.

@halocline thank You for helping me out