@oroinc/oro-webpack-config-builder 6.0.0-lts05 → 6.0.0-lts06

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/modules-config-loader.js

@@ -71,6 +71,8 @@ class ModulesConfigLoader {
      * @private
      */
     _collectThemes(themes, themesLocation, themeInfoFileName) {
+        this._processedFiles = [];
+
         this._bundles.forEach(bundle => {
             const source = bundle + themesLocation;
 
@@ -81,11 +83,20 @@ class ModulesConfigLoader {
                 if (!fs.lstatSync(themePath).isDirectory()) {
                     return;
                 }
+
                 const themeFile = path.resolve(themePath, themeInfoFileName);
-                if (!fs.existsSync(themeFile)) return;
 
-                const theme = yaml.load(fs.readFileSync(themeFile, 'utf8'));
-                themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
+                if (!fs.existsSync(themeFile)) {
+                    return;
+                }
+
+                this._processedFiles.push(themeFile);
+
+                const doc = yaml.load(fs.readFileSync(themeFile, 'utf8'));
+
+                validation.checkSchema(themeFile, doc, name);
+
+                themes[name] = merge(themes[name] || {}, doc, {arrayMerge});
             });
         });
     }

package/oro-webpack-config.js

@@ -9,8 +9,6 @@ const EntryPointFileWriter = require('./writer/scss-entry-point-file-writer');
 const LayoutModulesConfigLoader = require('./modules-config/layout-modules-config-loader');
 const LayoutStyleLoader = require('./style/layout-style-loader');
 const MapModulesPlugin = require('./plugin/map/map-modules-plugin');
-const IntegrityFilePlugin = require('./plugin/integrity/integrity-file-plugin');
-const {SubresourceIntegrityPlugin} = require('webpack-subresource-integrity');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ModulesConfigLoader = require('./modules-config/modules-config-loader');
 const DynamicImportsFileWriter = require('./writer/dynamic-imports-file-writer');
@@ -30,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');
 
@@ -276,6 +275,7 @@ class ConfigBuilder {
 
         const webpackConfig = {
             watchOptions: {
+                followSymlinks: true,
                 aggregateTimeout: 200,
                 ignored: /[\/\\]node_modules[\/\\].*\.js$/
             },
@@ -283,8 +283,7 @@ class ConfigBuilder {
             output: {
                 filename: '[name].js',
                 // Because we use third party libraries 'chunkFilename' should include only [name]
-                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion),
-                crossOriginLoading: "anonymous"
+                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion)
             },
             devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
             mode: 'development',
@@ -322,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',
@@ -391,10 +352,6 @@ class ConfigBuilder {
                 new webpack.optimize.MinChunkSizePlugin({
                     minChunkSize: 30000 // Minimum number of characters
                 }),
-                new SubresourceIntegrityPlugin(),
-                new IntegrityFilePlugin({
-                    publicPath: this.resolvedPublicPath
-                }),
                 new AfterWebpackLogsPlugin(
                     stats => this.emitter.emit('build:complete', stats)
                 )
@@ -509,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) {
@@ -566,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',
@@ -580,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);
 
@@ -611,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.0.0-lts05",
+  "version": "6.0.0-lts06",
   "author": "Oro, Inc. (https://oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -49,7 +49,6 @@
     "webpack-cli": "~5.0.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "~5.8.0",
-    "webpack-subresource-integrity": "^5.2.0-rc.1",
     "wildcard": "~2.0.0"
   }
 }

package/validation/errors/theme-scheme-error.js

@@ -0,0 +1,36 @@
+const BaseError = require('./base-error');
+
+class SvgIconsSchemaError extends BaseError {
+    /**
+     * @example
+     * Invalid Theme config: the "theme.yml" files in the "default" theme do not match the API schema.
+     * has an unknown property 'rest'.
+     * at default/theme.yml
+     *
+     * @example
+     * Invalid Theme config: the "theme.yml" files in the "default" theme do not match the API schema.
+     * misses the property 'label'.
+     * List of processed files for the "default" theme:
+     *     /default/theme.yml
+     *     /default/theme.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;
+    }
+});

package/plugin/integrity/integrity-file-plugin.js

@@ -1,42 +0,0 @@
-const { createHash } = require('crypto');
-const { Compilation, sources } = require('webpack');
-const fs = require('fs').promises;
-const path = require('path');
-
-class IntegrityFilePlugin {
-    constructor({fileName = 'integrity.json', publicPath = '', algorithm = 'sha384'} = {}) {
-        this.fileName = fileName;
-        this.publicPath = publicPath;
-        this.algorithm = algorithm;
-    }
-
-    apply(compiler) {
-        compiler.hooks.thisCompilation.tap('IntegrityFilePlugin', (compilation) => {
-            compilation.hooks.processAssets.tapPromise(
-                { name: 'SubresourceIntegrityPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER },
-                async () => {
-                    const integrityData = Object.fromEntries(
-                        Object.entries(compilation.assets)
-                            .filter(([assetName]) => assetName.endsWith('.css') || assetName.endsWith('.js'))
-                            .map(([assetName, asset]) => {
-                            const hash = createHash(this.algorithm).update(asset.source()).digest('base64');
-                            const assetNormalized = assetName.split('?')[0];
-
-                            return [
-                                path.join(compiler.options.output.publicPath || '', assetNormalized),
-                                `${this.algorithm}-${hash}`
-                            ];
-                        })
-                    );
-                    const jsonData = JSON.stringify(integrityData, null, 2);
-                    const outputPath = path.join(this.publicPath, compiler.options.output.publicPath, this.fileName);
-
-                    await fs.writeFile(outputPath, jsonData, 'utf8');
-                    compilation.emitAsset(outputPath, new sources.RawSource(jsonData));
-                }
-            );
-        });
-    }
-}
-
-module.exports = IntegrityFilePlugin;