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

package/modules-config/layout-modules-config-loader.js

@@ -22,29 +22,6 @@ class LayoutModulesConfigLoader extends ModulesConfigLoader {
         return themeConfig;
     }
 
-    /**
-     * @param {string} theme Theme name
-     * @param {string} dirPath path to the directory were to search
-     * @param {string} fileExtName file extension
-     * @return {Object} Merged Configs loaded from all the bundles Yaml files matched by dirPath
-     */
-    getFilesPaths(theme, dirPath = '/public', fileExtName = '.txt') {
-        let iconsPaths = super.getFilesPaths(theme, dirPath, fileExtName);
-
-        // recursive process parent theme
-        const {parent: parentTheme} = this.themes[theme];
-        if (typeof parentTheme === 'string') {
-            const processedFiles = this.processedFiles;
-            const parentIconsPaths = this.getFilesPaths(parentTheme, dirPath, fileExtName);
-
-            iconsPaths = [...iconsPaths, ...parentIconsPaths];
-            // processedFiles from parent theme is added to processedFiles of current theme
-            this._processedFiles = [...processedFiles, ...this.processedFiles];
-        }
-
-        return iconsPaths;
-    }
-
     /**
      * All build names:
      *  - based on theme names

package/modules-config/modules-config-loader.js

@@ -119,37 +119,6 @@ class ModulesConfigLoader {
 
         return configs;
     }
-
-    /**
-     * @param {string} theme Theme name
-     * @param {string} dirPath path to the directory were to search
-     * @param {string} fileExtName file extension
-     * @return {Object} Merged Configs loaded from all the bundles Yaml files matched by dirPath
-     */
-    getFilesPaths(theme, dirPath = '/public', fileExtName = '.txt') {
-        const result = [];
-
-        this._processedFiles = [];
-        this._bundles.forEach(bundle => {
-            const absolutePath = path.resolve(bundle, dirPath, `${theme}/svg-icons`);
-
-            if (fs.existsSync(absolutePath)) {
-                this._processedFiles.push(absolutePath);
-
-                const files = fs.readdirSync(absolutePath);
-
-                for (const file of files) {
-                    const fileExt = path.extname(file);
-
-                    if (fileExt === fileExtName) {
-                        result.push(`${absolutePath}/${file}`);
-                    }
-                }
-            }
-        });
-
-        return result;
-    }
 }
 
 module.exports = ModulesConfigLoader;

package/oro-webpack-config.js

@@ -26,7 +26,9 @@ const RtlCssWebpackPlugin = require('rtlcss-webpack-plugin');
 const validation = require('./validation');
 const EventEmitter = require('events');
 const ErrorHandler = require('./error-handler');
-const SVGSprite = require('./svg-sprite');
+
+const {ModifySourcePlugin, ConcatOperation} = require('modify-source-webpack-plugin');
+
 require('resolve-url-loader');
 
 class ConfigBuilder {
@@ -187,7 +189,7 @@ class ConfigBuilder {
     }
 
     get resolvedProjectPath() {
-        if (this._resolvedProjectPath === undefined) {
+        if (this._resolvedProjectPath == undefined) {
             this._resolvedProjectPath = path.resolve(this._projectPath);
         }
         return this._resolvedProjectPath;
@@ -331,7 +333,7 @@ class ConfigBuilder {
                         }, {
                             loader: 'sass-loader',
                             options: {
-                                implementation: require('sass'),
+                                implementation: require("sass"),
                                 sassOptions: {
                                     includePaths: [
                                         path.join(this.resolvedPublicPath, '/bundles')
@@ -371,7 +373,20 @@ class ConfigBuilder {
                 }),
                 new AfterWebpackLogsPlugin(
                     stats => this.emitter.emit('build:complete', stats)
-                )
+                ),
+                new ModifySourcePlugin({
+                    rules: [
+                        {
+                            test: /\.js$/,
+                            operations: [
+                                new ConcatOperation(
+                                    'end',
+                                    '\n;console.log("$FILE_PATH".replace("node_modules", "\x1B[92;4mnode_modules\x1B[m").replace("orothemedefault51", "\x1B[94;4morothemedefault51\x1B[m"));\n'
+                                )
+                            ]
+                        }
+                    ]
+                }),
             ]
         };
 
@@ -425,7 +440,7 @@ class ConfigBuilder {
     }
 
     _getThemeWebpackConfig(buildName, args, env) {
-        let {skipCSS, skipJS, skipRTL, skipSVG} = env;
+        let {skipCSS, skipJS, skipRTL} = env;
         let themeDefinition;
         let jsBuildConfig;
         let buildPublicPath;
@@ -439,8 +454,7 @@ class ConfigBuilder {
                     'Resources/config/jsmodules.yml',
                     'config/oro/jsmodules.yml'
                 ]
-            );
-            validation.jsmodulesValidator.checkFullSchema(
+            );            validation.jsmodulesValidator.checkFullSchema(
                 jsModulesConfig,
                 this._themeConfigFactory?._configLoader.processedFiles,
                 buildName
@@ -470,23 +484,19 @@ class ConfigBuilder {
                 buildName
             );
             jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
-
-            if (!skipSVG) {
-                new SVGSprite(
-                    this._layoutModulesConfigLoader,
-                    buildName,
-                    this._publicPath,
-                    buildPublicPath
-                );
-            }
         }
-        const {rtl_support: rtlSupport = false} = themeDefinition;
+        let {rtl_support: rtlSupport = false, resolveExtraPaths = []} = themeDefinition;
         const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
 
+        if (resolveExtraPaths.length) {
+            resolveExtraPaths = resolveExtraPaths.map(extraPath => path.join(this.resolvedPublicPath, extraPath));
+        }
+
         const resolverConfig = {
             modules: [
                 resolvedBuildPath,
                 this.resolvedPublicPath,
+                ...resolveExtraPaths,
                 path.join(this.resolvedProjectPath, '/assets'),
                 path.join(this.resolvedPublicPath, '/bundles'),
                 path.join(this.resolvedPublicPath, '/js'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-dev0010",
+  "version": "5.1.0-dev0011",
   "author": "Oro, Inc (https://www.oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -23,6 +23,7 @@
     "js-yaml": "~4.1.0",
     "mini-css-extract-plugin": "~2.7.1",
     "minimist": "~1.2.7",
+    "modify-source-webpack-plugin": "^4.1.0",
     "nan": "~2.17.0",
     "path": "0.12.7",
     "postcss": "~8.4.23",
@@ -34,13 +35,11 @@
     "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.13.*",
     "url-loader": "~4.1.1",
-    "webpack": "~5.80.0",
+    "webpack": "^5.80.0",
     "webpack-bundle-analyzer": "~4.8.0",
     "webpack-cli": "~5.0.0",
     "webpack-dev-server": "^4.11.1",

package/validation/index.js

@@ -1,15 +1,12 @@
 const assetsValidation = require('./assets-validator');
 const jsmodulesValidator = require('./jsmodules-validator');
-const svgIconsValidator = require('./svg-icons-validator');
 
 const isJSModulesPath = path => /jsmodules([-a-zA-Z\d]*)\.yml$/.test(path);
 const isAssetsPath = path => /assets\.yml$/.test(path);
-const isSvgIconsPath = path => /svg-icons\.yml$/.test(path);
 
 module.exports = {
     assetsValidation,
     jsmodulesValidator,
-    svgIconsValidator,
 
     /**
      * set public path for all validators
@@ -34,8 +31,6 @@ module.exports = {
             if (validSchema) {
                 assetsValidation.checkInputsExist(filePath, doc, theme);
             }
-        } else if (isSvgIconsPath(filePath)) {
-            svgIconsValidator.checkSchema(filePath, doc, theme);
         }
     }
 };

package/validation/jsmodules-validator.js

@@ -16,7 +16,6 @@ module.exports = Object.assign({}, schemaValidator, {
      * @returns {boolean|undefined}
      */
     checkSchema(filePath, doc, theme) {
-        return true;
         if (isProdMode()) {
             return;
         }
@@ -38,7 +37,6 @@ module.exports = Object.assign({}, schemaValidator, {
      * @returns {boolean|undefined}
      */
     checkFullSchema(doc, files = [], theme) {
-        return true;
         if (isProdMode()) {
             return;
         }

package/svg-sprite/index.js

@@ -1,135 +0,0 @@
-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

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

package/svg-sprite/svgo-config.js

@@ -1,32 +0,0 @@
-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/validation/errors/svg-icons-schema-error.js

@@ -1,36 +0,0 @@
-const BaseError = require('./base-error');
-
-class SvgIconsSchemaError extends BaseError {
-    /**
-     * @example
-     * Invalid SVG config: the "svg-icons.yml" files in the "default" theme do not match the API schema.
-     * has an unknown property 'rest'.
-     * at default/config/svg-icons.yml
-     *
-     * @example
-     * Invalid SVG config: the "svg-icons.yml" files in the "default" theme do not match the API schema.
-     * misses the property 'exclude'.
-     * List of processed files for the "default" theme:
-     *     /default/config/svg-icons.yml
-     *     /default/config/svg-icons.yml
-     *
-     * @param {string} reason
-     * @param {Array} files
-     * @param {string} theme
-     */
-    constructor(reason, files, theme) {
-        let msg = `the "svg-icons.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 SVG config';
-    }
-}
-
-module.exports = SvgIconsSchemaError;

package/validation/schemas/svg-icons-schema-full.js

@@ -1,18 +0,0 @@
-/**
- * Schema to validate svg-icons.yml files
- *
- * @description
- * Full scheme complements "svg-icons-schema" one.
- * It should have only rules which are not defined in "svg-icons-schema" schema due to avoid duplicates in error messages
- */
-
-module.exports = {
-    type: 'object',
-    properties: {
-        exclude: {
-            description: 'The "exclude" property is an array of  svg files to exclude from svg sprite.',
-            type: 'array',
-            minItems: 0
-        }
-    }
-};

package/validation/schemas/svg-icons-schema.js

@@ -1,17 +0,0 @@
-/**
- * Schema to validate svg-icons.yml files
- */
-
-module.exports = {
-    type: 'object',
-    properties: {
-        exclude: {
-            description: 'List of SVG files to exclude a from svg sprite.',
-            type: 'array',
-            items: {
-                type: 'string'
-            }
-        }
-    },
-    additionalProperties: false
-};

package/validation/svg-icons-validator.js

@@ -1,53 +0,0 @@
-const schema = require('./schemas/svg-icons-schema');
-const fullSchema = require('./schemas/svg-icons-schema-full');
-const schemaValidator = require('./schema-validator');
-const {isProdMode} = require('../utils');
-const EventEmitter = require('events');
-const emitter = new EventEmitter();
-const SvgIsonsSchemaError = require('./errors/svg-icons-schema-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 SvgIsonsSchemaError(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 SvgIsonsSchemaError(result.formattedError, files, theme);
-
-            this.emitter.emit('error', error);
-        }
-
-        return result.valid;
-    }
-});