@shopgate/webpack 7.29.9 → 7.30.0-alpha.11

package/lib/getAppSettings.js

@@ -1,9 +1,13 @@
 const importFresh = require('import-fresh');
 
+/**
+ * @typedef {import('../../../themes/theme-ios11/config/app.json')} AppSettings
+ */
+
 /**
  * Returns the app settings from the remote project.
  * @param {string} themePath The path to the theme.
- * @return {Object} The app settings.
+ * @return {AppSettings} The app settings.
  */
 module.exports = function getAppSettings(themePath) {
   try {

package/lib/getDevConfig.js

@@ -1,6 +1,16 @@
+/**
+ * @typedef {Object} DevConfig
+ * @property {string} ip The IP address.
+ * @property {number} port The port number.
+ * @property {number} apiPort The API port number.
+ * @property {number} hmrPort The HMR port number.
+ * @property {number} remotePort The remote port number.
+ * @property {string} sourceMap The source map type.
+ */
+
 /**
  * Returns the development configuration.
- * @return {Object} The development configuration.
+ * @return {DevConfig} The development configuration.
  */
 module.exports = function getDevConfig() {
   const defaultConfig = {
@@ -9,7 +19,7 @@ module.exports = function getDevConfig() {
     apiPort: 9666,
     hmrPort: 3000,
     remotePort: 8000,
-    sourceMap: 'cheap-module-eval-source-map',
+    sourceMap: 'eval-cheap-module-source-map',
   };
 
   try {
@@ -29,7 +39,12 @@ module.exports = function getDevConfig() {
       apiPort,
       hmrPort,
       remotePort,
-      sourceMap: sourceMapsType,
+      // The source map type 'cheap-module-eval-source-map' is renamed to
+      // 'eval-cheap-module-source-map' in webpack 5. Since it is the default type created by
+      // the platform-sdk, we need to map it here.
+      sourceMap: sourceMapsType === 'cheap-module-eval-source-map'
+        ? 'eval-cheap-module-source-map'
+        : defaultConfig.sourceMap,
     };
   } catch (e) {
     return defaultConfig;

package/lib/helpers.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Resolves the absolute path to a given package, taking into account different development
+ * and deployment contexts (theme, monorepo, or globally hoisted dependencies).
+ *
+ * The resolution strategy tries multiple locations in order:
+ *  1. The theme’s local `node_modules` (used in deployment or external developer mode).
+ *  2. The global monorepo root’s `node_modules` (used in monorepo development mode).
+ *  3. The current working directory’s `node_modules`.
+ *  4. Falls back to Node's `require.resolve()` if no path exists, allowing Yarn workspaces
+ *     or hoisting to handle resolution.
+ *
+ * @param {string} pkgName - The name of the package to resolve.
+ * @param {string} [extraSubPath=''] - Optional subpath inside the package.
+ * @param {string} [themePath=process.cwd()] - Base path of the theme. Defaults to the current
+ * working directory.
+ * @returns {string} The resolved absolute path to the requested package or subpath.
+ *
+ */
+const resolveForAliasPackage = (pkgName, extraSubPath = '', themePath = process.cwd()) => {
+  const tryPaths = [
+    path.resolve(themePath, 'node_modules', pkgName + extraSubPath),
+    path.resolve(themePath, '..', '..', 'node_modules', pkgName + extraSubPath),
+    path.resolve(process.cwd(), 'node_modules', pkgName + extraSubPath),
+  ];
+
+  const hit = tryPaths.find(candidate => fs.existsSync(candidate)) || null;
+
+  if (!hit) {
+    // fallback to Node's own algorithm (which will follow Yarn workspaces / hoisting)
+    return require.resolve(pkgName + extraSubPath);
+  }
+
+  return hit;
+};
+
+module.exports = {
+  resolveForAliasPackage,
+};

package/lib/i18n.js

@@ -1,62 +1,162 @@
 const path = require('path');
-const fsEx = require('fs-extra');
-const MessageFormat = require('messageformat');
-const Messages = require('messageformat/messages');
+const fs = require('fs');
 
 const rootDirectory = path.resolve(__dirname, '..');
 const localesDirectory = path.resolve(rootDirectory, 'locales');
 
 /**
- * The i18n class.
+ * Reads and parses a JSON file with friendly error handling.
+ *
+ * @private
+ * @param {string} file - Absolute path to the JSON file.
+ * @returns {Object} Parsed JSON object.
+ * @throws {Error} When the file cannot be read or parsed.
+ */
+function readJSON(file) {
+  try {
+    return JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch (err) {
+    throw new Error(`Failed to read locale file "${file}": ${err.message}`);
+  }
+}
+
+/**
+ * Flattens nested objects to dot-separated key paths.
+ *
+ * Example:
+ * ```js
+ * flatten({ a: { b: 'c' } }) // -> { 'a.b': 'c' }
+ * ```
+ *
+ * @private
+ * @param {Object} obj - The source object.
+ * @param {string} [prefix=''] - The prefix for the keys (used for recursion).
+ * @param {Object} [out={}] - The accumulator for flattened entries.
+ * @returns {Object} A flattened key-value map.
+ */
+function flatten(obj, prefix = '', out = {}) {
+  const result = out;
+
+  for (const [key, value] of Object.entries(obj)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      flatten(value, fullKey, result);
+    } else {
+      result[fullKey] = String(value);
+    }
+  }
+  return result;
+}
+
+/**
+ * Replaces placeholders of the form `{var}` in a message string.
+ *
+ * Example:
+ * ```js
+ * format("Hello {name}", { name: "World" }); // -> "Hello World"
+ * ```
+ *
+ * @private
+ * @param {string} template - Message string with `{var}` placeholders.
+ * @param {Record<string, string|number>} [values={}] - Replacement values.
+ * @returns {string} Formatted string.
+ */
+function format(template, values = {}) {
+  return template.replace(/\{(\w+)\}/g, (_, k) =>
+    (values[k] != null ? String(values[k]) : `{${k}}`));
+}
+
+/**
+ * Provides localized message lookup and interpolation for a given locale.
+ *
+ * @class
  */
 class I18n {
   /**
-   * @param {string} [locale='en'] The desired locale for the module.
+   * Creates a new I18n instance.
+   *
+   * @param {string} [locale='en'] - The locale to load (e.g. "en", "de").
    */
   constructor(locale = 'en') {
     const locales = [locale];
+    if (!locales.includes('en')) locales.unshift('en');
 
-    if (!locales.includes('en')) {
-      locales.unshift('en');
-    }
-
-    const messageSet = {};
+    let merged = {};
     locales.forEach((entry) => {
-      const localeFilePath = path.resolve(rootDirectory, localesDirectory, `${entry}.json`);
-      messageSet[entry] = fsEx.readJSONSync(localeFilePath);
+      const localeFilePath = path.join(localesDirectory, `${entry}.json`);
+      if (fs.existsSync(localeFilePath)) {
+        const data = flatten(readJSON(localeFilePath));
+        merged = {
+          ...merged,
+          ...data,
+        };
+      }
     });
 
-    const messageFormat = new MessageFormat(locales);
-    this.messages = new Messages(messageFormat.compile(messageSet));
-    this.messages.locale = locale;
+    /**
+     * The flattened dictionary of messages for this locale.
+     * @type {Record<string, string>}
+     */
+    this.messages = merged;
+
+    /**
+     * The current locale string.
+     * @type {string}
+     */
+    this.locale = locale;
   }
 
   /**
-   * @param {Array} keyPath The key path of the translation.
-   * @param {Object} data Additional data for the translation.
-   * @returns {string|Array}
+   * Returns the translated message for the given key path.
+   *
+   * @param {string[]|string} keyPath - Key path or array of keys representing the translation key.
+   * @param {Record<string, string|number>} [data={}] - Optional interpolation data.
+   * @returns {string} The translated and formatted message, or the key if not found.
    */
   get(keyPath, data = {}) {
-    if (this.messages.hasObject(keyPath)) {
-      return keyPath;
+    const id = Array.isArray(keyPath) ? keyPath.join('.') : keyPath;
+    const message = this.messages[id];
+    if (message == null) {
+      return Array.isArray(keyPath) ? keyPath[keyPath.length - 1] : keyPath;
     }
-
-    return this.messages.get(keyPath, data);
+    return format(message, data);
   }
 }
 
 let i18n;
 
+/**
+ * @typedef {function(key: string|string[], data?: Object): string} TranslatorFn
+ */
+
+/**
+ * Initializes or retrieves the singleton I18n instance and
+ * returns a translation function scoped to the given module.
+ *
+ * This function automatically derives the message namespace from the
+ * relative module path, so keys can be referenced without repeating the prefix.
+ *
+ * Example:
+ * ```js
+ * const i18n = require('./lib/i18n');
+ * const t = i18n(__filename);
+ * console.log(t('HELLO', { name: 'World' }));
+ * ```
+ *
+ * @param {string} modulePath - Absolute path to the module requesting translations
+ *   (usually `__filename`).
+ * @returns {TranslatorFn} Translator function.
+ */
 module.exports = (modulePath) => {
   if (!i18n) {
     i18n = new I18n('en');
   }
 
-  const moduleNamespace = path.relative(rootDirectory, modulePath)
+  const moduleNamespace = path
+    .relative(rootDirectory, modulePath)
     .replace(/(^(lib|src)+[/\\])|(\.js$)/ig, '')
-    // Normalize OS specific path separators to forward slashes to be able to access translation
-    // keys inside the translation JSON file.
-    .split(path.sep).join('/');
+    .split(path.sep)
+    .join('/');
 
   return (key, data) => {
     const keyPath = [moduleNamespace];
@@ -69,14 +169,12 @@ module.exports = (modulePath) => {
       throw new Error(`'${key}' is not a valid message key`);
     }
 
-    const message = i18n.get(keyPath, data);
-
-    if (message === keyPath) {
-      return key;
-    }
-
-    return message;
+    return i18n.get(keyPath, data);
   };
 };
 
+/**
+ * Exposes the I18n class for testing or advanced usage.
+ * @type {typeof I18n}
+ */
 module.exports.I18n = I18n;

package/lib/polyfill.js

@@ -1,49 +1 @@
 window.SGEvent = {}
-
-// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
-if (!String.prototype.padEnd) {
-  String.prototype.padEnd = function padEnd(targetLength, padString) {
-    // Floor if number or convert non-number to 0
-    targetLength = targetLength >> 0
-    padString = String(padString || ' ')
-    if (this.length > targetLength) {
-      return String(this)
-    } else {
-      targetLength = targetLength - this.length
-
-      if (targetLength > padString.length) {
-        // Append to original to ensure we are longer than needed.
-        padString += padString.repeat(targetLength / padString.length)
-      }
-
-      return String(this) + padString.slice(0, targetLength)
-    }
-  }
-}
-
-if (!Array.prototype.flat) {
-  Array.prototype.flat = function(depth) {
-    var flattened = [];
-
-    function flatten(arr, currentDepth) {
-      for (var i = 0; i < arr.length; i++) {
-        if (Array.isArray(arr[i]) && currentDepth < depth) {
-          flatten(arr[i], currentDepth + 1);
-        } else {
-          flattened.push(arr[i]);
-        }
-      }
-    }
-
-    flatten(this, 0);
-
-    return flattened;
-  };
-}
-
-if (!Array.prototype.flatMap) {
-  Array.prototype.flatMap = function(callback, thisArg) {
-    return this.map(callback, thisArg).flat();
-  };
-}

package/lib/variables.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 const ENV_KEY_DEVELOPMENT = 'development';
 
+/** @type {"development" | "production"} */
 exports.ENV = process.env.NODE_ENV || ENV_KEY_DEVELOPMENT;
 exports.isDev = exports.ENV === ENV_KEY_DEVELOPMENT;
 exports.PUBLIC_FOLDER = 'public';

package/locales/en.json

@@ -11,7 +11,7 @@
     "STRINGS_COULD_NOT_BE_CREATED": "Strings could not be created",
     "INDEXING_TYPE": "Indexing {type}...",
     "INDEXED_TYPE": "... {type} indexed.",
-    "NO_EXTENSIONS_FOUND_FOR_TYPE": "No extensions found for ''{type}''",
+    "NO_EXTENSIONS_FOUND_FOR_TYPE": "No extensions found for \"{type}\"",
     "TYPE_PORTALS": "portals",
     "TYPE_REDUCERS": "reducers",
     "TYPE_SUBSCRIBERS": "subscribers",

package/package.json

@@ -1,29 +1,31 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.29.9",
+  "version": "7.30.0-alpha.11",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "ajv": "^6.10.2",
-    "babel-loader": "8.4.1",
-    "chalk": "^2.4.2",
-    "color": "^3.1.2",
-    "compression-webpack-plugin": "^3.0.0",
-    "css-loader": "1.0.1",
-    "file-loader": "4.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "import-fresh": "3.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
+    "ajv": "^8.17.1",
+    "babel-loader": "^9.2.1",
+    "chalk": "^4.1.2",
+    "color": "^4.2.3",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-loader": "^6.11.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "html-webpack-plugin": "^5.6.4",
+    "import-fresh": "^3.3.1",
     "intl": "1.2.5",
-    "lodash": "^4.17.4",
-    "messageformat": "^2.3.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.9.4",
     "progress-bar-webpack-plugin": "^2.1.0",
-    "script-ext-html-webpack-plugin": "^2.1.5",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.47.0",
-    "webpack-cli": "4.10.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "react-refresh": "^0.18.0",
+    "style-loader": "3.3.4",
+    "terser-webpack-plugin": "^5.3.14",
+    "webpack": "^5.102.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "workbox-webpack-plugin": "6.5.4"
   },
   "devDependencies": {
     "rxjs": "~5.5.12",

package/plugins/ShopgateIndexerPlugin.js

@@ -76,7 +76,6 @@ function readConfig(options) {
   const exports = [exportsStart]; // Holds the export strings.
 
   if (type === TYPE_PORTALS || type === TYPE_WIDGETS || type === TYPE_WIDGETS_V2) {
-    imports.push('import { hot } from \'react-hot-loader/root\';');
     imports.push('import { lazy } from \'react\';');
     imports.push('');
   }
@@ -107,11 +106,7 @@ function readConfig(options) {
       return;
     }
 
-    if (isPortalsOrWidgets) {
-      exports.push(`  '${id}': hot(${variableName}),`);
-    } else {
-      exports.push(`  '${id}': ${variableName},`);
-    }
+    exports.push(`  '${id}': ${variableName},`);
   });
 
   if (importsEnd) {

package/templates/default.ejs

@@ -10,8 +10,14 @@
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
-  <script src="<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
-  <% debugger; %>
+  <% if (htmlWebpackPlugin.files && htmlWebpackPlugin.files.css) { %>
+    <% htmlWebpackPlugin.files.css.forEach(function(css) { %>
+      <link rel="stylesheet" href="<%= css %>">
+    <% }) %>
+  <% } %>
+  <% const scripts = htmlWebpackPlugin.files.js; %>
+  <% const vendor = scripts.find(s => s.includes('vendor')); %>
+  <% if (vendor) { %><script src="<%= vendor %>"></script><% } %>
   <script>
     var SGConnect = {
       appId: "<%- htmlWebpackPlugin.options.appId %>"
@@ -25,7 +31,9 @@
 <body>
   <div id="root"></div>
   <div id="portals"></div>
-  <script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>"></script>
+  <% for (const js of scripts) { if (js !== vendor) { %>
+    <script src="<%= js %>"></script>
+  <% }} %>
 </body>
 
 </html>

package/webpack.config.js

@@ -1,13 +1,15 @@
-/* eslint-disable camelcase */
 const path = require('path');
 const webpack = require('webpack');
 const chalk = require('chalk');
 const TerserPlugin = require('terser-webpack-plugin');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin');
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const { GenerateSW } = require('workbox-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const rxPaths = require('rxjs/_esm5/path-mapping');
 const ShopgateIndexerPlugin = require('./plugins/ShopgateIndexerPlugin');
 const ShopgateThemeConfigValidatorPlugin = require('./plugins/ShopgateThemeConfigValidatorPlugin');
@@ -19,6 +21,7 @@ const getThemeConfig = require('./lib/getThemeConfig');
 const getThemeLanguage = require('./lib/getThemeLanguage');
 const getDevConfig = require('./lib/getDevConfig');
 const i18n = require('./lib/i18n');
+const { resolveForAliasPackage } = require('./lib/helpers');
 const getExtensionsNodeModulesPaths = require('./lib/getExtensionsNodeModulesPaths');
 
 const themePath = process.cwd();
@@ -26,44 +29,86 @@ const appConfig = getAppSettings(themePath);
 const themeConfig = getThemeConfig(themePath, appConfig);
 const isoLang = convertLanguageToISO(appConfig.language);
 const { sourceMap, ip, apiPort } = getDevConfig();
+const themeLanguage = getThemeLanguage(themePath, appConfig.language);
 const t = i18n(__filename);
 
 const devtool = isDev ? sourceMap : (process.env.SOURCE_MAPS || false);
 const fileSuffix = devtool ? '.sm' : '';
+const addBundleAnalyzer = !!process.env.BUNDLE_ANALYZER;
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 const config = {
   mode: ENV,
+  target: ['web', 'browserslist'],
   entry: {
-    app: [
-      ...(!isDev ? [
-        path.resolve(__dirname, 'lib', 'offline.js'),
-      ] : []),
-      path.resolve(__dirname, 'lib', 'polyfill.js'),
-      path.resolve(themePath, 'index.jsx'),
-    ],
-    common: [
+    app: {
+      import: [
+        ...(!isDev ? [
+          path.resolve(__dirname, 'lib', 'offline.js'),
+        ] : []),
+        path.resolve(__dirname, 'lib', 'polyfill.js'),
+        path.resolve(themePath, 'index.jsx'),
+      ],
+      dependOn: 'vendor',
+    },
+    vendor: [
+      'glamor',
       'intl',
       `intl/locale-data/jsonp/${isoLang}`,
       'react',
       'react-dom',
-      'glamor',
       'react-redux',
       'reselect',
     ],
   },
   output: {
-    filename: !isDev ? `[name].[hash]${fileSuffix}.js` : `[name]${fileSuffix}.js`,
+    filename: !isDev ? `[name].[contenthash]${fileSuffix}.js` : `[name]${fileSuffix}.js`,
     chunkFilename: `[name].[chunkhash]${fileSuffix}.js`,
     path: path.resolve(themePath, PUBLIC_FOLDER),
     publicPath: isDev ? '/' : (process.env.publicPath || './'),
   },
   resolve: {
     extensions: ['.json', '.js', '.jsx', '.mjs'],
+    /**
+     * Aliases for module resolution. They guarantee that whenever one of the bundled modules
+     * uses in import to one of the packages, it will always resolve to the version of the core.
+     */
     alias: {
       ...rxPaths(),
-      'react-dom': '@hot-loader/react-dom',
+
+      // Packages from common module
+      react: resolveForAliasPackage('react'),
+      'react-dom': resolveForAliasPackage('react-dom'),
+      'react-redux': resolveForAliasPackage('react-redux'),
+      reselect: resolveForAliasPackage('reselect'),
+      glamor: resolveForAliasPackage('glamor'),
+      intl: resolveForAliasPackage('intl'),
+      'intl/locale-data/jsonp': resolveForAliasPackage('intl', '/locale-data/jsonp'),
+
+      // Additional packages that are sometimes used in devDependencies of extensions
+      'react-helmet': resolveForAliasPackage('react-helmet'),
+      'css-spring': resolveForAliasPackage('css-spring'),
+      'react-transition-group': resolveForAliasPackage('react-transition-group'),
+      '@virtuous': resolveForAliasPackage('@virtuous'),
+      lodash: resolveForAliasPackage('lodash'),
+      'prop-types': resolveForAliasPackage('prop-types'),
+
+      // Internal Shopgate packages
+      '@shopgate/engage': resolveForAliasPackage('@shopgate/engage'),
+      '@shopgate/pwa-common': resolveForAliasPackage('@shopgate/pwa-common'),
+      '@shopgate/pwa-common-commerce': resolveForAliasPackage('@shopgate/pwa-common-commerce'),
+      '@shopgate/pwa-core': resolveForAliasPackage('@shopgate/pwa-core'),
+      '@shopgate/pwa-tracking': resolveForAliasPackage('@shopgate/pwa-tracking'),
+      '@shopgate/pwa-ui-ios': resolveForAliasPackage('@shopgate/pwa-ui-ios'),
+      '@shopgate/pwa-ui-material': resolveForAliasPackage('@shopgate/pwa-ui-material'),
+      '@shopgate/pwa-ui-shared': resolveForAliasPackage('@shopgate/pwa-ui-shared'),
+      '@shopgate/pwa-webcheckout-shopify': resolveForAliasPackage('@shopgate/pwa-webcheckout-shopify'),
+      '@shopgate/tracking-core': resolveForAliasPackage('@shopgate/tracking-core'),
     },
     modules: [
+      'node_modules',
       path.resolve(themePath, 'widgets'),
       path.resolve(themePath, 'node_modules'),
       path.resolve(themePath, '..', '..', 'node_modules'),
@@ -73,23 +118,12 @@ const config = {
   },
   plugins: [
     new ShopgateThemeConfigValidatorPlugin(),
+
+    // Create mapping files inside the theme extensions folder the enable access to code that's
+    // provided by extensions via extension-config.json
     new ShopgateIndexerPlugin(),
-    /**
-     * Workaround to enable latest swiper version (11.2.1) with webpack.
-     * The utils.mjs file in swiper/shared/utils.mjs is not compatible with webpack due to use of
-     * optional chaining.
-     *
-     * Processing the module with babel-loader doesn't work, since transpilation of some array
-     * operations break the module logic inside the browser.
-     *
-     * As a workaround we replace the file with a local patched version.
-     * Alternative approaches e.g. via patch-package didn't work as expected due to issues in
-     * release process.
-     */
-    new webpack.NormalModuleReplacementPlugin(
-      /swiper[/\\]shared[/\\]utils\.mjs$/,
-      path.resolve(__dirname, 'patches', 'swiper', 'shared', 'utils.mjs')
-    ),
+
+    // Inject environment variables so that they are available within the bundled code
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(ENV),
@@ -98,10 +132,9 @@ const config = {
         THEME_CONFIG: JSON.stringify(themeConfig),
         THEME: JSON.stringify(process.env.theme),
         THEME_PATH: JSON.stringify(themePath),
-        // @deprecated Replaced by LOCALE and LOCALE_FILE - kept for now for theme compatibility.
-        LANG: JSON.stringify(isoLang),
         LOCALE: JSON.stringify(isoLang),
-        LOCALE_FILE: JSON.stringify(getThemeLanguage(themePath, appConfig.language)),
+        LOCALE_FILE: JSON.stringify(themeLanguage),
+        LOCALE_FILE_LOWER_CASE: JSON.stringify(themeLanguage.toLowerCase()),
         IP: JSON.stringify(ip),
         PORT: JSON.stringify(apiPort),
       },
@@ -115,9 +148,8 @@ const config = {
         },
       },
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.HashedModuleIdsPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
+
+    // Plugin to minify the HTML output fo the default.ejs template
     new HTMLWebpackPlugin({
       title: appConfig.shopName || process.env.theme,
       filename: path.resolve(themePath, PUBLIC_FOLDER, 'index.html'),
@@ -136,11 +168,8 @@ const config = {
         minifyCSS: true,
       } : false,
     }),
-    new ScriptExtHtmlWebpackPlugin({
-      sync: ['app', 'common'],
-      prefetch: /\.js$/,
-      defaultAttribute: 'async',
-    }),
+
+    // Progress bar that shows build progress in the console
     new ProgressBarWebpackPlugin({
       format: `  ${t('WEBPACK_PROGRESS', {
         bar: chalk.blue(':bar'),
@@ -150,9 +179,17 @@ const config = {
       })}`,
       clear: false,
     }),
+
+    // Bundle analyzer plugin to visualize size of webpack output files
+    ...(isDev && addBundleAnalyzer ? [
+      new BundleAnalyzerPlugin(),
+    ] : []),
+    ...(isDev ? [new ReactRefreshWebpackPlugin({
+      overlay: false,
+    })] : []),
     ...(!isDev ? [
       new CompressionWebpackPlugin({
-        filename: '[path].gz[query]',
+        filename: '[path][base].gz[query]',
         algorithm: 'gzip',
         test: /\.js$|\.css$/,
         minRatio: 1,
@@ -162,46 +199,82 @@ const config = {
         clientsClaim: true,
         skipWaiting: true,
       }),
+      // Extract CSS into separate minified files on production builds
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash].css',
+        chunkFilename: '[name].[contenthash].css',
+      }),
+      new CssMinimizerPlugin(),
     ] : []),
   ],
   module: {
     rules: [
       {
         test: /\.(png|jpe?g|gif|svg)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: '[name].[contenthash][ext][query]',
+        },
       },
       {
         test: /\.css$/,
-        use: [
+        // Bundle CSS on development, extract it into separate files on production
+        use: isDev ? [
           'style-loader',
           'css-loader',
+        ] : [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
         ],
       },
       {
         test: /\.mjs$/,
         type: 'javascript/auto',
       },
+      // Special treatment for PWA Extension Kit to ensure compatibility with current Babel setup
+      // https://github.com/shopgate-professional-services/pwa-extension-kit
+      {
+        test: /\.js$/,
+        include: /node_modules\/@shopgate-ps\/pwa-extension-kit/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', { modules: 'commonjs' }],
+              '@babel/preset-react',
+            ],
+          },
+        },
+      },
       {
         test: /\.(js|jsx)$/,
-        exclude: new RegExp(`node_modules\\b(?!${path.sep}@shopgate|${path.sep}react-leaflet|${path.sep}@react-leaflet)\\b.*`),
+        exclude: new RegExp(`node_modules\\b(?!\\${path.sep}@shopgate)\\b.*`),
         use: [
           {
             loader: 'babel-loader',
             options: {
               configFile: path.resolve(themePath, 'babel.config.js'),
               cacheDirectory: path.resolve(themePath, '..', '..', '.cache-loader'),
+              plugins: [isDev && require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
         ],
       },
+      {
+        test: /\.js$/,
+        include: /@babel\/runtime[\\/]+helpers[\\/]esm/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
     ],
   },
   devtool,
   stats: isDev ? 'normal' : 'errors-only',
+  ignoreWarnings: [
+    // Disable warning about named imports from JSON files. It's covered by our linter rules.
+    /from default-exporting module \(only default export is available soon\)/,
+  ],
   performance: {
     hints: isDev ? false : 'warning',
   },
@@ -242,33 +315,18 @@ const config = {
     } : undefined,
   },
   optimization: {
+    emitOnErrors: false,
     usedExports: true,
     sideEffects: true,
-    namedModules: true,
-    namedChunks: true,
+    moduleIds: 'deterministic',
+    chunkIds: 'deterministic',
     nodeEnv: ENV,
     removeAvailableModules: true,
-    splitChunks: {
-      cacheGroups: {
-        commons: {
-          test: /node_modules/,
-          name: 'common',
-          chunks: 'all',
-          minChunks: 2,
-        },
-      },
-    },
     minimizer: [
       new TerserPlugin({
-        parallel: true,
         extractComments: false,
         terserOptions: {
           ecma: 5,
-          keep_fnames: false,
-          mangle: true,
-          safari10: false,
-          toplevel: false,
-          warnings: false,
           output: {
             comments: false,
           },
@@ -286,4 +344,4 @@ const config = {
 };
 
 module.exports = config;
-/* eslint-enable camelcase */
+

package/patches/swiper/shared/utils.mjs

@@ -1,347 +0,0 @@
-/* eslint-disable import/extensions, require-jsdoc, no-void, no-param-reassign,
-  prefer-destructuring, no-underscore-dangle, consistent-return, no-mixed-operators,
-  eslint-comments/no-unlimited-disable, prefer-rest-params, max-len */
-/**
- * Replacement of a sub-module of the Swiper library.
- * Contains some refactored code inside the elementIsChildOfSlot function to remove optional
- * chaining which causes issues with webpack.
- */
-import { a as getWindow, g as getDocument } from 'swiper/shared/ssr-window.esm.mjs';
-
-function classesToTokens(classes) {
-  if (classes === void 0) {
-    classes = '';
-  }
-  return classes.trim().split(' ').filter(c => !!c.trim());
-}
-
-function deleteProps(obj) {
-  const object = obj;
-  Object.keys(object).forEach((key) => {
-    try {
-      object[key] = null;
-    } catch (e) {
-      // no getter for object
-    }
-    try {
-      delete object[key];
-    } catch (e) {
-      // something got wrong
-    }
-  });
-}
-function nextTick(callback, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
-  return setTimeout(callback, delay);
-}
-function now() {
-  return Date.now();
-}
-function getComputedStyle(el) {
-  const window = getWindow();
-  let style;
-  if (window.getComputedStyle) {
-    style = window.getComputedStyle(el, null);
-  }
-  if (!style && el.currentStyle) {
-    style = el.currentStyle;
-  }
-  if (!style) {
-    style = el.style;
-  }
-  return style;
-}
-function getTranslate(el, axis) {
-  if (axis === void 0) {
-    axis = 'x';
-  }
-  const window = getWindow();
-  let matrix;
-  let curTransform;
-  let transformMatrix;
-  const curStyle = getComputedStyle(el);
-  if (window.WebKitCSSMatrix) {
-    curTransform = curStyle.transform || curStyle.webkitTransform;
-    if (curTransform.split(',').length > 6) {
-      curTransform = curTransform.split(', ').map(a => a.replace(',', '.')).join(', ');
-    }
-    // Some old versions of Webkit choke when 'none' is passed; pass
-    // empty string instead in this case
-    transformMatrix = new window.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform);
-  } else {
-    transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,');
-    matrix = transformMatrix.toString().split(',');
-  }
-  if (axis === 'x') {
-    // Latest Chrome and webkits Fix
-    if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41;
-    // Crazy IE10 Matrix
-    else if (matrix.length === 16) curTransform = parseFloat(matrix[12]);
-    // Normal Browsers
-    else curTransform = parseFloat(matrix[4]);
-  }
-  if (axis === 'y') {
-    // Latest Chrome and webkits Fix
-    if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42;
-    // Crazy IE10 Matrix
-    else if (matrix.length === 16) curTransform = parseFloat(matrix[13]);
-    // Normal Browsers
-    else curTransform = parseFloat(matrix[5]);
-  }
-  return curTransform || 0;
-}
-function isObject(o) {
-  return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
-}
-function isNode(node) {
-  if (typeof window !== 'undefined' && typeof window.HTMLElement !== 'undefined') {
-    return node instanceof HTMLElement;
-  }
-  return node && (node.nodeType === 1 || node.nodeType === 11);
-}
-function extend() {
-  const to = Object(arguments.length <= 0 ? undefined : arguments[0]);
-  const noExtend = ['__proto__', 'constructor', 'prototype'];
-  for (let i = 1; i < arguments.length; i += 1) {
-    const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];
-    if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {
-      const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
-      for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
-        const nextKey = keysArray[nextIndex];
-        const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
-        if (desc !== undefined && desc.enumerable) {
-          if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
-            if (nextSource[nextKey].__swiper__) {
-              to[nextKey] = nextSource[nextKey];
-            } else {
-              extend(to[nextKey], nextSource[nextKey]);
-            }
-          } else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
-            to[nextKey] = {};
-            if (nextSource[nextKey].__swiper__) {
-              to[nextKey] = nextSource[nextKey];
-            } else {
-              extend(to[nextKey], nextSource[nextKey]);
-            }
-          } else {
-            to[nextKey] = nextSource[nextKey];
-          }
-        }
-      }
-    }
-  }
-  return to;
-}
-function setCSSProperty(el, varName, varValue) {
-  el.style.setProperty(varName, varValue);
-}
-function animateCSSModeScroll(_ref) {
-  const {
-    swiper,
-    targetPosition,
-    side,
-  } = _ref;
-  const window = getWindow();
-  const startPosition = -swiper.translate;
-  let startTime = null;
-  let time;
-  const duration = swiper.params.speed;
-  swiper.wrapperEl.style.scrollSnapType = 'none';
-  window.cancelAnimationFrame(swiper.cssModeFrameID);
-  const dir = targetPosition > startPosition ? 'next' : 'prev';
-  const isOutOfBound = (current, target) => dir === 'next' && current >= target || dir === 'prev' && current <= target;
-  const animate = () => {
-    time = new Date().getTime();
-    if (startTime === null) {
-      startTime = time;
-    }
-    const progress = Math.max(Math.min((time - startTime) / duration, 1), 0);
-    const easeProgress = 0.5 - Math.cos(progress * Math.PI) / 2;
-    let currentPosition = startPosition + easeProgress * (targetPosition - startPosition);
-    if (isOutOfBound(currentPosition, targetPosition)) {
-      currentPosition = targetPosition;
-    }
-    swiper.wrapperEl.scrollTo({
-      [side]: currentPosition,
-    });
-    if (isOutOfBound(currentPosition, targetPosition)) {
-      swiper.wrapperEl.style.overflow = 'hidden';
-      swiper.wrapperEl.style.scrollSnapType = '';
-      setTimeout(() => {
-        swiper.wrapperEl.style.overflow = '';
-        swiper.wrapperEl.scrollTo({
-          [side]: currentPosition,
-        });
-      });
-      window.cancelAnimationFrame(swiper.cssModeFrameID);
-      return;
-    }
-    swiper.cssModeFrameID = window.requestAnimationFrame(animate);
-  };
-  animate();
-}
-function getSlideTransformEl(slideEl) {
-  return slideEl.querySelector('.swiper-slide-transform') || slideEl.shadowRoot && slideEl.shadowRoot.querySelector('.swiper-slide-transform') || slideEl;
-}
-function elementChildren(element, selector) {
-  if (selector === void 0) {
-    selector = '';
-  }
-  const window = getWindow();
-  const children = [...element.children];
-  if (window.HTMLSlotElement && element instanceof HTMLSlotElement) {
-    children.push(...element.assignedElements());
-  }
-  if (!selector) {
-    return children;
-  }
-  return children.filter(el => el.matches(selector));
-}
-function elementIsChildOfSlot(el, slot) {
-  // Breadth-first search through all parent's children and assigned elements
-  const elementsQueue = [slot];
-  while (elementsQueue.length > 0) {
-    const elementToCheck = elementsQueue.shift();
-    if (el === elementToCheck) {
-      return true;
-    }
-
-    // !!!! Rewrote this code to remove optional chaining syntax
-    elementsQueue.push(
-      ...elementToCheck.children,
-      ...(elementToCheck.shadowRoot && elementToCheck.shadowRoot.children ? elementToCheck.shadowRoot.children : []),
-      ...(elementToCheck.assignedElements ? elementToCheck.assignedElements() : [])
-    );
-  }
-}
-function elementIsChildOf(el, parent) {
-  const window = getWindow();
-  let isChild = parent.contains(el);
-  if (!isChild && window.HTMLSlotElement && parent instanceof HTMLSlotElement) {
-    const children = [...parent.assignedElements()];
-    isChild = children.includes(el);
-    if (!isChild) {
-      isChild = elementIsChildOfSlot(el, parent);
-    }
-  }
-  return isChild;
-}
-function showWarning(text) {
-  try {
-    console.warn(text);
-  } catch (err) {
-    // err
-  }
-}
-function createElement(tag, classes) {
-  if (classes === void 0) {
-    classes = [];
-  }
-  const el = document.createElement(tag);
-  el.classList.add(...(Array.isArray(classes) ? classes : classesToTokens(classes)));
-  return el;
-}
-function elementOffset(el) {
-  const window = getWindow();
-  const document = getDocument();
-  const box = el.getBoundingClientRect();
-  const body = document.body;
-  const clientTop = el.clientTop || body.clientTop || 0;
-  const clientLeft = el.clientLeft || body.clientLeft || 0;
-  const scrollTop = el === window ? window.scrollY : el.scrollTop;
-  const scrollLeft = el === window ? window.scrollX : el.scrollLeft;
-  return {
-    top: box.top + scrollTop - clientTop,
-    left: box.left + scrollLeft - clientLeft,
-  };
-}
-function elementPrevAll(el, selector) {
-  const prevEls = [];
-  while (el.previousElementSibling) {
-    const prev = el.previousElementSibling; // eslint-disable-line
-    if (selector) {
-      if (prev.matches(selector)) prevEls.push(prev);
-    } else prevEls.push(prev);
-    el = prev;
-  }
-  return prevEls;
-}
-function elementNextAll(el, selector) {
-  const nextEls = [];
-  while (el.nextElementSibling) {
-    const next = el.nextElementSibling; // eslint-disable-line
-    if (selector) {
-      if (next.matches(selector)) nextEls.push(next);
-    } else nextEls.push(next);
-    el = next;
-  }
-  return nextEls;
-}
-function elementStyle(el, prop) {
-  const window = getWindow();
-  return window.getComputedStyle(el, null).getPropertyValue(prop);
-}
-function elementIndex(el) {
-  let child = el;
-  let i;
-  if (child) {
-    i = 0;
-    // eslint-disable-next-line
-    while ((child = child.previousSibling) !== null) {
-      if (child.nodeType === 1) i += 1;
-    }
-    return i;
-  }
-  return undefined;
-}
-function elementParents(el, selector) {
-  const parents = []; // eslint-disable-line
-  let parent = el.parentElement; // eslint-disable-line
-  while (parent) {
-    if (selector) {
-      if (parent.matches(selector)) parents.push(parent);
-    } else {
-      parents.push(parent);
-    }
-    parent = parent.parentElement;
-  }
-  return parents;
-}
-function elementTransitionEnd(el, callback) {
-  function fireCallBack(e) {
-    if (e.target !== el) return;
-    callback.call(el, e);
-    el.removeEventListener('transitionend', fireCallBack);
-  }
-  if (callback) {
-    el.addEventListener('transitionend', fireCallBack);
-  }
-}
-function elementOuterSize(el, size, includeMargins) {
-  const window = getWindow();
-  if (includeMargins) {
-    return el[size === 'width' ? 'offsetWidth' : 'offsetHeight'] + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-right' : 'margin-top')) + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-left' : 'margin-bottom'));
-  }
-  return el.offsetWidth;
-}
-function makeElementsArray(el) {
-  return (Array.isArray(el) ? el : [el]).filter(e => !!e);
-}
-function getRotateFix(swiper) {
-  return (v) => {
-    if (Math.abs(v) > 0 && swiper.browser && swiper.browser.need3dFix && Math.abs(v) % 90 === 0) {
-      return v + 0.001;
-    }
-    return v;
-  };
-}
-
-export {
-  elementParents as a, elementOffset as b, createElement as c, now as d, elementChildren as e, elementOuterSize as f, getSlideTransformEl as g, elementIndex as h, classesToTokens as i, getTranslate as j, elementTransitionEnd as k, isObject as l, makeElementsArray as m, nextTick as n, getRotateFix as o, elementStyle as p, elementNextAll as q, elementPrevAll as r, setCSSProperty as s, animateCSSModeScroll as t, showWarning as u, elementIsChildOf as v, extend as w, deleteProps as x,
-};
-
-/* eslint-enable import/extensions, require-jsdoc, no-void, no-param-reassign,
-  prefer-destructuring, no-underscore-dangle, consistent-return, no-mixed-operators,
-  eslint-comments/no-unlimited-disable, prefer-rest-params, max-len */