@oroinc/oro-webpack-config-builder 6.0.0-dev001 → 6.0.0-lts01

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

@@ -28,7 +28,7 @@ class LayoutModulesConfigLoader extends ModulesConfigLoader {
      * @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') {
+    getFilesPaths(theme, dirPath = '/public', fileExtName = '.svg') {
         let iconsPaths = super.getFilesPaths(theme, dirPath, fileExtName);
 
         // recursive process parent theme

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

@@ -40,9 +40,14 @@ class ModulesConfigLoader {
      * @param {Array} bundles Array of ordered symfony bundle paths
      * @param {string|Array} themesLocation Path inside the bundle, where to find the theme
      * @param {string} themeInfoFileName Yaml File name with theme info
+     * @param {string} projectPublicPath Symfony public directory path related to application root folder
+     * @param {string} publicPath Symfony public directory path related to application root folder
      */
-    constructor(bundles, themesLocation, themeInfoFileName) {
+    constructor(bundles, themesLocation, themeInfoFileName, projectPublicPath, publicPath) {
         this._bundles = bundles;
+        this._projectPublicPath = projectPublicPath;
+        this._publicPath = publicPath;
+
         if (!Array.isArray(themesLocation)) {
             themesLocation = [themesLocation];
         }
@@ -126,25 +131,57 @@ class ModulesConfigLoader {
      * @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 = [];
-
+    getFilesPaths(theme, dirPath = '/public', fileExtName = '.svg') {
         this._processedFiles = [];
-        this._bundles.forEach(bundle => {
-            const absolutePath = path.resolve(bundle, dirPath, `${theme}/svg-icons`);
+        const iconsFolder = 'svg-icons';
+        const {resolve_extra_paths: resolveExtraPaths = []} = this.themes[theme];
+        const logProcessedFile = pathToFile => this._processedFiles.push(pathToFile);
+        const collectIcons = pathToFile => {
+            const icons = [];
+            const files = fs.readdirSync(pathToFile);
+
+            for (const file of files) {
+                const fileExt = path.extname(file);
+
+                if (fileExt === fileExtName) {
+                    icons.push(`${pathToFile}/${file}`);
+                }
+            }
 
-            if (fs.existsSync(absolutePath)) {
-                this._processedFiles.push(absolutePath);
+            return icons;
+        };
+        const result = [];
 
-                const files = fs.readdirSync(absolutePath);
+        if (resolveExtraPaths.length) {
+            resolveExtraPaths.map(
+                extraPath => path.join(this._projectPublicPath, this._publicPath, extraPath)
+            ).forEach(extraPath => {
+                const findIcons = extraPath => {
+                    const files = fs.readdirSync(extraPath);
+
+                    for (const file of files) {
+                        const innerFolder = path.join(extraPath, file);
+
+                        if (fs.statSync(innerFolder).isDirectory()) {
+                            if (file === iconsFolder) {
+                                logProcessedFile(innerFolder);
+                                result.push(...collectIcons(innerFolder));
+                            } else {
+                                findIcons(innerFolder);
+                            }
+                        }
+                    }
+                };
+                findIcons(extraPath);
+            });
+        }
 
-                for (const file of files) {
-                    const fileExt = path.extname(file);
+        this._bundles.forEach(bundle => {
+            const absolutePath = path.resolve(bundle, dirPath, `${theme}/${iconsFolder}`);
 
-                    if (fileExt === fileExtName) {
-                        result.push(`${absolutePath}/${file}`);
-                    }
-                }
+            if (fs.existsSync(absolutePath)) {
+                logProcessedFile(absolutePath);
+                result.push(...collectIcons(absolutePath));
             }
         });
 

package/oro-webpack-config.js

@@ -28,6 +28,7 @@ const EventEmitter = require('events');
 const ErrorHandler = require('./error-handler');
 const SVGSprite = require('./svg-sprite');
 require('resolve-url-loader');
+require('lezer-loader');
 
 class ConfigBuilder {
     constructor() {
@@ -355,7 +356,7 @@ class ConfigBuilder {
                     },
                     {
                         test: /\.grammar$/,
-                        use: 'lezer-loader',
+                        use: 'lezer-loader'
                     }
                 ]
             },
@@ -566,7 +567,9 @@ class ConfigBuilder {
         this._modulesConfigLoader = new ModulesConfigLoader(
             this._appConfig.paths,
             ['/Resources/public/themes/', '/public/themes/admin/'],
-            'settings.yml'
+            'settings.yml',
+            this.resolvedProjectPath,
+            this._publicPath
         );
         this._adminThemes = this._modulesConfigLoader.themeNames.map(themeName => 'admin.' + themeName);
         this._adminStyleLoader = new AdminStyleLoader(this._modulesConfigLoader, entryPointFileWriter);
@@ -580,7 +583,9 @@ class ConfigBuilder {
         this._layoutModulesConfigLoader = new LayoutModulesConfigLoader(
             this._appConfig.paths,
             ['/Resources/views/layouts/', '/templates/layouts/'],
-            'theme.yml'
+            'theme.yml',
+            this.resolvedProjectPath,
+            this._publicPath
         );
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);
         this._layoutThemeConfigFactory = new ThemeConfigFactory(

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "6.0.0-dev001",
+  "version": "6.0.0-lts01",
   "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.21.3",
+    "@babel/core": "~7.23.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-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "~5.0.0",
     "deepmerge": "~4.3.1",
     "exports-loader": "~4.0.0",
@@ -26,8 +26,8 @@
     "minimist": "~1.2.7",
     "nan": "~2.17.0",
     "path": "0.12.7",
-    "postcss": "~8.4.23",
-    "postcss-loader": "~7.2.4",
+    "postcss": "<8.4.33",
+    "postcss-loader": "~7.3.4",
     "printf": "~0.6.0",
     "resolve-url-loader": "^5.0.0",
     "rtlcss-webpack-plugin": "~4.0.6",

package/svg-sprite/index.js

@@ -14,6 +14,7 @@ class SvgSprite {
      */
     constructor(configLoader, theme, publicPath, buildPublicPath) {
         this.SPRITE_NAME = 'theme-icons';
+        this.SPRITE_NAME_RTL = `${this.SPRITE_NAME}.rtl`;
         this._configLoader = configLoader;
         this._theme = theme;
         this._publicPath = publicPath;
@@ -22,6 +23,18 @@ class SvgSprite {
         this.optimize();
     }
 
+    /**
+     * Gets theme configuration's settings
+     * @returns {*}
+     */
+    get themeConfig() {
+        if (!this._theme) {
+            return {};
+        }
+
+        return this._configLoader._themes[this._theme];
+    }
+
     /**
      * Starting optimization
      */
@@ -45,9 +58,10 @@ class SvgSprite {
         svgPaths.forEach(icon => {
             const svgName = path.parse(icon).name;
 
-            if (svgName === this.SPRITE_NAME) {
+            if (svgName === this.SPRITE_NAME || svgName === this.SPRITE_NAME_RTL) {
                 throw new Error(
-                    `The "${this.SPRITE_NAME}" is a reserved word and cannot be used as a svg name for building sprite.`
+                    `The "${this.SPRITE_NAME}" and "${this.SPRITE_NAME_RTL}" are a reserved words and
+                    cannot be used as a svg name for building sprite.`
                 );
             }
 
@@ -91,9 +105,71 @@ class SvgSprite {
         await Promise.all(
             files.map(file => this.optimizeFile(file, dirPath))
         );
-        this.createSprite(fs.readdirSync(dirPath), dirPath);
+
+        const {filesList, rtlFilesList} = this.createSpriteMap(fs.readdirSync(dirPath));
+        this.createSprite(filesList, dirPath, `${this.SPRITE_NAME}.svg`);
+
+        if (rtlFilesList) {
+            this.createSprite(rtlFilesList, dirPath, `${this.SPRITE_NAME_RTL}.svg`);
+        }
+
+        this.createMetadata(fs.readdirSync(dirPath), dirPath);
+    }
+
+    /**
+     * @param {Array} files
+       @returns {{ filesList: {}, rtlFilesList: {}|undefined }}
+    */
+    createSpriteMap(files) {
+        const SVGFiles = files.filter(file => path.extname(file) === '.svg');
+        const {rtl_support: rtl} = this.themeConfig;
+        const result = {
+            filesList: SVGFiles.reduce((list, file) => {
+                list[file] = path.parse(file).name;
+                return list;
+            }, {})
+        };
+
+        if (!rtl) {
+            return result;
+        }
+
+        const LTR_TO_RTL = [
+            ['left', 'right'],
+            ['right', 'left'],
+            ['start', 'end'],
+            ['end', 'start']
+        ];
+        const rtlFiles = {...result.filesList};
+        const rtlRegexp = /-(?:left|right|start|end)\.svg$/;
+        const pairedFiles = Object.entries(rtlFiles).filter(([key])=> rtlRegexp.test(key));
+        const swappedFiles = pairedFiles.map(rtlFile => {
+            const file = rtlFile[1];
+            const pair = LTR_TO_RTL.find(pair => file.endsWith(pair[0]));
+
+            if (!pair) {
+                return rtlFile;
+            }
+
+            const RTLFileName = `${file.substring(0, file.length - pair[0].length)}${pair[1]}`;
+            const RTLPairFile = pairedFiles.find(rtlFile => rtlFile[1] === RTLFileName);
+
+            if (RTLPairFile) {
+                return [
+                    rtlFile[0],
+                    RTLPairFile[1]
+                ];
+            }
+
+            return rtlFile;
+        });
+
+        result.rtlFilesList = Object.assign(rtlFiles, Object.fromEntries(swappedFiles));
+
+        return result;
     }
 
+
     /**
      * Optimizing svg using svgo
      * @param {Object} file
@@ -117,18 +193,34 @@ class SvgSprite {
 
     /**
      * Creating sprite
-     * @param {Array} files
+     * @param {Object} files
      * @param {string} dirPath
+     * @param {string} spriteName
      */
-    createSprite(files, dirPath) {
+    createSprite(files, dirPath, spriteName) {
         const sprites = svgstore(svgSpriteConfig);
+        for (const [fullFileName, file] of Object.entries(files)) {
+            sprites.add(file, fs.readFileSync(path.join(dirPath, fullFileName), 'utf8'));
+        }
+        fs.writeFileSync(path.join(dirPath, spriteName), sprites.toString(), 'utf8');
+    }
 
-        for (const file of files) {
+    /**
+     * @param {Array<string>} files
+     * @param {string} dirPath
+     */
+    createMetadata(files, dirPath) {
+        const SVGFiles = files.filter(file => path.extname(file) === '.svg');
+        const svgList = SVGFiles.reduce((acc, file) => {
             const svgName = path.parse(file).name;
-            sprites.add(svgName, fs.readFileSync(path.join(dirPath, file), 'utf8'));
-        }
+            acc[svgName] = file;
 
-        fs.writeFileSync(path.join(dirPath, `${this.SPRITE_NAME}.svg`), sprites, 'utf8');
+            return acc;
+        }, {});
+
+        fs.writeFileSync(
+            path.join(dirPath, 'icons-metadata.json'), JSON.stringify({icons: svgList}, null, null)
+        );
     }
 }