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

package/package.json

@@ -1,49 +1,50 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha9",
+  "version": "5.1.0-dev0010",
   "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.21.2",
+    "autoprefixer": "~10.4.13",
+    "babel-loader": "~9.1.0",
+    "bindings": "~1.5.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "~5.0.0",
+    "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.23",
+    "postcss-loader": "~7.2.4",
+    "printf": "~0.6.0",
+    "resolve-url-loader": "^5.0.0",
+    "rtlcss-webpack-plugin": "~4.0.6",
+    "sass": "~1.62.0",
+    "sass-loader": "~13.2.0",
+    "schema-utils": "^4.0.0",
+    "style-loader": "~3.3.1",
+    "svgo": "^3.0.2",
+    "svgstore": "^3.0.1",
+    "terser": "~5.17.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.80.0",
+    "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/svg-sprite/index.js

@@ -0,0 +1,135 @@
+const path = require('path');
+const fs = require('fs');
+const {svgIconsValidator} = require('../validation');
+const svgoConfig = require('./svgo-config');
+const svgSpriteConfig = require('./svg-sprite-config');
+const {optimize} = require('svgo');
+const svgstore = require('svgstore');
+class SvgSprite {
+    /**
+     * @param {ModulesConfigLoader} configLoader
+     * @param {string} theme
+     * @param {string} publicPath
+     * @param {string} buildPublicPath
+     */
+    constructor(configLoader, theme, publicPath, buildPublicPath) {
+        this.SPRITE_NAME = 'theme-icons';
+        this._configLoader = configLoader;
+        this._theme = theme;
+        this._publicPath = publicPath;
+        this._buildPublicPath = buildPublicPath;
+
+        this.optimize();
+    }
+
+    /**
+     * Starting optimization
+     */
+    optimize() {
+        const svgConfig = this._configLoader.loadConfig(
+            this._theme,
+            'config/svg-icons.yml'
+        );
+
+        svgIconsValidator.checkFullSchema(svgConfig, this._configLoader.processedFiles, this._theme);
+
+        const svgPaths = this._configLoader.getFilesPaths(
+            this._theme,
+            'Resources/public/',
+            '.svg'
+        );
+        const exclude = svgConfig.exclude ?? [];
+        const filesToOptimize = [];
+        const filesNames = {};
+
+        svgPaths.forEach(icon => {
+            const svgName = path.parse(icon).name;
+
+            if (svgName === this.SPRITE_NAME) {
+                throw new Error(
+                    `The "${this.SPRITE_NAME}" is a reserved word and cannot be used as a svg name for building sprite.`
+                );
+            }
+
+            const toExclude = exclude.includes(svgName);
+            const fileIsChosenToMove = filesNames[svgName] === svgName;
+
+            if (toExclude === false && fileIsChosenToMove === false) {
+                filesToOptimize.push(icon);
+                filesNames[svgName] = svgName;
+            }
+        });
+
+        if (filesToOptimize.length === 0) {
+            return;
+        }
+
+        this.moveFiles(filesToOptimize);
+    }
+
+    /**
+     * Preparing files for optimization
+     * @param {Array} files
+     * @returns {Promise<void>}
+     */
+    async moveFiles(files) {
+        const buildPath = path.join(this._buildPublicPath, 'svg-icons');
+        const dirPath = path.resolve(`${this._publicPath}${buildPath}`);
+
+        if (!fs.existsSync(dirPath)) {
+            fs.mkdirSync(dirPath, {recursive: true});
+        }
+
+        try {
+            fs.readdirSync(dirPath).forEach(file => {
+                fs.unlinkSync(path.join(dirPath, file));
+            });
+        } catch (error) {
+            throw new Error(error);
+        }
+
+        await Promise.all(
+            files.map(file => this.optimizeFile(file, dirPath))
+        );
+        this.createSprite(fs.readdirSync(dirPath), dirPath);
+    }
+
+    /**
+     * Optimizing svg using svgo
+     * @param {Object} file
+     * @param {string} dirPath
+     * @returns {Promise<void>}
+     */
+    async optimizeFile(file, dirPath) {
+        const {name, ext} = path.parse(file);
+        const filepath = path.join(dirPath, `${name}${ext}`);
+
+        const originalSvg = fs.readFileSync(file, 'utf8');
+        const {data: optimizedSvg} = await optimize(originalSvg, {
+            path: filepath,
+            ...svgoConfig
+        });
+
+        // svgo will always add a final newline when in pretty mode
+        const resultSvg = optimizedSvg.trim().replace(/(\n\r?|\r\n?)/g, '');
+        fs.writeFileSync(filepath, resultSvg, 'utf8');
+    }
+
+    /**
+     * Creating sprite
+     * @param {Array} files
+     * @param {string} dirPath
+     */
+    createSprite(files, dirPath) {
+        const sprites = svgstore(svgSpriteConfig);
+
+        for (const file of files) {
+            const svgName = path.parse(file).name;
+            sprites.add(svgName, fs.readFileSync(path.join(dirPath, file), 'utf8'));
+        }
+
+        fs.writeFileSync(path.join(dirPath, `${this.SPRITE_NAME}.svg`), sprites, 'utf8');
+    }
+}
+
+module.exports = SvgSprite;

package/svg-sprite/svg-sprite-config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    cleanDefs: false,
+    cleanSymbols: false,
+    inline: false
+};

package/svg-sprite/svgo-config.js

@@ -0,0 +1,32 @@
+module.exports = {
+    multipass: true,
+    js2svg: {
+        pretty: true,
+        indent: 0,
+        eol: 'lf'
+    },
+    plugins: [{
+        name: 'preset-default',
+        params: {
+            overrides: {
+                removeUnknownsAndDefaults: {
+                    keepRoleAttr: true
+                },
+                removeViewBox: false
+            }
+        }
+    },
+    // The next plugins are included in svgo but are not part of preset-default,
+    // so we need to enable them separately
+    'cleanupListOfValues',
+    {
+        name: 'removeAttrs',
+        params: {
+            attrs: [
+                'clip-rule',
+                'data-name',
+                'fill'
+            ]
+        }
+    }]
+};

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 === null) {
+                        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;
+    }
+});