@oroinc/oro-webpack-config-builder 6.1.0-lts05 → 6.1.0-lts07

package/js-to-scss/create-font-list.js

@@ -0,0 +1,58 @@
+/**
+ * Converts JS object to SCSS list variable for theme fonts
+ * @example {
+ *     main: {
+ *         family: 'Jakarta',
+ *         variants: [{
+ *             path: '/font.woff2',
+ *             style: 'normal',
+ *             weight: '700'
+ *         }]
+ *         formats: ['woff2']
+ *     }
+ * } => (
+ *     'main': (
+ *         'family': 'Jakarta',
+ *         'variants': (
+ *             (
+ *                 'path': '/font.woff2',
+ *                 'style': 'normal',
+ *                 'weight': '700',
+ *             )
+ *         )
+ *         'formats': ('woff2')
+ *     )
+ * )
+ *
+ * @param {object} fonts
+ * @param {string }scssVarName
+ * @returns {string}
+ */
+const fontObjToSCSS = ({fonts, scssVarName = 'global-theme-fonts'} = {}) => {
+    if (!Object.keys(fonts).length) {
+        return `$${scssVarName}: ()`;
+    }
+    const fontsVariantsVars = Object.entries(fonts).map(([name, font]) => {
+        return `
+            '${name}': (
+                'family': '${font.family}',
+                'variants': (
+                    ${font.variants.map(item => `(
+                        'path': '${item.path}',
+                        ${item.weight !== void 0 ? `'weight': ${item.weight},` : ''}
+                        ${item.style !== void 0 ? `'style': ${item.style}` : ''}
+                    )`).join(`, `)}
+                ),
+                'formats': (${font.formats.map(format => `'${format}'`).join(', ')})
+            )
+        `;
+    });
+
+    return `
+        $${scssVarName}: (
+            ${fontsVariantsVars.join(`, `)}
+        );
+    `;
+};
+
+module.exports = fontObjToSCSS;

package/js-to-scss/index.js

@@ -0,0 +1,5 @@
+const createFontList = require('./create-font-list');
+
+module.exports = {
+    createFontList
+};

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

@@ -2,7 +2,25 @@ const path = require('path');
 const merge = require('deepmerge');
 const ModulesConfigLoader = require('./modules-config-loader');
 
+const arrayMerge = (target, source) => target.concat(source.filter(item => !target.includes(item)));
+
 class LayoutModulesConfigLoader extends ModulesConfigLoader {
+    /**
+     * @inheritdoc
+     */
+    _collectThemes(themesLocation, themeInfoFileName) {
+        const themes = super._collectThemes(themesLocation, themeInfoFileName);
+
+        for (const [name] of Object.entries(themes)) {
+            const {parent: parentTheme} = themes[name];
+            if (typeof parentTheme === 'string') {
+                themes[name] = merge(themes[parentTheme], themes[name], {arrayMerge});
+            }
+        }
+
+        return themes;
+    }
+
     /**
      * @inheritdoc
      */

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

@@ -3,7 +3,6 @@ const fs = require('fs');
 const merge = require('deepmerge');
 const yaml = require('js-yaml');
 const validation = require('../validation');
-
 // merge only unique items
 const arrayMerge = (target, source) => target.concat(source.filter(item => !target.includes(item)));
 
@@ -52,25 +51,27 @@ class ModulesConfigLoader {
             themesLocation = [themesLocation];
         }
 
-        const themes = {};
-        const self = this;
+        let allThemes = {};
         themesLocation.forEach(themesLocation => {
-            self._collectThemes(themes, themesLocation, themeInfoFileName);
+            allThemes = merge(allThemes, this._collectThemes(themesLocation, themeInfoFileName), {arrayMerge});
         });
 
-        this._themes = themes;
+        this._themes = allThemes;
         this._processedFiles = [];
     }
 
     /**
      * Collects list of themes with their parents into given storage(themes param)
      *
-     * @param {Object} themes
      * @param {string} themesLocation
      * @param {string} themeInfoFileName
      * @private
+     * @returns {Object.<string|null>}
      */
-    _collectThemes(themes, themesLocation, themeInfoFileName) {
+    _collectThemes(themesLocation, themeInfoFileName) {
+        const themes = {};
+        this._processedFiles = [];
+
         this._bundles.forEach(bundle => {
             const source = bundle + themesLocation;
 
@@ -82,12 +83,21 @@ class ModulesConfigLoader {
                     return;
                 }
                 const themeFile = path.resolve(themePath, themeInfoFileName);
-                if (!fs.existsSync(themeFile)) return;
+                if (!fs.existsSync(themeFile)) {
+                    return;
+                }
+
+                this._processedFiles.push(themeFile);
+
+                const doc = yaml.load(fs.readFileSync(themeFile, 'utf8'));
 
-                const theme = yaml.load(fs.readFileSync(themeFile, 'utf8'));
-                themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
+                validation.checkSchema(themeFile, doc, name);
+
+                themes[name] = merge(themes[name] || {}, doc, {arrayMerge});
             });
         });
+
+        return themes;
     }
 
     /**

package/oro-webpack-config.js

@@ -28,6 +28,7 @@ const EventEmitter = require('events');
 const ErrorHandler = require('./error-handler');
 const SVGSprite = require('./svg-sprite');
 const TerserPlugin = require('terser-webpack-plugin');
+const jsToSCSS = require('./js-to-scss');
 require('resolve-url-loader');
 require('lezer-loader');
 
@@ -274,6 +275,7 @@ class ConfigBuilder {
 
         const webpackConfig = {
             watchOptions: {
+                followSymlinks: true,
                 aggregateTimeout: 200,
                 ignored: /[\/\\]node_modules[\/\\].*\.js$/
             },
@@ -319,44 +321,6 @@ class ConfigBuilder {
                     /[\/\\]bundles[\/\\]\.*[\/\\]lib[\/\\](?!chaplin|bootstrap|jquery\.dialog).*\.js$/
                 ],
                 rules: [
-                    {
-                        test: /\.s?css$/,
-                        use: [{
-                            loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
-                        }, {
-                            loader: 'css-loader',
-                            options: {
-                                importLoaders: 1,
-                                sourceMap: true,
-                                // can't use esModule since resolve-url-loader needs file path to start with '~'
-                                esModule: false
-                            }
-                        }, {
-                            loader: 'resolve-url-loader'
-                        }, {
-                            loader: 'postcss-loader',
-                            options: {
-                                sourceMap: true,
-                                postcssOptions: {
-                                    plugins: [
-                                        require('autoprefixer')
-                                    ]
-                                }
-                            }
-                        }, {
-                            loader: 'sass-loader',
-                            options: {
-                                implementation: require('sass'),
-                                sassOptions: {
-                                    includePaths: [
-                                        path.join(this.resolvedPublicPath, '/bundles')
-                                    ],
-                                    outputStyle: 'expanded'
-                                },
-                                sourceMap: true
-                            }
-                        }]
-                    },
                     {
                         test: /\.(eot|ttf|woff|woff2|cur|ico|svg|png|jpg|gif)$/,
                         loader: 'url-loader',
@@ -502,7 +466,10 @@ class ConfigBuilder {
                 );
             }
         }
-        let {rtl_support: rtlSupport = false, resolve_extra_paths: resolveExtraPaths = []} = themeDefinition;
+        let {
+            rtl_support: rtlSupport = false,
+            resolve_extra_paths: resolveExtraPaths = []
+        } = themeDefinition;
         const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
 
         if (resolveExtraPaths.length) {
@@ -559,6 +526,45 @@ class ConfigBuilder {
             plugins,
             module: {
                 rules: [
+                    {
+                        test: /\.s?css$/,
+                        use: [{
+                            loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
+                        }, {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                                // can't use esModule since resolve-url-loader needs file path to start with '~'
+                                esModule: false
+                            }
+                        }, {
+                            loader: 'resolve-url-loader'
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                postcssOptions: {
+                                    plugins: [
+                                        require('autoprefixer')
+                                    ]
+                                }
+                            }
+                        }, {
+                            loader: 'sass-loader',
+                            options: {
+                                implementation: require('sass'),
+                                sassOptions: {
+                                    includePaths: [
+                                        path.join(this.resolvedPublicPath, '/bundles')
+                                    ],
+                                    outputStyle: 'expanded'
+                                },
+                                sourceMap: true,
+                                additionalData: this.prepareAdditionalSCSS.bind(this, themeDefinition)
+                            }
+                        }]
+                    },
                     {
                         test: /[\/\\]configs\.json$/,
                         loader: 'config-loader',
@@ -573,6 +579,18 @@ class ConfigBuilder {
         };
     }
 
+    prepareAdditionalSCSS(theme, content, loaderContext) {
+        if (typeof theme.fonts === 'object') {
+            const fonts = {};
+            for (const [name, {family, formats, variants}] of Object.entries(theme.fonts)) {
+                fonts[name] = {family, formats, variants};
+            }
+            return jsToSCSS.createFontList({fonts}) + content;
+        }
+
+        return content;
+    }
+
     _initialize(args, env) {
         const entryPointFileWriter = new EntryPointFileWriter(this._publicPath);
 
@@ -604,6 +622,14 @@ class ConfigBuilder {
             this.resolvedProjectPath,
             this._publicPath
         );
+
+        for (const [theme, config] of Object.entries(this._layoutModulesConfigLoader.themes)) {
+            validation.themeValidator.checkFullSchema(
+                config,
+                this._layoutModulesConfigLoader.processedFiles,
+                theme
+            );
+        }
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);
         this._layoutThemeConfigFactory = new ThemeConfigFactory(
             this._layoutModulesConfigLoader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "6.1.0-lts05",
+  "version": "6.1.0-lts07",
   "author": "Oro, Inc. (https://oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -16,10 +16,9 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "~5.0.0",
     "deepmerge": "~4.3.1",
-    "esbuild": "^0.25.2",
-    "esbuild-loader": "^4.3.0",
     "exports-loader": "~4.0.0",
     "expose-loader": "~4.1.0",
+    "esbuild-loader": "^4.3.0",
     "file-loader": "~6.2.0",
     "html-webpack-plugin": "~5.5.0",
     "imports-loader": "~4.0.1",

package/validation/errors/theme-scheme-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 "theme.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 Theme config';
+    }
+}
+
+module.exports = SvgIconsSchemaError;

package/validation/index.js

@@ -1,15 +1,18 @@
 const assetsValidation = require('./assets-validator');
 const jsmodulesValidator = require('./jsmodules-validator');
 const svgIconsValidator = require('./svg-icons-validator');
+const themeValidator = require('./theme-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);
+const isThemePath = path => /theme\.yml$/.test(path);
 
 module.exports = {
     assetsValidation,
     jsmodulesValidator,
     svgIconsValidator,
+    themeValidator,
 
     /**
      * set public path for all validators
@@ -36,6 +39,8 @@ module.exports = {
             }
         } else if (isSvgIconsPath(filePath)) {
             svgIconsValidator.checkSchema(filePath, doc, theme);
+        } else if (isThemePath(filePath)) {
+            themeValidator.checkSchema(filePath, doc, theme);
         }
     }
 };

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

@@ -10,7 +10,7 @@ module.exports = {
     type: 'object',
     properties: {
         exclude: {
-            description: 'The "exclude" property is an array of  svg files to exclude from svg sprite.',
+            description: 'The "exclude" property is an array of svg files to exclude from svg sprite.',
             type: 'array',
             minItems: 0
         }

package/validation/schemas/theme-schema-full.js

@@ -0,0 +1,11 @@
+/**
+ * Schema to validate theme.yml files
+ *
+ * @description
+ * Full scheme complements "theme-schema" one.
+ * It should have only rules which are not defined in "theme-schema" schema due to avoid duplicates in error messages
+ */
+module.exports = {
+    type: 'object',
+    required: ['label']
+};

package/validation/schemas/theme-schema.js

@@ -0,0 +1,83 @@
+/**
+ * Schema to validate theme.yml files
+ */
+module.exports = {
+    type: 'object',
+    properties: {
+        label: {
+            type: 'string'
+        },
+        description: {
+            type: 'string'
+        },
+        groups: {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        },
+        icon: {
+            type: 'string'
+        },
+        logo: {
+            type: 'string'
+        },
+        logo_small: {
+            type: 'string'
+        },
+        rtl_support: {
+            type: 'boolean'
+        },
+        svg_icons_support: {
+            type: 'boolean'
+        },
+        fonts: {
+            type: 'object',
+            patternProperties: {
+                '.*': {
+                    type: 'object',
+                    required: ['family', 'variants', 'formats'],
+                    additionalProperties: false,
+                    properties: {
+                        family: {
+                            type: 'string'
+                        },
+                        variants: {
+                            type: 'array',
+                            items: {
+                                type: 'object',
+                                required: ['path'],
+                                additionalProperties: false,
+                                properties: {
+                                    path: {
+                                        type: 'string'
+                                    },
+                                    weight: {
+                                        anyOf: [{
+                                            type: 'string'
+                                        }, {
+                                            type: 'integer'
+                                        }]
+                                    },
+                                    style: {
+                                        type: 'string'
+                                    }
+                                }
+                            }
+                        },
+                        formats: {
+                            type: 'array',
+                            items: {
+                                type: 'string'
+                            }
+                        },
+                        preload: {
+                            type: 'boolean'
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+

package/validation/svg-icons-validator.js

@@ -4,7 +4,7 @@ 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');
+const SvgIconsSchemaError = require('./errors/svg-icons-schema-error');
 
 module.exports = Object.assign({}, schemaValidator, {
     emitter,
@@ -22,7 +22,7 @@ module.exports = Object.assign({}, schemaValidator, {
         const result = this.validateSchema(schema, doc);
 
         if (!result.valid) {
-            const error = new SvgIsonsSchemaError(result.formattedError, [filePath], theme);
+            const error = new SvgIconsSchemaError(result.formattedError, [filePath], theme);
 
             this.emitter.emit('error', error);
         }
@@ -43,7 +43,7 @@ module.exports = Object.assign({}, schemaValidator, {
         const result = this.validateSchema(fullSchema, doc);
 
         if (!result.valid) {
-            const error = new SvgIsonsSchemaError(result.formattedError, files, theme);
+            const error = new SvgIconsSchemaError(result.formattedError, files, theme);
 
             this.emitter.emit('error', error);
         }

package/validation/theme-validator.js

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