@commercetools-frontend/mc-scripts 0.0.0-FEC-157-preview-releases-20241126230331

package/dist/create-webpack-config-for-development-86baace3.esm.js

@@ -0,0 +1,438 @@
+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 crypto from 'crypto';
+import path from 'path';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import webpack from 'webpack';
+import WebpackBar from 'webpackbar';
+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 { c as createPostcssConfig } from './create-postcss-config-2f709335.esm.js';
+import { h as hasJsxRuntime } from './has-jsx-runtime-e3ecb09b.esm.js';
+import { g as getWepbackCacheGroups } from './optimizations-bf991634.esm.js';
+import { p as paths } from './paths-39f22b8b.esm.js';
+import { v as vendorsToTranspile } from './vendors-to-transpile-7dc84a72.esm.js';
+
+let LocalHtmlWebpackPlugin = /*#__PURE__*/function () {
+  function LocalHtmlWebpackPlugin() {
+    _classCallCheck(this, LocalHtmlWebpackPlugin);
+  }
+  _createClass(LocalHtmlWebpackPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      compiler.hooks.compilation.tap('LocalHtmlWebpackPlugin', compilation => {
+        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('LocalHtmlWebpackPlugin', (data, cb) => {
+          const applicationConfig = processConfig();
+          const 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
+          } : {});
+          data.html = replaceHtmlPlaceholders(data.html, {
+            env: enhancedLocalEnv,
+            headers: {}
+          });
+          cb(null, data);
+        });
+      });
+    }
+  }]);
+  return LocalHtmlWebpackPlugin;
+}();
+
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const 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", "pt-br"];
+const defaultToggleFlags = {
+  generateIndexHtml: true,
+  disableCoreJs: false
+};
+const defaultOptions = {
+  entryPoint: paths.entryPoint,
+  sourceFolders: 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.
+const hasReactRefresh = process.env.FAST_REFRESH === 'true';
+const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
+const 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;
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const mergedOptions = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), options), {}, {
+    toggleFlags: _objectSpread(_objectSpread({}, defaultToggleFlags), options.toggleFlags)
+  });
+  const appDependencies = require(paths.appPackageJson).dependencies;
+  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: {
+      // 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'
+      },
+      splitChunks: {
+        cacheGroups: getWepbackCacheGroups(appDependencies)
+      },
+      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(_context = ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx']).call(_context, ext => `.${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(_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.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: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
+    },
+    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: {
+        sourceFolders: mergedOptions.sourceFolders,
+        context: __dirname
+      }
+    }),
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'development') { ... }.
+    new webpack.DefinePlugin({
+      __DEV__: 'true',
+      'process.env': {
+        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 && new LocalHtmlWebpackPlugin(),
+    // Only keep locales that are available in the Merchant Center.
+    new MomentLocalesPlugin({
+      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
+    hasReactRefresh && new ReactRefreshWebpackPlugin({
+      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() ? '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
+                  }
+                }
+              },
+              // Avoid collisions with ids in other SVGs,
+              // which was causing incorrect masking, gradient directions, etc
+              // this is an ongoing issue with both SVGR and SVGO,
+              // https://github.com/svg/svgo/issues/913#issuecomment-369373572
+              // see SVGR issues:
+              // https://github.com/gregberge/svgr/issues/322
+              // https://github.com/gregberge/svgr/issues/210
+              // see SVGO issues:
+              // https://github.com/svg/svgo/issues/674
+              // https://github.com/svg/svgo/issues/1746
+              //
+              // Initially, a naive counter was implemented based on this github comment:
+              // https://github.com/svg/svgo/issues/1746#issuecomment-1803600573
+              // But while that implementation insured id’s that are unique,
+              // it did not work in cases where the id is both declared and referenced in the same file,
+              // because the refernce gets a separate unique ID (a different number from the counter).
+              //
+              // The current implementation is based on this github comment:
+              // https://github.com/svg/svgo/issues/913#issuecomment-369373572
+              // Generates a hash of the filepath of the svg file, resulting in a prefix which is:
+              // - Short,
+              // - With characters valid for IDs,
+              // - The same within a file,
+              // - And different in different files.
+              {
+                name: 'prefixIds',
+                params: {
+                  delim: '',
+                  prefix: (_, info) => `svg${crypto.createHash('shake256', {
+                    outputLength: 6
+                  }).update(info.path || '').digest('hex')}`
+                }
+              }]
+            }
+          }
+        }]
+      },
+      // 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(fileName).call(fileName, '.svg') && !_endsWithInstanceProperty(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(mergedOptions.postcssOptions)
+          }
+        }]
+      }, {
+        test: function testForNormalCssFiles(fileName) {
+          return (
+            // Use this only for plain CSS.
+            // For css-modules, see loader above.
+            _endsWithInstanceProperty(fileName).call(fileName, '.css') && !(_endsWithInstanceProperty(fileName).call(fileName, '.mod.css') || _endsWithInstanceProperty(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(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
+            }
+          }],
+          // Don't consider CSS imports dead code even if the
+          // containing package claims to have no side effects.
+          // Remove this when webpack adds a warning or an error for this.
+          // See https://github.com/webpack/webpack/issues/6571
+          sideEffects: true
+        }]
+      },
+      // 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() ? 'automatic' : 'classic'
+            }]],
+            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.
+            cacheDirectory: true,
+            highlightCode: true
+          }
+        }],
+        include: _concatInstanceProperty(_context5 = mergedOptions.sourceFolders).call(_context5, 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'
+    }
+  };
+}
+
+export { createWebpackConfigForDevelopment as c };