Use Babel and ES6 in docs JS files

[NotWoods]

Fixes #30818

Updates the assets/js path inside of site so that the code is passed through Babel, using the root Babel RC file.

Additionally adds a ESLint config in the assets folder to enable a higher ecma version, but only for doc files.

---

I didn't pass extra_js scripts through Babel, since the equivalent extra_css scripts in the Examples folder don't get processed. I can add this if desired.

Preview: https://deploy-preview-31607--twbs-bootstrap.netlify.app/

TODO:

• Revisit if we need babel after all
• Array.from instead of Array.prototype.slice.call
• Look into inheriting from root .eslintrc.json

[XhmikosR]

Thanks for the PR! I'm going to have a closer look in the next days, but from a quick look I notice you don't use imports. Also please don't change any listing configuration files.

…

On Sun, Sep 6, 2020, 08:03 Tiger Oakes ***@***.***> wrote: @NotWoods <https://github.com/NotWoods> requested review from @twbs/js-review on: #31607 <#31607> Use Babel and ES6 in documentation as a code owner. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#31607 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNJNWXXD73FWMDE3AOLSEMJZRANCNFSM4Q33762A> .

[NotWoods]

I didn't realize adding imports was one of the goals, I'll take another look and see how Hugo's bundler works. I didn't mean to change the root eslint file but the subfile is nessecary.

[XhmikosR]

babel should only run for our files and not all files

[XhmikosR]

Can you revert the optional chaining changes and revert the .eslintrc.json change? We don't use optional chaining anywhere else right now and I'd like to be consistent.

[NotWoods]

If I remove the eslint file, the linter will complain about any ES6 syntax (i.e. const). It's set up to only affect files in the docs folder.

I'll revert the optional chains.

[XhmikosR]

NVM about the comment regarding the ESLint changes. Your changes are good since we have an upper eslintrc.json in site folder because the examples still use ES5.

[XhmikosR]

@regisphilibert: how does this implementation look good to you? Is there any other way to achieve the same result without the temp file?

Also, thanks @NotWoods for sticking with us, every thing to improve things is welcome :)

[XhmikosR]

@Johann-S what do you think about this?

My concerns are:

1. it slows down the build a lot, but I suppose it's bearable
2. we don't use imports

I wonder if we could use esbuild later which should be a lot faster.

[Johann-S]

It seems ok to me, but yes we can import our source code that's possible too, but it'll produce a bigger js file and we won't use the Bootstrap CDN

[XhmikosR]

We don't use a CDN for our docs :)

[mdo]

Still worth finishing off @XhmikosR?

[XhmikosR]

I'll need to rebase the branch since it has conflicts.

That being said, it's the wise thing to make things consistent with code. The only downside I see is that this slows down the build, hence why I've left the PR hanging.

But I'll take another stab at it in the next days.

[GeoSot]

I think we can use NodeList.prototype.forEach() in place of Array.from

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#browser_compatibility

[GeoSot]

/CC @XhmikosR any opinion over this?

I think we can use NodeList.prototype.forEach() in place of Array.from

I think it's the last thing in order to merge

[mdo]

@GeoSot Want to wait for that change, or merge this and make it in another PR?

[GeoSot]

@mdo Better merge it . It is too minor to keep us down