@oroinc/oro-webpack-config-builder 5.1.0-alpha3 → 5.1.0-alpha30

package/package.json

@@ -1,46 +1,49 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha3",
+  "version": "5.1.0-alpha30",
   "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",
-    "css-loader": "^5.0.2",
-    "css-minimizer-webpack-plugin": "^1.2.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
+    "bindings": "^1.5.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.1.3",
     "deepmerge": "^4.2.2",
-    "exports-loader": "^2.0.0",
-    "expose-loader": "^2.0.0",
+    "exports-loader": "^3.1.0",
+    "expose-loader": "^3.1.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",
+    "html-webpack-plugin": "^5.5.0",
+    "imports-loader": "^3.1.1",
+    "js-yaml": "^4.1.0",
+    "mini-css-extract-plugin": "^2.4.4",
     "minimist": "^1.2.3",
+    "nan": "^2.15.0",
     "path": "0.12.7",
-    "postcss": "^8.1.0",
-    "postcss-loader": "^5.0.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
     "printf": "^0.6.0",
+    "resolve-url-loader": "^4.0.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",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
+    "terser": "^5.9.0",
     "text-loader": "0.0.1",
-    "underscore": "^1.10.2",
+    "underscore": "^1.13.1",
     "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",
+    "webpack": "^5.63.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0",
+    "webpack-merge": "^5.8.0",
     "wildcard": "^2.0.0"
   }
 }

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,162 @@
-const merge = require('deepmerge');
+const path = require('path');
+const wildcard = require('wildcard');
+const _ = require('underscore');
+const messages = require('../messages')
+
+/**
+ * @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);
+
         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 (output === void 0) {
+                throw new Error(messages.assetsMissedOutput(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 (inputs === void 0) {
+                throw new Error(messages.assetsMissedInput(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 exists any more
+                    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 messages = require('./messages');
+
 class ThemeConfigFactory {
     /**
      * @param {ModulesConfigLoader} configLoader
@@ -11,15 +13,56 @@ 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) {
+        try {
+            return this._configLoader.loadConfig(theme, configFilepath)
+        } catch (e) {
+            throw new Error(messages.jsModulesError(theme));
+        }
+    }
+
+    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 Error( messages.jsExtraModulesError(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 = {},

package/writer/configs-file-writer.js

@@ -12,7 +12,7 @@ class ConfigsFileWriter {
     /**
      * Write app-modules.js file and return file path
      *
-     * @param {Array} configs List of configurable modules
+     * @param {Object} configs List of configurable modules
      * @param {string} output Output file path
      * @returns {string} JS file path of an output file
      */

package/writer/dynamic-imports-file-writer.js

@@ -19,9 +19,9 @@ class DynamicImportsFileWriter {
     write(dynamicImports, output) {
         const buildPath = path.join(output, 'dynamic-imports.js');
         let content = Object.entries(dynamicImports).map(([chunkName, moduleNames]) => {
-            return moduleNames.map(moduleName =>
-                `'${moduleName}': function() { return import(/* webpackChunkName: "${chunkName}" */ '${moduleName}') }`
-            );
+            const notation = chunkName === 'commons' ?
+                '/* webpackMode: "eager" */' : `/* webpackChunkName: "${chunkName}" */`;
+            return moduleNames.map(moduleName =>`'${moduleName}': () => import(${notation}'${moduleName}')`);
         });
         content = `module.exports = {\n  ${content.flat().join(',\n  ')}\n};\n`;
         const filepath = path.resolve(this._publicPath + buildPath);