chore(react): use babel runtime on es builds

[salvoravida]

chore(react): use babel runtime on es builds

Hi guys!

This PR adds @babel/runtime on es builds. -> less 60/100k on your bundle.js depended on how many components are used.

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: b02bb9d

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61771b99b6b7ea00075ecac6

😎 Browse the preview: https://deploy-preview-9833--carbon-react-next.netlify.app

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: b02bb9d

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61771b99b6ea0500083d04de

😎 Browse the preview: https://deploy-preview-9833--carbon-components-react.netlify.app/

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: b02bb9d

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61771b99b626b90007ac8821

😎 Browse the preview: https://deploy-preview-9833--carbon-elements.netlify.app

[salvoravida]

I have read the DCO document and I hereby sign the DCO.

[salvoravida]

recheck

[salvoravida]

DCO Assistant Lite bot: Thanks for your submission! We ask that you sign our Developer Certificate of Origin before we can accept your contribution. You can sign the DCO by adding a comment below using this text:

I have read the DCO document and I hereby sign the DCO.

You can retrigger this bot by commenting recheck in this Pull Request

I have read the DCO document and I hereby sign the DCO.

[salvoravida]

recheck

[joshblack]

@salvoravida Thanks for doing this! I think we'll also need to include @babel/runtime as a dependency, potentially? 👀

[salvoravida]

@salvoravida Thanks for doing this! I think we'll also need to include @babel/runtime as a dependency, potentially? 👀

It is already included by babel. not needed.

[joshblack]

@salvoravida I think it will need to be included based on: https://babeljs.io/docs/en/babel-plugin-transform-runtime#technical-details

Not everyone will be using babel directly, e.g. some could be using Rollup or esbuild so we can't transitively depend don't this through @babel/core or similar dependencies.

Let me know if I'm misunderstanding, I think the number one thing was just making sure that if a file gets transpiled to import @babel/runtime that the dependency is included and we don't depend on it transitively through other babel dependencies 👍

[salvoravida]

@salvoravida I think it will need to be included based on: https://babeljs.io/docs/en/babel-plugin-transform-runtime#technical-details

Not everyone will be using babel directly, e.g. some could be using Rollup or esbuild so we can't transitively depend don't this through @babel/core or similar dependencies.

Let me know if I'm misunderstanding, I think the number one thing was just making sure that if a file gets transpiled to import @babel/runtime that the dependency is included and we don't depend on it transitively through other babel dependencies 👍

Yes, I have added "@babel/runtime": "^7.14.6", as dependencies (is the one already downloaded by other dep, so it will not be duplicated)

TL;DR @babel/runtime share all the ES5 polyfill without duplication for each file!

[tay1orjones]

Sorry - actually needs a yarn to update the lockfile. I'll pull this down and do it.

[tay1orjones]

Done 👍 LGTM if status checks pass

[joshblack]

@salvoravida just wanted to ask, could this be something that works for CommonJS builds as well? I noticed that this one was only targeting ESM 👀

[salvoravida]

@salvoravida just wanted to ask, could this be something that works for CommonJS builds as well? I noticed that this one was only targeting ESM 👀

sure! done!