@commercetools-frontend/mc-scripts 21.7.0 → 21.9.0

package/dist/create-webpack-config-for-production-bc8c1f37.cjs.dev.js

@@ -0,0 +1,469 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _endsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
+var _Number$isInteger = require('@babel/runtime-corejs3/core-js-stable/number/is-integer');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var webpackBundleAnalyzer = require('webpack-bundle-analyzer');
+var CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
+var MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+var TerserPlugin = require('terser-webpack-plugin');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _bindInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/bind');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Object$assign = require('@babel/runtime-corejs3/core-js-stable/object/assign');
+var fs = require('fs');
+var path = require('path');
+var paths = require('./paths-16823f56.cjs.dev.js');
+var vendorsToTranspile = require('./vendors-to-transpile-b51af5d3.cjs.dev.js');
+var createPostcssConfig = require('./create-postcss-config-760e2dc5.cjs.dev.js');
+var hasJsxRuntime = require('./has-jsx-runtime-3d4bb633.cjs.dev.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _endsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_endsWithInstanceProperty);
+var _Number$isInteger__default = /*#__PURE__*/_interopDefault(_Number$isInteger);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var webpack__default = /*#__PURE__*/_interopDefault(webpack);
+var HtmlWebpackPlugin__default = /*#__PURE__*/_interopDefault(HtmlWebpackPlugin);
+var CssMinimizerPlugin__default = /*#__PURE__*/_interopDefault(CssMinimizerPlugin);
+var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefault(MiniCssExtractPlugin);
+var MomentLocalesPlugin__default = /*#__PURE__*/_interopDefault(MomentLocalesPlugin);
+var TerserPlugin__default = /*#__PURE__*/_interopDefault(TerserPlugin);
+var _bindInstanceProperty__default = /*#__PURE__*/_interopDefault(_bindInstanceProperty);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Object$assign__default = /*#__PURE__*/_interopDefault(_Object$assign);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+var FinalStatsWriterPlugin = /*#__PURE__*/function () {
+  // Expected options:
+  // - `outputPath`
+  // - `includeFields`
+  function FinalStatsWriterPlugin(config) {
+    _classCallCheck(this, FinalStatsWriterPlugin);
+
+    this.config = void 0;
+    if (!config) throw new Error('Missing config options');
+    this.config = config;
+  }
+
+  _createClass(FinalStatsWriterPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      // This is the only hook that return the `stats` plugin
+      // with the `time` info. It also contains all the stats that
+      // we would get from the original `emit` hook.
+      // https://webpack.js.org/api/compiler-hooks/#done
+      // https://webpack.js.org/api/plugins/#plugin-types
+      if (compiler.hooks) {
+        var _context;
+
+        compiler.hooks.done.tap('custom-stats-writer-plugin', _bindInstanceProperty__default["default"](_context = this.writeStats).call(_context, this));
+      } else {
+        var _context2;
+
+        // @ts-ignore
+        compiler.plugin('done', _bindInstanceProperty__default["default"](_context2 = this.writeStats).call(_context2, this));
+      }
+    }
+  }, {
+    key: "writeStats",
+    value: function writeStats(stats) {
+      var finalStats = stats.toJson(); // Filter only included fields
+
+      if (this.config.includeFields) {
+        var _context3;
+
+        finalStats = _reduceInstanceProperty__default["default"](_context3 = this.config.includeFields).call(_context3, function (aggregatedStats, key) {
+          return (// eslint-disable-next-line
+            _Object$assign__default["default"]({}, aggregatedStats, _defineProperty({}, key, finalStats[key]))
+          );
+        }, {});
+      }
+
+      try {
+        fs__default["default"].accessSync(this.config.outputPath, fs__default["default"].constants.F_OK);
+        fs__default["default"].writeFileSync(path__default["default"].join(this.config.outputPath, 'stats.json'), _JSON$stringify__default["default"](finalStats, null, 2));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn("[FinalStatsWriterPlugin] The dist folder could not be found at ".concat(this.config.outputPath, ". Check the console for errors during the webpack compilation."));
+      }
+    }
+  }]);
+
+  return FinalStatsWriterPlugin;
+}();
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+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 = {
+  // Allow to disable CSS extraction in case it's not necessary (e.g. for Storybook)
+  enableExtractCss: true,
+  // Allow to disable index.html generation in case it's not necessary (e.g. for Storybook)
+  generateIndexHtml: true,
+  // Some plugins spawn workers to speed up the build. However this can cause trouble on
+  // certain machines local and CI. This flag set to limit or disable any parallelism.
+  // Options:
+  //    `true` to default to the machines number of CPUs
+  //    `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
+};
+var defaultOptions = {
+  entryPoint: paths.paths.entryPoint,
+  sourceFolders: paths.paths.sourceFolders,
+  postcssOptions: {},
+  toggleFlags: defaultToggleFlags
+};
+/**
+ * This is a factory function to create the default webpack config
+ * for a MC Application in `production` mode.
+ * The function requires the file path to the related application
+ * "entry point".
+ */
+
+function createWebpackConfigForProduction() {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var mergedOptions = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), options), {}, {
+    toggleFlags: _objectSpread(_objectSpread({}, defaultToggleFlags), options.toggleFlags)
+  });
+
+  return {
+    // Don't attempt to continue if there are any errors.
+    bail: true,
+    // https://webpack.js.org/concepts/#mode
+    mode: 'production',
+    // We generate sourcemaps in production. This is slow but gives good results.
+    // Sourcemaps are pushed to Google Storage and Sentry.
+    // https://webpack.js.org/configuration/devtool/#devtool
+    devtool: 'source-map',
+    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+    // https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
+    optimization: {
+      minimizer: _filterInstanceProperty__default["default"](_context = [new TerserPlugin__default["default"]({
+        terserOptions: {
+          parse: {
+            // we want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minification steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 2018
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending futher investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2
+          },
+          mangle: {
+            safari10: true
+          },
+          // Added for profiling in devtools
+          keep_classnames: true,
+          keep_fnames: true,
+          output: {
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true
+          }
+        },
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        parallel: mergedOptions.toggleFlags.parallelism
+      }), mergedOptions.toggleFlags.enableExtractCss && new CssMinimizerPlugin__default["default"]()]).call(_context, Boolean),
+      // Keep the runtime chunk separated to enable long term caching
+      runtimeChunk: {
+        name: 'runtime'
+      },
+      moduleIds: 'named',
+      chunkIds: 'deterministic'
+    },
+    resolve: {
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: _mapInstanceProperty__default["default"](_context2 = ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx']).call(_context2, 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.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        querystring: require.resolve('querystring-es3')
+      }
+    },
+    // In production, we only want to load the polyfills and the app code.
+    entry: {
+      app: _filterInstanceProperty__default["default"](_context3 = [require.resolve('@commercetools-frontend/mc-scripts/application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), mergedOptions.entryPoint]).call(_context3, Boolean)
+    },
+    output: {
+      // Generated JS file names (with nested folders).
+      // There will be one main bundle, and one file per asynchronous chunk.
+      filename: '[name].[chunkhash].js',
+      chunkFilename: '[id].[name].[chunkhash].js',
+      // The build folder.
+      path: paths.paths.appBuild,
+      pathinfo: false,
+      // Will be injected on runtime. See `packages/application-shell/src/public-path.js`
+      publicPath: ''
+    },
+    plugins: _filterInstanceProperty__default["default"](_context4 = [// Allows to "assign" custom options to the `webpack` object.
+    // At the moment, this is used to share some props with `postcss.config`.
+    new webpack__default["default"].LoaderOptionsPlugin({
+      options: {
+        sourceFolders: mergedOptions.sourceFolders,
+        context: __dirname
+      }
+    }), // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'production') { ... }.
+    new webpack__default["default"].DefinePlugin({
+      __DEV__: 'false',
+      'process.env': {
+        NODE_ENV: _JSON$stringify__default["default"]('production')
+      }
+    }), // Only keep locales that are available in the Merchant Center.
+    new MomentLocalesPlugin__default["default"]({
+      localesToKeep: momentLocalesToKeep
+    }), // Generate a `stats.json` file containing information and paths to
+    // the assets that webpack created.
+    // This is necessary to programmatically refer to the correct bundle path
+    // in the `index.html`.
+    new FinalStatsWriterPlugin({
+      outputPath: paths.paths.appBuild,
+      includeFields: ['entrypoints', 'assets', 'publicPath', 'time']
+    }), mergedOptions.toggleFlags.generateIndexHtml && new HtmlWebpackPlugin__default["default"]({
+      inject: false,
+      filename: 'index.html.template',
+      template: require.resolve('@commercetools-frontend/mc-html-template/webpack')
+    }), mergedOptions.toggleFlags.enableExtractCss && // Extracts CSS into one CSS file to mimic CSS order in dev
+    new MiniCssExtractPlugin__default["default"]({
+      filename: '[name].[chunkhash].css',
+      chunkFilename: '[id].[name].[chunkhash].css'
+    }), process.env.ANALYZE_BUNDLE === 'true' && new webpackBundleAnalyzer.BundleAnalyzerPlugin({
+      defaultSizes: 'gzip'
+    })]).call(_context4, Boolean),
+    module: {
+      // Makes missing exports an error instead of warning.
+      strictExportPresence: true,
+      rules: _filterInstanceProperty__default["default"](_context5 = [// For svg icons, we want to get them transformed into React components
+      // when we import them.
+      {
+        test: /\.react\.svg$/,
+        use: [{
+          loader: require.resolve('babel-loader'),
+          options: {
+            babelrc: false,
+            presets: [[require.resolve('@commercetools-frontend/babel-preset-mc-app'), {
+              runtime: hasJsxRuntime.hasJsxRuntime() ? 'automatic' : 'classic',
+              disableCoreJs: mergedOptions.toggleFlags.disableCoreJs
+            }]],
+            // 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.
+            cacheDirectory: true,
+            highlightCode: true
+          }
+        }, {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            icon: false,
+            svgoConfig: {
+              plugins: [{
+                // https://github.com/svg/svgo#default-preset
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false
+                  }
+                }
+              }]
+            }
+          }
+        }]
+      }, // For normal svg files (not icons) we should load the file normally
+      // and simply use it as a `<img src/>`.
+      {
+        test: function testForNormalSvgFiles(fileName) {
+          return (// Use this only for plain SVG.
+            // For SVG as React components, see loader above.
+            _endsWithInstanceProperty__default["default"](fileName).call(fileName, '.svg') && !_endsWithInstanceProperty__default["default"](fileName).call(fileName, '.react.svg')
+          );
+        },
+        use: [{
+          loader: require.resolve('svg-url-loader')
+        }]
+      }, {
+        test: /\.png$/,
+        type: 'asset/resource'
+      }, // "postcss" loader applies autoprefixer to our CSS
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader turns CSS into JS modules that inject <style> tags.
+      // In production, we use MiniCSSExtractPlugin to extract that CSS
+      // to a file, but in development "style" loader enables hot editing
+      // of CSS.
+      // By default we support CSS Modules with the extension `.mod.css` and `.module.css`.
+      {
+        test: /\.(mod|module)\.css$/,
+        include: mergedOptions.sourceFolders,
+        use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin__default["default"].loader : require.resolve('style-loader'), {
+          loader: require.resolve('css-loader'),
+          options: {
+            modules: {
+              mode: 'local',
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+              localIdentHashSalt: 'ct'
+            },
+            importLoaders: 1
+          }
+        }, {
+          loader: require.resolve('postcss-loader'),
+          options: {
+            postcssOptions: createPostcssConfig.createPostcssConfig(mergedOptions.postcssOptions)
+          }
+        }]
+      }, {
+        test: function testForNormalCssFiles(fileName) {
+          return (// Use this only for plain CSS.
+            // For css-modules, see loader above.
+            _endsWithInstanceProperty__default["default"](fileName).call(fileName, '.css') && !(_endsWithInstanceProperty__default["default"](fileName).call(fileName, '.mod.css') || _endsWithInstanceProperty__default["default"](fileName).call(fileName, '.module.css'))
+          );
+        },
+        // "postcss" loader applies autoprefixer to our CSS.
+        // "css" loader resolves paths in CSS and adds assets as dependencies.
+        // "MiniCssExtractPlugin" or "style" loader extracts css to one file per css file.
+        oneOf: [{
+          // Use "postcss" for all the included source folders.
+          include: mergedOptions.sourceFolders,
+          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin__default["default"].loader : require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }, {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              postcssOptions: createPostcssConfig.createPostcssConfig(mergedOptions.postcssOptions)
+            }
+          }]
+        }, {
+          // For all other vendor CSS, do not use "postcss" loader.
+          // But still use MiniCssExtractPlugin :)
+          include: /node_modules/,
+          use: [mergedOptions.toggleFlags.enableExtractCss ? MiniCssExtractPlugin__default["default"].loader : require.resolve('style-loader'), {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: {
+                mode: 'icss'
+              },
+              importLoaders: 1
+            }
+          }]
+        }]
+      }, // Fix for react-intl
+      // https://github.com/formatjs/formatjs/issues/143#issuecomment-518774786
+      {
+        test: /\.mjs$/,
+        type: 'javascript/auto',
+        resolve: {
+          // https://webpack.js.org/configuration/module/#resolvefullyspecified
+          fullySpecified: false
+        }
+      }, // Process application JavaScript with Babel.
+      {
+        test: /\.(js|mjs|cjs|jsx|ts|tsx)$/,
+        use: [// This loader parallelizes code compilation, it is optional but
+        // improves compile time on larger projects
+        {
+          loader: require.resolve('thread-loader'),
+          options: _objectSpread({}, _Number$isInteger__default["default"](mergedOptions.toggleFlags.parallelism) ? {
+            workers: mergedOptions.toggleFlags.parallelism
+          } : {})
+        }, {
+          loader: require.resolve('babel-loader'),
+          options: {
+            babelrc: false,
+            configFile: false,
+            compact: false,
+            presets: [[require.resolve('@commercetools-frontend/babel-preset-mc-app'), {
+              runtime: hasJsxRuntime.hasJsxRuntime() ? 'automatic' : 'classic'
+            }]],
+            // 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.
+            cacheDirectory: true,
+            highlightCode: true
+          }
+        }],
+        include: _concatInstanceProperty__default["default"](_context6 = mergedOptions.sourceFolders).call(_context6, vendorsToTranspile.vendorsToTranspile),
+        // Disable require.ensure as it's not a standard language feature.
+        parser: {
+          requireEnsure: false
+        }
+      }, // Allow to import `*.graphql` SDL files.
+      {
+        test: /\.graphql$/,
+        include: mergedOptions.sourceFolders,
+        exclude: /node_modules/,
+        use: [require.resolve('graphql-tag/loader')]
+      }]).call(_context5, Boolean)
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false
+  };
+}
+
+exports.createWebpackConfigForProduction = createWebpackConfigForProduction;