@enact/cli 6.1.1 → 6.1.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.1.3 (October 17, 2024)
+
+* No significant changes.
+
+## 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/');
@@ -58,6 +58,7 @@ function displayHelp() {
 		Private Options:
 			--entry              	Specify an override entrypoint
 			--no-minify           	Will skip minification during production build
+			--no-split-css        	Will not split CSS into separate files
 			--framework           	Builds the @enact/*, react, and react-dom into an external framework
 			--externals           	Specify a local directory path to the standalone external framework
 			--externals-public    	Remote public path to the external framework for use injecting into HTML
@@ -258,6 +259,7 @@ function api(opts = {}) {
 		opts['content-hash'],
 		opts.isomorphic,
 		!opts.animation,
+		!opts['split-css'],
 		opts.framework,
 		opts['ilib-additional-path']
 	);
@@ -289,6 +291,7 @@ function cli(args) {
 			'content-hash',
 			'custom-skin',
 			'minify',
+			'split-css',
 			'framework',
 			'externals-corejs',
 			'stats',
@@ -301,7 +304,7 @@ function cli(args) {
 			'help'
 		],
 		string: ['externals', 'externals-public', 'locales', 'entry', 'ilib-additional-path', 'output', 'meta'],
-		default: {minify: true, animation: true},
+		default: {minify: true, 'split-css': true, animation: true},
 		alias: {
 			o: 'output',
 			p: 'production',

package/config/webpack.config.js

@@ -45,6 +45,7 @@ module.exports = function (
 	contentHash = false,
 	isomorphic = false,
 	noAnimation = false,
+	noSplitCSS = false,
 	framework = false,
 	ilibAdditionalResourcesPath
 ) {
@@ -451,7 +452,17 @@ module.exports = function (
 					parallel: true
 				}),
 				new CssMinimizerPlugin()
-			]
+			],
+			splitChunks: noSplitCSS && {
+				cacheGroups: {
+					styles: {
+						name: 'main',
+						type: 'css/mini-extract',
+						chunks: 'all',
+						enforce: true
+					}
+				}
+			}
 		},
 		plugins: [
 			// Generates an `index.html` file with the js and css tags injected.
@@ -495,7 +506,8 @@ module.exports = function (
 			!process.env.INLINE_STYLES &&
 				new MiniCssExtractPlugin({
 					filename: contentHash ? '[name].[contenthash].css' : '[name].css',
-					chunkFilename: contentHash ? 'chunk.[name].[contenthash].css' : 'chunk.[name].css'
+					chunkFilename: contentHash ? 'chunk.[name].[contenthash].css' : 'chunk.[name].css',
+					ignoreOrder: noSplitCSS
 				}),
 			// Webpack5 removed node polyfills but we need this to run screenshot tests
 			new NodePolyfillPlugin(),

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,18 @@ 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
     --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:
@@ -249,3 +254,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": {

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@enact/cli",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@enact/cli",
-      "version": "6.1.1",
+      "version": "6.1.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.23.3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/cli",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "description": "Full-featured build environment tool for Enact applications.",
   "main": "index.js",
   "author": "Jason Robitaille <jason.robitaille@lge.com>",