feat(babel-preset-mc-app): add ability to disable core-js (#2261)

.changeset/long-wolves-bake.md

@@ -0,0 +1,7 @@
+---
+"@commercetools-frontend/mc-scripts": minor
+---
+
+Adds the ability to explicitly disable core-js for `mc-scripts` and the webpack configs
+
+Some environments or build targets might not require core-js. In order to opt-out of it you can specify a `disableCoreJs` option.

.changeset/many-doors-fold.md

@@ -0,0 +1,7 @@
+---
+"@commercetools-frontend/babel-preset-mc-app": minor
+---
+
+Adds the ability to explicitly disable core-js for `babel-preset-mc-app`
+
+Some environments or build targets might not require core-js. In order to opt-out of it you can specify a `disableCoreJs` option.

packages/babel-preset-mc-app/index.js

@@ -5,11 +5,15 @@ const defaultOptions = {
   // Usually when bundling packages we want to keep the prop types
   // but when building the final application we can remove them.
   keepPropTypes: false,
-  disableLooseMode: false,
   // plugin-proposal-class-properties, plugin-proposal-private-methods,
   // plugin-proposal-private-property-in-object have a loose option which
   // needs to be synced. At times, for instance for better debuggability
   // the loose option can be disabled at the cost of lowered performance.
+  disableLooseMode: false,
+  // Some environemnts do not require `core-js` and can hence disable
+  // it explicitely. This will disable `core-js` for `preset-env` and the
+  // `plugin-transform-runtime`.
+  disableCoreJs: false,
 };
 
 /* eslint-disable global-require */
@@ -55,7 +59,9 @@ module.exports = function getBabePresetConfigForMcApp(api, opts = {}) {
           targets: {
             browsers: ['last 2 versions'],
           },
-          corejs: { version: 3, proposals: true },
+          ...(options.disableCoreJs
+            ? {}
+            : { corejs: { version: 3, proposals: true } }),
           // `entry` transforms `@babel/polyfill` into individual requires for
           // the targeted browsers. This is safer than `usage` which performs
           // static code analysis to determine what's required.
@@ -143,7 +149,7 @@ module.exports = function getBabePresetConfigForMcApp(api, opts = {}) {
         {
           // corejs messes with jest@27 in tests, due to some
           // Promise/Date related polyfills it provides.
-          corejs: !isEnvTest && 3,
+          corejs: options.disableCoreJs ? false : 3,
           // To be able to use `runtime` in Rollup babel plugin
           helpers: true,
           regenerator: true,

packages/mc-scripts/src/config/create-webpack-config-for-development.js

@@ -13,6 +13,10 @@ const hasJsxRuntime = require('./has-jsx-runtime');
 const defaultToggleFlags = {
   // Allow to disable index.html generation in case it's not necessary (e.g. for Storybook)
   generateIndexHtml: true,
+  // Some environemnts do not require `core-js` and can hence disable
+  // it explicitely. This will disable `core-js` for `preset-env` and the
+  // `plugin-transform-runtime`.
+  disableCoreJs: false,
 };
 const defaultOptions = {
   distPath: paths.distPath,
@@ -99,7 +103,8 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
     entry: {
       app: [
         require.resolve('./application-runtime'),
-        require.resolve('core-js/stable'),
+        !mergedOptions.toggleFlags.disableCoreJs &&
+          require.resolve('core-js/stable'),
         // When using the experimental `react-refresh` integration,
         // the webpack plugin takes care of injecting the dev client for us.
         !hasReactRefresh &&
@@ -216,6 +221,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
                     ),
                     {
                       runtime: hasJsxRuntime() ? 'automatic' : 'classic',
+                      disableCoreJs: mergedOptions.toggleFlags.disableCoreJs,
                     },
                   ],
                 ],

packages/mc-scripts/src/config/create-webpack-config-for-production.js

@@ -25,6 +25,10 @@ const defaultToggleFlags = {
   //    `false` to disable any paralelism
   //    `int` for a specific number of CPUs
   parallelism: true,
+  // Some environemnts do not require `core-js` and can hence disable
+  // it explicitely. This will disable `core-js` for `preset-env` and the
+  // `plugin-transform-runtime`.
+  disableCoreJs: false,
 };
 const defaultOptions = {
   distPath: paths.distPath,
@@ -141,7 +145,8 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
     entry: {
       app: [
         require.resolve('./application-runtime'),
-        require.resolve('core-js/stable'),
+        !mergedOptions.toggleFlags.disableCoreJs &&
+          require.resolve('core-js/stable'),
         mergedOptions.entryPoint,
       ],
     },
@@ -233,6 +238,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
                     ),
                     {
                       runtime: hasJsxRuntime() ? 'automatic' : 'classic',
+                      disableCoreJs: mergedOptions.toggleFlags.disableCoreJs,
                     },
                   ],
                 ],