From 1f69fc195bb2427243af7bcd07df5a9e1e83c0c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 26 Jun 2024 08:16:41 +0200 Subject: [PATCH 1/4] updating webpack and babel --- .gitattributes | 1 - CHANGELOG.md | 10 ++++++++++ babel.config.js | 3 --- babel/babel.config.js | 17 ----------------- package.json | 2 +- webpack/base.js | 15 ++++++--------- webpack/development.js | 36 ------------------------------------ webpack/helpers.js | 12 ------------ webpack/index.js | 4 +--- webpack/production.js | 5 ++++- 10 files changed, 22 insertions(+), 83 deletions(-) delete mode 100644 babel.config.js delete mode 100644 babel/babel.config.js delete mode 100644 webpack/development.js diff --git a/.gitattributes b/.gitattributes index 7ed09c65c..465a6d1c9 100644 --- a/.gitattributes +++ b/.gitattributes @@ -5,7 +5,6 @@ # https://blog.madewithlove.be/post/gitattributes/ # /.github export-ignore -/.storybook export-ignore /docs export-ignore /documentation export-ignore /package export-ignore diff --git a/CHANGELOG.md b/CHANGELOG.md index 83bafe8d8..f8d5f8d4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/). +## [12.1.0] + +### Changed +- Webpack config to use swc for JS compilation. + +### Removed +- Babel config folder as we are using swc now. +- Webpack browser sync as it is not used anymore. + ## [12.0.0] ### Changed @@ -1066,6 +1075,7 @@ Follow this migration script in order for you project to work correctly with the [Unreleased]: https://github.com/infinum/eightshift-frontend-libs/compare/master...HEAD +[12.1.0]: https://github.com/infinum/eightshift-frontend-libs/compare/12.0.0...12.1.0 [12.0.0]: https://github.com/infinum/eightshift-frontend-libs/compare/11.0.1...12.0.0 [11.0.1]: https://github.com/infinum/eightshift-frontend-libs/compare/11.0.0...11.0.1 [11.0.0]: https://github.com/infinum/eightshift-frontend-libs/compare/10.0.0...11.0.0 diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index d52d26c87..000000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: './babel/babel.config.js', -}; diff --git a/babel/babel.config.js b/babel/babel.config.js deleted file mode 100644 index 3f4c36852..000000000 --- a/babel/babel.config.js +++ /dev/null @@ -1,17 +0,0 @@ -module.exports = (api) => { - api.cache(true); - - return { - presets: [ - [ - '@babel/preset-env', - { - useBuiltIns: 'usage', - corejs: '3', - modules: false, - }, - ], - ['@babel/preset-react'], - ], - }; -}; diff --git a/package.json b/package.json index d5ee98f8b..611203585 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eightshift/frontend-libs", - "version": "12.0.0", + "version": "12.1.0", "description": "A collection of useful frontend utility modules. powered by Eightshift", "author": { "name": "Eightshift team", diff --git a/webpack/base.js b/webpack/base.js index 156b476c3..ede5f847b 100644 --- a/webpack/base.js +++ b/webpack/base.js @@ -67,23 +67,20 @@ module.exports = (options) => { rules: [], }; - // Module for JS and JSX. + // Module for JS and JSX. if (!options.overrides.includes('js')) { module.rules.push({ test: /\.(js|jsx)$/, exclude: /node_modules[\\/](?!@eightshift)/, use: [ { - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, + loader: 'swc-loader', }, ], }); } - // Module for Images. + // Module for Images. if (!options.overrides.includes('images')) { module.rules.push({ test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i, @@ -92,16 +89,16 @@ module.exports = (options) => { }); } - // Module for Fonts. + // Module for Fonts. if (!options.overrides.includes('fonts')) { module.rules.push({ - test: /\.(eot|otf|ttf|woff|woff2)$/, + test: /\.(otf|ttf|woff2)$/, exclude: [/images/, /node_modules/], use: 'file-loader?name=[name].[ext]', }); } - // Module for Scss. + // Module for Scss. if (!options.overrides.includes('scss')) { module.rules.push({ test: /\.scss$/, diff --git a/webpack/development.js b/webpack/development.js deleted file mode 100644 index 590052c3e..000000000 --- a/webpack/development.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Project Development config used only in development build. - * - */ - -const BrowserSyncPlugin = require('browser-sync-v3-webpack-plugin'); - -// Define developmentConfig setup. -module.exports = (options) => { - - // All Plugins used in development build. - const plugins = []; - - // Use BrowserSync to see live preview of all changes. - if (!options.overrides.includes('browserSyncPlugin')) { - const syncConfig = { - host: 'localhost', - port: 3000, - proxy: `http://${options.config.proxyUrl}`, - }; - - if (options.config.useSsl) { - syncConfig.proxy = `https://${options.config.proxyUrl}`; - syncConfig.https = true; - } - - plugins.push(new BrowserSyncPlugin( - syncConfig - )); - } - - return { - plugins, - devtool: false, - }; -}; diff --git a/webpack/helpers.js b/webpack/helpers.js index 56e651e66..c8d8f38c6 100644 --- a/webpack/helpers.js +++ b/webpack/helpers.js @@ -10,35 +10,26 @@ const fs = require('fs'); * Generate all paths required for Webpack build to work. * * @param {string} projectDir Current project directory absolute path. - * @param {string} proxyUrl Used for providing browsersync functionality. * @param {string} projectPathConfig Project path relative to project root. * @param {string} assetsPathConfig Assets path after projectPath location. * @param {string} blocksAssetsPathConfig Path of the block assets. * @param {string} outputPathConfig Public output path after projectPath location. * @param {string} blocksManifestSettingsPath Main global settings manifest.json path after projectPath location. - * @param {boolean} useSsl Change configuration if you have local ssl certificate, generally used only for BrowserSync. * */ function getConfig( projectDir, - proxyUrl, projectPathConfig, assetsPathConfig = 'assets', blocksAssetsPathConfig = 'src/Blocks/assets', outputPathConfig = 'public', blocksManifestSettingsPath = 'src/Blocks/manifest.json', - useSsl = false, ) { if (typeof projectDir === 'undefined') { throw Error('projectDir parameter is empty, please provide. This key represents: Current project directory absolute path. For example: __dirname'); } - if (typeof proxyUrl === 'undefined') { - // eslint-disable-next-line max-len - throw Error('proxyUrl parameter is empty, please provide. This key represents: Development Url for providing browsersync functionality. For example: dev.boilerplate.com'); - } - if (typeof projectPathConfig === 'undefined') { // eslint-disable-next-line max-len throw Error('projectPath parameter is empty, please provide. This key represents: Project path relative to project root. For example: wp-content/themes/eightshift-boilerplate'); @@ -55,7 +46,6 @@ function getConfig( const absolutePath = `${projectDir}`; return { - proxyUrl, absolutePath, // Output files absolute location. @@ -72,8 +62,6 @@ function getConfig( applicationBlocksFrontendEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks-frontend.js'), blocksManifestSettingsPath: path.resolve(absolutePath, blocksManifestSettingsPathClean), - - useSsl, }; } diff --git a/webpack/index.js b/webpack/index.js index 1935f1934..57cc4e43b 100644 --- a/webpack/index.js +++ b/webpack/index.js @@ -24,7 +24,6 @@ module.exports = (mode, optionsData = {}) => { optionsData.config.blocksAssetsPath, optionsData.config.outputPath, optionsData.config.blocksManifestSettingsPath, - optionsData.config.useSsl, ); options.config.mode = mode; @@ -33,7 +32,6 @@ module.exports = (mode, optionsData = {}) => { // Get all webpack partials. const base = require('./base')(options); const project = require('./project')(options); - const development = require('./development')(options); const production = require('./production')(options); // Default output that is going to be merged in any env. @@ -46,7 +44,7 @@ module.exports = (mode, optionsData = {}) => { if (mode === 'production') { output = merge(outputDefault, production); } else { - output = merge(outputDefault, development); + output = outputDefaultx; } return output; diff --git a/webpack/production.js b/webpack/production.js index c9fac31b4..02772f6ea 100644 --- a/webpack/production.js +++ b/webpack/production.js @@ -40,7 +40,10 @@ module.exports = (options) => { if (!options.overrides.includes('cssMinimizerPlugin')) { optimization.minimizer.push(new CssMinimizerPlugin({ parallel: true, - minify: CssMinimizerPlugin.cssoMinify, + minify: CssMinimizerPlugin.lightningCssMinify, + minimizerOptions: { + targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%')) + }, })); } From 6a83515ad625c5e0f9bfd4e4692536155ab4fd80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 26 Jun 2024 08:18:55 +0200 Subject: [PATCH 2/4] updating webpack and babel --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 611203585..753da8637 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "scripts": { "lintStyle": "stylelint **/*.scss", - "lintJs": "eslint blocks/ webpack/ scripts/ babel/ linters/", + "lintJs": "eslint blocks/ webpack/ scripts/ linters/", "lint": "npm run lintJs && npm run lintStyle", "prepare": "husky" }, From ad4f35741465df5182d169a1a510cd41241b999a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 26 Jun 2024 08:19:22 +0200 Subject: [PATCH 3/4] updating webpack and babel --- webpack/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack/index.js b/webpack/index.js index 57cc4e43b..42e48584f 100644 --- a/webpack/index.js +++ b/webpack/index.js @@ -44,7 +44,7 @@ module.exports = (mode, optionsData = {}) => { if (mode === 'production') { output = merge(outputDefault, production); } else { - output = outputDefaultx; + output = outputDefault; } return output; From 9f582413e43d1f72686e6ca35f952cbe2f7ce044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 26 Jun 2024 08:22:11 +0200 Subject: [PATCH 4/4] updating webpack and babel --- webpack/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/webpack/index.js b/webpack/index.js index 42e48584f..fce522cc9 100644 --- a/webpack/index.js +++ b/webpack/index.js @@ -38,14 +38,12 @@ module.exports = (mode, optionsData = {}) => { const outputDefault = merge(project, base); // Output development setup by default. - let output; - - // Output production setup if mode is set inside package.json. - if (mode === 'production') { - output = merge(outputDefault, production); - } else { - output = outputDefault; - } + const development = { + devtool: false, + watchOptions: { + ignored: '**/node_modules', + }, + }; - return output; + return merge(outputDefault, mode === 'production' ? production : development); };