@shopgate/webpack 7.27.4 → 7.27.5-alpha.1

package/lib/getComponentsSettings.js

@@ -2,25 +2,71 @@ const fs = require('fs');
 const importFresh = require('import-fresh');
 
 /**
- * Returns the app settings from the remote project.
+ * @typedef {Object} ComponentSettingsEntry
+ * @property {string} path Path to the file to be imported
+ */
+
+/**
+ * @typedef {Object.<string, ComponentSettingsEntry>} ComponentSettingsMap
+ */
+
+/**
+ * @typedef {Object} ComponentSettings
+ * @property {ComponentSettingsMap} [portals] Portal component mapping
+ * @property {ComponentSettingsMap} [translations] Translation file mapping
+ * @property {ComponentSettingsMap} [tracking] Tracking plugin mapping
+ * @property {ComponentSettingsMap} [subscribers] RxJS subscriber mapping
+ * @property {ComponentSettingsMap} [reducers] Redux reducer mapping
+ * @property {ComponentSettingsMap} [widgets] Widget component mapping
+ * @property {ComponentSettingsMap} [widgetsV2] Widget component mapping for version 2 of the widget
+ * system
+ */
+
+/**
+ * Returns contents of the `config/components.json` file from the theme.
+ *
+ * This file is created by the SDK during startup and contains mappings for different types of
+ * resources provided by attached extensions (portals, translations, widgets...).
+ * The ShopgateIndexer Webpack plugin uses this file to generate different mapping files inside
+ * the `extensions` folder of the theme. Those files contains import declarations to enable loading
+ * of the different resources.
+ *
+ * Additionally it merges the widgets provided by the PWA into its return value.
+ *
  * @param {string} themePath The path of the theme.
- * @return {Object} The app settings.
+ * @return {ComponentSettings} The app settings.
  */
 module.exports = function getComponentsSettings(themePath) {
   try {
-    const themeWidgets = `${themePath}/widgets`;
-    const themeConfig = `${themeWidgets}/widgets.json`;
+    const themeWidgetsPath = `${themePath}/widgets`;
 
+    const themeWidgetsV1Config = `${themeWidgetsPath}/widgets.json`;
+    const themeWidgetsV2Config = '@shopgate/engage/page/widgets/widgets.json';
+
+    /** @type {ComponentSettings} */
     const defaultConfig = importFresh(`${themePath}/config/components.json`);
 
-    const configExists = (fs.existsSync(themeWidgets) && fs.existsSync(themeConfig));
-    const config = configExists ? importFresh(themeConfig) : {};
+    /**
+     * Loads a JSON config file using `import-fresh`, if it exists.
+     *
+     * @param {string} path - The absolute path to the config file.
+     * @returns {Object} The imported configuration object, or an empty object if the file doesn't
+     * exist.
+     */
+    const loadConfig = path => (fs.existsSync(path) || path.startsWith('@shopgate/engage') ?
+      importFresh(path) :
+      {}
+    );
 
     return {
       ...defaultConfig,
       widgets: {
         ...defaultConfig.widgets,
-        ...config,
+        ...loadConfig(themeWidgetsV1Config),
+      },
+      widgetsV2: {
+        ...defaultConfig.widgetsV2,
+        ...loadConfig(themeWidgetsV2Config),
       },
     };
   } catch (e) {

package/locales/en.json

@@ -17,7 +17,8 @@
     "TYPE_SUBSCRIBERS": "subscribers",
     "TYPE_TRACKERS": "trackers",
     "TYPE_TRANSLATIONS": "translations",
-    "TYPE_WIDGETS": "widgets"
+    "TYPE_WIDGETS": "widgets",
+    "TYPE_WIDGETS_V2": "widgets 2.0"
   },
   "plugins/ShopgateThemeConfigValidatorPlugin": {
     "VALIDATING_CONFIG": "Validating theme configuration ...",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.27.4",
+  "version": "7.27.5-alpha.1",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",

package/plugins/ShopgateIndexerPlugin.js

@@ -10,6 +10,7 @@ const i18n = require('../lib/i18n');
 const t = i18n(__filename);
 
 const TYPE_WIDGETS = 'WIDGETS';
+const TYPE_WIDGETS_V2 = 'WIDGETS_V2';
 const TYPE_TRACKERS = 'TRACKERS';
 const TYPE_PORTALS = 'PORTALS';
 const TYPE_REDUCERS = 'REDUCERS';
@@ -35,8 +36,9 @@ function getExtensionsPath() {
 function componentExists(componentPath) {
   const existsInExtensions = fs.existsSync(path.resolve(themePath, '..', '..', 'extensions', componentPath));
   const existsInWidgets = fs.existsSync(path.resolve(themePath, 'widgets', componentPath));
+  const isEngageWidget = componentPath.startsWith('@shopgate/engage/page/widgets');
 
-  return !(!existsInExtensions && !existsInWidgets);
+  return existsInExtensions || existsInWidgets || isEngageWidget;
 }
 
 /**
@@ -73,7 +75,7 @@ function readConfig(options) {
   const imports = importsStart ? [importsStart] : []; // Holds the import strings.
   const exports = [exportsStart]; // Holds the export strings.
 
-  if (type === TYPE_PORTALS || type === TYPE_WIDGETS) {
+  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('');
@@ -91,7 +93,7 @@ function readConfig(options) {
 
     const isPortalsOrWidgets = (
       (type === TYPE_PORTALS && component.target !== 'app.routes')
-      || type === TYPE_WIDGETS
+      || type === TYPE_WIDGETS || type === TYPE_WIDGETS_V2
     );
 
     if (isPortalsOrWidgets) {
@@ -240,7 +242,7 @@ function index(options) {
  * Indexes the widgets.
  */
 function indexWidgets() {
-  const { widgets = {} } = getComponentsSettings(themePath);
+  const { widgets = {}, widgetsV2 = {} } = getComponentsSettings(themePath);
 
   index({
     file: 'widgets.js',
@@ -250,6 +252,15 @@ function indexWidgets() {
     },
     ...getIndexLogTranslations(TYPE_WIDGETS),
   });
+
+  index({
+    file: 'widgetsV2.js',
+    config: {
+      type: TYPE_WIDGETS_V2,
+      config: widgetsV2,
+    },
+    ...getIndexLogTranslations(TYPE_WIDGETS_V2),
+  });
 }
 
 /**