@lipemat/js-boilerplate 9.2.0-beta.9 → 10.0.0-beta.1

package/config/babel.config.js

@@ -19,11 +19,13 @@ module.exports = {
 	cacheDirectory: true,
 	presets: [
 		[ '@babel/preset-env', presetEnv ],
-		'@babel/preset-react',
+		[ '@babel/preset-react', {
+			development: 'production' !== process.env.NODE_ENV,
+			runtime: 'automatic',
+		} ],
 		'@babel/preset-typescript',
 	],
 	plugins: [
 		'@babel/plugin-syntax-dynamic-import',
-		'react-hot-loader/babel',
 	],
 };

package/config/css-loader.config.js

@@ -5,25 +5,30 @@ const {getLocalIdent} = require( '../helpers/css-classnames' );
  * Options for the Webpack `css-loader`.
  *
  * Extracted to its on file to allow easy overrides.
+ */
+
+/**
+ * Default to :global for classes in "global" or "pcss" directories.
  *
- * @since 8.6.0
+ * @param {string} resourcePath
+ * @return {string}
  */
+const mode = resourcePath => {
+	if ( /globals?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
+		return 'global';
+	}
+	if ( /pcss?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
+		return 'global';
+	}
+	return 'local';
+};
 
 let cssLoader = {
 	importLoaders: 1,
 	modules: {
 		exportLocalsConvention: 'camelCase',
 		localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
-		// Default to :global for classes in "global" or "pcss" directories.
-		mode: resourcePath => {
-			if ( /globals?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
-				return 'global';
-			}
-			if ( /pcss?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
-				return 'global';
-			}
-			return 'local';
-		},
+		mode,
 	},
 	sourceMap: true,
 	url: false,
@@ -38,10 +43,7 @@ if ( 'production' === process.env.NODE_ENV ) {
 			...config.shortCssClasses ? {getLocalIdent} : {},
 			// Hash used when short CSS classes are not enabled.
 			localIdentName: '[contenthash:base64:5]',
-			// Default to :global for classes in "global" directories.
-			mode: resourcePath => {
-				return /globals?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ? 'global' : 'local';
-			},
+			mode,
 		},
 		url: false,
 	};

package/config/webpack.dev.js

@@ -1,9 +1,10 @@
-const {getConfig, hasLocalOverride} = require( '../helpers/config' );
 const webpack = require( 'webpack' );
+const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
 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 postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
@@ -12,12 +13,15 @@ const devServerOptions = getConfig( 'dev-server.config.js' );
 
 // To allow line numbers to show up in console errors. @see React Error Boundaries.
 babelOptions.plugins.unshift( '@babel/plugin-transform-react-jsx-source' );
+// To support React Fast Refresh.
+babelOptions.plugins.unshift( 'react-refresh/babel' );
 
 const plugins = [
 	new webpack.ProvidePlugin( {
 		jQuery: 'jquery',
 		$: 'jquery',
 	} ),
+	new ReactRefreshWebpackPlugin(),
 ];
 
 // Loads a thread, which verifies any TypeScripts on changes.
@@ -47,9 +51,6 @@ module.exports = {
 		chunkFilename: '[name].js',
 	},
 	resolve: {
-		alias: {
-			'react-dom': '@hot-loader/react-dom',
-		},
 		extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json', '.pcss' ],
 		modules: [
 			path.resolve( config.workingDirectory, 'src' ),
@@ -73,7 +74,6 @@ module.exports = {
 			{
 				test: /\.[jt]sx?$/,
 				include: /node_modules/,
-				use: [ 'react-hot-loader/webpack' ],
 			},
 			{
 				test: /\.css$/,

package/config/webpack.dist.js

@@ -1,6 +1,5 @@
 const webpack = require( 'webpack' );
 const path = require( 'path' );
-require( 'node:crypto' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const {CleanWebpackPlugin} = require( 'clean-webpack-plugin' );
 const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
@@ -119,7 +118,6 @@ module.exports = {
 					},
 				],
 			},
-
 		],
 	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "9.2.0-beta.9",
+  "version": "10.0.0-beta.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -42,9 +42,9 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@hot-loader/react-dom": "^17.0.1",
     "@lipemat/css-mqpacker": "^9.0.0",
     "@lipemat/eslint-config": "^2.0.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/lipemat__js-boilerplate": "lipemat/types-js-boilerplate#semver:^1.3.0",
     "@wordpress/browserslist-config": "^4.1.0",
     "are-you-es5": "^2.1.1",
@@ -72,9 +72,9 @@
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.5.0",
     "postcss-scss": "^4.0.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.8.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "typescript": "^4.2.4",
     "update-notifier": "^4.1.3",
@@ -84,5 +84,5 @@
     "webpack-dev-server": "^4.7.2",
     "webpack-subresource-integrity": "^5.1.0"
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@3.5.0"
 }