5.0.0-rc.1 release

.travis.yml

@@ -1,12 +1,10 @@
+dist: focal
 language: node_js
 node_js:
-    - "14"
+    - node
 sudo: false
-cache:
-  directories:
-    - $(npm config get cache)
 install:
-    - npm config set prefer-offline true
+    - npm config set prefer-offline false
     - npm install
 
 script:

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 5.0.0-rc.1 (Jun 23, 2022)
+
+### serve
+
+* Fixed `enact serve` fails to open another port when the default port is busy.
+
+### pack
+
+* Fixed `core-js` version to `3.22.8` for compatibility.
+* Added `ENACT_PACK_ISOMORPHIC` as a global variable to use `hydrateRoot` instead of `createRoot` from app when isomorphic build.
+* Added `ignoreWarning` config to ignore warnings from SnapshotPlugin.
+* Updated webpack config to support `sass-loader` for opt-in support of SASS/SCSS files.
+
 ## 5.0.0-alpha.5 (May 31, 2022)
 
 * Updated the `lockfileVersion` of npm-shrinkwrap file to v2.

commands/pack.js

@@ -250,7 +250,11 @@ function api(opts = {}) {
 
 	// Do this as the first thing so that any code reading it knows the right env.
 	const configFactory = require('../config/webpack.config');
-	const config = configFactory(opts.production ? 'production' : 'development', opts['ilib-additional-path']);
+	const config = configFactory(
+		opts.production ? 'production' : 'development',
+		opts.isomorphic,
+		opts['ilib-additional-path']
+	);
 
 	// Set any entry path override
 	if (opts.entry) helper.replaceMain(config, path.resolve(opts.entry));

commands/serve.js

@@ -93,7 +93,7 @@ function hotDevServer(config, fastRefresh) {
 	return config;
 }
 
-function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
+function devServerConfig(host, port, protocol, publicPath, proxy, allowedHost) {
 	let https = false;
 	const {SSL_CRT_FILE, SSL_KEY_FILE} = process.env;
 	if (protocol === 'https' && [SSL_CRT_FILE, SSL_KEY_FILE].every(f => f && fs.existsSync(f))) {
@@ -127,38 +127,59 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
 		// Enable HTTPS if the HTTPS environment variable is set to 'true'
 		https,
 		host,
+		port,
 		// Allow cross-origin HTTP requests
 		headers: {
 			'Access-Control-Allow-Origin': '*',
 			'Access-Control-Allow-Methods': '*',
 			'Access-Control-Allow-Headers': '*'
 		},
-		static: {
-			// By default WebpackDevServer serves physical files from current directory
-			// in addition to all the virtual build products that it serves from memory.
-			// This is confusing because those files won’t automatically be available in
-			// production build folder unless we copy them. However, copying the whole
-			// project directory is dangerous because we may expose sensitive files.
-			// Instead, we establish a convention that only files in `public` directory
-			// get served. Our build script will copy `public` into the `build` folder.
-			// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-			// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-			// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-			// Note that we only recommend to use `public` folder as an escape hatch
-			// for files like `favicon.ico`, `manifest.json`, and libraries that are
-			// for some reason broken when imported through webpack. If you just want to
-			// use an image, put it in `src` and `import` it from JavaScript instead.
-			directory: path.resolve(app.context, 'public'),
-			publicPath: publicPath,
-			// By default files from `contentBase` will not trigger a page reload.
-			watch: {
-				// Reportedly, this avoids CPU overload on some systems.
-				// https://github.com/facebook/create-react-app/issues/293
-				// src/node_modules is not ignored to support absolute imports
-				// https://github.com/facebook/create-react-app/issues/1065
-				ignored: ignoredFiles(path.resolve(app.context, 'src'))
+		static: [
+			{
+				// By default WebpackDevServer serves physical files from current directory
+				// in addition to all the virtual build products that it serves from memory.
+				// This is confusing because those files won’t automatically be available in
+				// production build folder unless we copy them. However, copying the whole
+				// project directory is dangerous because we may expose sensitive files.
+				// Instead, we establish a convention that only files in `public` directory
+				// get served. Our build script will copy `public` into the `build` folder.
+				// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+				// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+				// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+				// Note that we only recommend to use `public` folder as an escape hatch
+				// for files like `favicon.ico`, `manifest.json`, and libraries that are
+				// for some reason broken when imported through webpack. If you just want to
+				// use an image, put it in `src` and `import` it from JavaScript instead.
+				directory: path.resolve(app.context, 'public'),
+				publicPath,
+				// By default files from `contentBase` will not trigger a page reload.
+				watch: {
+					// Reportedly, this avoids CPU overload on some systems.
+					// https://github.com/facebook/create-react-app/issues/293
+					// src/node_modules is not ignored to support absolute imports
+					// https://github.com/facebook/create-react-app/issues/1065
+					ignored: [
+						ignoredFiles(path.resolve(app.context, 'src')),
+						'/node_modules[\\/](?!@enact[\\/](?!.*node_modules))/'
+					]
+				}
+			},
+			{
+				directory: path.resolve(app.context, '__mocks__'),
+				publicPath,
+				// By default files from `contentBase` will not trigger a page reload.
+				watch: {
+					// Reportedly, this avoids CPU overload on some systems.
+					// https://github.com/facebook/create-react-app/issues/293
+					// src/node_modules is not ignored to support absolute imports
+					// https://github.com/facebook/create-react-app/issues/1065
+					ignored: [
+						ignoredFiles(path.resolve(app.context, 'src')),
+						'/node_modules[\\/](?!@enact[\\/](?!.*node_modules))/'
+					]
+				}
 			}
-		},
+		],
 		client: {
 			webSocketURL: {
 				// Enable custom sockjs pathname for websocket connection to hot reloading server.
@@ -249,8 +270,7 @@ function serve(config, host, port, open) {
 		// Serve webpack assets generated by the compiler over a web sever.
 		const serverConfig = Object.assign(
 			{},
-			config.devServer,
-			devServerConfig(host, protocol, publicPath, proxyConfig, urls.lanUrlForConfig)
+			devServerConfig(host, resolvedPort, protocol, publicPath, proxyConfig, urls.lanUrlForConfig)
 		);
 		const devServer = new WebpackDevServer(serverConfig, compiler);
 		// Launch WebpackDevServer.
@@ -304,8 +324,8 @@ function api(opts) {
 	const config = hotDevServer(configFactory('development'), fastRefresh);
 
 	// Tools like Cloud9 rely on this.
-	const host = process.env.HOST || opts.host || config.devServer.host || '0.0.0.0';
-	const port = parseInt(process.env.PORT || opts.port || config.devServer.port || 8080);
+	const host = process.env.HOST || opts.host || '0.0.0.0';
+	const port = parseInt(process.env.PORT || opts.port || 8080);
 
 	// Start serving
 	if (['node', 'async-node', 'webworker'].includes(app.environment)) {

config/jest/jest.config.js

@@ -76,15 +76,15 @@ module.exports = {
 	testURL: 'http://localhost',
 	transform: {
 		'^.+\\.(js|jsx|ts|tsx)$': require.resolve('./babelTransform'),
-		'^.+\\.(css|less)$': require.resolve('./cssTransform.js'),
-		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|less|json)$)': require.resolve('./fileTransform')
+		'^.+\\.(css|less|sass|scss)$': require.resolve('./cssTransform.js'),
+		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|less|sass|scss|json)$)': require.resolve('./fileTransform')
 	},
 	transformIgnorePatterns: [
 		'[/\\\\]node_modules[/\\\\](?!@enact).+\\.(js|jsx|mjs|cjs|ts|tsx)$',
-		'^.+\\.module\\.(css|less)$'
+		'^.+\\.module\\.(css|less|sass|scss)$'
 	],
 	moduleNameMapper: {
-		'^.+\\.module\\.(css|less)$': require.resolve('identity-obj-proxy'),
+		'^.+\\.module\\.(css|less|sass|scss)$': require.resolve('identity-obj-proxy'),
 		'^@testing-library/jest-dom$': require.resolve('@testing-library/jest-dom'),
 		'^@testing-library/react$': require.resolve('@testing-library/react'),
 		'^@testing-library/user-event$': require.resolve('@testing-library/user-event'),

config/webpack.config.js

@@ -41,7 +41,7 @@ const createEnvironmentHash = require('./createEnvironmentHash');
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function (env, ilibAdditionalResourcesPath) {
+module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath) {
 	process.chdir(app.context);
 
 	// Load applicable .env files into environment variables.
@@ -100,22 +100,18 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			process.env.INLINE_STYLES ? require.resolve('style-loader') : MiniCssExtractPlugin.loader,
 			{
 				loader: require.resolve('css-loader'),
-				options: Object.assign(
-					{importLoaders: preProcessor ? 2 : 1, sourceMap: shouldUseSourceMap},
-					cssLoaderOptions,
-					{
-						url: {
-							filter: url => {
-								// Don't handle absolute path urls
-								if (url.startsWith('/')) {
-									return false;
-								}
-
-								return true;
+				options: Object.assign({sourceMap: shouldUseSourceMap}, cssLoaderOptions, {
+					url: {
+						filter: url => {
+							// Don't handle absolute path urls
+							if (url.startsWith('/')) {
+								return false;
 							}
+
+							return true;
 						}
 					}
-				)
+				})
 			},
 			{
 				// Options for PostCSS as we reference these options twice
@@ -128,7 +124,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						// https://github.com/facebook/create-react-app/issues/2677
 						ident: 'postcss',
 						plugins: [
-							useTailwind && require('tailwindcss'),
+							useTailwind && 'tailwindcss',
 							// Fix and adjust for known flexbox issues
 							// See https://github.com/philipwalton/flexbugs
 							'postcss-flexbugs-fixes',
@@ -176,6 +172,14 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			}
 		});
 
+	const getScssStyleLoaders = cssLoaderOptions =>
+		getStyleLoaders(cssLoaderOptions, {
+			loader: require.resolve('sass-loader'),
+			options: {
+				sourceMap: shouldUseSourceMap
+			}
+		});
+
 	const getAdditionalModulePaths = paths => {
 		if (!paths) return [];
 		return Array.isArray(paths) ? paths : [paths];
@@ -185,6 +189,8 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 		mode: isEnvProduction ? 'production' : 'development',
 		// Don't attempt to continue if there are any errors.
 		bail: true,
+		// Webpack noise constrained to errors and warnings
+		stats: 'errors-warnings',
 		// Use source maps during development builds or when specified by GENERATE_SOURCEMAP
 		devtool: shouldUseSourceMap && (isEnvProduction ? 'source-map' : 'cheap-module-source-map'),
 		// These are the "entry points" to our application.
@@ -241,6 +247,13 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 		infrastructureLogging: {
 			level: 'none'
 		},
+		ignoreWarnings: [
+			// We ignore 'Module not found' warnings from SnapshotPlugin
+			{
+				module: /SnapshotPlugin/,
+				message: /Module not found/
+			}
+		],
 		resolve: {
 			// These are the reasonable defaults supported by the React/ES6 ecosystem.
 			extensions: ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.json'].filter(
@@ -305,6 +318,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.css$/,
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -316,6 +330,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 							// The `forceCSSModules` Enact build option can be set true to universally apply
 							// modular CSS support.
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
 									...(app.forceCSSModules ? {getLocalIdent} : {}),
 									mode: 'icss'
@@ -330,6 +345,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -339,13 +355,37 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									...(app.forceCSSModules ? {getLocalIdent} : {}),
 									mode: 'icss'
 								}
 							}),
 							sideEffects: true
 						},
+						// Opt-in support for CSS Modules, but using SASS
+						// using the extension .module.scss or .module.sass
+						{
+							test: /\.module\.(scss|sass)$/,
+							use: getScssStyleLoaders({
+								importLoaders: 3,
+								modules: {
+									getLocalIdent,
+									mode: 'local'
+								}
+							})
+						},
+						// Opt-in support for SASS (using .scss or .sass extensions)
+						{
+							test: /\.(scss|sass)$/,
+							use: getScssStyleLoaders({
+								importLoaders: 3,
+								modules: {
+									...(app.forceCSSModules ? {getLocalIdent} : {}),
+									mode: 'icss'
+								}
+							})
+						},
 						// "file" loader handles on all files not caught by the above loaders.
 						// When you `import` an asset, you get its output filename and the file
 						// is copied during the build process.
@@ -365,12 +405,6 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 				}
 			].filter(Boolean)
 		},
-		// Specific webpack-dev-server options.
-		devServer: {
-			// Broadcast http server on the localhost, port 8080.
-			host: '0.0.0.0',
-			port: 8080
-		},
 		// Target app to build for a specific environment (default 'browserslist')
 		target: app.environment,
 		// Optional configuration for polyfilling NodeJS built-ins.
@@ -450,7 +484,10 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			// Otherwise React will be compiled in the very slow development mode.
 			new DefinePlugin({
 				'process.env.NODE_ENV': JSON.stringify(isEnvProduction ? 'production' : 'development'),
-				'process.env.PUBLIC_URL': JSON.stringify(publicPath)
+				'process.env.PUBLIC_URL': JSON.stringify(publicPath),
+				// Define ENACT_PACK_ISOMORPHIC global variable to determine to use
+				// `hydrateRoot` for isomorphic build and `createRoot` for non-isomorphic build by app.
+				ENACT_PACK_ISOMORPHIC: isomorphic
 			}),
 			// Inject prefixed environment variables within code, when used
 			new EnvironmentPlugin(Object.keys(process.env).filter(key => /^(REACT_APP|WDS_SOCKET)/.test(key))),