@shopgate/webpack 7.32.0-beta.2 → 7.32.0-beta.20

package/lib/__fixtures__/app/extensions/ext-broken/frontend/widgets/EmptyWidget/config.json

@@ -0,0 +1 @@
+null

package/lib/__fixtures__/app/extensions/ext-broken/frontend/widgets/InvalidWidget/config.json

@@ -0,0 +1,5 @@
+{
+  "layout": {
+    "applyMediaMargin": true
+  }
+}

package/lib/__fixtures__/app/extensions/ext-broken/frontend/widgets/UnparsableWidget/config.json

@@ -0,0 +1 @@
+{ "layout": { "applyMediaMargins": true 

package/lib/__fixtures__/app/extensions/ext-fixture/frontend/src/widgets/DistWidget/config.json

@@ -0,0 +1,5 @@
+{
+  "layout": {
+    "applyMediaMargins": { "left": true }
+  }
+}

package/lib/__fixtures__/app/extensions/ext-fixture/frontend/widgets/AlphaWidget/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../some/where/widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": { "top": true, "bottom": true }
+  }
+}

package/lib/__fixtures__/app/extensions/ext-fixture/frontend/widgets/LegacyWidget/config.json

@@ -0,0 +1,5 @@
+{
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/lib/__fixtures__/app/themes/theme-empty/config/components.json

@@ -0,0 +1,7 @@
+{
+  "widgetsV2": {
+    "@broken/ext/EmptyWidget": {
+      "path": "ext-broken/frontend/widgets/EmptyWidget"
+    }
+  }
+}

package/lib/__fixtures__/app/themes/theme-invalid/config/components.json

@@ -0,0 +1,7 @@
+{
+  "widgetsV2": {
+    "@broken/ext/InvalidWidget": {
+      "path": "ext-broken/frontend/widgets/InvalidWidget"
+    }
+  }
+}

package/lib/__fixtures__/app/themes/theme-test/config/components.json

@@ -0,0 +1,29 @@
+{
+  "widgets": {
+    "@fixture/ext/LegacyWidget": {
+      "path": "ext-fixture/frontend/widgets/LegacyWidget"
+    }
+  },
+  "widgetsV2": {
+    "@fixture/ext/AlphaWidget": {
+      "path": "ext-fixture/frontend/widgets/AlphaWidget"
+    },
+    "@fixture/ext/BetaWidget": {
+      "path": "ext-fixture/frontend/widgets/BetaWidget"
+    },
+    "@fixture/ext/DistWidget": {
+      "path": "ext-fixture/frontend/dist/widgets/DistWidget"
+    }
+  },
+  "portals": {
+    "@fixture/ext/SomePortal": {
+      "path": "ext-fixture/frontend/portals/Some",
+      "target": "app.routes"
+    }
+  },
+  "reducers": {
+    "@shopgate/product-reviews/reducer": {
+      "path": "ext-product-reviews/frontend/reducer"
+    }
+  }
+}

package/lib/__fixtures__/app/themes/theme-test/widgets/widgets.json

@@ -0,0 +1,3 @@
+{
+  "@fixture/theme/ThemeWidget": { "path": "ThemeWidget" }
+}

package/lib/__fixtures__/app/themes/theme-unparsable/config/components.json

@@ -0,0 +1,7 @@
+{
+  "widgetsV2": {
+    "@broken/ext/UnparsableWidget": {
+      "path": "ext-broken/frontend/widgets/UnparsableWidget"
+    }
+  }
+}

package/lib/getComponentsSettings.js

@@ -1,5 +1,19 @@
 const fs = require('fs');
+const path = require('path');
+const Ajv = require('ajv');
 const importFresh = require('import-fresh');
+const { isDev } = require('./variables');
+
+const ENGAGE_PACKAGE = '@shopgate/engage';
+const WIDGET_CONFIG_FILE = 'config.json';
+const WIDGET_CONFIG_SCHEMA = '@shopgate/engage/page/widget.config.schema.json';
+
+/**
+ * Raised when a widget ships a config file that cannot be used. It travels through the catch-all
+ * of the exported function, so that a broken config fails the build instead of silently removing
+ * every component mapping of the app.
+ */
+class WidgetConfigError extends Error {}
 
 /**
  * @typedef {Object} ComponentSettingsEntry
@@ -54,6 +68,136 @@ const filterIgnoredExtensions = (config = {}) => Object.keys(config).reduce((acc
   [sectionName]: filterIgnoredEntries(config[sectionName]),
 }), {});
 
+/**
+ * Loads a JSON config file using `import-fresh`, if it exists.
+ * @param {string} configPath - 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 = configPath => (
+  fs.existsSync(configPath) || configPath.startsWith(ENGAGE_PACKAGE) ?
+    importFresh(configPath) :
+    {}
+);
+
+/**
+ * Reads the component mappings of the theme, without the config files that widgets provide.
+ * @param {string} themePath The path of the theme.
+ * @returns {ComponentSettings}
+ */
+const readComponentsConfig = (themePath) => {
+  /** @type {ComponentSettings} */
+  const defaultConfig = filterIgnoredExtensions(
+    importFresh(path.join(themePath, 'config', 'components.json'))
+  );
+
+  return {
+    ...defaultConfig,
+    widgets: {
+      ...defaultConfig.widgets,
+      ...loadConfig(path.join(themePath, 'widgets', 'widgets.json')),
+    },
+    widgetsV2: {
+      // To enable backwards compatibility for custom legacy widgets that are provided by
+      // extensions we include them in the list of V2 widgets.
+      ...defaultConfig.widgets,
+      ...defaultConfig.widgetsV2,
+      ...loadConfig(`${ENGAGE_PACKAGE}/page/widgets/widgets.json`),
+    },
+  };
+};
+
+const validateWidgetConfig = new Ajv({ allErrors: true })
+  .compile(importFresh(WIDGET_CONFIG_SCHEMA));
+
+/**
+ * Builds the list of locations the config file of a widget can live at. Widgets provided by the
+ * PWA are referenced by their package path, widgets provided by extensions relative to the
+ * extensions folder of the app.
+ * @param {string} componentPath Path of the widget from the components config.
+ * @param {string} themePath The path of the theme.
+ * @returns {string[]}
+ */
+const getWidgetConfigPaths = (componentPath, themePath) => {
+  if (componentPath.startsWith(ENGAGE_PACKAGE)) {
+    const packageRoot = path.dirname(require.resolve(`${ENGAGE_PACKAGE}/package.json`));
+    const subPath = componentPath.slice(ENGAGE_PACKAGE.length + 1);
+
+    return [path.join(packageRoot, subPath, WIDGET_CONFIG_FILE)];
+  }
+
+  const relativePaths = [componentPath];
+
+  if (isDev) {
+    // Extensions that are attached as a build are read from their sources while developing. The
+    // Set keeps a single entry for the extensions that are attached as sources anyway.
+    relativePaths.unshift(componentPath.replace('/dist/', '/src/'));
+  }
+
+  return Array.from(new Set(relativePaths)).map(relativePath => path.resolve(
+    themePath,
+    '..',
+    '..',
+    'extensions',
+    relativePath,
+    WIDGET_CONFIG_FILE
+  ));
+};
+
+/**
+ * Loads the config file of a single widget. Widgets are not required to provide one.
+ * @param {string} componentPath Path of the widget from the components config.
+ * @param {string} themePath The path of the theme.
+ * @returns {Object} Config of the widget, or an empty object.
+ */
+const loadWidgetConfig = (componentPath, themePath) => {
+  if (!componentPath) {
+    return {};
+  }
+
+  // Whether a widget brings a config is decided by the file system. Every file that is there has
+  // to be readable and valid, no matter what it contains.
+  const configPath = getWidgetConfigPaths(componentPath, themePath)
+    .find(candidate => fs.existsSync(candidate));
+
+  if (!configPath) {
+    return {};
+  }
+
+  let config;
+
+  try {
+    config = importFresh(configPath);
+  } catch (e) {
+    throw new WidgetConfigError(`Widget config "${configPath}" could not be read: ${e.message}`);
+  }
+
+  if (!validateWidgetConfig(config)) {
+    throw new WidgetConfigError([
+      `Widget config of "${componentPath}" is invalid:`,
+      ...validateWidgetConfig.errors.map(error => `  ${error.instancePath || '/'} ${error.message}`),
+    ].join('\n'));
+  }
+
+  // Only known sections are taken over, so that editor helpers like "$schema" don't end up in the
+  // config that is injected into the app.
+  return config.layout ? { config: { layout: config.layout } } : {};
+};
+
+/**
+ * Adds the config every widget provides via its own config file to the widget entries.
+ * @param {ComponentSettingsMap} widgets The widget entries from the components config.
+ * @param {string} themePath The path of the theme.
+ * @returns {ComponentSettingsMap}
+ */
+const withWidgetConfigs = (widgets, themePath) => Object.keys(widgets).reduce((acc, id) => ({
+  ...acc,
+  [id]: {
+    ...widgets[id],
+    ...loadWidgetConfig((widgets[id] || {}).path, themePath),
+  },
+}), {});
+
 /**
  * Returns contents of the `config/components.json` file from the theme.
  *
@@ -70,41 +214,54 @@ const filterIgnoredExtensions = (config = {}) => Object.keys(config).reduce((acc
  */
 module.exports = function getComponentsSettings(themePath) {
   try {
-    const themeWidgetsPath = `${themePath}/widgets`;
-
-    const themeWidgetsV1Config = `${themeWidgetsPath}/widgets.json`;
-    const themeWidgetsV2Config = '@shopgate/engage/page/widgets/widgets.json';
-
-    /** @type {ComponentSettings} */
-    const defaultConfig = filterIgnoredExtensions(importFresh(`${themePath}/config/components.json`));
-
-    /**
-     * 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) :
-      {}
-    );
+    const components = readComponentsConfig(themePath);
 
     return {
-      ...defaultConfig,
-      widgets: {
-        ...defaultConfig.widgets,
-        ...loadConfig(themeWidgetsV1Config),
-      },
-      widgetsV2: {
-        // To enable backwards compatibility for custom legacy widgets that are provided by
-        // extensions we include them in the list of V2 widgets.
-        ...defaultConfig.widgets,
-        ...defaultConfig.widgetsV2,
-        ...loadConfig(themeWidgetsV2Config),
-      },
+      ...components,
+      widgetsV2: withWidgetConfigs(components.widgetsV2, themePath),
     };
   } catch (e) {
+    if (e instanceof WidgetConfigError) {
+      throw e;
+    }
+
     return {};
   }
 };
+
+/**
+ * Returns the widget config files the component settings are built from, so that a build can watch
+ * them. Files that do not exist yet are reported separately, because webpack needs to know about
+ * them to notice when a widget gets a config for the first time.
+ *
+ * The configs themselves are not read here. A broken one is supposed to surface while a module is
+ * built, not while the webpack config is put together.
+ *
+ * @param {string} themePath The path of the theme.
+ * @returns {{ fileDependencies: string[], missingDependencies: string[] }}
+ */
+module.exports.getWidgetConfigDependencies = (themePath) => {
+  try {
+    const { widgetsV2 = {} } = readComponentsConfig(themePath);
+
+    const configPaths = Object.keys(widgetsV2).reduce((acc, id) => {
+      const { path: componentPath } = widgetsV2[id] || {};
+
+      if (!componentPath) {
+        return acc;
+      }
+
+      return [...acc, ...getWidgetConfigPaths(componentPath, themePath)];
+    }, [path.resolve(themePath, 'config', 'components.json')]);
+
+    return {
+      fileDependencies: configPaths.filter(configPath => fs.existsSync(configPath)),
+      missingDependencies: configPaths.filter(configPath => !fs.existsSync(configPath)),
+    };
+  } catch (e) {
+    return {
+      fileDependencies: [],
+      missingDependencies: [],
+    };
+  }
+};

package/lib/getComponentsSettings.spec.js

@@ -0,0 +1,204 @@
+const path = require('path');
+const getComponentsSettings = require('./getComponentsSettings');
+
+const fixtureTheme = name => path.resolve(__dirname, '__fixtures__', 'app', 'themes', name);
+
+// Paths reach the assertions with the separator of the platform the tests run on.
+const escapeForRegExp = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const THEME_PATH = fixtureTheme('theme-test');
+
+describe('getComponentsSettings', () => {
+  describe('widget configs', () => {
+    it('reads the config file that belongs to a widget', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@fixture/ext/AlphaWidget']).toEqual({
+        path: 'ext-fixture/frontend/widgets/AlphaWidget',
+        config: {
+          layout: {
+            applyMediaMargins: {
+              top: true,
+              bottom: true,
+            },
+          },
+        },
+      });
+    });
+
+    it('keeps sections it does not know out of the config', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      // The fixture declares a "$schema" next to its layout, which is an editor helper that has no
+      // business in the config that gets injected into the app.
+      expect(widgetsV2['@fixture/ext/AlphaWidget']).toHaveProperty('config.layout');
+      expect(widgetsV2['@fixture/ext/AlphaWidget'].config).not.toHaveProperty('$schema');
+    });
+
+    it('leaves a widget without a config file alone', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@fixture/ext/BetaWidget']).toEqual({
+        path: 'ext-fixture/frontend/widgets/BetaWidget',
+      });
+    });
+
+    it('fails on a config file that cannot be parsed', () => {
+      expect(() => getComponentsSettings(fixtureTheme('theme-unparsable')))
+        .toThrow(new RegExp(`${escapeForRegExp(path.join('UnparsableWidget', 'config.json'))}" could not be read`));
+    });
+
+    it('fails on a config file that holds no object', () => {
+      expect(() => getComponentsSettings(fixtureTheme('theme-empty')))
+        .toThrow(/must be object/);
+    });
+
+    it('fails on a config file that does not match the schema', () => {
+      expect(() => getComponentsSettings(fixtureTheme('theme-invalid')))
+        .toThrow(/must NOT have additional properties/);
+    });
+
+    it('names the widget of an invalid config', () => {
+      expect(() => getComponentsSettings(fixtureTheme('theme-invalid')))
+        .toThrow(/ext-broken\/frontend\/widgets\/InvalidWidget/);
+      // The widget is named by its entry from the components config, which always uses forward
+      // slashes, so this one is not affected by the separator of the platform.
+    });
+
+    it('reads the config of widgets the PWA provides', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@shopgate/widgets/imageWidget'].config).toEqual({
+        layout: { applyMediaMargins: true },
+      });
+      expect(widgetsV2['@shopgate/widgets/richTextWidget']).not.toHaveProperty('config');
+    });
+
+    it('does not add configs to the widgets of the v1 system', () => {
+      const { widgets } = getComponentsSettings(THEME_PATH);
+
+      expect(widgets['@fixture/ext/LegacyWidget']).toEqual({
+        path: 'ext-fixture/frontend/widgets/LegacyWidget',
+      });
+    });
+
+    it('adds configs to v1 extension widgets that the v2 system renders', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@fixture/ext/LegacyWidget'].config).toEqual({
+        layout: { applyMediaMargins: true },
+      });
+    });
+  });
+
+  describe('development builds', () => {
+    afterEach(() => {
+      jest.resetModules();
+    });
+
+    it('prefers the sources of an extension that is attached as a build', () => {
+      jest.resetModules();
+      jest.doMock('./variables', () => ({ isDev: true }));
+
+      // eslint-disable-next-line global-require
+      const { widgetsV2 } = require('./getComponentsSettings')(THEME_PATH);
+
+      expect(widgetsV2['@fixture/ext/DistWidget'].config).toEqual({
+        layout: { applyMediaMargins: { left: true } },
+      });
+    });
+
+    it('ignores the sources outside of development', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@fixture/ext/DistWidget']).not.toHaveProperty('config');
+    });
+  });
+
+  describe('getWidgetConfigDependencies', () => {
+    const { getWidgetConfigDependencies } = getComponentsSettings;
+
+    it('lists the config files that exist', () => {
+      const { fileDependencies } = getWidgetConfigDependencies(THEME_PATH);
+
+      expect(fileDependencies).toContain(path.join(
+        __dirname,
+        '__fixtures__/app/extensions/ext-fixture/frontend/widgets/AlphaWidget/config.json'
+      ));
+    });
+
+    it('lists the config files a widget could still get', () => {
+      const { missingDependencies } = getWidgetConfigDependencies(THEME_PATH);
+
+      expect(missingDependencies).toContain(path.join(
+        __dirname,
+        '__fixtures__/app/extensions/ext-fixture/frontend/widgets/BetaWidget/config.json'
+      ));
+    });
+
+    it('watches the components config of the theme', () => {
+      const { fileDependencies } = getWidgetConfigDependencies(THEME_PATH);
+
+      expect(fileDependencies).toContain(path.join(THEME_PATH, 'config', 'components.json'));
+    });
+
+    it('reports absolute paths without duplicates', () => {
+      const { fileDependencies, missingDependencies } = getWidgetConfigDependencies(THEME_PATH);
+      const all = [...fileDependencies, ...missingDependencies];
+
+      expect(all.every(dependency => path.isAbsolute(dependency))).toBe(true);
+      expect(all).toHaveLength(new Set(all).size);
+    });
+
+    it('does not read the configs, so a broken one does not break the build setup', () => {
+      expect(() => getWidgetConfigDependencies(fixtureTheme('theme-invalid'))).not.toThrow();
+      expect(getWidgetConfigDependencies(fixtureTheme('theme-invalid')).fileDependencies)
+        .toContain(path.join(
+          __dirname,
+          '__fixtures__/app/extensions/ext-broken/frontend/widgets/InvalidWidget/config.json'
+        ));
+    });
+
+    it('reports nothing for a theme without a components config', () => {
+      expect(getWidgetConfigDependencies(path.resolve(THEME_PATH, 'nope'))).toEqual({
+        fileDependencies: [],
+        missingDependencies: [],
+      });
+    });
+  });
+
+  describe('component mapping', () => {
+    it('merges the widgets of the theme into the v1 widgets', () => {
+      const { widgets } = getComponentsSettings(THEME_PATH);
+
+      expect(widgets['@fixture/theme/ThemeWidget']).toEqual({ path: 'ThemeWidget' });
+    });
+
+    it('merges the widgets of the PWA into the v2 widgets', () => {
+      const { widgetsV2 } = getComponentsSettings(THEME_PATH);
+
+      expect(widgetsV2['@shopgate/widgets/htmlWidget']).toEqual({
+        path: '@shopgate/engage/page/widgets/HTML',
+      });
+    });
+
+    it('passes other component types through', () => {
+      const { portals } = getComponentsSettings(THEME_PATH);
+
+      expect(portals['@fixture/ext/SomePortal']).toEqual({
+        path: 'ext-fixture/frontend/portals/Some',
+        target: 'app.routes',
+      });
+    });
+
+    it('drops the entries of ignored extensions', () => {
+      const { reducers } = getComponentsSettings(THEME_PATH);
+
+      expect(reducers).toEqual({});
+    });
+
+    it('returns nothing for a theme without a components config', () => {
+      expect(getComponentsSettings(path.resolve(THEME_PATH, 'does-not-exist'))).toEqual({});
+    });
+  });
+});

package/package.json

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

package/templates/default.ejs

@@ -16,6 +16,21 @@
       <link rel="stylesheet" href="<%= css %>">
     <% }) %>
   <% } %>
+  <%
+    // Anchors for the new theming system. Layers must apply in a fixed order:
+    // emotion-insertion-point (all tss styles) -> font css -> theme css -> preview css.
+    //
+    // TSS styles carry defaults generated during theme initialization.
+    // The font css files (the typography app settings, loaded by loadFontCss) override them.
+    // The theme css file (the themeCssUrl setting, loaded by loadThemeCss) overrides both.
+    // The admin preview (FrontendSettingsPreviewBridge) overrides all for live customizations.
+    //
+    // All of them have the same specificity, so document order is decisive.
+    // Declaring the insertion positions here makes the order structural instead of timing-based.
+  %>
+  <meta name="font-css-insertion-point" content="" />
+  <meta name="theme-css-insertion-point" content="" />
+  <meta name="preview-css-insertion-point" content="" />
   <% const scripts = htmlWebpackPlugin.files.js; %>
   <% const vendor = scripts.find(s => s.includes('vendor')); %>
   <% if (vendor) { %><script src="<%= vendor %>"></script><% } %>

package/webpack.config.js

@@ -148,7 +148,13 @@ const config = {
       'process.env': {
         NODE_ENV: JSON.stringify(ENV),
         APP_CONFIG: JSON.stringify(appConfig),
-        COMPONENTS_CONFIG: JSON.stringify(getComponentsSettings(themePath)),
+        // A runtime value, so that a change to a widget config is picked up by a running build.
+        // The dependencies make webpack watch the config files, including the ones that do not
+        // exist yet.
+        COMPONENTS_CONFIG: webpack.DefinePlugin.runtimeValue(
+          () => JSON.stringify(getComponentsSettings(themePath)),
+          getComponentsSettings.getWidgetConfigDependencies(themePath)
+        ),
         THEME_CONFIG: JSON.stringify(themeConfig),
         THEME: JSON.stringify(process.env.theme),
         THEME_PATH: JSON.stringify(themePath),