@commercetools-frontend/mc-scripts 21.7.0 → 21.9.0

package/dist/create-webpack-config-for-development-76fdab59.cjs.prod.js

@@ -0,0 +1,419 @@
+'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 _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+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 _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var path = require('path');
+var webpack = require('webpack');
+var WebpackBar = require('webpackbar');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+var ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _Object$assign = require('@babel/runtime-corejs3/core-js-stable/object/assign');
+var applicationConfig = require('@commercetools-frontend/application-config');
+var mcHtmlTemplate = require('@commercetools-frontend/mc-html-template');
+var paths = require('./paths-76b66e74.cjs.prod.js');
+var vendorsToTranspile = require('./vendors-to-transpile-367e0ba8.cjs.prod.js');
+var createPostcssConfig = require('./create-postcss-config-ddc3abee.cjs.prod.js');
+var hasJsxRuntime = require('./has-jsx-runtime-0b03b72e.cjs.prod.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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _endsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_endsWithInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var path__default = /*#__PURE__*/_interopDefault(path);
+var webpack__default = /*#__PURE__*/_interopDefault(webpack);
+var WebpackBar__default = /*#__PURE__*/_interopDefault(WebpackBar);
+var HtmlWebpackPlugin__default = /*#__PURE__*/_interopDefault(HtmlWebpackPlugin);
+var MomentLocalesPlugin__default = /*#__PURE__*/_interopDefault(MomentLocalesPlugin);
+var ReactRefreshWebpackPlugin__default = /*#__PURE__*/_interopDefault(ReactRefreshWebpackPlugin);
+var _Object$assign__default = /*#__PURE__*/_interopDefault(_Object$assign);
+
+var LocalHtmlWebpackPlugin = /*#__PURE__*/function () {
+  function LocalHtmlWebpackPlugin() {
+    _classCallCheck(this, LocalHtmlWebpackPlugin);
+  }
+
+  _createClass(LocalHtmlWebpackPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      compiler.hooks.compilation.tap('LocalHtmlWebpackPlugin', function (compilation) {
+        HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeEmit.tapAsync('LocalHtmlWebpackPlugin', function (data, cb) {
+          var applicationConfig$1 = applicationConfig.processConfig();
+
+          var enhancedLocalEnv = _Object$assign__default["default"]({}, applicationConfig$1.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
+          } : {});
+
+          data.html = mcHtmlTemplate.replaceHtmlPlaceholders(data.html, {
+            env: enhancedLocalEnv,
+            headers: {}
+          });
+          cb(null, data);
+        });
+      });
+    }
+  }]);
+
+  return LocalHtmlWebpackPlugin;
+}();
+
+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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source))).call(_context7, 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 = {
+  generateIndexHtml: true,
+  disableCoreJs: false
+};
+var defaultOptions = {
+  entryPoint: paths.paths.entryPoint,
+  sourceFolders: paths.paths.sourceFolders,
+  postcssOptions: {},
+  toggleFlags: defaultToggleFlags
+}; // Whether or not `react-refresh` is enabled, `react-refresh` is not 100% stable at this time,
+// which is why it's disabled by default.
+
+var hasReactRefresh = process.env.FAST_REFRESH === 'true';
+
+var webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
+
+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".
+ */
+
+
+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',
+    // Using `cheap-module-source-map` doesn't provide the original source when
+    // errors happen but it is still recommended as using `eval-source-map` leads
+    // to CORS errors when an error happens
+    // https://webpack.js.org/configuration/devtool/#devtool
+    // https://reactjs.org/docs/cross-origin-errors.html#source-maps
+    devtool: 'cheap-module-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: {
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      splitChunks: {
+        chunks: 'all'
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      // https://github.com/facebook/create-react-app/issues/5358
+      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"](_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.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        url: require.resolve('url/'),
+        querystring: require.resolve('querystring-es3')
+      }
+    },
+    entry: {
+      app: _filterInstanceProperty__default["default"](_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.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      //
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      webpackDevClientEntry, // Finally, this is your app's code
+      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.
+      ]).call(_context2, Boolean)
+    },
+    output: {
+      // This does not produce a real file. It's just the virtual path that is
+      // served by WebpackDevServer in development. This is the JS bundle
+      // containing code from all our entry points, and the Webpack runtime.
+      filename: '[name].js',
+      // There are also additional JS chunk files when using code splitting.
+      chunkFilename: '[name].chunk.js',
+      // The build folder.
+      path: paths.paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: true,
+      // 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: function devtoolModuleFilenameTemplate(info) {
+        return path__default["default"].resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+      }
+    },
+    plugins: _filterInstanceProperty__default["default"](_context3 = [new WebpackBar__default["default"](), // 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 === 'development') { ... }.
+    new webpack__default["default"].DefinePlugin({
+      __DEV__: 'true',
+      'process.env': {
+        NODE_ENV: _JSON$stringify__default["default"]('development')
+      }
+    }), mergedOptions.toggleFlags.generateIndexHtml && new HtmlWebpackPlugin__default["default"]({
+      inject: false,
+      filename: paths.paths.appIndexHtml,
+      template: require.resolve('@commercetools-frontend/mc-html-template/webpack')
+    }), mergedOptions.toggleFlags.generateIndexHtml && new LocalHtmlWebpackPlugin(), // Only keep locales that are available in the Merchant Center.
+    new MomentLocalesPlugin__default["default"]({
+      localesToKeep: momentLocalesToKeep
+    }), // This is necessary to emit hot updates (CSS and Fast Refresh):
+    new webpack__default["default"].HotModuleReplacementPlugin(), // Experimental hot reloading for React .
+    // https://github.com/facebook/react/tree/master/packages/react-refresh
+    hasReactRefresh && new ReactRefreshWebpackPlugin__default["default"]({
+      overlay: {
+        entry: webpackDevClientEntry,
+        // The expected exports are slightly different from what the overlay exports,
+        // so an interop is included here to enable feedback on module-level errors.
+        module: reactRefreshOverlayEntry,
+        // Since we ship a custom dev client and overlay integration,
+        // the bundled socket handling logic can be eliminated.
+        sockIntegration: false
+      }
+    })]).call(_context3, Boolean),
+    module: {
+      // Makes missing exports an error instead of warning.
+      strictExportPresence: true,
+      rules: [// 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.
+      {
+        test: /\.(mod|module)\.css$/,
+        include: mergedOptions.sourceFolders,
+        use: [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.
+        // "style" loader turns CSS into JS modules that inject <style> tags.
+        oneOf: [{
+          // Use "postcss" for all the included source folders.
+          include: mergedOptions.sourceFolders,
+          use: [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.
+          include: /node_modules/,
+          use: [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 JS 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: {
+            poolTimeout: Infinity // keep workers alive for more effective watch mode
+
+          }
+        }, {
+          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'
+            }]],
+            plugins: _filterInstanceProperty__default["default"](_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.
+            cacheDirectory: true,
+            highlightCode: true
+          }
+        }],
+        include: _concatInstanceProperty__default["default"](_context5 = mergedOptions.sourceFolders).call(_context5, 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,
+        use: [require.resolve('graphql-tag/loader')]
+      }]
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+    // For dev server
+    infrastructureLogging: {
+      level: 'none'
+    }
+  };
+}
+
+exports.createWebpackConfigForDevelopment = createWebpackConfigForDevelopment;