@enact/cli 5.0.0-alpha.2 → 5.0.0-alpha.5

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+### Checklist
+
+* [ ] I have read and understand the [contribution guide](http://enactjs.com/docs/developer-guide/contributing/)
+* [ ] A [CHANGELOG entry](http://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
+* [ ] At least one test case is included for this feature or bug fix
+* [ ] Documentation was added or is not needed
+* [ ] This is an API breaking change
+
+### Issue Resolved / Feature Added
+[//]: # (Describe the issue resolved or feature added by this pull request)
+
+
+### Resolution
+[//]: # (Does the code work as intended?)
+[//]: # (What is the impact of this change and *why* was it made?)
+
+
+### Additional Considerations
+[//]: # (How should the change be tested?)
+[//]: # (Are there any outstanding questions?)
+[//]: # (Were any side-effects caused by the change?)
+
+
+### Links
+[//]: # (Related issues, references)
+
+
+### Comments

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## 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
+
+* Fixed `enact pack` fails on windows by excluding unnecessary file emitting from `html-webpack-plugin`.
+
+### test
+
+* Fixed `enact test` fails on windows by modifying glob patterns.
+* Removed `enzyme` and related modules.
+
+## 5.0.0-alpha.3 (April 22, 2022)
+
+### lint
+
+* Fixed `enact lint` is not working on node 16 by moving ESLint plugins to dependencies.
+
+### test
+
+* Fixed `--watch` option is not working by fixing the version of `jest-watch-typeahead` to `0.6.5`.
+
 ## 5.0.0-alpha.2 (April 15, 2022)
 
 ### create, template

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/test.js

@@ -151,11 +151,6 @@ function assignOverrides(config) {
 function api(args = []) {
 	const config = require('../config/jest/jest.config');
 
-	// Notify users that Enzyme is deprecated and will be removed in Enact CLI 5.0.0.
-	console.warn(
-		"\nWarning: 'enzyme' support is deprecated and will be removed in Enact CLI 5.0.0. Consider using '@testing-library/react' instead."
-	);
-
 	// @TODO: readd dotenv parse support
 
 	// Watch unless on CI, in coverage mode, or explicitly running all tests

package/config/jest/jest.config.js

@@ -67,7 +67,7 @@ module.exports = {
 	setupFilesAfterEnv: [require.resolve('./setupTests'), userSetupFile].filter(Boolean),
 	testMatch: [
 		'<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}',
-		'<rootDir>/**/?(*.)+(spec|test).[jt]s?(x)',
+		'<rootDir>/**/*.+(spec|test).{js,jsx,ts,tsx}',
 		'<rootDir>/**/*-specs.{js,jsx,ts,tsx}'
 	],
 	testPathIgnorePatterns: ignorePatterns,
@@ -85,10 +85,8 @@ module.exports = {
 	],
 	moduleNameMapper: {
 		'^.+\\.module\\.(css|less)$': require.resolve('identity-obj-proxy'),
-		'^enzyme$': require.resolve('enzyme'),
 		'^@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/jest/setupTests.js

@@ -1,8 +1,6 @@
 /* eslint-env jest */
 const fs = require('fs');
 const path = require('path');
-const enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
 const {packageRoot} = require('@enact/dev-utils');
 
 const filters = [
@@ -46,10 +44,6 @@ afterEach(() => {
 	expect(actual).toHaveLength(expected);
 });
 
-// Configure Enzyme to use React16 adapter.
-
-enzyme.configure({adapter: new Adapter()});
-
 // Set initial resolution to VGA, similar to PhantomJS.
 // Will ideally want to use a more modern resolution later.
 

package/config/webpack.config.js

@@ -258,7 +258,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
@@ -354,7 +356,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 							// by webpacks internal loaders.
 							// Exclude `ejs` HTML templating language as that's handled by
 							// the HtmlWebpackPlugin.
-							exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.ejs$/, /\.json$/],
+							exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.ejs$/, /\.json$/],
 							type: 'asset/resource'
 						}
 						// ** STOP ** Are you adding a new loader?

package/docs/building-apps.md

@@ -33,7 +33,7 @@ By default, projects will build in development mode. When you're code is ready f
 ## 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:
 
-* >1%
+* \>1%
 * last 2 versions
 * last 5 Chrome versions
 * last 5 Firefox versions
@@ -105,7 +105,7 @@ 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.
 
 ## 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 wade variety of locales can be specified and prerendered. More details on isomorphic support and its limitations can be found [here](./isomorphic-support.md).
+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).
 
 ## V8 Snapshot Generation
 The v8 snapshot blob creation feature is highly experimental and temperamental depending on your code. It is considered an extension of the isomorphic code layout, bringing along all the same requirements. Given the highly-specific nature of a v8 snapshot blob being tied to particular versions of Chrome/Chromium/Electron/etc., developers must provide their own copy of the `mksnapshot` binary and have its filepath set to the `V8_MKSNAPSHOT` environment variable.

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/installation.md

@@ -18,9 +18,3 @@ All releases are published, with the default (and `latest` tag) being the curren
 ### Linux Notes
 
 When installing under Linux, it may be necessary to prefix the install command with `sudo`.
-Additionally, if you receive an error when the install process attempts to install PhantomJS, try
-the following:
-
-```bash
-sudo npm install -g --unsafe-perm @enact/cli
-```

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.