@oroinc/oro-webpack-config-builder 0.0.3 → 4.2.1-dev11

package/README.md

@@ -2,4 +2,4 @@
 
 An integration of OroPlatform based applications with the Webpack.
 
-For more details see [the documentation](https://doc.oroinc.com/backend/bundles/platform/AssetBundle/).
+For more details see [the documentation](https://doc.oroinc.com/bundles/platform/AssetBundle/).

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

@@ -1,15 +1,15 @@
 const path = require('path');
 const merge = require('deepmerge');
-const ThemesConfigLoader = require('./modules-config-loader');
+const ModulesConfigLoader = require('./modules-config-loader');
 
-class LayoutModulesConfigLoader extends ThemesConfigLoader {
+class LayoutModulesConfigLoader extends ModulesConfigLoader {
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     loadConfig(theme, filePath) {
         let themeConfig = super.loadConfig(theme, path.join('/Resources/views/layouts/', theme, filePath));
         // recursive process parent theme
-        const parentTheme = this.themes[theme];
+        const {parent: parentTheme} = this.themes[theme];
         if (typeof parentTheme === 'string') {
             const parentThemeConfig = this.loadConfig(parentTheme, filePath);
             themeConfig = merge(parentThemeConfig, themeConfig);

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

@@ -3,6 +3,9 @@ const fs = require('fs');
 const merge = require('deepmerge');
 const yaml = require('js-yaml');
 
+// merge only unique items
+const arrayMerge = (target, source) => target.concat(source.filter(item => !target.includes(item)));
+
 class ModulesConfigLoader {
     /**
      * @returns {Array}
@@ -43,21 +46,15 @@ class ModulesConfigLoader {
             if (!fs.existsSync(source)) return;
 
             fs.readdirSync(source).forEach(name => {
-                const theme = path.resolve(source, name);
-                if (!fs.lstatSync(theme).isDirectory()) {
+                const themePath = path.resolve(source, name);
+                if (!fs.lstatSync(themePath).isDirectory()) {
                     return;
                 }
-                const themeFile = path.resolve(theme, themeInfoFileName);
+                const themeFile = path.resolve(themePath, themeInfoFileName);
                 if (!fs.existsSync(themeFile)) return;
 
-                if (!(name in themes)) {
-                    themes[name] = null;
-                }
-                const themeInfo = yaml.safeLoad(fs.readFileSync(themeFile, 'utf8'));
-
-                if ('parent' in themeInfo) {
-                    themes[name] = themeInfo.parent;
-                }
+                const theme = yaml.load(fs.readFileSync(themeFile, 'utf8'));
+                themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
             });
         });
 
@@ -75,7 +72,7 @@ class ModulesConfigLoader {
             const absolutePath = bundle + filePath;
             if (!fs.existsSync(absolutePath)) return;
 
-            const doc = yaml.safeLoad(fs.readFileSync(absolutePath, 'utf8'));
+            const doc = yaml.load(fs.readFileSync(absolutePath, 'utf8'));
             configs = merge(configs, doc);
         });
         return configs;

package/oro-webpack-config.js

@@ -19,8 +19,9 @@ const ThemeConfigFactory = require('./theme-config-factory');
 const path = require('path');
 const prepareModulesMap = require('./plugin/map/prepare-modules-map');
 const resolve = require('enhanced-resolve');
-const webpackMerge = require('webpack-merge');
+const {merge: webpackMerge} = require('webpack-merge');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WebpackRTLPlugin = require('webpack-rtl-plugin');
 
 class ConfigBuilder {
     constructor() {
@@ -145,7 +146,7 @@ class ConfigBuilder {
                     if (this._defaultLayoutThemes) {
                         themes = [...themes, ...this._defaultLayoutThemes];
                     } else {
-                        themes = [...themes, ...Object.keys(this._layoutModulesConfigLoader.themes)];
+                        themes = [...themes, ...this._appConfig['themes']];
                     }
                 } else if (this._layoutThemes.indexOf(selectedTheme) !== -1) {
                     // build single layout theme
@@ -244,9 +245,12 @@ class ConfigBuilder {
                             }, {
                                 loader: 'sass-loader',
                                 options: {
-                                    includePaths: [
-                                        resolvedPublicPath + '/bundles'
-                                    ],
+                                    sassOptions: {
+                                        includePaths: [
+                                            path.join(resolvedPublicPath, '/bundles')
+                                        ],
+                                        outputStyle: 'expanded'
+                                    },
                                     sourceMap: true
                                 }
                             }]
@@ -337,11 +341,11 @@ class ConfigBuilder {
 
                     plugins: [
                         new OptimizeCssAssetsPlugin({
-                            cssProcessorOptions: {
-                                discardComments: {
-                                    removeAll: true
-                                },
-                                zindex: false
+                            cssProcessorPluginOptions: {
+                                preset: ['default', {
+                                    // preserve comments for WebpackRTLPlugin, comments will be removed anyway later
+                                    discardComments: false,
+                                }],
                             }
                         })
                     ]
@@ -351,17 +355,21 @@ class ConfigBuilder {
             const webpackConfigs = [];
 
             themes.forEach(theme => {
+                let themeDefinition;
                 let themeConfig;
                 let buildPublicPath;
                 if (this._isAdminTheme(theme)) {
+                    themeDefinition = this._modulesConfigLoader.themes[theme.split('.')[1]];
                     buildPublicPath = '/build/admin/';
                     themeConfig = this._themeConfigFactory
                         .create(theme, buildPublicPath, '/Resources/config/jsmodules.yml');
                 } else {
+                    themeDefinition = this._layoutModulesConfigLoader.themes[theme];
                     buildPublicPath = `/build/${theme}/`;
                     themeConfig = this._layoutThemeConfigFactory
                         .create(theme, buildPublicPath, '/config/jsmodules.yml');
                 }
+                const {rtl_support: rtlSupport = false} = themeDefinition;
                 const resolvedBuildPath = path.join(resolvedPublicPath, buildPublicPath);
 
                 const resolverConfig = {
@@ -379,6 +387,15 @@ class ConfigBuilder {
                     return moduleName => resolver({}, '', moduleName, {});
                 })(resolve.create.sync({...resolverConfig}));
 
+                const plugins = [];
+                if (rtlSupport && !env.skipCSS && !env.skipRTL) {
+                    plugins.push(new WebpackRTLPlugin({
+                        filename: '[name].rtl.css',
+                        // RTL all chunks, except those that already support RTL
+                        test: '(?<!(-rtl-ready))\\.css'
+                    }));
+                }
+
                 const cssEntryPoints = !env.skipCSS ? this._getCssEntryPoints(theme, buildPublicPath) : {};
                 const jsEntryPoints = !env.skipJS ? themeConfig.entry : {};
 
@@ -400,6 +417,7 @@ class ConfigBuilder {
                             new MapModulesPlugin(prepareModulesMap(resolver, themeConfig.map))
                         ]
                     },
+                    plugins,
                     module: {
                         rules: [
                             {

package/package.json

@@ -1,45 +1,46 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "0.0.3",
+  "version": "4.2.1-dev11",
   "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.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "autoprefixer": "9.6.1",
-    "babel-loader": "^8.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
+    "autoprefixer": "^9.8.8",
+    "babel-loader": "^8.2.3",
     "css-loader": "^3.6.0",
-    "deepmerge": "3.3.0",
+    "deepmerge": "4.2.2",
     "exports-loader": "^0.7.0",
     "expose-loader": "^0.7.5",
     "extract-loader": "3.1.0",
     "file-loader": "^4.3.0",
     "font-awesome": "4.7.0",
     "happypack": "^5.0.1",
-    "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.8.0",
     "inject-loader": "^4.0.1",
-    "js-yaml": "3.13.1",
+    "js-yaml": "4.1.0",
     "mini-css-extract-plugin": "0.7.0",
     "minimist": "^1.2.3",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "path": "0.12.7",
     "postcss-loader": "3.0.0",
-    "printf": "^0.6.0",
-    "sass-loader": "7.1.0",
+    "printf": "^0.6.1",
+    "sass-loader": "10.2.0",
     "style-loader": "^0.23.1",
     "terser": "4.1.2",
     "text-loader": "0.0.1",
-    "underscore": "^1.10.2",
+    "underscore": "1.13.*",
     "url-loader": "2.0.1",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "4.2.1"
+    "webpack-dev-server": "^4.5.0",
+    "webpack-merge": "5.8.0",
+    "webpack-rtl-plugin": "^2.0.0",
+    "wildcard": "^2.0.0"
   }
 }

package/style/layout-style-loader.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const wildcard = require('wildcard');
+const _ = require('underscore')
 
 class LayoutStyleLoader {
     /**
@@ -17,21 +19,25 @@ class LayoutStyleLoader {
      */
     getThemeEntryPoints(theme, buildPath) {
         const entryPoints = {};
-
+        const {rtl_support: rtlSupport = false} = this._configLoader.themes[theme];
         const themeConfig = this._configLoader.loadConfig(theme, '/config/assets.yml');
+        const writingOptions = {};
 
-        for (const key in themeConfig) {
-            if (themeConfig.hasOwnProperty(key)) {
-                const config = themeConfig[key];
-                let inputs = this._overrideInputs(config.inputs);
-                inputs = this._sortInputs(inputs);
-                if (config.output === undefined) {
-                    throw new Error('"output" for "' + key + '" group in theme "' + theme + '" is not defined');
-                }
-                const entryPointName = config.output.replace(/\.[^/.]+$/, '');
-                const filePath = path.join(buildPath, config.output);
-                entryPoints[entryPointName] = this._entryPointFileWriter.write('./../../../', inputs, filePath);
+        for (const [key, config] of Object.entries(themeConfig)) {
+            let {inputs, output, auto_rtl_inputs: rtlMasks = []} = config;
+            if (config.output === undefined) {
+                throw new Error('"output" for "' + key + '" group in theme "' + theme + '" is not defined');
+            }
+            inputs = this._overrideInputs(inputs);
+            inputs = this._sortInputs(inputs);
+            if (rtlSupport) {
+                writingOptions.ignoreRTLInputs = _.difference(inputs, this._matchInputs(rtlMasks, inputs));
             }
+
+            const entryPointName = output.replace(/\.[^/.]+$/, '');
+            const filePath = path.join(buildPath, output);
+            entryPoints[entryPointName] =
+                this._entryPointFileWriter.write('./../../../', inputs, filePath, writingOptions);
         }
         return entryPoints;
     }
@@ -86,6 +92,25 @@ class LayoutStyleLoader {
         });
         return [...settingsInputs, ...variablesInputs, ...restInputs];
     }
+
+    /**
+     * Filter inputs that matches any mask from the list
+     *
+     * @param {[string]} masks list of wildcard masks
+     * @param {[string]} inputs
+     * @return {[string]} matched inputs
+     * @private
+     */
+    _matchInputs(masks, inputs) {
+        masks = masks.map(mask => wildcard(mask));
+
+        const whiteListedInputs = masks.reduce((include, mask) => {
+            include.push(...mask.match(inputs));
+            return include;
+        }, []);
+
+        return _.unique(whiteListedInputs);
+    }
 }
 
 module.exports = LayoutStyleLoader;

package/theme-config-factory.js

@@ -1,6 +1,6 @@
 class ThemeConfigFactory {
     /**
-     * @param {ThemesConfigLoader} configLoader
+     * @param {ModulesConfigLoader} configLoader
      * @param {DynamicImportsFileWriter} dynamicImportsFileWriter
      * @param {AppModulesFileWriter} appModulesFileWriter
      * @param {ConfigsFileWriter} configsFileWriter

package/writer/scss-entry-point-file-writer.js

@@ -15,16 +15,22 @@ class SCSSEntryPointFileWriter {
      * @param {string} baseInputPath base path for input files
      * @param {Array} inputs List of inputs
      * @param {string} output Output file path
+     * @param {Object} options writing options
      * @returns {string} JS file path of an output file
      */
-    write(baseInputPath, inputs, output) {
+    write(baseInputPath, inputs, output, {ignoreRTLInputs = []}) {
         let content = '';
         inputs.forEach(input => {
+            const ignoreRTL = ignoreRTLInputs.indexOf(input) !== -1;
             input = input.replace(/\.[^/.]+$/, '');
             // don't add the base path to global node modules,
             // e.g. '~bootstrap/scss/bootstrap'
             const basePath = input.startsWith('~') ? '': baseInputPath;
-            content += '@import "'+ basePath + input + '";\n';
+            let importModule = `@import "${basePath}${input}";\n`;
+            if (ignoreRTL) {
+                importModule = `/*rtl:begin:ignore*/\n${importModule}/*rtl:end:ignore*/\n`;
+            }
+            content += importModule;
         });
         const scssFilepath = path.resolve(this._publicPath + output + '.scss');
         fs.mkdirSync(path.dirname(scssFilepath), {recursive: true});