@spryker/oryx-for-zed 2.12.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+### 3.0.0
+Released on 11.05.2023
+
+- Introduced `postcss` dependency.
+- Updated dependencies:
+  - `node`: `16.0.0` => `18.0.0`
+  - `npm`: `8.0.0` => `9.0.0`
+  - `autoprefixer`: `9.8.8` => `10.4.14`
+  - `postcss-loader`: `2.1.6` => `7.3.0`
+  - `webpack`: `5.74.0` => `5.81.0`
+
+
+### 2.13.0
+Released on 04.04.2023
+
+- Removed `core-js`, `es6-promise`, `optimize-css-assets-webpack-plugin` dependencies.
+- Removed deprecated `@spryker/oryx` dependency and moved it's functionality into the package.
+- Introduced `dayjs`, `css-minimizer-webpack-plugin`, `fast-glob` dependencies. 
+- Updated dependencies.
+
+
 ### 2.12.0
 Released on 31.05.2022
 

package/README.md

@@ -1,7 +1,12 @@
 # Oryx for Zed
 
-Spryker ZED frontend automation tool (Oryx based)
+Spryker ZED frontend automation tool
 
-> Our documentation has moved. Please go to [our official Spryker documentation](https://documentation.spryker.com/front-end_developer_guide/zed/oryx/oryx-for-zed.htm).
+#### Requirements
 
-> If you're looking for **Oryx**, [click here](https://github.com/spryker/oryx).
+- Node.js version >= 18.0.0
+- Npm version >= 9.0.0
+- Webpack version >= 5.0.0 (starting from 2.13.0 version)
+
+
+The tool [documentation](https://docs.spryker.com/docs/scos/dev/front-end-development/202304.0/zed/oryx-for-zed.html).

package/build.js

@@ -1,11 +1,11 @@
 'use strict';
 
-const oryx = require('@spryker/oryx');
+const build = require('./lib/build');
 const api = require('./lib');
 
 // deprecated copyAssetsCallback for backward compatibility only
 const copyAssetsCallback = require('./lib/copy');
 
 api.getConfiguration(api.settings)
-    .then(configuration => oryx.build(configuration, copyAssetsCallback))
+    .then(configuration => build(configuration, copyAssetsCallback))
     .catch(error => console.error('An error occurred while creating configuration', error));

package/lib/build.js

@@ -0,0 +1,68 @@
+const colors = require('colors/safe');
+const dayjs = require('dayjs');
+const log = require('./log');
+
+function build(configuration, callback) {
+    log.task('build');
+
+    if (!build.webpack) {
+        build.loadCompiler();
+    }
+
+    log.step('using webpack', build.webpackVersion);
+
+    if (configuration.watch) {
+        log.step('watchers enabled', colors.dim('(press [ctrl+c] to exit)'));
+    }
+
+    log.step('building assets...');
+
+    try {
+        build.webpack(configuration, (error, stats) => {
+            const output = !!stats && stats.toString(configuration.stats);
+            const duration = dayjs(stats.endTime - stats.startTime).format('s.SSS');
+            let message = `built in ${duration}s`;
+            let logFn = 'done';
+
+            if (error || stats.hasErrors()) {
+                message = 'build failed';
+                logFn = 'error';
+            }
+
+            if (error) {
+                log.error(colors.red('webpack configuration:'), error.toString());
+                log.error(colors.red('details:'), error.details);
+            }
+
+            if (output) {
+                log.step(`webpack output:\n ${output}`);
+            }
+
+            if (configuration.watch) {
+                const endTime = dayjs(stats.endTime).format('HH:mm:ss');
+
+                message = `${colors.dim(`[${endTime}]`)} ${message}...`;
+            }
+
+            log[logFn].apply(log, [message]);
+
+            if (callback) {
+                callback(error, stats);
+            }
+        });
+    } catch (error) {
+        log.error(colors.red('webpack configuration:'), error.toString());
+        log.error('build aborted');
+
+        if (callback) {
+            callback(error);
+        }
+    }
+}
+
+build.loadCompiler = function(webpack, webpackVersion) {
+    this.webpack = webpack || require('webpack');
+    this.webpackVersion = webpackVersion || require('webpack/package').version;
+}
+
+module.exports = build;

package/lib/configure-paths.js

@@ -0,0 +1,31 @@
+function configurePaths(entryPaths, runtimeEntryName) {
+    if (!runtimeEntryName) {
+        return entryPaths;
+    }
+
+    const runtimeEntryPaths = {};
+    const dependedEntryPaths = {};
+
+    Object.entries(entryPaths).forEach(([key, value]) => {
+        if (key === runtimeEntryName) {
+            runtimeEntryPaths[key] = {
+                runtime: false,
+                import: value,
+            };
+
+            return;
+        }
+
+        dependedEntryPaths[key] = {
+            dependOn: runtimeEntryName,
+            import: value,
+        };
+    });
+
+    return {
+        ...runtimeEntryPaths,
+        ...dependedEntryPaths,
+    }
+}
+
+module.exports = configurePaths;

package/lib/copy.js

@@ -1,16 +1,18 @@
 const fs = require('fs-extra');
 const path = require('path');
-const oryx = require('@spryker/oryx');
+const log = require('./log');
 const settings = require('./settings');
 
 const copyAssets = async () => {
     const backCompatibilityPublicDir = path.resolve(path.join('public/Zed', settings.paths.publicPath));
 
     try {
-        oryx.log.task('Copy assets for backward compatibility after renaming assets folder');
-        oryx.log.step('copying assets...');
+        log.task('Copy assets for backward compatibility after renaming assets folder');
+        log.step('copying assets...');
+
         await fs.copy(settings.paths.publicDir, backCompatibilityPublicDir);
-        oryx.log.done('assets copied to: ', backCompatibilityPublicDir);
+
+        log.done('assets copied to: ', backCompatibilityPublicDir);
     } catch (err) {
         console.error(err)
     }

package/lib/find.js

@@ -0,0 +1,75 @@
+const path = require('path');
+const fastGlob = require('fast-glob');
+const log = require('./log');
+
+const cwd = process.cwd();
+
+function parseSettings(settings) {
+    return Object.assign({}, {
+        glob: { onlyFiles: false },
+    }, settings);
+}
+
+async function fastGlobAsync(patterns, rootConfiguration) {
+    try {
+        return await fastGlob(patterns, rootConfiguration);
+    } catch(error) {
+        log.error('An error occurred while globbing the system for entry points.', error);
+    }
+}
+
+async function glob(configuration, dirs, patterns) {
+    return await dirs.reduce(async (resultsPromise, dir) => {
+        const relativeRoot = dir.replace(cwd, '.');
+
+        log.debug('searching in', `${relativeRoot}...`);
+
+        const rootConfiguration = { ...configuration, cwd: dir };
+        const results = await resultsPromise;
+        const fastGlobPath = await fastGlobAsync(patterns, rootConfiguration);
+        const fastGlobFullPath = fastGlobPath.map(result => path.join(dir, result));
+
+        return results.concat(fastGlobFullPath);
+    }, Promise.resolve([]));
+}
+
+function toObject(paths, defineName) {
+    return paths.reduce((object, currentPath) => {
+        const name = defineName ? defineName(currentPath) : path.basename(currentPath);
+
+        object[name] = currentPath;
+
+        return object;
+    }, {});
+}
+
+async function find(settings, initial = {}) {
+    const parsedSettings = parseSettings(settings);
+
+    log.debug('settings:', parsedSettings);
+
+    let results = await glob(parsedSettings.glob, parsedSettings.dirs, parsedSettings.patterns);
+    let count = 0;
+
+    log.task('find');
+    log.debug('initial:', initial);
+
+    if (parsedSettings.description) {
+        log.step(parsedSettings.description);
+    }
+
+    if (Array.isArray(initial)) {
+        results = initial.concat(results);
+        count = results.length;
+    } else {
+        results = Object.assign({}, initial, toObject(results, parsedSettings.defineName));
+        count = Object.keys(results).length;
+    }
+
+    log.debug('results:', results);
+    log.done(count, 'found');
+
+    return results;
+}
+
+module.exports = find;

package/lib/index.js

@@ -1,15 +1,19 @@
-const oryx = require('@spryker/oryx');
 const webpack = require('webpack');
 const webpackVersion = require('webpack/package').version;
+const log = require('./log');
+const build = require('./build');
+const copyAssets = require('./copy');
 const pkg = require('../package');
 
-oryx.log.info(pkg.name, pkg.version);
-oryx.build.loadCompiler(webpack, webpackVersion);
+log.info(pkg.name, pkg.version);
+build.loadCompiler(webpack, webpackVersion);
 
 const settings = require('./settings');
 const getConfiguration = require('./webpack.config');
 
 module.exports = {
     settings,
-    getConfiguration
+    getConfiguration,
+    build,
+    copyAssets,
 };

package/lib/log.js

@@ -0,0 +1,66 @@
+const colors = require('colors/safe');
+
+const prefix = {
+    info:   '\u2648 ',
+    task:   null,
+    step:   colors.blue('\u25cf'),
+    done:   colors.green('\u2714'),
+    error:  colors.red('\u2718'),
+    debug:  colors.dim('\u25cf [DEBUG]'),
+};
+
+function getArgs(color, prefixArg, ...args) {
+    args = args.map(arg => {
+        let output = arg;
+
+        if (typeof(arg) === 'object') {
+            output = `\n ${JSON.stringify(arg, '  ', 2)}`;
+        }
+
+        if (color) {
+            return colors[color].apply(null, [output]);
+        }
+
+        return output;
+    });
+
+    if (prefixArg) {
+        return [prefixArg].concat(args);
+    }
+
+    return args;
+}
+
+function info() {
+    console.info.apply(console, getArgs('magenta', prefix.info, ...arguments));
+}
+
+function task() {
+    console.log();
+    console.log.apply(console, getArgs('blue', prefix.task, ...arguments));
+}
+
+function step() {
+    console.log.apply(console, getArgs(null, prefix.step, ...arguments));
+}
+
+function debug() {
+    console.log.apply(console, getArgs('dim', prefix.debug, ...arguments));
+}
+
+function done() {
+    console.log.apply(console, getArgs(null, prefix.done, ...arguments));
+}
+
+function error() {
+    console.error.apply(console, getArgs(null, prefix.error, ...arguments));
+}
+
+module.exports = {
+    info,
+    task,
+    step,
+    done,
+    error,
+    debug: !!process.env.DEBUG ? debug : function() {},
+}

package/lib/settings.js

@@ -1,10 +1,9 @@
 const fs = require('fs');
 const path = require('path');
-const oryx = require('@spryker/oryx');
 const argv = require('yargs').argv;
+const log = require('./log');
 
 const isVerbose = !!argv.verbose;
-
 const rootDir = process.cwd();
 const sourcePath = './assets/Zed/';
 const publicPath = '/assets/';
@@ -17,7 +16,7 @@ let bundlesPath = './vendor/spryker/';
 let guiFolder = 'gui';
 
 if (!fs.existsSync(path.resolve(bundlesPath, guiFolder))) {
-    oryx.log.step('spryker core: no-bundle-split layout detected');
+    log.step('spryker core: no-bundle-split layout detected');
 
     bundlesPath = './vendor/spryker/spryker/Bundles/';
     guiFolder = 'Gui';
@@ -30,7 +29,7 @@ const settings = {
     options: {
         isProduction: !!argv.prod,
         isWatching: !!argv.dev,
-        isVerbose
+        isVerbose,
     },
 
     paths: {
@@ -47,18 +46,20 @@ const settings = {
         sdkDir,
     },
 
+    runtimeEntryName: 'spryker-zed-gui-commons',
+
     entry: {
         dirs: [bundlesDir, ecoDir, sdkDir],
         patterns: ['**/Zed/**/*.entry.js'],
         description: 'looking for entry points...',
-        defineName: p => path.basename(p, '.entry.js')
+        defineName: p => path.basename(p, '.entry.js'),
     },
 
     resolveModules: {
         dirs: [bundlesDir],
         patterns: ['**/Zed/node_modules'],
-        description: 'resolving core modules deps...'
-    }
+        description: 'resolving core modules deps...',
+    },
 }
 
 module.exports = settings;

package/lib/webpack.config.js

@@ -1,29 +1,21 @@
-const path = require('path');
-const oryx = require('@spryker/oryx');
 const webpack = require('webpack');
-const autoprefixer = require('autoprefixer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const find = require('./find');
+const configurePaths = require('./configure-paths');
 
 async function getConfiguration(settings) {
     let mode = 'development';
     let devtool = 'inline-source-map';
-    let postCssPlugins = [];
 
     if (settings.options.isProduction) {
         mode = 'production';
         devtool = false;
-
-        postCssPlugins = [
-            autoprefixer({
-                browsers: ['last 4 versions']
-            })
-        ];
     }
 
-    const entryPromise = oryx.find(settings.entry);
-    const modulesPromise = oryx.find(settings.resolveModules, []);
+    const entryPromise = find(settings.entry);
+    const modulesPromise = find(settings.resolveModules, []);
     const [entryPaths, modulesPaths] = await Promise.all([entryPromise, modulesPromise]);
 
     let config = {
@@ -35,14 +27,14 @@ async function getConfiguration(settings) {
         watchOptions: {
             aggregateTimeout: 300,
             poll: 500,
-            ignored: /(node_modules)/
+            ignored: /(node_modules)/,
         },
 
-        entry: entryPaths,
+        entry: configurePaths(entryPaths, settings.runtimeEntryName),
 
         output: {
             path: settings.paths.publicDir,
-            filename: './js/[name].js'
+            filename: './js/[name].js',
         },
 
         resolve: {
@@ -51,7 +43,7 @@ async function getConfiguration(settings) {
                 'node_modules/@spryker/oryx-for-zed/node_modules',
                 'node_modules',
                 settings.paths.sourcePath,
-                settings.paths.bundlesPath
+                settings.paths.bundlesPath,
             ],
             extensions: ['.js', '.css', '.scss'],
             alias: {
@@ -59,25 +51,25 @@ async function getConfiguration(settings) {
                 ZedGuiEditorConfiguration: `${settings.paths.guiFolder}/assets/Zed/js/modules/editor`,
                 ZedGuiModules: `${settings.paths.guiFolder}/assets/Zed/js/modules`,
                 jQuery: 'jquery',
-            }
+            },
         },
 
         resolveLoader: {
             modules: [
                 'node_modules/@spryker/oryx-for-zed/node_modules',
-                'node_modules'
-            ]
+                'node_modules',
+            ],
         },
 
         module: {
             rules: [
                 {
                     test: /datatables\.net.*/,
-                    use: 'imports-loader?define=>false'
+                    use: 'imports-loader?define=>false',
                 },
                 {
                     test: /(jquery-migrate)/,
-                    use: 'imports-loader?define=>false'
+                    use: 'imports-loader?define=>false',
                 },
                 {
                     test: /\.m?js$/,
@@ -86,9 +78,9 @@ async function getConfiguration(settings) {
                         loader: 'babel-loader',
                         options: {
                             cacheDirectory: true,
-                            presets: ['@babel/env']
-                        }
-                    }
+                            presets: ['@babel/env'],
+                        },
+                    },
                 },
                 {
                     test: /\.s?css/i,
@@ -97,27 +89,28 @@ async function getConfiguration(settings) {
                         {
                             loader: 'css-loader',
                             options: {
-                                importLoaders: 1
-                            }
+                                importLoaders: 1,
+                            },
                         },
                         {
                             loader: 'postcss-loader',
                             options: {
-                                ident: 'postcss',
-                                plugins: postCssPlugins
-                            }
+                                postcssOptions: {
+                                    plugins: [require('autoprefixer')],
+                                },
+                            },
                         },
                         {
-                            loader: 'resolve-url-loader'
+                            loader: 'resolve-url-loader',
                         },
                         {
                             loader: 'sass-loader',
                             options: {
                                 implementation: require('sass'),
-                                sourceMap: true
-                            }
-                        }
-                    ]
+                                sourceMap: true,
+                            },
+                        },
+                    ],
                 },
                 {
                     test: /\.(ttf|woff2?|eot|svg|otf)\??(\d*\w*=?\.?)+$/i,
@@ -125,9 +118,9 @@ async function getConfiguration(settings) {
                         loader: 'file-loader',
                         options: {
                             name: 'fonts/[name].[ext]',
-                            publicPath: settings.paths.publicPath
-                        }
-                    }]
+                            publicPath: settings.paths.publicPath,
+                        },
+                    }],
                 },
                 {
                     test: /\.(jpe?g|png|gif|svg)\??(\d*\w*=?\.?)+$/i,
@@ -135,34 +128,34 @@ async function getConfiguration(settings) {
                         loader: 'file-loader',
                         options: {
                             name: 'img/[name].[ext]',
-                            publicPath: settings.paths.publicPath
-                        }
-                    }]
-                }
-            ]
+                            publicPath: settings.paths.publicPath,
+                        },
+                    }],
+                },
+            ],
         },
 
         optimization: {
             runtimeChunk: {
-                name: 'spryker-zed-gui-commons'
+                name: settings.runtimeEntryName,
             },
             concatenateModules: false,
             splitChunks: {
                 cacheGroups: {
                     default: false,
-                    vendors: false,
+                    defaultVendors: false,
                     commons: {
-                        name: 'spryker-zed-gui-commons'
-                    }
-                }
-            }
+                        name: settings.runtimeEntryName,
+                    },
+                },
+            },
         },
 
         plugins: [
             new webpack.DefinePlugin({
                 DEV: !settings.options.isProduction,
                 WATCH: settings.options.isWatching,
-                'require.specified': 'require.resolve'
+                'require.specified': 'require.resolve',
             }),
 
             new webpack.ProvidePlugin({
@@ -173,13 +166,13 @@ async function getConfiguration(settings) {
                 // legacy provider
                 SprykerAjax: `${settings.paths.guiFolder}/assets/Zed/js/modules/legacy/SprykerAjax`,
                 SprykerAjaxCallbacks: `${settings.paths.guiFolder}/assets/Zed/js/modules/legacy/SprykerAjaxCallbacks`,
-                SprykerAlert: `${settings.paths.guiFolder}/assets/Zed/js/modules/legacy/SprykerAlert`
+                SprykerAlert: `${settings.paths.guiFolder}/assets/Zed/js/modules/legacy/SprykerAlert`,
             }),
 
             new MiniCssExtractPlugin({
                 filename: `./css/[name].css`,
-            })
-        ]
+            }),
+        ],
     };
 
     if (settings.options.isProduction) {
@@ -188,27 +181,28 @@ async function getConfiguration(settings) {
 
             minimizer: [
                 new TerserPlugin({
-                    cache: true,
                     parallel: true,
-                    sourceMap: false,
                     extractComments: false,
                     terserOptions: {
                         ecma: 5,
                         output: {
                             comments: false,
-                            beautify: false
-                        }
-                    }
+                            beautify: false,
+                        },
+                    },
                 }),
 
-                new OptimizeCSSAssetsPlugin({
-                    cssProcessorOptions: {
-                        discardComments: {
-                            removeAll: true
-                        }
-                    }
-                })
-            ]
+                new CssMinimizerPlugin({
+                    minimizerOptions: {
+                        preset: [
+                            'default',
+                            {
+                                discardComments: { removeAll: true },
+                            },
+                        ],
+                    },
+                }),
+            ],
         };
     }
 

package/package.json

@@ -1,43 +1,46 @@
 {
   "name": "@spryker/oryx-for-zed",
-  "version": "2.12.0",
-  "description": "Spryker ZED frontend automation tool (oryx based)",
+  "version": "3.0.0",
+  "description": "Spryker ZED frontend automation tool",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:spryker/oryx-for-zed.git"
+  },
+  "license": "MIT",
   "author": {
     "name": "Spryker Sytems GmbH",
     "email": "info@spryker.com",
     "url": "http://spryker.com"
   },
-  "repository": {
-    "url": "git@github.com:spryker/oryx-for-zed.git",
-    "type": "git"
-  },
-  "license": "MIT",
   "main": "index.js",
   "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.9.0"
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
   },
   "dependencies": {
-    "@babel/core": "~7.17.12",
-    "@babel/preset-env": "~7.17.12",
-    "@spryker/oryx": "^1.4.0",
-    "autoprefixer": "~8.3.0",
-    "babel-loader": "~8.2.5",
-    "core-js": "~2.5.5",
+    "autoprefixer": "~10.4.14",
+    "babel-loader": "~8.3.0",
+    "colors": "~1.4.0",
     "css-loader": "~2.1.1",
-    "es6-promise": "~4.0.5",
+    "css-minimizer-webpack-plugin": "~4.2.2",
+    "dayjs": "~1.11.7",
+    "fast-glob": "~3.2.12",
     "file-loader": "~1.1.11",
-    "fs-extra": "~10.0.0",
+    "fs-extra": "~10.1.0",
     "imports-loader": "~0.8.0",
-    "mini-css-extract-plugin": "~0.4.0",
-    "optimize-css-assets-webpack-plugin": "~5.0.8",
-    "postcss-loader": "~2.1.4",
+    "mini-css-extract-plugin": "~2.7.2",
+    "postcss": "~8.4.23",
+    "postcss-loader": "~7.3.0",
     "resolve-url-loader": "~5.0.0",
-    "sass": "~1.51.0",
-    "sass-loader": "~10.2.1",
-    "style-loader": "~0.21.0",
-    "terser-webpack-plugin": "~4.2.2",
-    "webpack": "~4.46.0",
-    "yargs": "~13.3.0"
+    "sass": "~1.60.0",
+    "sass-loader": "~10.4.1",
+    "style-loader": "~0.23.1",
+    "terser-webpack-plugin": "~5.3.6",
+    "webpack": "~5.81.0",
+    "yargs": "~13.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.21.3",
+    "@babel/preset-env": "~7.20.2"
   }
 }