updating webpack and babel (#833)

* updating webpack and babel

.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

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

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",
@@ -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"
 	},

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$/,

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,
 	};
 }
 

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,21 +32,18 @@ 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.
 	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 = merge(outputDefault, development);
-	}
+	const development = {
+		devtool: false,
+		watchOptions: {
+			ignored: '**/node_modules',
+		},
+	};
 
-	return output;
+	return merge(outputDefault, mode === 'production' ? production : development);
 };

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%'))
+			},
 		}));
 	}