@oroinc/oro-webpack-config-builder 5.1.0-alpha34 → 5.1.0-alpha36

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

@@ -8,7 +8,7 @@ class LayoutModulesConfigLoader extends ModulesConfigLoader {
      */
     loadConfig(theme, filePath) {
         let themeConfig = super.loadConfig(theme, path.join('Resources/views/layouts/', theme, filePath));
-
+        themeConfig = merge(themeConfig, super.loadConfig(theme, path.join('templates/layouts/', theme, filePath)));
         // recursive process parent theme
         const {parent: parentTheme} = this.themes[theme];
         if (typeof parentTheme === 'string') {

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

@@ -38,24 +38,34 @@ class ModulesConfigLoader {
 
     /**
      * @param {Array} bundles Array of ordered symfony bundle paths
-     * @param {string} themesLocation Path inside the bundle, where to find the theme
+     * @param {string|Array} themesLocation Path inside the bundle, where to find the theme
      * @param {string} themeInfoFileName Yaml File name with theme info
      */
     constructor(bundles, themesLocation, themeInfoFileName) {
         this._bundles = bundles;
-        this._themes = this._getThemes(themesLocation, themeInfoFileName);
+        if (!Array.isArray(themesLocation)) {
+            themesLocation = [themesLocation];
+        }
+
+        const themes = {};
+        const self = this;
+        themesLocation.forEach(themesLocation => {
+            self._collectThemes(themes, themesLocation, themeInfoFileName);
+        });
+
+        this._themes = themes;
         this._processedFiles = [];
     }
 
     /**
-     * Return list of themes with their parents
+     * Collects list of themes with their parents into given storage(themes param)
+     *
+     * @param {Object} themes
      * @param {string} themesLocation
      * @param {string} themeInfoFileName
-     * @returns {Object.<string|null>}
      * @private
      */
-    _getThemes(themesLocation, themeInfoFileName) {
-        const themes = {};
+    _collectThemes(themes, themesLocation, themeInfoFileName) {
         this._bundles.forEach(bundle => {
             const source = bundle + themesLocation;
 
@@ -73,8 +83,6 @@ class ModulesConfigLoader {
                 themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
             });
         });
-
-        return themes;
     }
 
     /**

package/oro-webpack-config.js

@@ -32,6 +32,7 @@ require('resolve-url-loader');
 
 class ConfigBuilder {
     constructor() {
+        this._projectPath = '';
         this._enableLayoutThemes = false;
         this._defaultLayoutThemes = null;
         this.emitter = new EventEmitter();
@@ -186,6 +187,13 @@ class ConfigBuilder {
         };
     }
 
+    get resolvedProjectPath() {
+        if (this._resolvedProjectPath == undefined) {
+            this._resolvedProjectPath = path.resolve(this._projectPath);
+        }
+        return this._resolvedProjectPath;
+    }
+
     get resolvedPublicPath() {
         if (this._resolvedPublicPath === undefined) {
             this._resolvedPublicPath = path.resolve(this._publicPath);
@@ -433,9 +441,14 @@ class ConfigBuilder {
         if (this._isAdminTheme(buildName)) {
             themeDefinition = this._modulesConfigLoader.themes[buildName.split('.')[1]];
             buildPublicPath = '/build/admin/';
-            const jsModulesConfig = this._themeConfigFactory.loadConfig(buildName,
-                ['Resources/config/oro/jsmodules.yml', 'Resources/config/jsmodules.yml']);
-            validation.jsmodulesValidator.checkFullSchema(
+            const jsModulesConfig = this._themeConfigFactory.loadConfig(
+                buildName,
+                [
+                    'Resources/config/oro/jsmodules.yml',
+                    'Resources/config/jsmodules.yml',
+                    'config/oro/jsmodules.yml'
+                ]
+            );            validation.jsmodulesValidator.checkFullSchema(
                 jsModulesConfig,
                 this._themeConfigFactory?._configLoader.processedFiles,
                 buildName
@@ -473,6 +486,7 @@ class ConfigBuilder {
             modules: [
                 resolvedBuildPath,
                 this.resolvedPublicPath,
+                path.join(this.resolvedProjectPath, '/assets'),
                 path.join(this.resolvedPublicPath, '/bundles'),
                 path.join(this.resolvedPublicPath, '/js'),
                 this.resolvedNodeModulesPath
@@ -537,10 +551,11 @@ class ConfigBuilder {
         this._isProduction = args.mode === 'production';
         this._symfonyEnv = env.symfony;
         this._appConfig = AppConfigLoader.getConfig(this._cachePath, this._symfonyEnv);
+        this._appConfig.paths.push(this.resolvedProjectPath);
 
         this._modulesConfigLoader = new ModulesConfigLoader(
             this._appConfig.paths,
-            '/Resources/public/themes/',
+            ['/Resources/public/themes/', '/public/themes/admin/'],
             'settings.yml'
         );
         this._adminThemes = this._modulesConfigLoader.themeNames.map(themeName => 'admin.' + themeName);
@@ -554,7 +569,7 @@ class ConfigBuilder {
 
         this._layoutModulesConfigLoader = new LayoutModulesConfigLoader(
             this._appConfig.paths,
-            '/Resources/views/layouts/',
+            ['/Resources/views/layouts/', '/templates/layouts/'],
             'theme.yml'
         );
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);

package/package.json

@@ -1,49 +1,49 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "5.1.0-alpha34",
+  "version": "5.1.0-alpha36",
   "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.17.9",
-    "@babel/plugin-transform-runtime": "~7.17.0",
-    "@babel/preset-env": "~7.16.11",
-    "autoprefixer": "~10.4.0",
-    "babel-loader": "~8.2.3",
+    "@babel/core": "~7.19.3",
+    "@babel/plugin-transform-runtime": "~7.19.1",
+    "@babel/preset-env": "~7.19.3",
+    "autoprefixer": "~10.4.12",
+    "babel-loader": "~8.2.5",
     "bindings": "~1.5.0",
     "css-loader": "~6.7.1",
-    "css-minimizer-webpack-plugin": "~3.4.1",
+    "css-minimizer-webpack-plugin": "~4.2.0",
     "deepmerge": "~4.2.2",
-    "exports-loader": "~3.1.0",
-    "expose-loader": "~3.1.0",
+    "exports-loader": "~4.0.0",
+    "expose-loader": "~4.0.0",
     "extract-loader": "~5.1.0",
     "file-loader": "~6.2.0",
     "happypack": "~5.0.1",
     "html-webpack-plugin": "~5.5.0",
-    "imports-loader": "~3.1.1",
+    "imports-loader": "~4.0.1",
     "js-yaml": "~4.1.0",
-    "mini-css-extract-plugin": "~2.6.0",
+    "mini-css-extract-plugin": "~2.6.1",
     "minimist": "~1.2.3",
-    "nan": "~2.15.0",
+    "nan": "~2.16.0",
     "path": "0.12.7",
-    "postcss": "~8.4.5",
-    "postcss-loader": "~6.2.0",
+    "postcss": "~8.4.17",
+    "postcss-loader": "~7.0.1",
     "printf": "~0.6.0",
     "resolve-url-loader": "^5.0.0",
     "rtlcss-webpack-plugin": "~4.0.6",
-    "sass": "~1.50.0",
-    "sass-loader": "~12.6.0",
+    "sass": "~1.55.0",
+    "sass-loader": "~13.0.2",
     "schema-utils": "^4.0.0",
     "style-loader": "~3.3.1",
-    "terser": "~5.12.1",
+    "terser": "~5.15.0",
     "text-loader": "0.0.1",
-    "underscore": "~1.13.1",
+    "underscore": "1.13.*",
     "url-loader": "~4.1.1",
-    "webpack": "~5.72.0",
-    "webpack-bundle-analyzer": "~4.5.0",
-    "webpack-cli": "~4.9.1",
-    "webpack-dev-server": "^4.7.3",
+    "webpack": "~5.74.0",
+    "webpack-bundle-analyzer": "~4.6.1",
+    "webpack-cli": "~4.10.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "~5.8.0",
     "wildcard": "~2.0.0"
   }

package/style/admin-style-loader.js

@@ -9,8 +9,9 @@ class AdminStyleLoader extends StyleLoader {
         const {rtl_support: rtlSupport = false, styles: extraThemeConfig} =
             this._configLoader.loadConfig(themeName, 'Resources/public/themes/' + themeName + '/settings.yml');
         const baseThemeConfig = this._configLoader.loadConfig(themeName, 'Resources/config/oro/assets.yml');
+        const appRootExtraConfig = this._configLoader.loadConfig(themeName, 'config/oro/assets.yml');
         /** @type {Object.<string, ThemeGroupConfig>} */
-        const themeConfig = merge(baseThemeConfig, extraThemeConfig);
+        const themeConfig = merge(baseThemeConfig, appRootExtraConfig, extraThemeConfig);
 
         return {
             themeConfig,

package/style/style-loader.js

@@ -49,6 +49,7 @@ class StyleLoader {
 
             inputs = this._overrideInputs(inputs);
             inputs = this._sortInputs(inputs);
+            inputs = this._applyInputsBasePathPrefix(inputs);
 
             if (settings.rtlSupport) {
                 writingOptions.ignoreRTLInputs = _.difference(inputs, this._matchInputs(rtlMasks, inputs));
@@ -58,7 +59,7 @@ class StyleLoader {
             const filePath = path.join(buildPath, output);
             entryPoints[entryPointName] = [
                 ...entries,
-                this._entryPointFileWriter.write('./../../../', inputs, filePath, writingOptions)
+                this._entryPointFileWriter.write('./../../', inputs, filePath, writingOptions)
             ];
         }
         return entryPoints;
@@ -153,6 +154,7 @@ class StyleLoader {
      * @protected
      */
     _matchInputs(masks, inputs) {
+        masks = this._applyInputsBasePathPrefix(masks);
         masks = masks.map(mask => wildcard(mask));
 
         const whiteListedInputs = masks.reduce((include, mask) => {
@@ -162,6 +164,26 @@ class StyleLoader {
 
         return _.unique(whiteListedInputs);
     }
+
+    /**
+     * Considering base path as application's root.
+     * Bundles based *.scss sources go with '../' prefix.
+     *
+     * @param {string[]} inputs
+     * @private
+     */
+    _applyInputsBasePathPrefix(inputs) {
+        const processedInputs = [];
+
+        inputs.forEach(input => {
+            if (input.indexOf('bundles') === 0) {
+                input = '../' + input;
+            }
+            processedInputs.push(input);
+        });
+
+        return processedInputs;
+    }
 }
 
 module.exports = StyleLoader;

package/validation/assets-validator.js

@@ -82,10 +82,11 @@ module.exports = Object.assign({}, schemaValidator, {
                     input = newPath;
                 }
 
+                const fullBasePath = path.resolve(input);
                 const fullPath = path.resolve(this._publicPath + input);
                 // skip the path to global node modules,
                 // e.g. '~bootstrap/scss/bootstrap'
-                if (!input.startsWith('~') && !fs.existsSync(fullPath)) {
+                if (!input.startsWith('~') && !fs.existsSync(fullPath) && !fs.existsSync(fullBasePath)) {
                     files.push(input);
                 }
             });