@commercetools-frontend/mc-scripts 21.7.0 → 21.9.0

package/{build/config/create-webpack-config-for-development.js → dist/create-webpack-config-for-development-d93ae4b2.esm.js}

@@ -1,35 +1,76 @@
-"use strict";
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import _endsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/ends-with';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import path from 'path';
+import webpack from 'webpack';
+import WebpackBar from 'webpackbar';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
+import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
+import _Object$assign from '@babel/runtime-corejs3/core-js-stable/object/assign';
+import { processConfig } from '@commercetools-frontend/application-config';
+import { replaceHtmlPlaceholders } from '@commercetools-frontend/mc-html-template';
+import { p as paths } from './paths-ed23d5a1.esm.js';
+import { v as vendorsToTranspile } from './vendors-to-transpile-68e03526.esm.js';
+import { c as createPostcssConfig } from './create-postcss-config-04243dea.esm.js';
+import { h as hasJsxRuntime } from './has-jsx-runtime-8314226e.esm.js';
 
-/* eslint-disable prettier/prettier */
-const path = require('path');
+var LocalHtmlWebpackPlugin = /*#__PURE__*/function () {
+  function LocalHtmlWebpackPlugin() {
+    _classCallCheck(this, LocalHtmlWebpackPlugin);
+  }
 
-const webpack = require('webpack');
+  _createClass(LocalHtmlWebpackPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      compiler.hooks.compilation.tap('LocalHtmlWebpackPlugin', function (compilation) {
+        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('LocalHtmlWebpackPlugin', function (data, cb) {
+          var applicationConfig = processConfig();
 
-const WebpackBar = require('webpackbar');
+          var enhancedLocalEnv = _Object$assign({}, applicationConfig.env, // Now that the app config is defined as a `env.json`, when we start the FE app
+          // to point to the local backend API by passing the `MC_API_URL` env does not
+          // work anymore). To make it work again, we can override the `env.json` config
+          // with the env variable before injecting the values into the index.html.
+          // NOTE: this is only necessary for development.
+          process.env.MC_API_URL ? {
+            mcApiUrl: process.env.MC_API_URL
+          } : {});
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const paths = require('./paths');
+          data.html = replaceHtmlPlaceholders(data.html, {
+            env: enhancedLocalEnv,
+            headers: {}
+          });
+          cb(null, data);
+        });
+      });
+    }
+  }]);
 
-const vendorsToTranspile = require('./vendors-to-transpile');
+  return LocalHtmlWebpackPlugin;
+}();
 
-const createPostcssConfig = require('./create-postcss-config');
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-const hasJsxRuntime = require('./has-jsx-runtime');
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-const defaultToggleFlags = {
-  // Allow to disable index.html generation in case it's not necessary (e.g. for Storybook)
+var momentLocalesToKeep = ["de", "de-at", "de-ch", "en-au", "en-ca", "en-gb", "en-ie", "en-in", "en-nz", "en-sg", "es", "es-do", "es-mx", "fr", "ja", "zh-cn"];
+var defaultToggleFlags = {
   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 = {
+var defaultOptions = {
   entryPoint: paths.entryPoint,
   sourceFolders: paths.sourceFolders,
   postcssOptions: {},
@@ -37,32 +78,28 @@ const defaultOptions = {
 }; // Whether or not `react-refresh` is enabled, `react-refresh` is not 100% stable at this time,
 // which is why it's disabled by default.
 
-const hasReactRefresh = process.env.FAST_REFRESH === 'true';
+var hasReactRefresh = process.env.FAST_REFRESH === 'true';
 
-const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
+var webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
 
-const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
+var reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
 /**
  * This is a factory function to create the default webpack config
  * for a MC Application in `development` mode.
  * The function requires the file path to the related application
  * "entry point".
- *
- * @param {Object} options - Options to configure the Webpack config
- * @param {string} options.entryPoint - The absolute path to the application entry point file.
- * @param {string[]} options.sourceFolders[] - A list of folders where Webpack should look for source files.
- * @param {Object} options.postcssOptions - Options related to Postcss plugins. See `createPostcssConfig` function.
- * @param {Object} options.toggleFlags - Options to enable/disable certain functionalities of the Webpack config.
  */
 
 
-module.exports = function createWebpackConfigForDevelopment(options = {}) {
-  const mergedOptions = { ...defaultOptions,
-    ...options,
-    toggleFlags: { ...defaultToggleFlags,
-      ...options.toggleFlags
-    }
-  };
+function createWebpackConfigForDevelopment() {
+  var _context, _context2, _context3, _context4, _context5;
+
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var mergedOptions = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), options), {}, {
+    toggleFlags: _objectSpread(_objectSpread({}, defaultToggleFlags), options.toggleFlags)
+  });
+
   return {
     // https://webpack.js.org/concepts/#mode
     mode: 'development',
@@ -96,7 +133,9 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      extensions: _mapInstanceProperty(_context = ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx']).call(_context, function (ext) {
+        return ".".concat(ext);
+      }),
       // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
       // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
       // however now it's not the case anymore.
@@ -107,7 +146,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       }
     },
     entry: {
-      app: [require.resolve('./application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), // When using the experimental `react-refresh` integration,
+      app: _filterInstanceProperty(_context2 = [require.resolve('@commercetools-frontend/mc-scripts/application-runtime'), !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 && // Include an alternative client for WebpackDevServer. A client's job is to
       // connect to WebpackDevServer by a socket and get notified about changes.
@@ -124,7 +163,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       mergedOptions.entryPoint // We include the app code last so that if there is a runtime error during
       // initialization, it doesn't blow up the WebpackDevServer client, and
       // changing JS code would still trigger a refresh.
-      ].filter(Boolean)
+      ]).call(_context2, Boolean)
     },
     output: {
       // This does not produce a real file. It's just the virtual path that is
@@ -140,9 +179,11 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // This is the URL that app is served from. We use "/" in development.
       publicPath: '/',
       // Point sourcemap entries to the original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
+      devtoolModuleFilenameTemplate: function devtoolModuleFilenameTemplate(info) {
+        return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+      }
     },
-    plugins: [new WebpackBar(), // Allows to "assign" custom options to the `webpack` object.
+    plugins: _filterInstanceProperty(_context3 = [new WebpackBar(), // Allows to "assign" custom options to the `webpack` object.
     // At the moment, this is used to share some props with `postcss.config`.
     new webpack.LoaderOptionsPlugin({
       options: {
@@ -154,21 +195,15 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
     new webpack.DefinePlugin({
       __DEV__: 'true',
       'process.env': {
-        NODE_ENV: JSON.stringify('development')
+        NODE_ENV: _JSON$stringify('development')
       }
     }), mergedOptions.toggleFlags.generateIndexHtml && new HtmlWebpackPlugin({
       inject: false,
       filename: paths.appIndexHtml,
       template: require.resolve('@commercetools-frontend/mc-html-template/webpack')
-    }), mergedOptions.toggleFlags.generateIndexHtml && (() => {
-      // eslint-disable-next-line global-require
-      const LocalHtmlWebpackPlugin = require('../webpack-plugins/local-html-webpack-plugin');
-
-      return new LocalHtmlWebpackPlugin();
-    })(), // Strip all locales except `en`, `de`
-    // (`en` is built into Moment and can't be removed).
+    }), mergedOptions.toggleFlags.generateIndexHtml && new LocalHtmlWebpackPlugin(), // Only keep locales that are available in the Merchant Center.
     new MomentLocalesPlugin({
-      localesToKeep: ['de', 'es', 'fr', 'zh-cn', 'ja']
+      localesToKeep: momentLocalesToKeep
     }), // This is necessary to emit hot updates (CSS and Fast Refresh):
     new webpack.HotModuleReplacementPlugin(), // Experimental hot reloading for React .
     // https://github.com/facebook/react/tree/master/packages/react-refresh
@@ -182,7 +217,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         // the bundled socket handling logic can be eliminated.
         sockIntegration: false
       }
-    })].filter(Boolean),
+    })]).call(_context3, Boolean),
     module: {
       // Makes missing exports an error instead of warning.
       strictExportPresence: true,
@@ -227,7 +262,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalSvgFiles(fileName) {
           return (// Use this only for plain SVG.
             // For SVG as React components, see loader above.
-            fileName.endsWith('.svg') && !fileName.endsWith('.react.svg')
+            _endsWithInstanceProperty(fileName).call(fileName, '.svg') && !_endsWithInstanceProperty(fileName).call(fileName, '.react.svg')
           );
         },
         use: [{
@@ -262,7 +297,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
+            _endsWithInstanceProperty(fileName).call(fileName, '.css') && !(_endsWithInstanceProperty(fileName).call(fileName, '.mod.css') || _endsWithInstanceProperty(fileName).call(fileName, '.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.
@@ -327,7 +362,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             presets: [[require.resolve('@commercetools-frontend/babel-preset-mc-app'), {
               runtime: hasJsxRuntime() ? 'automatic' : 'classic'
             }]],
-            plugins: [hasReactRefresh && require.resolve('react-refresh/babel')].filter(Boolean),
+            plugins: _filterInstanceProperty(_context4 = [hasReactRefresh && require.resolve('react-refresh/babel')]).call(_context4, Boolean),
             // This is a feature of `babel-loader` for webpack (not Babel itself).
             // It enables caching results in ./node_modules/.cache/babel-loader/
             // directory for faster rebuilds.
@@ -335,7 +370,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             highlightCode: true
           }
         }],
-        include: mergedOptions.sourceFolders.concat(vendorsToTranspile),
+        include: _concatInstanceProperty(_context5 = mergedOptions.sourceFolders).call(_context5, vendorsToTranspile),
         // Disable require.ensure as it's not a standard language feature.
         parser: {
           requireEnsure: false
@@ -355,4 +390,6 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       level: 'none'
     }
   };
-};
+}
+
+export { createWebpackConfigForDevelopment as c };