Enable array spread and destructuring through recommended Babel polyfills

What does this MR do?

Adds a polyfill for the Symbol class and Array.from() as recommended by babel. Some babel transforms (array spread, array destructuring, for..of, etc) rely on these features behind the scenes and will break in some browsers when they are not available.

The Airbnb style guide mandates the use of some of these methods, so I think it's a good idea to have them available:

• https://github.com/airbnb/javascript#functions--spread-vs-apply
• https://github.com/airbnb/javascript#es6-array-spreads
• https://github.com/airbnb/javascript#destructuring--array

Are there points in the code the reviewer needs to double check?

All tests should pass. I added an example of array destructuring within diff.js which will fail without the polyfill. There are other examples already in our codebase which won't work in IE, but for one reason or another do not cause any test failures. This should fix those as well.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• [ ] API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #25188 (closed), #24922 (closed)

added 1 commit

• 016b48df - add polyfill for Array.from to enable ES spread operator

Compare with previous version

changed title from Enable array destructuring through Symbol polyfill to Enable array spread and destructuring through recommended Babel polyfills

marked the task Changelog entry added, if necessary as completed

mentioned in commit dbbf6827

added 1 commit

• dbbf6827 - add CHANGELOG.md entry for !10120 (merged)

Compare with previous version

@mikegreiling Does this work with astral symbols? Array.from('🖐🏿'); // ["🖐", "🏿"] See https://github.com/mathiasbynens/Array.from/issues/47

checking out and trying now

@MadLittleMods I don't know, please test it out and let me know the results.

If it does not, then https://github.com/zloirock/core-js would be the best place to look for an answer.

@MadLittleMods actually I just tested this out myself. It appears to work:

console.log(Array.from('🖐🏿'));

this produced ['🖐', '🏿'] in the console

@mikegreiling I assume the polyfill only overrides if it doesn't have support. The native version in Chrome works beautifully but I am trying to test in IE11 where there is no support, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility. I am having more issues than normal trying to get local network stuff working https://gitlab.com/gitlab-org/gitlab-ce/issues/27729, net::ERR_CONTENT_LENGTH_MISMATCH etc

@mikegreiling Things still aren't running smooth on the local network but seems to work in IE11

When this gets merged, we can get rid of spread_string - I created an issue to track this https://gitlab.com/gitlab-org/gitlab-ce/issues/29794

mentioned in issue #29794 (closed)

mentioned in commit 324fb743

added 3 commits

• 327e655a - add polyfill for Array.from to enable ES spread operator
• 324fb743 - add CHANGELOG.md entry for !10120 (merged)
• a324948d - ensure lineNumbers method always returns an array with two integers

Compare with previous version

assigned to @alfredo1

@alfredo1 could you review/merge?

marked the task All builds are passing as completed

approved this merge request