@oroinc/oro-webpack-config-builder 5.1.0-alpha5 → 5.1.0-alpha50

package/package.json

@@ -1,48 +1,49 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha5",
+  "version": "5.1.0-alpha50",
   "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.20.12",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "~7.20.2",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "~8.2.3",
+    "bindings": "~1.5.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "~4.2.2",
+    "deepmerge": "~4.2.2",
+    "exports-loader": "~4.0.0",
+    "expose-loader": "~4.0.0",
+    "file-loader": "~6.2.0",
+    "happypack": "~5.0.1",
+    "html-webpack-plugin": "~5.5.0",
+    "imports-loader": "~4.0.0",
+    "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",
-    "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.0.2",
+    "printf": "~0.6.0",
+    "resolve-url-loader": "^5.0.0",
+    "rtlcss-webpack-plugin": "~4.0.6",
+    "sass": "^1.57.1",
+    "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",
+    "underscore": "^1.13.6",
     "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"
+    "webpack": "^5.76.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "~4.9.1",
+    "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/prepare-modules-shim.js

@@ -12,7 +12,19 @@ module.exports = (resolver, config) => {
 
             // convert to imports-loader? syntax
             if (imports && imports.length) {
-                uses.push(`imports-loader?type=commonjs&imports=${imports.join(',')}`);
+                let importParams = Object.assign(
+                    {
+                        type: 'commonjs',
+                        imports: imports.filter(item => typeof item === 'string').join(',')
+                    },
+                    ...imports.filter(item => typeof item === 'object')
+                );
+
+                importParams = Object.entries(importParams)
+                    .filter(([, value]) => Boolean(value))
+                    .map(([key, value]) => `${key}=${value.replace(/ /g, '%20')}`);
+
+                uses.push(`imports-loader?${importParams.join('&')}`);
             }
 
             // convert to exports-loader? syntax

package/style/admin-style-loader.js

@@ -0,0 +1,22 @@
+const merge = require('deepmerge');
+const StyleLoader = require('./style-loader');
+
+class AdminStyleLoader extends StyleLoader {
+    /**
+     * @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');
+        /** @type {Object.<string, ThemeGroupConfig>} */
+        const themeConfig = merge(baseThemeConfig, extraThemeConfig);
+
+        return {
+            themeConfig,
+            settings: {rtlSupport}
+        };
+    }
+}
+
+module.exports = AdminStyleLoader;

package/style/layout-style-loader.js

@@ -1,115 +1,18 @@
-const path = require('path');
-const wildcard = require('wildcard');
-const _ = require('underscore')
+const StyleLoader = require('./style-loader');
 
-class LayoutStyleLoader {
+class LayoutStyleLoader extends StyleLoader {
     /**
-     * @param {YamlConfigLoader} configLoader
-     * @param {SCSSEntryPointFileWriter} entryPointFileWriter
+     * @inheritdoc
      */
-    constructor(configLoader, entryPointFileWriter) {
-        this._configLoader = configLoader;
-        this._entryPointFileWriter = entryPointFileWriter;
-    }
-
-    /**
-     * @param {string} theme Theme name
-     * @param {string} buildPath Build path
-     * @return {Object} List of Webpack entry-points
-     */
-    getThemeEntryPoints(theme, buildPath) {
-        const entryPoints = {};
-        const {rtl_support: rtlSupport = false} = this._configLoader.themes[theme];
-        const themeConfig = this._configLoader.loadConfig(theme, '/config/assets.yml');
-        const writingOptions = {};
-
-        for (const [key, config] of Object.entries(themeConfig)) {
-            let {inputs, output, auto_rtl_inputs: rtlMasks = []} = config;
-            if (config.output === undefined) {
-                throw new Error('"output" for "' + key + '" group in theme "' + theme + '" is not defined');
-            }
-            inputs = this._overrideInputs(inputs);
-            inputs = this._sortInputs(inputs);
-            if (rtlSupport) {
-                writingOptions.ignoreRTLInputs = _.difference(inputs, this._matchInputs(rtlMasks, inputs));
-            }
-
-            const entryPointName = output.replace(/\.[^/.]+$/, '');
-            const filePath = path.join(buildPath, output);
-            entryPoints[entryPointName] =
-                this._entryPointFileWriter.write('./../../../', inputs, filePath, writingOptions);
-        }
-        return entryPoints;
-    }
-
-    /**
-     * @param {Object} inputs
-     * @returns {string[]} List of inputs
-     * @private
-     */
-    _overrideInputs(inputs) {
-        const newInputs = [];
-
-        inputs.forEach((input, index) => {
-            if (typeof input !== 'string') {
-                const oldInput = Object.keys(input)[0];
-                const newInput = input[oldInput];
-                const oldInputIndex = newInputs.findIndex(element => element === oldInput);
-
-                if (newInput) { // replace input
-                    newInputs[oldInputIndex] = newInput;
-                } else { // delete input
-                    newInputs.splice(oldInputIndex, 1);
-                }
-                newInputs.splice(index);
-            } else {
-                newInputs[index] = input;
-            }
-        });
-
-        return newInputs;
-    }
-
-    /**
-     * Sort inputs, so first will be settings, then variables, then other files
-     * @param {Object} inputs
-     * @returns {string[]} List of ordered inputs
-     * @private
-     */
-    _sortInputs(inputs) {
-        const settingsInputs = [];
-        const variablesInputs = [];
-        const restInputs = [];
-
-        inputs.forEach(input => {
-            if (input.indexOf('/settings/') > 0) {
-                settingsInputs.push(input);
-            } else if (input.indexOf('/variables/') > 0) {
-                variablesInputs.push(input);
-            } else {
-                restInputs.push(input);
-            }
-        });
-        return [...settingsInputs, ...variablesInputs, ...restInputs];
-    }
-
-    /**
-     * Filter inputs that matches any mask from the list
-     *
-     * @param {[string]} masks list of wildcard masks
-     * @param {[string]} inputs
-     * @return {[string]} matched inputs
-     * @private
-     */
-    _matchInputs(masks, inputs) {
-        masks = masks.map(mask => wildcard(mask));
-
-        const whiteListedInputs = masks.reduce((include, mask) => {
-            include.push(...mask.match(inputs));
-            return include;
-        }, []);
-
-        return _.unique(whiteListedInputs);
+    _fetchThemeConfig(themeName) {
+        const {rtl_support: rtlSupport = false} = this._configLoader.themes[themeName];
+        /** @type {Object.<string, ThemeGroupConfig>} */
+        const themeConfig = this._configLoader.loadConfig(themeName, 'config/assets.yml');
+
+        return {
+            themeConfig,
+            settings: {rtlSupport}
+        };
     }
 }
 

package/style/style-loader.js

@@ -1,78 +1,166 @@
-const merge = require('deepmerge');
+const path = require('path');
+const wildcard = require('wildcard');
+const _ = require('underscore');
+const {isProdMode} = require('../utils');
+const {assetsValidation} = require('../validation');
+const StylesError = require('../validation/errors/styles-error');
+
+/**
+ * @typedef ThemeGroupConfig
+ * @type {Object}
+ * @property {Array.<string|Object>} inputs - list of input resources for import into root SCSS file
+ * @property {Array.<string>} entries - list of direct entry resources
+ * @property {string} output - name or out put resource
+ * @property {[boolean]} auto_rtl_inputs - whether theme support RTL
+ */
 
 class StyleLoader {
     /**
      * @param {YamlConfigLoader} configLoader
+     * @param {SCSSEntryPointFileWriter} entryPointFileWriter
      */
-    constructor(configLoader) {
+    constructor(configLoader, entryPointFileWriter) {
         this._configLoader = configLoader;
+        this._entryPointFileWriter = entryPointFileWriter;
     }
 
     /**
      * @param {string} theme Theme name
+     * @param {string} buildPath Build path
      * @return {Object} List of Webpack entry-points
      */
-    getThemeEntryPoints(theme) {
+    getThemeEntryPoints(theme, buildPath) {
+        const {themeConfig, settings = {}} = this._fetchThemeConfig(theme);
+
+        assetsValidation.checkFullSchema(themeConfig, this._configLoader.processedFiles, theme);
+
         const entryPoints = {};
-        const commonConfig = this._configLoader.loadConfig(theme, '/Resources/config/oro/assets.yml');
-        let themeConfig = this._configLoader.loadConfig(theme, '/Resources/public/themes/' + theme + '/settings.yml');
-
-        themeConfig = themeConfig.styles;
-        for (const key in themeConfig) {
-            if (themeConfig.hasOwnProperty(key)) {
-                const config = themeConfig[key];
-                if (commonConfig[key]) {
-                    commonConfig[key] = merge(commonConfig[key], config);
-                }
+        const writingOptions = {};
+        for (const [group, config] of Object.entries(themeConfig)) {
+            let {inputs, entries = [], output, auto_rtl_inputs: rtlMasks = []} = config;
+
+            if (isProdMode() && output === void 0) {
+                throw new StylesError('output', group, theme);
             }
-        }
 
-        for (const key in commonConfig) {
-            if (commonConfig.hasOwnProperty(key)) {
-                const config = commonConfig[key];
-                const inputs = this._overrideInputs(config.inputs);
-                if (config.output === undefined) {
-                    throw new Error('"output" for "' + key + '" group in theme "' + theme + '" is not defined');
-                }
-                entryPoints[config.output.replace(/\.[^/.]+$/, '')] = inputs;
+            if (isProdMode() && inputs === void 0) {
+                throw new StylesError('inputs', group, theme);
+            }
+
+            inputs = this._overrideInputs(inputs);
+            inputs = this._sortInputs(inputs);
+
+            if (settings.rtlSupport) {
+                writingOptions.ignoreRTLInputs = _.difference(inputs, this._matchInputs(rtlMasks, inputs));
             }
+
+            const entryPointName = output.replace(/\.[^/.]+$/, '');
+            const filePath = path.join(buildPath, output);
+            entryPoints[entryPointName] = [
+                ...entries,
+                this._entryPointFileWriter.write('./../../../', inputs, filePath, writingOptions)
+            ];
         }
         return entryPoints;
     }
 
     /**
-     * @param {Object} inputs
+     * Extracts theme configuration with its settings
+     *
+     * @param {string} themeName
+     * @return {{themeConfig: Object.<string, ThemeGroupConfig>, settings: {rtlSupport: boolean}}}
+     * @abstract
+     * @protected
+     */
+    _fetchThemeConfig(themeName) {
+        throw new Error('Method `_fetchThemeConfig` has to be implemented in extends');
+    }
+
+    /**
+     * Override inputs
+     *
+     * @param {(string|Object)[]} inputs
      * @returns {string[]} List of inputs
-     * @private
+     * @protected
      */
     _overrideInputs(inputs) {
-        const newInputs = [];
-
-        inputs.forEach((input, index) => {
-            if (typeof input !== 'string') {
-                const oldInput = Object.keys(input)[0];
-                const newInput = input[oldInput];
-                const oldInputIndex = newInputs.findIndex(element => element === oldInput);
-
-                if (newInput) { // replace input
-                    newInputs[oldInputIndex] = newInput;
-                } else { // delete input
-                    newInputs.splice(oldInputIndex, 1);
-                }
-                newInputs.splice(index);
+        const mappedInputs = [];
+        inputs.forEach(input => {
+            if (typeof input === 'string') {
+                mappedInputs.push(input);
             } else {
-                // cut off ~ prefix from the path,
-                // if someone acidentaly used it for the admin theme assets.yml or settings.yml file,
-                // because the syntax is valid only in the @import statement, that is
-                // not used for the admin theme yaml files configuration
-                if (input.startsWith('~')) {
-                    input = input.substr(1);
+                const [oldInput, newInput] = Object.entries(input)[0];
+                const oldInputIndex = mappedInputs.findIndex(item => item === oldInput);
+
+                if (oldInputIndex === -1) {
+                    // old input does not exist anymore
+                    mappedInputs.push(newInput);
+                } else if (newInput) {
+                    // replace input
+                    mappedInputs[oldInputIndex] = newInput;
+                } else {
+                    // delete input
+                    mappedInputs.splice(oldInputIndex, 1);
                 }
-                newInputs.push(input);
             }
         });
+        return mappedInputs;
+    }
+
+    /**
+     * Sort inputs, so first will be settings, then variables, then other files
+     *
+     * @param {string[]} inputs
+     * @returns {string[]} List of ordered inputs
+     * @protected
+     */
+    _sortInputs(inputs) {
+        const primarySettingsInputs = [];
+        const settingsInputs = [];
+        const primaryVariablesInputs = [];
+        const variablesInputs = [];
+        const restInputs = [];
+
+        inputs.forEach(input => {
+            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 [
+            ...primarySettingsInputs,
+            ...settingsInputs,
+            ...primaryVariablesInputs,
+            ...variablesInputs,
+            ...restInputs
+        ];
+    }
+
+    /**
+     * Filter inputs that matches any mask from the list
+     *
+     * @param {string[]} masks list of wildcard masks
+     * @param {string[]} inputs
+     * @return {string[]} matched inputs
+     * @protected
+     */
+    _matchInputs(masks, inputs) {
+        masks = masks.map(mask => wildcard(mask));
+
+        const whiteListedInputs = masks.reduce((include, mask) => {
+            include.push(...mask.match(inputs));
+            return include;
+        }, []);
 
-        return newInputs;
+        return _.unique(whiteListedInputs);
     }
 }
 

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|string[]} configFilepath Path (or paths with fallback) to yaml config file in a bundle
+     * @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 {string} configFilepath Path to yaml config file in a bundle
-     * @return {Object} List of Webpack entry-points
+     * @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;
+    }
+};