@oroinc/oro-webpack-config-builder 5.1.0-alpha9 → 5.1.0-lts001

package/package.json

@@ -1,49 +1,48 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha9",
+  "version": "5.1.0-lts001",
   "author": "Oro, Inc (https://www.oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
   "main": "oro-webpack-config.js",
   "dependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.1.0",
-    "bindings": "^1.5.0",
-    "css-loader": "^5.0.2",
-    "css-minimizer-webpack-plugin": "^1.2.0",
-    "deepmerge": "^4.2.2",
-    "exports-loader": "^2.0.0",
-    "expose-loader": "^2.0.0",
-    "extract-loader": "^5.1.0",
-    "file-loader": "^6.2.0",
-    "happypack": "^5.0.1",
-    "html-webpack-plugin": "^5.2.0",
-    "imports-loader": "^2.0.0",
-    "js-yaml": "^4.0.0",
-    "mini-css-extract-plugin": "^1.3.8",
-    "minimist": "^1.2.3",
-    "nan": "^2.14.2",
+    "@babel/core": "~7.21.3",
+    "@babel/plugin-transform-runtime": "~7.21.0",
+    "@babel/preset-env": "~7.20.2",
+    "autoprefixer": "~10.4.13",
+    "babel-loader": "~9.1.0",
+    "bindings": "~1.5.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "~4.2.2",
+    "deepmerge": "~4.3.1",
+    "exports-loader": "~4.0.0",
+    "expose-loader": "~4.1.0",
+    "file-loader": "~6.2.0",
+    "html-webpack-plugin": "~5.5.0",
+    "imports-loader": "~4.0.1",
+    "js-yaml": "~4.1.0",
+    "mini-css-extract-plugin": "~2.7.1",
+    "minimist": "~1.2.7",
+    "nan": "~2.17.0",
     "path": "0.12.7",
-    "postcss": "^8.2.9",
-    "postcss-loader": "^5.0.0",
-    "printf": "^0.6.0",
-    "resolve-url-loader": "^3.1.2",
-    "rtlcss-webpack-plugin": "^4.0.6",
-    "sass": "^1.32.8",
-    "sass-loader": "^11.0.1",
-    "style-loader": "^2.0.0",
-    "terser": "^5.6.0",
+    "postcss": "~8.4.19",
+    "postcss-loader": "~7.1.0",
+    "printf": "~0.6.0",
+    "resolve-url-loader": "^5.0.0",
+    "rtlcss-webpack-plugin": "~4.0.6",
+    "sass": "~1.59.3",
+    "sass-loader": "~13.2.0",
+    "schema-utils": "^4.0.0",
+    "style-loader": "~3.3.1",
+    "terser": "~5.16.1",
     "text-loader": "0.0.1",
-    "underscore": "^1.10.2",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.23.0",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.7.3",
-    "wildcard": "^2.0.0"
+    "underscore": "1.13.*",
+    "url-loader": "~4.1.1",
+    "webpack": "~5.76.3",
+    "webpack-bundle-analyzer": "~4.8.0",
+    "webpack-cli": "~5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "~5.8.0",
+    "wildcard": "~2.0.0"
   }
 }

package/plugin/logs/after-webpack-logs-plugin.js

@@ -0,0 +1,25 @@
+const {once} = require('underscore');
+
+class AfterWebpackLogsPlugin {
+    /**
+     * @param {function} afterLogsCb
+     */
+    constructor(afterLogsCb) {
+        if (typeof afterLogsCb !== 'function') {
+            throw new Error('The "afterLogsCb" arg should be a function');
+        }
+        this._afterLogsCb = once(afterLogsCb);
+    }
+
+    apply(compiler) {
+        compiler.hooks.done.tap('AfterWebpackLogsPlugin', stats => {
+            const compilerStats = stats;
+            stats.compilation.hooks.statsPrinter.tap('AfterWebpackLogsPlugin', stats => {
+                // Making logs to be after all webpack logs in the console
+                setImmediate(() => this._afterLogsCb(compilerStats));
+            });
+        });
+    }
+}
+
+module.exports = AfterWebpackLogsPlugin;

package/style/admin-style-loader.js

@@ -3,19 +3,20 @@ const StyleLoader = require('./style-loader');
 
 class AdminStyleLoader extends StyleLoader {
     /**
-     * @inheritDoc
+     * @inheritdoc
      */
     _fetchThemeConfig(themeName) {
         const {rtl_support: rtlSupport = false, styles: extraThemeConfig} =
             this._configLoader.loadConfig(themeName, 'Resources/public/themes/' + themeName + '/settings.yml');
         const baseThemeConfig = this._configLoader.loadConfig(themeName, 'Resources/config/oro/assets.yml');
+        const appRootExtraConfig = this._configLoader.loadConfig(themeName, 'config/oro/assets.yml');
         /** @type {Object.<string, ThemeGroupConfig>} */
-        const themeConfig = merge({}, baseThemeConfig, extraThemeConfig);
+        const themeConfig = merge(baseThemeConfig, appRootExtraConfig, extraThemeConfig);
 
         return {
             themeConfig,
             settings: {rtlSupport}
-        }
+        };
     }
 }
 

package/style/layout-style-loader.js

@@ -1,8 +1,8 @@
 const StyleLoader = require('./style-loader');
 
-class LayoutStyleLoader extends StyleLoader  {
+class LayoutStyleLoader extends StyleLoader {
     /**
-     * @inheritDoc
+     * @inheritdoc
      */
     _fetchThemeConfig(themeName) {
         const {rtl_support: rtlSupport = false} = this._configLoader.themes[themeName];
@@ -12,7 +12,7 @@ class LayoutStyleLoader extends StyleLoader  {
         return {
             themeConfig,
             settings: {rtlSupport}
-        }
+        };
     }
 }
 

package/style/style-loader.js

@@ -1,6 +1,9 @@
 const path = require('path');
 const wildcard = require('wildcard');
-const _ = require('underscore')
+const _ = require('underscore');
+const {isProdMode} = require('../utils');
+const {assetsValidation} = require('../validation');
+const StylesError = require('../validation/errors/styles-error');
 
 /**
  * @typedef ThemeGroupConfig
@@ -29,16 +32,24 @@ class StyleLoader {
     getThemeEntryPoints(theme, buildPath) {
         const {themeConfig, settings = {}} = this._fetchThemeConfig(theme);
 
+        assetsValidation.checkFullSchema(themeConfig, this._configLoader.processedFiles, theme);
+
         const entryPoints = {};
         const writingOptions = {};
         for (const [group, config] of Object.entries(themeConfig)) {
             let {inputs, entries = [], output, auto_rtl_inputs: rtlMasks = []} = config;
-            if (output === undefined) {
-                throw new Error('"output" for "' + group + '" group in theme "' + theme + '" is not defined');
+
+            if (isProdMode() && output === void 0) {
+                throw new StylesError('output', group, theme);
+            }
+
+            if (isProdMode() && inputs === void 0) {
+                throw new StylesError('inputs', group, theme);
             }
 
             inputs = this._overrideInputs(inputs);
             inputs = this._sortInputs(inputs);
+            inputs = this._applyInputsBasePathPrefix(inputs);
 
             if (settings.rtlSupport) {
                 writingOptions.ignoreRTLInputs = _.difference(inputs, this._matchInputs(rtlMasks, inputs));
@@ -48,7 +59,7 @@ class StyleLoader {
             const filePath = path.join(buildPath, output);
             entryPoints[entryPointName] = [
                 ...entries,
-                this._entryPointFileWriter.write('./../../../', inputs, filePath, writingOptions)
+                this._entryPointFileWriter.write('./../../', inputs, filePath, writingOptions)
             ];
         }
         return entryPoints;
@@ -83,7 +94,7 @@ class StyleLoader {
                 const oldInputIndex = mappedInputs.findIndex(item => item === oldInput);
 
                 if (oldInputIndex === -1) {
-                    // old input does not exists any more
+                    // old input does not exist anymore
                     mappedInputs.push(newInput);
                 } else if (newInput) {
                     // replace input
@@ -105,20 +116,33 @@ class StyleLoader {
      * @protected
      */
     _sortInputs(inputs) {
+        const primarySettingsInputs = [];
         const settingsInputs = [];
+        const primaryVariablesInputs = [];
         const variablesInputs = [];
         const restInputs = [];
 
         inputs.forEach(input => {
-            if (input.indexOf('/settings/') > 0) {
+            if (input.indexOf('/settings/primary-settings') > 0) {
+                primarySettingsInputs.push(input);
+            } else if (input.indexOf('/settings/') > 0) {
                 settingsInputs.push(input);
+            } else if (input.indexOf('/variables/primary-variables') > 0) {
+                primaryVariablesInputs.push(input);
             } else if (input.indexOf('/variables/') > 0) {
                 variablesInputs.push(input);
             } else {
                 restInputs.push(input);
             }
         });
-        return [...settingsInputs, ...variablesInputs, ...restInputs];
+
+        return [
+            ...primarySettingsInputs,
+            ...settingsInputs,
+            ...primaryVariablesInputs,
+            ...variablesInputs,
+            ...restInputs
+        ];
     }
 
     /**
@@ -130,6 +154,7 @@ class StyleLoader {
      * @protected
      */
     _matchInputs(masks, inputs) {
+        masks = this._applyInputsBasePathPrefix(masks);
         masks = masks.map(mask => wildcard(mask));
 
         const whiteListedInputs = masks.reduce((include, mask) => {
@@ -139,6 +164,26 @@ class StyleLoader {
 
         return _.unique(whiteListedInputs);
     }
+
+    /**
+     * Considering base path as application's root.
+     * Bundles based *.scss sources go with '../' prefix.
+     *
+     * @param {string[]} inputs
+     * @private
+     */
+    _applyInputsBasePathPrefix(inputs) {
+        const processedInputs = [];
+
+        inputs.forEach(input => {
+            if (input.indexOf('bundles') === 0) {
+                input = '../' + input;
+            }
+            processedInputs.push(input);
+        });
+
+        return processedInputs;
+    }
 }
 
 module.exports = StyleLoader;

package/theme-config-factory.js

@@ -1,3 +1,5 @@
+const JSModulesExtraModulesError = require('./validation/errors/jsmodules-extra-modules-error');
+
 class ThemeConfigFactory {
     /**
      * @param {ModulesConfigLoader} configLoader
@@ -11,22 +13,59 @@ class ThemeConfigFactory {
         this._appModulesFileWriter = appModulesFileWriter;
         this._configsFileWriter = configsFileWriter;
     }
-
     /**
      * @param {string} theme Theme name
-     * @param {string} buildPath Path to theme build folder
      * @param {string|string[]} configFilepath Path (or paths with fallback) to yaml config file in a bundle
-     * @return {Object} List of Webpack entry-points
+     * @return {Object} Merged Configs loaded from all the bundles Yaml files matched by filePath
+     */
+    loadConfig(theme, configFilepath) {
+        return this._configLoader.loadConfig(theme, configFilepath);
+    }
+
+    extendConfig(baseConfig, extraConfig) {
+        const {
+            aliases = {},
+            configs,
+            map = {},
+            shim = {}
+        } = baseConfig;
+
+        const {
+            ['app-modules']: appModules,
+            ['dynamic-imports']: dynamicImports,
+            entry,
+            ...rest
+        } = extraConfig;
+
+        const beyondKeys = Object.keys(rest);
+        if (beyondKeys.length) {
+            throw new JSModulesExtraModulesError(beyondKeys);
+        }
+
+        return {
+            aliases,
+            'app-modules': appModules,
+            configs,
+            'dynamic-imports': dynamicImports,
+            entry,
+            map,
+            shim
+        };
+    }
+
+    /**
+     * @param {string} buildPath Path to theme build folder
+     * @param {Object} jsModulesConfig configuration loaded from jsmodules files and merged together
+     * @return {Object} webpack configuration fragment
      */
-    create(theme, buildPath, configFilepath) {
-        const jsModulesConfig = this._configLoader.loadConfig(theme, configFilepath);
+    create(buildPath, jsModulesConfig) {
         const {
             entry,
             map = {},
             shim = {},
             configs,
             aliases = {},
-            ['app-modules']: appModules,
+            ['app-modules']: appModules = [],
             ['dynamic-imports']: dynamicImports
         } = jsModulesConfig;
 

package/utils.js

@@ -0,0 +1,30 @@
+let prodMode;
+let verboseMode;
+
+module.exports = {
+    isVerboseMode() {
+        if (verboseMode === void 0) {
+            verboseMode = process.argv.filter(arg => {
+                // Depending on how the command was run (-v, -vv, -vvv, --verbose) -
+                // arguments can be present in different formats: stats=normal, stats=detailed, stats=verbose, verbose
+                return arg.search(/^verbose|(^stats=(normal|detailed|verbose))/) !== -1;
+            }).length > 0;
+        }
+
+        return verboseMode;
+    },
+    isProdMode() {
+        if (prodMode !== void 0) {
+            return prodMode;
+        }
+
+        process.argv.forEach(arg => {
+            if (prodMode) {
+                return;
+            }
+            prodMode = ['--mode=production', '--env=prod'].some(item => item === arg);
+        });
+
+        return prodMode;
+    }
+};

package/validation/assets-validator.js

@@ -0,0 +1,104 @@
+const {isProdMode} = require('../utils');
+const fs = require('fs');
+const path = require('path');
+const schema = require('./schemas/assets-schema');
+const fullSchema = require('./schemas/assets-schema-full');
+const schemaValidator = require('./schema-validator');
+const EventEmitter = require('events');
+const emitter = new EventEmitter();
+const AssetsSchemaError = require('./errors/assets-schema-error');
+const AssetsInputFileError = require('./errors/assets-input-file-error');
+
+module.exports = Object.assign({}, schemaValidator, {
+    emitter,
+
+    /**
+     * @param {string} filePath
+     * @param {Object} doc
+     * @param {string} theme
+     * @returns {boolean|undefined}
+     */
+    checkSchema(filePath, doc, theme) {
+        if (isProdMode()) {
+            return;
+        }
+        const result = this.validateSchema(schema, doc);
+
+        if (!result.valid) {
+            const error = new AssetsSchemaError(result.formattedError, [filePath], theme);
+
+            this.emitter.emit('error', error);
+        }
+
+        return result.valid;
+    },
+
+    /**
+     * @param {Object} doc
+     * @param {Array} files
+     * @param {string} theme
+     * @returns {boolean|undefined}
+     */
+    checkFullSchema(doc, files = [], theme) {
+        if (isProdMode()) {
+            return;
+        }
+        const result = this.validateSchema(fullSchema, doc);
+
+        if (!result.valid) {
+            const error = new AssetsSchemaError(result.formattedError, files, theme);
+
+            this.emitter.emit('error', error);
+        }
+
+        return result.valid;
+    },
+
+    /**
+     * @param {string} filePath
+     * @param {Object} doc
+     * @param {string} theme
+     * @returns {boolean|undefined}
+     */
+    checkInputsExist(filePath, doc, theme) {
+        if (isProdMode()) {
+            return;
+        }
+
+        let valid = true;
+        for (const [, props] of Object.entries(doc)) {
+            if (!Array.isArray(props.inputs)) {
+                continue;
+            }
+
+            const files = [];
+            props.inputs.forEach(input => {
+                if (typeof input === 'object') {
+                    const newPath = Object.values(input)[0];
+
+                    if (newPath === '~') {
+                        return;
+                    }
+                    input = newPath;
+                }
+
+                const fullBasePath = path.resolve(input);
+                const fullPath = path.resolve(this._publicPath + input);
+                // skip the path to global node modules,
+                // e.g. '~bootstrap/scss/bootstrap'
+                if (!input.startsWith('~') && !fs.existsSync(fullPath) && !fs.existsSync(fullBasePath)) {
+                    files.push(input);
+                }
+            });
+            if (files.length) {
+                valid = false;
+                files.forEach(notExistFile => {
+                    const error = new AssetsInputFileError(notExistFile, filePath);
+
+                    this.emitter.emit('error', error);
+                });
+            }
+        }
+        return valid;
+    }
+});

package/validation/errors/assets-input-file-error.js

@@ -0,0 +1,24 @@
+const BaseError = require('./base-error');
+
+class AssetsInputFileError extends BaseError {
+    /**
+     * @example
+     *  Invalid styles config: input file does not exist /scss/test.scss
+     *  at /config/assets.yml
+     *  Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @param {string} notExistFile
+     * @param {string} path
+     */
+    constructor(notExistFile, path) {
+        const msg = `input file does not exist: ${notExistFile}\nat ${path}:1`;
+
+        super(msg);
+
+        this.name = 'Invalid styles config';
+        this.docLink =
+            'https://doc.oroinc.com/backend/bundles/platform/AssetBundle/#load-scss-or-css-files-from-the-bundle';
+    }
+}
+
+module.exports = AssetsInputFileError;

package/validation/errors/assets-schema-error.js

@@ -0,0 +1,40 @@
+const BaseError = require('./base-error');
+
+class AssetsSchemaError extends BaseError {
+    /**
+     * @example
+     *  Invalid styles config: the "assets.yml" in the "default" theme file does not match the API schema.
+     *  styles.inputs[0] should be: string | object
+     *  at /config/assets.yml
+     *  Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @example
+     * Invalid styles config: the "assets.yml" file the "default" theme does not match the API schema.
+     * styles misses the property 'output'.
+     * List of processed files for the "default" theme:
+     *     /default/config/assets.yml
+     *     /default/config/assets.yml
+     *  Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @param {string} reason
+     * @param {Array} files
+     * @param {string} theme
+     */
+    constructor(reason, files, theme) {
+        let msg = `the "assets.yml" file in the "${theme}" theme does not match the API schema.\n${reason}`;
+
+        const filesListMsg = BaseError.generateFilesListMsg(files, theme);
+
+        if (filesListMsg.length) {
+            msg = `${msg}\n${filesListMsg}`;
+        }
+
+        super(msg);
+
+        this.name = 'Invalid styles config';
+        this.docLink =
+            'https://doc.oroinc.com/backend/bundles/platform/AssetBundle/#load-scss-or-css-files-from-the-bundle';
+    }
+}
+
+module.exports = AssetsSchemaError;

package/validation/errors/base-error.js

@@ -0,0 +1,37 @@
+const {isVerboseMode} = require('../../utils');
+
+class BaseError extends Error {
+    /**
+     * Prepares documentation phrase
+     * @returns {string}
+     */
+    get extra() {
+        return this.docLink ? `Please, find more information in the documentation ${this.docLink}` : '';
+    }
+
+    /**
+     * Creates an instance of BaseError
+     * @param {string} message error message
+     */
+    constructor(message) {
+        super(message);
+    }
+
+    /**
+     * Creates a part of message about processed files
+     * @param {Array} files
+     * @param {string} theme
+     * @returns {string}
+     */
+    static generateFilesListMsg(files, theme) {
+        if (files.length === 1) {
+            return `at ${files[0]}:1`;
+        } else if (isVerboseMode()) {
+            return `List of processed files for the "${theme}" theme:\n    ${files.join('\n    ')}`;
+        }
+
+        return '';
+    }
+}
+
+module.exports = BaseError;

package/validation/errors/jsmodules-extra-modules-error.js

@@ -0,0 +1,22 @@
+const BaseError = require('./base-error');
+
+class JsmodulesExtraModulesError extends BaseError {
+    /**
+     * @example
+     * Failed assembly JS: sections ["shim"] are not allowed in extra js build definition.
+     * Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @param {Array} parts
+     */
+    constructor(parts) {
+        const msg = `sections ["${parts.join('", "')}"] are not allowed in extra js build definition.`;
+
+        super(msg);
+
+        this.name = 'Failed assembly JS';
+        this.docLink =
+            'https://doc.oroinc.com/master/frontend/storefront/how-to/how-to-create-extra-js-build-for-landing-page';
+    }
+}
+
+module.exports = JsmodulesExtraModulesError;

package/validation/errors/jsmodules-schema-error.js

@@ -0,0 +1,40 @@
+const BaseError = require('./base-error');
+
+class JSModulesSchemaError extends BaseError {
+    /**
+     * @example
+     * Invalid JS config: the "jsmodules.yml" files in the "default" theme do not match the API schema.
+     * has an unknown property 'rest'.
+     * at default/config/jsmodules.yml
+     * Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @example
+     * Invalid JS config: the "jsmodules.yml" files in the "default" theme do not match the API schema.
+     * misses the property 'entry'.
+     * List of processed files for the "default" theme:
+     *     /default/config/jsmodules.yml
+     *     /default/config/jsmodules.yml
+     * Please, find more information in the documentation https://doc.oroinc.com/...
+     *
+     * @param {string} reason
+     * @param {Array} files
+     * @param {string} theme
+     */
+    constructor(reason, files, theme) {
+        let msg = `the "jsmodules.yml" files in the "${theme}" theme do not match the API schema.\n${reason}`;
+
+        const filesListMsg = BaseError.generateFilesListMsg(files, theme);
+
+        if (filesListMsg.length) {
+            msg = `${msg}\n${filesListMsg}`;
+        }
+
+        super(msg);
+
+        this.name = 'Invalid JS config';
+        this.docLink =
+            'https://doc.oroinc.com/backend/bundles/platform/AssetBundle/#create-jsmodules-yml-configuration';
+    }
+}
+
+module.exports = JSModulesSchemaError;