fix(plugin-legacy): turn off babel loose mode

[nihalgonsalves]

Description

Fixes #3400, fixes #3076

Babel's loose mode causes some issues with iterators, for example converting sets to arrays, or other spread operations.

Here's an example: loose mode, without loose mode

Loose mode converts [...new Set()] to [].concat(new Set()), which is not the same thing. It does usually generate smaller, perhaps more performant bundles, but could break code in surprising ways. For example in the linked issue, which runs into this problem on this Vue code

I would propose adding this as an opt-in flag if users request it.

Additional context

Discussions: babel/babel#7958, babel/babel#6649

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Shinigami92]

suggestion (idea): Don't know if it's useful in anycase or why we need to set loose mode to false here, but on some places we already often have the possibility to let users decide to override such options 🤔
So we may do something like loose: options.babelTransformOptions?.loose ?? false here, could we?
Maybe there is also a better name than babelTransformOptions

[nihalgonsalves]

Yeah, but perhaps it's better to wait for someone to explicitly request it? Feels like you should use loose mode only in specific situations (i.e. your own code, where you know that you don't need the stricter mode).

But since you don't know what syntax every dependency uses, it's unlikely to be a good idea to transpile your entire bundle through loose mode.

[Shinigami92]

loose mode equals false seems to generate much more output code and if you don't use this [...new Set()] in any way, you are not affected by it but now forced by Vite to live with this more generated output for other stuff 🤔
Also you can workaround it by not using [...new Set()] but [].concat(Array.from(new Set())) + using a polyfill for Array.from

[nihalgonsalves]

I know that it generates a bigger bundle, but this code comes from Vue itself. So that's a pretty common case for Vite users, and not something you can work around like in your own code.

[Shinigami92]

With loose: options.babelTransformOptions?.loose ?? false false would be the new default, nothing against this
But we let users that are not in this specific context decide and prevent regression in any case for them if they want to
It's downwards compatible / non-breaking with an option
And later we may also use it for e.g. let users override any options with using { /*...*/, ...(options.babelTransformOptions ?? {}) }

So all in all, it's just the possibility to not break anything if there are any breaking changes we currently oversee

[Shinigami92]

Maybe it's babelTransformEnvOptions?

[Shinigami92]

@nihalgonsalves Here is a maybe other solution 🤔
#3076 (comment)
So maybe also here my idea about a babelTransformEnvOptions would be nice, cause they just could test this out without our need

[nihalgonsalves]

@Shinigami92 I would still prefer to turn loose mode off by default (due to unexpected issues) and add the configurable options to another PR. That would let some users turn it back on and then change the assumptions to fix whatever is broken, but still keep the defaults sane. Would that be okay?