7.0.0-alpha.1 release

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 7.0.0-alpha.1 (July 24, 2024)
+
+* Updated the minimum version of Node to `18.12.0`.
+* Updated all dependencies to the latest including `webpack-dev-server` version 5 and `@testing-library/react` version 15.
+
+### pack
+
+* Updated `css-loader` to 7.x and changed `css-loader` options to restore 6.x behavior.
+* Added `--no-animation` option to build without effects such as animation and shadow.
+
 ## 6.1.2 (March 13, 2024)
 
 * Updated docs to cover the latest commands of `enact pack`.

commands/pack.js

@@ -49,6 +49,7 @@ function displayHelp() {
 	console.log('                      (requires V8_MKSNAPSHOT set)');
 	console.log('    -m, --meta        JSON to override package.json enact metadata');
 	console.log('    -c, --custom-skin Build with a custom skin');
+	console.log('    --no-animation    Build without effects such as animation and shadow');
 	console.log('    --stats           Output bundle analysis file');
 	console.log('    --verbose         Verbose log build details');
 	console.log('    -v, --version     Display version information');
@@ -63,7 +64,6 @@ function displayHelp() {
 			--externals-public    	Remote public path to the external framework for use injecting into HTML
 			--externals-polyfill  	Flag whether to use external polyfill (or include in framework build)
 			--ilib-additional-path	Specify iLib additional resources path
-			--no-animation          Build without effects such as animation and shadow
 	*/
 	process.exit(0);
 }

commands/serve.js

@@ -95,12 +95,17 @@ function hotDevServer(config, fastRefresh) {
 }
 
 function devServerConfig(host, port, protocol, publicPath, proxy, allowedHost) {
-	let https = false;
+	let server = {
+		type: 'http'
+	};
 	const {SSL_CRT_FILE, SSL_KEY_FILE} = process.env;
 	if (protocol === 'https' && [SSL_CRT_FILE, SSL_KEY_FILE].every(f => f && fs.existsSync(f))) {
-		https = {
-			cert: fs.readFileSync(SSL_CRT_FILE),
-			key: fs.readFileSync(SSL_KEY_FILE)
+		server = {
+			type: 'https',
+			options: {
+				cert: fs.readFileSync(SSL_CRT_FILE),
+				key: fs.readFileSync(SSL_KEY_FILE)
+			}
 		};
 	}
 	const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
@@ -126,7 +131,7 @@ function devServerConfig(host, port, protocol, publicPath, proxy, allowedHost) {
 		// want to allow setting the allowedHosts manually for more complex setups
 		allowedHosts: disableFirewall ? 'all' : [allowedHost],
 		// Enable HTTPS if the HTTPS environment variable is set to 'true'
-		https,
+		server,
 		host,
 		port,
 		// Allow cross-origin HTTP requests
@@ -296,15 +301,15 @@ function serve(config, host, port, open) {
 
 		['SIGINT', 'SIGTERM'].forEach(sig => {
 			process.on(sig, () => {
-				devServer.close();
+				devServer.stopCallback(() => {});
 				process.exit();
 			});
 		});
 
 		if (process.env.CI !== 'true') {
 			// Gracefully exit when stdin ends
 			process.stdin.on('end', () => {
-				devServer.close();
+				devServer.stopCallback(() => {});
 				process.exit();
 			});
 		}

config/dotenv.js

@@ -22,7 +22,7 @@ module.exports = {
 			.map(env => path.join(context, env))
 			.forEach(env => {
 				if (fs.existsSync(env)) {
-					expand(dotenv.config({path: env}));
+					expand(dotenv.config({path: env, processEnv: {}}));
 				}
 			});
 	}

config/webpack.config.js

@@ -99,11 +99,22 @@ module.exports = function (
 		// from them won't be in the main CSS file.
 		// When INLINE_STYLES env var is set, instead of MiniCssExtractPlugin, uses
 		// `style` loader to dynamically inline CSS in style tags at runtime.
+		const mergedCssLoaderOptions = {
+			...cssLoaderOptions,
+			modules: {
+				...cssLoaderOptions.modules,
+				// Options to restore 6.x behavior:
+				// https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#700-2024-04-04
+				namedExport: false,
+				exportLocalsConvention: 'as-is'
+			}
+		};
+
 		const loaders = [
 			process.env.INLINE_STYLES ? require.resolve('style-loader') : MiniCssExtractPlugin.loader,
 			{
 				loader: require.resolve('css-loader'),
-				options: Object.assign({sourceMap: shouldUseSourceMap}, cssLoaderOptions, {
+				options: Object.assign({sourceMap: shouldUseSourceMap}, mergedCssLoaderOptions, {
 					url: {
 						filter: url => {
 							// Don't handle absolute path urls

docs/building-apps.md

@@ -26,6 +26,7 @@ order: 4
                       (requires V8_MKSNAPSHOT set)
     -m, --meta        JSON to override package.json enact metadata
     -c, --custom-skin Build with a custom skin
+    --no-animation    Build without effects such as animation and shadow
     --stats           Output bundle analysis file
     --verbose         Verbose log build details
     -v, --version     Display version information
@@ -224,6 +225,10 @@ my-app/
   webos-meta/
 ```
 
+## Build without Effects
+
+To accommodate devices with lower performance, the Enact CLI offers the `--no-animation` option. This option disables animations and graphical effects, including shadows. When activated, it sets the `ENACT_PACK_NO_ANIMATION` environment variable. This variable allows UI libraries like Sandstone to conditionally disable effects. Additionally, you can leverage this variable in your application to achieve the same outcome. Thus, you can develop an app devoid of these effects and do so without modifying your codebase.
+
 ## Caching
 
 For supporting better [`caching`](https://webpack.js.org/guides/caching/), Enact CLI provides `--content-hash` option to add a unique hash to each output file name based on the content of an asset.