@enact/cli 5.0.0-alpha.4 → 5.0.0

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

package/CHANGELOG.md

@@ -1,4 +1,43 @@
-## 5.0.0-alpha.3 (April 28, 2022)
+## 5.0.0 (July 19, 2022)
+
+* Updated dependencies.
+
+### pack
+
+* Fixed build failure when `.env` file exists.
+* Fixed `snapshot_blob.bin` file is not listed on the build results.
+
+## 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.
+* Updated to the latest `eslint-config-enact`, `eslint-plugin-enact`, and `@enact/dev-utils` dependency releases.
+
+### create, template
+
+* Updated `@enact/template-sandstone` dependency.
+
+### lint
+
+* Updated Enact ESLint config to `4.1.0` including replacing deprecated modules and updated lint rules.
+
+### test
+
+* Replaced `@testing-library/react-hooks` to `@testing-library/react` for React 18 support.
+
+## 5.0.0-alpha.4 (April 28, 2022)
 
 ### pack
 

package/README.md

@@ -68,6 +68,7 @@ The @enact/cli tool will check the project's **package.json** looking for an opt
 * `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.
 * `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).
 * `externalStartup` _[boolean]_ - Flag whether to externalize the startup/update js that is normally inlined within prerendered app HTML output.
 * `forceCSSModules` _[boolean]_ - Flag whether to force all LESS/CSS to be processed in a modular context (not just the `*.module.css` and `*.module.less` files).
 * `deep` _[string|array]_ - 1 or more JavaScript conditions that, when met, indicate deeplinking and any prerender should be discarded.
@@ -81,10 +82,10 @@ For example:
 	...
 	"enact": {
 		"theme": "sandstone",
-		"nodeBuiltins": {
-			fs: 'empty',
-			net: 'empty',
-			tls: 'empty'
+		"resolveFallback": {
+			fs: false,
+			net: false,
+			tls: false
 		}
 	}
 	...

package/commands/pack.js

@@ -19,7 +19,7 @@ const minimist = require('minimist');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printBuildError = require('react-dev-utils/printBuildError');
 const stripAnsi = require('strip-ansi');
-const {ProgressPlugin, webpack} = require('webpack');
+const webpack = require('webpack');
 const {optionParser: app, mixins, configHelper: helper} = require('@enact/dev-utils');
 
 function displayHelp() {
@@ -147,7 +147,7 @@ function copyPublicFolder(output) {
 // Print a detailed summary of build files.
 function printFileSizes(stats, output) {
 	const assets = stats
-		.toJson({all: false, assets: true})
+		.toJson({all: false, assets: true, cachedAssets: true})
 		.assets.filter(asset => /\.(js|css|bin)$/.test(asset.name))
 		.map(asset => {
 			const size = fs.statSync(path.join(output, asset.name)).size;
@@ -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));
@@ -258,8 +262,6 @@ function api(opts = {}) {
 	// Set any output path override
 	if (opts.output) config.output.path = path.resolve(opts.output);
 
-	if (opts.verbose) opts.ProgressPlugin = ProgressPlugin;
-
 	mixins.apply(config, opts);
 
 	// Remove all content but keep the directory so that

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

package/config/dotenv.js

@@ -3,7 +3,7 @@
 const fs = require('fs');
 const path = require('path');
 const dotenv = require('dotenv');
-const expand = require('dotenv-expand');
+const {expand} = require('dotenv-expand');
 
 // Loads all required .env files in correct order, for a given mode.
 // See https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use

package/config/jest/jest.config.js

@@ -76,18 +76,17 @@ 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/react-hooks$': require.resolve('@testing-library/react-hooks'),
 		'^@testing-library/user-event$': require.resolve('@testing-library/user-event'),
 		'^react$': require.resolve('react'),
 		// Backward compatibility for new iLib location with old Enact

package/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(
@@ -258,7 +271,9 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			// and old apps referencing old iLib location with new Enact
 			alias: fs.existsSync(path.join(app.context, 'node_modules', '@enact', 'i18n', 'ilib'))
 				? Object.assign({ilib: '@enact/i18n/ilib'}, app.alias)
-				: Object.assign({'@enact/i18n/ilib': 'ilib'}, app.alias)
+				: Object.assign({'@enact/i18n/ilib': 'ilib'}, app.alias),
+			// Optional configuration for redirecting module requests.
+			fallback: app.resolveFallback
 		},
 		// @remove-on-eject-begin
 		// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
@@ -303,6 +318,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.css$/,
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -314,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'
@@ -328,6 +345,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -337,6 +355,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									...(app.forceCSSModules ? {getLocalIdent} : {}),
 									mode: 'icss'
@@ -344,6 +363,29 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 							}),
 							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.
@@ -363,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.
@@ -448,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))),

package/docs/building-apps.md

@@ -104,6 +104,99 @@ npm install --save typescript @types/react @types/react-dom @types/jest
 
 Optionally, [ESLint](https://eslint.org) can be installed globally or locally and configured within a project to enable linting support within the `enact lint` command.
 
+## Sass Support
+
+CSS stylesheets could get larger and more complex as you develop. To help and enrich the styling of your apps, there are great CSS preprocessors
+out there.  Enact CLI provides [LESS](https://lesscss.org) as the default and [Sass](https://sass-lang.com) support is an optional feature since Enact CLI 5.0.0.
+
+To use Sass, install Sass globally:
+
+```bash
+npm install -g sass
+```
+
+Note: If you receive an error when building the app that says `Cannot find module 'sass'`, try to set `NODE_PATH` to point global
+node_modules directory like below.
+
+```bash
+export NODE_PATH=/path/to/your/global/node_modules
+```
+
+Now you can rename `src/App.css` to `src/App.scss` or `src/App.sass` and for using CSS modules, `src/App.module.scss` or `src/App.module.sass`. And update `src/App.js` to import `src/App.scss`. Enact CLI will compile these files properly through webpack for you.
+
+More information can be found [here](https://sass-lang.com/guide) to learn about Sass.
+
+## Tailwind CSS Support
+
+Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
+Enact CLI supports to use Tailwind CSS as an optional feature since Enact CLI 5.0.0.
+
+To use Tailwindcss, install Tailwindcss globally:
+
+```bash
+npm install -g tailwindcss
+```
+
+Note: If you receive an error when building the app that says `Cannot find module 'tailwindcss'`, try to set `NODE_PATH` to point global node_modules directory.
+
+And then run the init command to generate tailwind.config.js in your app:
+
+```bash
+npx tailwindcss init
+```
+
+Add the paths to all of your template files in your tailwind.config.js file.
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+Create `src/tailwind.css` file and add the @tailwind directives for each of Tailwind’s layers to your file.
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Import `src/tailwind.css` into your `src/index.js` file.
+
+```js
+import {createRoot} from 'react-dom/client';
+import App from './App';
+import './tailwind.css';
+
+const appElement = (<App />);
+...
+```
+
+Now you can start using Tailwind’s utility classes to style your content.
+Here is the example.
+
+```js
+const MainPanel = kind({
+    name: 'MainPanel',
+ 
+    render: (props) => (
+        <Panel {...props}>
+            <p className="text-3xl font-bold underline">
+                Edit src/views/MainPanel.js and save to reload.
+            </p>
+        </Panel>
+    )
+});
+```
+
+More information can be found [here](https://tailwindcss.com/docs) to learn about tailwindcss.
+
 ## 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/index.md

@@ -16,3 +16,4 @@ The following sections describe its installation and usage:
 * [Ejecting Apps](./ejecting-apps.md)
 * [Template Management](./template-management.md)
   * [Developing a Custom Template](./developing-a-template.md)
+* [Measuring Performance](./measuring-performance.md)

package/docs/isomorphic-support.md

@@ -31,6 +31,32 @@ npm pack -- --isomorphic
 npm pack-p -- --isomorphic
 ```
 
+If you are using React18, you need to call `hydrateRoot` instead of `createRoot` to hydrate prerendered HTML.  
+Enact CLI provides a global variable `ENACT_PACK_ISOMORPHIC` to selectively call those two APIs in your app's `index.js`.
+If you build with isomorphic option, `ENACT_PACK_ISOMORPHIC` will be `true`, otherwise `false`.  
+For more detailed information, please refer to the [React 18 migration guide](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis).
+
+Whithin your **src/index.js** file, add a conditional statement to render or hydrate your app:
+```js
+/* global ENACT_PACK_ISOMORPHIC */
+import {createRoot, hydrateRoot} from 'react-dom/client';
+
+import App from './App';
+
+const appElement = (<App />);
+
+// In a browser environment, render the app to the document.
+if (typeof window !== 'undefined') {
+	if (ENACT_PACK_ISOMORPHIC) {
+		hydrateRoot(document.getElementById('root'), appElement);
+	} else {
+		createRoot(document.getElementById('root')).render(appElement);
+	}
+}
+
+export default appElement;
+```
+
 ### When to Build Isomorphically
 By default, the Enact CLI will not use isomorphic code layout, and it should not be considered part of the regular development workflow. It is advisable to only build in isomorphic format when you want to test isomorphic features or in production mode builds.
 

package/docs/measuring-performance.md

@@ -0,0 +1,64 @@
+---
+title: Measuring Performance
+order: 11
+---
+By default, an app generated from `enact create` with Enact CLI includes a performance relayer that allows you to measure and analyze
+the performance of your application using different metrics.
+
+To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals`
+function in `index.js`:
+
+```js
+reportWebVitals(console.log);
+```
+
+This function is fired when the final values for any of the metrics have finished calculating on the
+page. You can use it to log any of the results to the console or send to a particular endpoint.
+
+## Web Vitals
+
+[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
+experience of a web page. In Create React App, a third-party library is used to measure these
+metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)).
+
+To understand more about the object returned to the function when a metric value is calculated,
+refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser
+Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported.
+
+## Sending results to analytics
+
+With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example:
+
+```js
+function sendToAnalytics(metric) {
+  const body = JSON.stringify(metric);
+  const url = 'https://example.com/analytics';
+
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, body);
+  } else {
+    fetch(url, { body, method: 'POST', keepalive: true });
+  }
+}
+
+reportWebVitals(sendToAnalytics);
+```
+
+> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…).
+>
+> ```js
+> function sendToAnalytics({ id, name, value }) {
+>   ga('send', 'event', {
+>     eventCategory: 'Web Vitals',
+>     eventAction: name,
+>     eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+>     eventLabel: id, // id unique to current page load
+>     nonInteraction: true, // avoids affecting bounce rate
+>   });
+> }
+>
+> reportWebVitals(sendToAnalytics);
+> ```
+>
+> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).