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

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,3 +1,16 @@
+## 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.

package/commands/pack.js

@@ -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));

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/jest/jest.config.js

@@ -76,15 +76,15 @@ 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/user-event$': require.resolve('@testing-library/user-event'),

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(
@@ -305,6 +318,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.css$/,
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -316,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'
@@ -330,6 +345,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									getLocalIdent,
 									mode: 'local'
@@ -339,6 +355,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
 									...(app.forceCSSModules ? {getLocalIdent} : {}),
 									mode: 'icss'
@@ -346,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.
@@ -365,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.
@@ -450,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/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.