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

package/config/babel.config.js

@@ -1,19 +1,17 @@
-const {getDefaultBrowsersList} = require( '../helpers/config' );
+const {getBrowsersList} = require( '../helpers/config' );
 
 const presetEnv = {
+	bugfixes: true,
 	corejs: {
-		version: '3.8',
+		version: '3.31',
 	},
 	shippedProposals: true,
+	targets: {
+		browsers: getBrowsersList(),
+	},
 	useBuiltIns: 'usage',
 };
 
-/**
- * Use shared browserslist configurations.
- */
-if ( getDefaultBrowsersList() ) {
-	presetEnv.targets = getDefaultBrowsersList();
-}
 
 module.exports = {
 	cacheDirectory: true,

package/config/postcss.config.js

@@ -1,10 +1,11 @@
 const path = require( 'path' );
 const fs = require( 'fs' );
 const postcssPresetEnv = require( 'postcss-preset-env' );
-const {getDefaultBrowsersList} = require( '../helpers/config' );
+const {getBrowsersList} = require( '../helpers/config' );
 const packageConfig = require( '../helpers/package-config' );
 
 const presetEnv = {
+	browsers: getBrowsersList(),
 	features: {
 		/**
 		 * Fixes `focus-visible` feature for CSS modules (included by preset-env anywhere
@@ -27,15 +28,6 @@ const presetEnv = {
 	},
 };
 
-/**
- * If browserslist is not specified, we fall back to WordPress defaults.
- *
- * @link https://github.com/csstools/postcss-preset-env#browsers
- */
-if ( getDefaultBrowsersList() ) {
-	presetEnv.browsers = getDefaultBrowsersList();
-}
-
 /**
  * If a media-queries files exist, automatically load them.
  *

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, getTsConfigFile} = require( '../helpers/config' );
+const {getConfig, getTsConfigFile, getBrowsersList} = require( '../helpers/config' );
 
 const postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
@@ -44,6 +44,7 @@ module.exports = {
 	externals: {
 		jquery: 'jQuery',
 	},
+	target: 'browserslist:' + getBrowsersList().join( ', ' ),
 	output: {
 		path: path.resolve( config.workingDirectory, 'dist' ),
 		filename: '[name].js',

package/config/webpack.dist.js

@@ -5,9 +5,10 @@ const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const {CleanWebpackPlugin} = require( 'clean-webpack-plugin' );
 const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
 const {SubresourceIntegrityPlugin} = require( 'webpack-subresource-integrity' );
+const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 
 const WebpackAssetsHash = require( '../helpers/WebpackAssetsHash' );
-const {getConfig} = require( '../helpers/config' );
+const {getConfig, getTsConfigFile, getBrowsersList} = require( '../helpers/config' );
 const moduleHelpers = require( '../helpers/modules' );
 const config = require( '../helpers/package-config' );
 const {getEntries} = require( '../helpers/entries' );
@@ -35,6 +36,12 @@ const plugins = [
 		// Remove all files except the `.running` file created by "Start".
 		cleanOnceBeforeBuildPatterns: [ '**/*', '!.running' ],
 	} ),
+	new ForkTsCheckerWebpackPlugin( {
+		formatter: 'basic',
+		typescript: {
+			configFile: getTsConfigFile(),
+		},
+	} ),
 	new SubresourceIntegrityPlugin( {
 		hashFuncNames: [ 'sha384' ],
 	} ),
@@ -89,7 +96,7 @@ module.exports = {
 	externals: {
 		jquery: 'jQuery',
 	},
-	target: [ 'web', 'es5' ],
+	target: 'browserslist:' + getBrowsersList().join( ', ' ),
 	output: {
 		path: path.resolve( config.workingDirectory, 'dist' ),
 		filename: '[name].js',

package/helpers/config.js

@@ -132,12 +132,34 @@ function getTsConfigFile() {
 	return tsConfig;
 }
 
+/**
+ * Get the browserslist from the current project.
+ *
+ * - If specified using standard browserslist config, we will use that.
+ * - Fallback to WordPress defaults except for "> 1%".
+ */
+function getBrowsersList() {
+	const projectBrowsersList = browserslist();
+	if ( browserslist( browserslist.defaults ) === projectBrowsersList ) {
+		return require( '@wordpress/browserslist-config' ).map( range => {
+			// Swap out "> 1%" for "> 2%".
+			return '> 1%' === range ? '> 2%' : range;
+		} );
+	}
+	return projectBrowsersList;
+}
 
 /**
  * If browserslist is not specified, we fall back to WordPress defaults
  * except for > 1% we don't support by default.
  *
- * Return false if a browserslist is specified in the current project.
+ * - Return the default browserslist if the current project does not specify one.
+ * - Return false if a browserslist is specified, or JEST is running.
+ *
+ * Used in cases where we can fall back to standard browserslist config if the project
+ * has not specified one.
+ *
+ * @deprecated Use getBrowsersList instead.
  *
  * @link https://github.com/browserslist/browserslist#config-file
  *
@@ -160,6 +182,7 @@ const getDefaultBrowsersList = once( () => {
 
 
 module.exports = {
+	getBrowsersList,
 	getConfig,
 	getDefaultBrowsersList,
 	getExtensionsConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.3.0-beta.1",
+  "version": "10.3.0-beta.3",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@babel/core": "^7.4.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-react-jsx-source": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@lipemat/css-mqpacker": "^9.0.0",
@@ -53,7 +53,7 @@
     "clean-css": "^5.3.0",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^10.0.0",
-    "core-js": "^3.8.3",
+    "core-js": "^3.31.1",
     "cross-spawn": "^6.0.5",
     "css-loader": "6.7.1",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
@@ -84,5 +84,8 @@
     "webpack-dev-server": "^4.7.2",
     "webpack-subresource-integrity": "^5.1.0"
   },
+  "devDependencies": {
+    "@types/jest": "^29.5.3"
+  },
   "packageManager": "yarn@3.6.0"
 }

package/scripts/browserslist.js

@@ -1,6 +1,5 @@
-const path = require( 'path' );
 const browserslist = require( 'browserslist' );
-const {getDefaultBrowsersList} = require( '../helpers/config' );
+const {getBrowsersList} = require( '../helpers/config' );
 
 const help = `
 	List browsers being targeted by Babel and PostCSS.
@@ -19,9 +18,7 @@ if ( args[ 0 ] && ( '-h' === args[ 0 ] || '--help' === args[ 0 ] ) ) {
 }
 
 
-const provided = getDefaultBrowsersList() || browserslist.loadConfig( {
-	path: path.resolve( '.' ),
-} );
+const provided = getBrowsersList();
 
 console.log( '' );
 console.log( 'JS Provided Browserslist' );

package/scripts/dist.js

@@ -14,10 +14,8 @@ async function build( config ) {
 			throw err;
 		}
 
-		const info = stats.toJson();
-
 		if ( stats.hasErrors() ) {
-			console.error( info.errors );
+			console.error( stats.toString( config.stats ) );
 			process.exit( 1 );
 		} else {
 			console.log( stats.toString( config.stats ) );