@enact/cli 6.1.1 → 7.0.0-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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`.
+
 ## 6.1.1 (March 5, 2024)
 
 * Updated dependencies.

package/commands/pack.js

@@ -38,7 +38,7 @@ function displayHelp() {
 	console.log('    -i, --isomorphic  Use isomorphic code layout');
 	console.log('                      (includes prerendering)');
 	console.log('    -l, --locales     Locales for isomorphic mode; one of:');
-	console.log('            <commana-separated-values> Locale list');
+	console.log('            <comma-separated-values> Locale list');
 	console.log('            <JSON-filepath> - Read locales from JSON file');
 	console.log('            "none" - Disable locale-specific handling');
 	console.log('            "used" - Detect locales used within ./resources/');
@@ -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);
 }

package/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,7 +301,7 @@ function serve(config, host, port, open) {
 
 		['SIGINT', 'SIGTERM'].forEach(sig => {
 			process.on(sig, () => {
-				devServer.close();
+				devServer.stopCallback(() => {});
 				process.exit();
 			});
 		});
@@ -304,7 +309,7 @@ function serve(config, host, port, open) {
 		if (process.env.CI !== 'true') {
 			// Gracefully exit when stdin ends
 			process.stdin.on('end', () => {
-				devServer.close();
+				devServer.stopCallback(() => {});
 				process.exit();
 			});
 		}

package/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: {}}));
 				}
 			});
 	}

package/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

package/docs/building-apps.md

@@ -8,14 +8,15 @@ order: 4
     enact pack [options]
 
   Options
+    -o, --output      Specify an output directory
     --content-hash    Add a unique hash to output file names based on the content of an asset
+    -w, --watch       Rebuild on file changes
     -p, --production  Build in production mode
     -i, --isomorphic  Use isomorphic code layout
                       (includes prerendering)
-    -w, --watch       Rebuild on file changes
     -l, --locales     Locales for isomorphic mode; one of:
-            <comma-separated-values> Locale list
-            <JSON-filepath> - Read locales from JSON file
+            [comma-separated-values] Locale list
+            [JSON-filepath] - Read locales from JSON file
             "none" - Disable locale-specific handling
             "used" - Detect locales used within ./resources/
             "tv" - Locales supported on webOS TV
@@ -23,14 +24,19 @@ order: 4
             "all" - All locales that iLib supports
     -s, --snapshot    Generate V8 snapshot blob
                       (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
+    -h, --help        Display help information
 
 ```
 Run within an Enact project's source code, the `enact pack` command (aliased as `npm run pack` or `npm run pack-p` for production) will process and bundle the js, css, and asset files into the `./dist` directory. An **index.html** file will be dynamically generated.
 
 ## Production Mode
-By default, projects will build in development mode. When you're code is ready for deployment you can build in production mode. Production mode will minify the source code and remove dead code, along with numerous other minor code optimization strategies.
+By default, projects will build in development mode. When your code is ready for deployment you can build in production mode. Production mode will minify the source code and remove dead code, along with numerous other minor code optimization strategies.
 
 ## Browser Support & Polyfills
 The Enact CLI is designed to be compatible with a wide array of browsers and devices. [Browserslist standard](https://github.com/browserslist/browserslist) is used to handle targeting, with Enact's defaults being:
@@ -219,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.
@@ -249,3 +259,25 @@ Similar to the [`enact serve`](./serving-apps.md) command, the watcher will buil
 
 ## Stats Analysis
 The Bundle analysis file option uses the popular [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to create a visual representation of the project build to **stats.html**, showing the full module hierarchy arranged by output size. This can be very useful in determining where bloat is coming from or finding dependencies that may have been included by mistake.
+
+## Override Metadata
+The @enact/cli tool inspects the `enact` object in the project's package.json for [customization options](./starting-a-new-app.md#enact-project-settings). 
+You can use the `--meta` flag to input a JSON string that overrides the `enact` metadata in package.json.
+
+Here's an example of how to use the `--meta` flag:
+
+```bash
+enact pack --meta='{"title":"myapp"}'
+```
+
+This command has the same effect as adding the following to your package.json:
+
+```json
+{
+	...
+	"enact": {
+		"title": "myapp"
+	}
+	...
+}
+```

package/docs/serving-apps.md

@@ -21,7 +21,7 @@ Enact CLI uses [http-proxy-middleware](https://github.com/chimurai/http-proxy-mi
 This feature can be configured in the project's **package.json** within the `enact` object's `proxy` property.
 
 For example:
-```js
+```json
 {
 	...
 	"enact": {

package/docs/starting-a-new-app.md

@@ -38,7 +38,7 @@ The @enact/cli tool will check the project's **package.json** looking for an opt
 * `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
 
 For example:
-```js
+```json
 {
 	...
 	"enact": {