@lipemat/js-boilerplate 10.2.0 → 10.3.0-beta.1

package/README.md

@@ -38,8 +38,9 @@ Add the following to your package.json. (this may also be found in the `template
 ```
 **_You may adjust things as needed but be sure to leave the `scripts` as is._**
 
-* `shortCssClasses`: Enable short 1-2 character CSS classes. Recommended if you're not running multiple instances of this package on the same site.
-* `jsPath`: Path of JS application relative to `package.json`. If `package.json` is in same directory as the JS application, this may be omitted.
+* `brotliFiles : {bool}` Enabled generating pre-compressed .br files for CSS and JS.
+* `shortCssClasses : {bool}` Enable short 1-2 character CSS classes. Recommended if you're not running multiple instances of this package on the same site.
+* `jsPath : {string}` Path of JS application relative to `package.json`. If `package.json` is in same directory as the JS application, this may be omitted.
 
 ## Code Completion In PHPStorm
 Some `@types` have been specified in this library to assist with code completion and allow using the built-in TypeScript support. Unfortunately, some typescripts still send errors to PHPStorm like "Default export is not declared in an imported module". I've found that it's easier to just remove this warning by un-checking `Editor -> Inspections -> JavaScript -> General -> Validate Imports`. (this may not need to be un-checked if you enable the built-in TypeScript support).

package/config/webpack.dev.js

@@ -4,7 +4,7 @@ const path = require( 'path' );
 const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 const config = require( '../helpers/package-config' );
 const {getEntries} = require( '../helpers/entries' );
-const {getConfig, hasLocalOverride} = require( '../helpers/config' );
+const {getConfig, getTsConfigFile} = require( '../helpers/config' );
 
 const postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
@@ -24,14 +24,14 @@ const plugins = [
 	new ReactRefreshWebpackPlugin(),
 ];
 
-// Loads a thread, which verifies any TypeScripts on changes.
-// Only use this if the project has a tsconfig.json file.
-if ( hasLocalOverride( 'tsconfig.json', true ) ) {
+// Loads a thread, which verifies any TypeScripts on changes if the
+// project has a "tsconfig.json" file.
+if ( '' !== getTsConfigFile() ) {
 	plugins.push( new ForkTsCheckerWebpackPlugin( {
 		devServer: false,
 		formatter: 'basic',
 		typescript: {
-			configFile: config.workingDirectory + '/tsconfig.json',
+			configFile: getTsConfigFile(),
 		},
 	} ) );
 }

package/config/webpack.dist.js

@@ -1,5 +1,6 @@
 const webpack = require( 'webpack' );
 const path = require( 'path' );
+const CompressionPlugin = require( 'compression-webpack-plugin' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const {CleanWebpackPlugin} = require( 'clean-webpack-plugin' );
 const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
@@ -21,6 +22,41 @@ const ManifestPlugin = new WebpackAssetsManifest( {
 	output: 'manifest.json',
 } );
 
+const plugins = [
+	new webpack.ProvidePlugin( {
+		jQuery: 'jquery',
+		$: 'jquery',
+	} ),
+	new MiniCssExtractPlugin( {
+		filename: '[name].css',
+		chunkFilename: '[name].[contenthash].css',
+	} ),
+	new CleanWebpackPlugin( {
+		// Remove all files except the `.running` file created by "Start".
+		cleanOnceBeforeBuildPatterns: [ '**/*', '!.running' ],
+	} ),
+	new SubresourceIntegrityPlugin( {
+		hashFuncNames: [ 'sha384' ],
+	} ),
+	new WebpackAssetsHash( ManifestPlugin ),
+	ManifestPlugin,
+];
+
+/**
+ * Generate .br files if enabled.
+ *
+ * @note Will only generate files if 20% or more size is gained.
+ * @see https://webpack.js.org/plugins/compression-webpack-plugin/#using-brotli
+ */
+if ( config.brotliFiles ) {
+	plugins.push( new CompressionPlugin( {
+		algorithm: 'brotliCompress',
+		deleteOriginalAssets: false,
+		test: /\.(js|css)$/,
+	} ) );
+}
+
+
 module.exports = {
 	devtool: false,
 	entry: getEntries(),
@@ -68,25 +104,7 @@ module.exports = {
 			'node_modules',
 		],
 	},
-	plugins: [
-		new webpack.ProvidePlugin( {
-			jQuery: 'jquery',
-			$: 'jquery',
-		} ),
-		new MiniCssExtractPlugin( {
-			filename: '[name].css',
-			chunkFilename: '[name].[contenthash].css',
-		} ),
-		new CleanWebpackPlugin( {
-			// Remove all files except the `.running` file created by "Start".
-			cleanOnceBeforeBuildPatterns: [ '**/*', '!.running' ],
-		} ),
-		new SubresourceIntegrityPlugin( {
-			hashFuncNames: [ 'sha384' ],
-		} ),
-		new WebpackAssetsHash( ManifestPlugin ),
-		ManifestPlugin,
-	],
+	plugins,
 	module: {
 		rules: [
 			{

package/helpers/config.js

@@ -2,6 +2,8 @@ const packageConfig = require( './package-config' );
 const path = require( 'path' );
 const once = require( 'lodash/once' );
 const browserslist = require( 'browserslist' );
+const fs = require( 'fs' );
+const config = require( './package-config' );
 
 const extensions = [
 	...Object.keys( packageConfig.dependencies ?? {} ).filter( name => name.includes( 'js-boilerplate-' ) ),
@@ -16,7 +18,7 @@ const extensions = [
  *
  * @return {boolean}
  */
-function hasLocalOverride( fileName, inWorkingDirectory = false ) {
+function hasLocalOverride( fileName, inWorkingDirectory = false, ) {
 	let hasLocal = false;
 	try {
 		if ( inWorkingDirectory ) {
@@ -61,18 +63,18 @@ function hasLocalOverride( fileName, inWorkingDirectory = false ) {
  * @return {Object}
  */
 function getConfig( fileName ) {
-	let config = require( '../config/' + fileName );
-	config = {...config, ...getExtensionsConfig( fileName, config )};
+	let mergedConfig = require( '../config/' + fileName );
+	mergedConfig = {...mergedConfig, ...getExtensionsConfig( fileName, mergedConfig )};
 	try {
 		const localConfig = require( path.resolve( packageConfig.packageDirectory + '/config', fileName ) );
 		if ( 'function' === typeof localConfig ) {
-			config = {...config, ...localConfig( config )};
+			mergedConfig = {...mergedConfig, ...localConfig( mergedConfig )};
 		} else {
-			config = {...config, ...localConfig};
+			mergedConfig = {...mergedConfig, ...localConfig};
 		}
 	} catch ( e ) {
 	}
-	return config;
+	return mergedConfig;
 }
 
 /**
@@ -88,22 +90,49 @@ function getConfig( fileName ) {
  * @return {Object}
  */
 function getExtensionsConfig( fileName, defaultConfig ) {
-	let config = {};
+	let mergedConfig = {};
 	extensions.forEach( extension => {
 		try {
 			const extensionConfig = require( extension + '/config/' + fileName );
 			if ( 'function' === typeof extensionConfig ) {
-				config = {...config, ...extensionConfig( {...defaultConfig, ...config} )};
+				mergedConfig = {...mergedConfig, ...extensionConfig( {...defaultConfig, ...mergedConfig} )};
 			} else {
-				config = {...config, ...extensionConfig};
+				mergedConfig = {...mergedConfig, ...extensionConfig};
 			}
 		} catch ( e ) {
 		}
 	} );
 
-	return config;
+	return mergedConfig;
 }
 
+/**
+ * Get the path to the "tsconfig.json" file if it exists.
+ *
+ * 1. The working directory.
+ * 2. The package directory.
+ *
+ * The package directory takes priority over the working directory.
+ *
+ *
+ * @return {string}
+ */
+function getTsConfigFile() {
+	const possibles = [
+		// Backward compatible for before @lipemat/eslint-config version 3.
+		path.resolve( config.workingDirectory + '/tsconfig.json' ),
+		path.resolve( config.packageDirectory + '/tsconfig.json' ),
+	];
+	let tsConfig = '';
+	possibles.forEach( filePath => {
+		if ( fs.existsSync( filePath ) ) {
+			tsConfig = filePath;
+		}
+	} );
+	return tsConfig;
+}
+
+
 /**
  * If browserslist is not specified, we fall back to WordPress defaults
  * except for > 1% we don't support by default.
@@ -134,5 +163,6 @@ module.exports = {
 	getConfig,
 	getDefaultBrowsersList,
 	getExtensionsConfig,
+	getTsConfigFile,
 	hasLocalOverride,
 };

package/helpers/package-config.js

@@ -3,6 +3,7 @@ const fs = require( 'fs' );
 
 const workingDirectory = fs.realpathSync( process.cwd() );
 let packageConfig = require( path.resolve( workingDirectory, 'package.json' ) );
+packageConfig.brotliFiles ||= false;
 packageConfig.es6Modules ||= [];
 packageConfig.jsPath ||= '';
 // Path of the package.json file (root).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.2.0",
+  "version": "10.3.0-beta.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -45,13 +45,14 @@
     "@lipemat/css-mqpacker": "^9.0.0",
     "@lipemat/eslint-config": "^3.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@wordpress/browserslist-config": "^4.1.0",
+    "@wordpress/browserslist-config": "^5.19.0",
     "are-you-es5": "^2.1.1",
     "babel-jest": "^29.0.0",
     "babel-loader": "^9.1.2",
     "browserslist": "^4.17.0",
     "clean-css": "^5.3.0",
     "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "core-js": "^3.8.3",
     "cross-spawn": "^6.0.5",
     "css-loader": "6.7.1",
@@ -66,7 +67,7 @@
     "postcss": "^8.4.13",
     "postcss-color-mod-function": "^3.0.3",
     "postcss-custom-media": "^8.0.1",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.1.0",
     "postcss-loader": "^6.2.1",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.5.0",