@enact/cli 5.1.2 → 6.0.0

package/.eslintrc.js

@@ -3,6 +3,13 @@ module.exports = {
 		node: true
 	},
 	extends: ['enact', 'plugin:prettier/recommended', 'prettier'],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 'latest',
+		sourceType: 'module'
+	},
 	plugins: ['import'],
 	rules: {
 		'import/no-unresolved': ['error', {commonjs: true, caseSensitive: true}],

package/.travis.yml

@@ -1,7 +1,7 @@
 dist: focal
 language: node_js
 node_js:
-    - node
+    - "19"
 sudo: false
 install:
     - npm config set prefer-offline false

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 6.0.0 (May 19, 2023)
+
+* Updated all dependencies to the latest including Jest 29 and Typescript 5.
+* Updated the minimum version of Node to `14.17.0` and dropped the support for Node 12 and 17.
+
+### pack
+
+* Added `--content-hash` option to add a unique hash to output file names to support better caching.
+
+### serve
+
+* Fixed to disable overlay for runtime errors.
+
+### test
+
+* Removed `@testing-library/dom` dependency.
+* Updated `@testing-library/react` version to `^14.0.0`.
+* Fixed `--watch` option is not working with the latest `jest-watch-typeahead` module.
+
+## 5.1.3 (April 11, 2023)
+
+* Updated `eslint-plugin-react` version to `^7.32.2`.
+* Updated dependencies.
+
 ## 5.1.2 (February 21, 2023)
 
 ### pack

package/bin/enact.js

@@ -2,8 +2,6 @@
 
 'use strict';
 
-require('v8-compile-cache');
-
 const chalk = require('chalk');
 const semver = require('semver');
 const pkg = require('../package.json');

package/commands/eject.js

@@ -32,7 +32,6 @@ const internal = [
 	'less-plugin-npm-import',
 	'semver',
 	'tar',
-	'v8-compile-cache',
 	'validate-npm-package-name'
 ];
 const enhanced = ['chalk', 'cross-spawn', 'filesize', 'fs-extra', 'minimist', 'strip-ansi'];

package/commands/pack.js

@@ -13,7 +13,7 @@
 // @remove-on-eject-end
 const path = require('path');
 const chalk = require('chalk');
-const filesize = require('filesize');
+const {filesize} = require('filesize');
 const fs = require('fs-extra');
 const minimist = require('minimist');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -31,6 +31,7 @@ function displayHelp() {
 	console.log();
 	console.log('  Options');
 	console.log('    -o, --output      Specify an output directory');
+	console.log('    --content-hash    Add a unique hash to output file names based on the content of an asset');
 	console.log('    -w, --watch       Rebuild on file changes');
 	console.log('    -p, --production  Build in production mode');
 	console.log('    -i, --isomorphic  Use isomorphic code layout');
@@ -54,13 +55,14 @@ function displayHelp() {
 	console.log();
 	/*
 		Private Options:
-			--entry              	 Specify an override entrypoint
+			--entry              	Specify an override entrypoint
 			--no-minify           	Will skip minification during production build
 			--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
 			--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);
 }
@@ -252,7 +254,9 @@ function api(opts = {}) {
 	const configFactory = require('../config/webpack.config');
 	const config = configFactory(
 		opts.production ? 'production' : 'development',
+		opts['content-hash'],
 		opts.isomorphic,
+		!opts.animation,
 		opts['ilib-additional-path']
 	);
 
@@ -280,6 +284,7 @@ function api(opts = {}) {
 function cli(args) {
 	const opts = minimist(args, {
 		boolean: [
+			'content-hash',
 			'custom-skin',
 			'minify',
 			'framework',
@@ -288,12 +293,13 @@ function cli(args) {
 			'production',
 			'isomorphic',
 			'snapshot',
+			'animation',
 			'verbose',
 			'watch',
 			'help'
 		],
 		string: ['externals', 'externals-public', 'locales', 'entry', 'ilib-additional-path', 'output', 'meta'],
-		default: {minify: true},
+		default: {minify: true, animation: true},
 		alias: {
 			o: 'output',
 			p: 'production',

package/commands/serve.js

@@ -191,7 +191,8 @@ function devServerConfig(host, port, protocol, publicPath, proxy, allowedHost) {
 			},
 			overlay: {
 				errors: true,
-				warnings: false
+				warnings: false,
+				runtimeErrors: false
 			}
 		},
 		devMiddleware: {

package/commands/test.js

@@ -83,7 +83,7 @@ function assignOverrides(config) {
 		'coverageReporters',
 		'coverageThreshold',
 		'displayName',
-		'extraGlobals',
+		'sandboxInjectedGlobals',
 		'globalSetup',
 		'globalTeardown',
 		'moduleNameMapper',

package/config/jest/cssTransform.js

@@ -17,7 +17,9 @@
 
 module.exports = {
 	process() {
-		return 'module.exports = {};';
+		return {
+			code: 'module.exports = {};'
+		};
 	},
 	getCacheKey() {
 		// The output is always the same.

package/config/jest/fileTransform.js

@@ -20,6 +20,8 @@ const path = require('path');
 module.exports = {
 	process(src, filename) {
 		const assetFilename = JSON.stringify(path.basename(filename));
-		return `module.exports = ${assetFilename};`;
+		return {
+			code: `module.exports = ${assetFilename};`
+		};
 	}
 };

package/config/jest/jest.config.js

@@ -72,8 +72,10 @@ module.exports = {
 	],
 	testPathIgnorePatterns: ignorePatterns,
 	testEnvironment: 'jsdom',
-	testEnvironmentOptions: {pretendToBeVisual: true},
-	testURL: 'http://localhost',
+	testEnvironmentOptions: {
+		pretendToBeVisual: true,
+		url: 'http://localhost'
+	},
 	transform: {
 		'^.+\\.(js|jsx|ts|tsx)$': require.resolve('./babelTransform'),
 		'^.+\\.(css|less|sass|scss)$': require.resolve('./cssTransform.js'),

package/config/webpack.config.js

@@ -41,7 +41,13 @@ 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, isomorphic = false, ilibAdditionalResourcesPath) {
+module.exports = function (
+	env,
+	contentHash = false,
+	isomorphic = false,
+	noAnimation = false,
+	ilibAdditionalResourcesPath
+) {
 	process.chdir(app.context);
 
 	// Load applicable .env files into environment variables.
@@ -208,10 +214,10 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 			// Generated JS file names (with nested folders).
 			// There will be one main bundle, and one file per asynchronous chunk.
 			// We don't currently advertise code splitting but Webpack supports it.
-			filename: '[name].js',
+			filename: contentHash ? '[name].[contenthash].js' : '[name].js',
 			// There are also additional JS chunk files if you use code splitting.
-			chunkFilename: 'chunk.[name].js',
-			assetModuleFilename: '[path][name][ext]',
+			chunkFilename: contentHash ? 'chunk.[name].[contenthash].js' : 'chunk.[name].js',
+			assetModuleFilename: contentHash ? '[path][name][contenthash][ext]' : '[path][name][ext]',
 			// Add /* filename */ comments to generated require()s in the output.
 			pathinfo: !isEnvProduction,
 			publicPath,
@@ -481,15 +487,18 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 				'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
+				ENACT_PACK_ISOMORPHIC: isomorphic,
+				// Define ENACT_PACK_NO_ANIMATION global variable to determine
+				// whether to build including effects such as animation or shadow or not.
+				ENACT_PACK_NO_ANIMATION: noAnimation
 			}),
 			// Inject prefixed environment variables within code, when used
 			new EnvironmentPlugin(Object.keys(process.env).filter(key => /^(REACT_APP|WDS_SOCKET)/.test(key))),
 			// Note: this won't work without MiniCssExtractPlugin.loader in `loaders`.
 			!process.env.INLINE_STYLES &&
 				new MiniCssExtractPlugin({
-					filename: '[name].css',
-					chunkFilename: 'chunk.[name].css'
+					filename: contentHash ? '[name].[contenthash].css' : '[name].css',
+					chunkFilename: contentHash ? 'chunk.[name].[contenthash].css' : 'chunk.[name].css'
 				}),
 			// Webpack5 removed node polyfills but we need this to run screenshot tests
 			new NodePolyfillPlugin(),

package/docs/building-apps.md

@@ -8,6 +8,7 @@ order: 4
     enact pack [options]
 
   Options
+    --content-hash    Add a unique hash to output file names based on the content of an asset
     -p, --production  Build in production mode
     -i, --isomorphic  Use isomorphic code layout
                       (includes prerendering)
@@ -176,7 +177,7 @@ Here is the example.
 ```js
 const MainPanel = kind({
     name: 'MainPanel',
- 
+
     render: (props) => (
         <Panel {...props}>
             <p className="text-3xl font-bold underline">
@@ -218,6 +219,25 @@ my-app/
   webos-meta/
 ```
 
+## 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.
+
+Building With this option should produce the following output:
+
+```none
+        1.11 MB         dist/main.1983e557b9a705c83e72.js
+        199.85 kB       dist/main.2088c66150ab73b27793.css
+```
+
+When the content changes, the output file name will change as well.
+```none
+        1.11 MB         dist/main.7544f55b64439c8d0f0e.js
+        199.85 kB       dist/main.2088c66150ab73b27793.css
+```
+
+> **NOTE** The filename `main.*.js` will be changed after another building, even without making any changes. This is because webpack includes certain boilerplate, specifically the runtime and manifest, in the entry chunk.
+
 ## Isomorphic Support & Prerendering
 By using the isomorphic code layout option, your project bundle will be outputted in a versatile universal code format allowing potential usage outside the browser. The Enact CLI takes advantage of this mode by additionally generating an HTML output of your project and embedding it directly with the resulting **index.html**. By default, isomorphic mode will attempt to prerender only `en-US`, however with the `--locales` option, a wide variety of locales can be specified and prerendered. More details on isomorphic support and its limitations can be found [here](./isomorphic-support.md).
 

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

@@ -26,7 +26,8 @@ The @enact/cli tool will check the project's **package.json** looking for an opt
 * `title` _[string]_ - Title text that should be put within the HTML's `<title></title>` tags. Note: if this is a webOS-project, the title will, by default, be auto-detected from the **appinfo.json** content.
 * `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"sandstone"`.
 * `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to sandstone.
-* `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enactjs/less-plugin-resolution-independence). By default, will use any preset for a specified theme or fallback to sandstone.
+* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to sandstone.
+	* `baseSize` _[number]_ - The root font-size to use when converting the value of the base unit to a resolution-independent unit. For example, when `baseSize` is set to 24, 48px in the LESS file will be converted to 2rem.
 * `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions.  By default, will use any preset for a specified theme or fallback to sandstone.
 * `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/).
 * `resolveFallback` _[object]_ - Configuration settings for redirecting module requests when normal resolving fails. See `resolve.fallback` [webpack option](https://webpack.js.org/configuration/resolve/#resolvefallback).
@@ -46,6 +47,9 @@ For example:
 			fs: false,
 			net: false,
 			tls: false
+		},
+		"ri": {
+			"baseSize": 24
 		}
 	}
 	...