@enact/cli 5.0.0-alpha.3 → 5.0.0-rc.1

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).

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

@@ -29,6 +29,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.
@@ -41,10 +42,10 @@ For example:
 	...
 	"enact": {
 		"theme": "sandstone",
-		"nodeBuiltins": {
-			fs: 'empty',
-			net: 'empty',
-			tls: 'empty'
+		"resolveFallback": {
+			fs: false,
+			net: false,
+			tls: false
 		}
 	}
 	...

package/docs/testing-apps.md

@@ -15,7 +15,6 @@ order: 7
 The `enact test` command (aliased as `npm run test`) will activate a [Jest](https://jestjs.io/) test runner on all discovered *-specs.js files. All the complicated configuration is hidden away within Enact CLI to avoid any confusion or additional difficulty in testing source code.
 
 Internally Enact CLI supports [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) out of the box, so there's no need to install them locally on your project. Simply import/require it within specs files and it'll be there. You will want to familiarize yourself with React Testing Library's utilities in order to write more complex tests.
-Enzyme support is deprecated and will be removed in a future major release.
 
 To create a test please create a ***-specs.js** file in the folder of the component you wish to test.