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

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

@@ -22,6 +22,29 @@ 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,6 +119,37 @@ 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,9 +26,7 @@ const RtlCssWebpackPlugin = require('rtlcss-webpack-plugin');
 const validation = require('./validation');
 const EventEmitter = require('events');
 const ErrorHandler = require('./error-handler');
-
-const {ModifySourcePlugin, ConcatOperation} = require('modify-source-webpack-plugin');
-
+const SVGSprite = require('./svg-sprite');
 require('resolve-url-loader');
 
 class ConfigBuilder {
@@ -189,7 +187,7 @@ class ConfigBuilder {
     }
 
     get resolvedProjectPath() {
-        if (this._resolvedProjectPath == undefined) {
+        if (this._resolvedProjectPath === undefined) {
             this._resolvedProjectPath = path.resolve(this._projectPath);
         }
         return this._resolvedProjectPath;
@@ -333,7 +331,7 @@ class ConfigBuilder {
                         }, {
                             loader: 'sass-loader',
                             options: {
-                                implementation: require("sass"),
+                                implementation: require('sass'),
                                 sassOptions: {
                                     includePaths: [
                                         path.join(this.resolvedPublicPath, '/bundles')
@@ -354,6 +352,10 @@ class ConfigBuilder {
                             publicPath: '../../_static/',
                             name: this._getVersionedPath('[path][name].[ext]', this.assetVersion)
                         }
+                    },
+                    {
+                        test: /\.grammar$/,
+                        use: 'lezer-loader',
                     }
                 ]
             },
@@ -373,20 +375,7 @@ 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'
-                                )
-                            ]
-                        }
-                    ]
-                }),
+                )
             ]
         };
 
@@ -440,7 +429,7 @@ class ConfigBuilder {
     }
 
     _getThemeWebpackConfig(buildName, args, env) {
-        let {skipCSS, skipJS, skipRTL} = env;
+        let {skipCSS, skipJS, skipRTL, skipSVG} = env;
         let themeDefinition;
         let jsBuildConfig;
         let buildPublicPath;
@@ -454,7 +443,8 @@ class ConfigBuilder {
                     'Resources/config/jsmodules.yml',
                     'config/oro/jsmodules.yml'
                 ]
-            );            validation.jsmodulesValidator.checkFullSchema(
+            );
+            validation.jsmodulesValidator.checkFullSchema(
                 jsModulesConfig,
                 this._themeConfigFactory?._configLoader.processedFiles,
                 buildName
@@ -484,19 +474,23 @@ class ConfigBuilder {
                 buildName
             );
             jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
-        }
-        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));
+            if (!skipSVG) {
+                new SVGSprite(
+                    this._layoutModulesConfigLoader,
+                    buildName,
+                    this._publicPath,
+                    buildPublicPath
+                );
+            }
         }
+        const {rtl_support: rtlSupport = false} = themeDefinition;
+        const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
 
         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-dev0011",
+  "version": "5.1.0-dev0013",
   "author": "Oro, Inc (https://www.oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -21,9 +21,9 @@
     "html-webpack-plugin": "~5.5.0",
     "imports-loader": "~4.0.1",
     "js-yaml": "~4.1.0",
+    "lezer-loader": "^0.3.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",
@@ -35,11 +35,13 @@
     "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/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/validation/errors/svg-icons-schema-error.js

@@ -0,0 +1,36 @@
+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/index.js

@@ -1,12 +1,15 @@
 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
@@ -31,6 +34,8 @@ module.exports = {
             if (validSchema) {
                 assetsValidation.checkInputsExist(filePath, doc, theme);
             }
+        } else if (isSvgIconsPath(filePath)) {
+            svgIconsValidator.checkSchema(filePath, doc, theme);
         }
     }
 };

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

@@ -0,0 +1,18 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+/**
+ * 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

@@ -0,0 +1,53 @@
+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;
+    }
+});