WRN-18582: Migrate to webpack5 (#264)

* WRN-18582: webpack5 initial commit

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* WRN-18582: Fixed serve issue

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* WRN-18582: Added webpack cache config

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* applied more changes

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* Added changelog

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* fix

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* update `listen` to `startCallback` from webpack dev server

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* fix filename..ext issue

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

* WRN-16762: Added support for tailwindcss and update dependencies (#263)

* initial modules update(before wp5 update)

* npm audit fix

* Update package.json

* fix lint errors

* update CHANGELOG.md

* Update package.json

* revert CHANGELOG.mx

* revert jest 27

* revert npm-shrinkwrap.json

* revert pack/serve.js

* for removing conflict with #262, revert versions

* Update react-refresh-webpack-plugin version

Co-authored-by: Mikyung Kim <[email protected]>

* Update babel-jest version

Co-authored-by: Mikyung Kim <[email protected]>

* Update babel-plugin-dev-expression version

Co-authored-by: Mikyung Kim <[email protected]>

* remove unnecessary code

* revert file permission

* update dependencies

* update package.json

* Update package.json

Co-authored-by: Mikyung Kim <[email protected]>

* Update package.json

* fix

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

Co-authored-by: Mikyung Kim <[email protected]>

* update changelog and package.json

Enact-DCO-1.0-Signed-off-by: Mikyung Kim ([email protected])

Co-authored-by: taeyoung.hong <[email protected]>

Author: MikyungKim

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
 	env: {
 		node: true
 	},
-	extends: ['enact', 'plugin:prettier/recommended', 'prettier/babel', 'prettier/react'],
+	extends: ['enact', 'plugin:prettier/recommended'],
 	plugins: ['import'],
 	rules: {
 		'import/no-unresolved': ['error', {commonjs: true, caseSensitive: true}],

CHANGELOG.md

@@ -1,3 +1,22 @@
+## unreleased
+
+### pack
+
+* Updated all dependencies to the latest including Webpack 5.
+* Replaced `optimize-css-assets-webpack-plugin` to `css-minimizer-webpack-plugin`.
+* Fixed ICSS syntax in stylesheets.
+* Added `source-map-loader` for debugging into original source of node_modules libraries that contain sourcemaps.
+* Added `tailwindcss` support.
+
+### serve
+
+* Fixed to disable overlay for warnings.
+* Fixed to allow CORS on `webpack-dev-server`.
+
+### test
+
+* Updated to Jest 27.
+
 ## 4.1.7 (February 18, 2022)
 
 ### pack

bin/enact.js

@@ -9,7 +9,13 @@ const semver = require('semver');
 const pkg = require('../package.json');
 
 // Verify the correct version of Node is in use.
-if (!semver.satisfies(process.version, pkg.engines.node)) {
+if (
+	!semver.satisfies(
+		// Coerce strings with metadata (i.e. `15.0.0-nightly`).
+		semver.coerce(process.version),
+		pkg.engines.node
+	)
+) {
 	console.log(
 		chalk.red(`You are running Node ${process.version}, but @enact/cli requires Node ${pkg.engines.node}.\n`) +
 			chalk.bold.red('Please update your version of Node.')

commands/eject.js

@@ -267,7 +267,7 @@ function api({bare = false} = {}) {
 			console.log('Ejecting...');
 			console.log();
 			console.log(chalk.cyan(`Copying files into ${process.cwd()}`));
-			assets.forEach(dir => !fs.existsSync(dir.dest) && fs.mkdirSync(dir.dest));
+			assets.forEach(dir => !fs.existsSync(dir.dest) && fs.mkdirSync(dir.dest, {recursive: true}));
 			files.forEach(copySanitizedFile);
 			console.log();
 			console.log(chalk.cyan('Configuring package.json'));

commands/pack.js

@@ -53,13 +53,14 @@ function displayHelp() {
 	console.log();
 	/*
 		Private Options:
-			--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)
-			--custom-skin         To use a custom skin for build
+			--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)
+			--custom-skin         	To use a custom skin for build
+			--ilib-additional-path	Specify iLib additional resources path
 	*/
 	process.exit(0);
 }
@@ -100,13 +101,17 @@ function details(err, stats, output) {
 		process.env.CI.toLowerCase() !== 'false' &&
 		messages.warnings.length
 	) {
-		console.log(
-			chalk.yellow(
-				'Treating warnings as errors because process.env.CI = true. ' +
-					'Most CI servers set it automatically.\n'
-			)
-		);
-		return new Error(messages.warnings.join('\n\n'));
+		// Ignore sourcemap warnings in CI builds. See #8227 for more info.
+		const filteredWarnings = messages.warnings.filter(w => !/Failed to parse source map/.test(w));
+		if (filteredWarnings.length) {
+			console.log(
+				chalk.yellow(
+					'\nTreating warnings as errors because process.env.CI = true. \n' +
+						'Most CI servers set it automatically.\n'
+				)
+			);
+			return new Error(filteredWarnings.join('\n\n'));
+		}
 	} else {
 		copyPublicFolder(output);
 		if (messages.warnings.length) {
@@ -245,7 +250,7 @@ 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');
+	const config = configFactory(opts.production ? 'production' : 'development', opts['ilib-additional-path']);
 
 	// Set any entry path override
 	if (opts.entry) helper.replaceMain(config, path.resolve(opts.entry));
@@ -283,7 +288,7 @@ function cli(args) {
 			'watch',
 			'help'
 		],
-		string: ['externals', 'externals-public', 'locales', 'entry', 'output', 'meta'],
+		string: ['externals', 'externals-public', 'locales', 'entry', 'ilib-additional-path', 'output', 'meta'],
 		default: {minify: true},
 		alias: {
 			o: 'output',

commands/serve.js

@@ -16,11 +16,11 @@ const path = require('path');
 const chalk = require('chalk');
 const minimist = require('minimist');
 const clearConsole = require('react-dev-utils/clearConsole');
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
 const openBrowser = require('react-dev-utils/openBrowser');
 const redirectServedPathMiddleware = require('react-dev-utils/redirectServedPathMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const {choosePort, createCompiler, prepareProxy, prepareUrls} = require('react-dev-utils/WebpackDevServerUtils');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const webpack = require('webpack');
@@ -35,6 +35,7 @@ process.on('unhandledRejection', err => {
 // As react-dev-utils assumes the webpack production packaging command is
 // "npm run build" with no way to modify it yet, we provide a basic override
 // to console.log to ensure the correct output is displayed to the user.
+// prettier-ignore
 console.log = (log => (data, ...rest) =>
 	typeof data === 'undefined'
 		? log()
@@ -62,8 +63,6 @@ function displayHelp() {
 }
 
 function hotDevServer(config, fastRefresh) {
-	// This is necessary to emit hot updates
-	config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
 	// Keep webpack alive when there are any errors, so user can fix and rebuild.
 	config.bail = false;
 	// Ensure the CLI version of Chalk is used for webpackHotDevClient
@@ -85,9 +84,7 @@ function hotDevServer(config, fastRefresh) {
 		// https://github.com/facebook/react/tree/master/packages/react-refresh
 		config.plugins.unshift(
 			new ReactRefreshWebpackPlugin({
-				overlay: {
-					entry: require.resolve('react-dev-utils/webpackHotDevClient')
-				}
+				overlay: false
 			})
 		);
 		// Append fast refresh babel plugin
@@ -105,6 +102,7 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
 			key: fs.readFileSync(SSL_KEY_FILE)
 		};
 	}
+	const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
 
 	return {
 		// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
@@ -123,38 +121,64 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
 		// So we will disable the host check normally, but enable it if you have
 		// specified the `proxy` setting. Finally, we let you override it if you
 		// really know what you're doing with a special environment variable.
-		disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
-		// Silence WebpackDevServer's own logs since they're generally not useful.
-		// It will still show compile warnings and errors with this setting.
-		clientLogLevel: 'none',
-		// Enable hot reloading server. It will provide /sockjs-node/ endpoint
-		// for the WebpackDevServer client so it can learn when the files were
-		// updated. The WebpackDevServer client is included as an entry point
-		// in the Webpack development configuration. Note that only changes
-		// to CSS are currently hot reloaded. JS changes will refresh the browser.
-		hot: true,
-		// Use 'ws' instead of 'sockjs-node' on server since we're using native
-		// websockets in `webpackHotDevClient`.
-		transportMode: 'ws',
-		// Prevent a WS client from getting injected as we're already including
-		// `webpackHotDevClient`.
-		injectClient: false,
-		// Enable custom sockjs pathname for websocket connection to hot reloading server.
-		// Enable custom sockjs hostname, pathname and port for websocket connection
-		// to hot reloading server.
-		sockHost: process.env.WDS_SOCKET_HOST,
-		sockPath: process.env.WDS_SOCKET_PATH,
-		sockPort: process.env.WDS_SOCKET_PORT,
-		// WebpackDevServer is noisy by default so we emit custom message instead
-		// by listening to the compiler events with `compiler.plugin` calls above.
-		quiet: true,
+		// Note: ["localhost", ".localhost"] will support subdomains - but we might
+		// want to allow setting the allowedHosts manually for more complex setups
+		allowedHosts: disableFirewall ? 'all' : [allowedHost],
 		// Enable HTTPS if the HTTPS environment variable is set to 'true'
 		https,
 		host,
-		overlay: false,
 		// Allow cross-origin HTTP requests
 		headers: {
-			'Access-Control-Allow-Origin': '*'
+			'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'))
+			}
+		},
+		client: {
+			webSocketURL: {
+				// Enable custom sockjs pathname for websocket connection to hot reloading server.
+				// Enable custom sockjs hostname, pathname and port for websocket connection
+				// to hot reloading server.
+				hostname: process.env.WDS_SOCKET_HOST,
+				pathname: process.env.WDS_SOCKET_PATH,
+				port: process.env.WDS_SOCKET_PORT
+			},
+			overlay: {
+				errors: true,
+				warnings: false
+			}
+		},
+		devMiddleware: {
+			// It is important to tell WebpackDevServer to use the same "publicPath" path as
+			// we specified in the webpack config. When homepage is '.', default to serving
+			// from the root.
+			// remove last slash so user can land on `/test` instead of `/test/`
+			publicPath: publicPath.slice(0, -1)
 		},
 		historyApiFallback: {
 			// ensure JSON file requests correctly 404 error when not found.
@@ -164,27 +188,24 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
 			disableDotRule: true,
 			index: publicPath
 		},
-		public: allowedHost,
 		// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
 		proxy,
-		before(build, server) {
-			// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+		onBeforeSetupMiddleware(devServer) {
+			// Keep `evalSourceMapMiddleware`
 			// middlewares before `redirectServedPath` otherwise will not have any effect
 			// This lets us fetch source contents from webpack for the error overlay
-			build.use(evalSourceMapMiddleware(server));
-			// This lets us open files from the runtime error overlay.
-			build.use(errorOverlayMiddleware());
+			devServer.app.use(evalSourceMapMiddleware(devServer));
 
 			// Optionally register app-side proxy middleware if it exists
 			const proxySetup = path.join(process.cwd(), 'src', 'setupProxy.js');
 			if (fs.existsSync(proxySetup)) {
-				require(proxySetup)(build);
+				require(proxySetup)(devServer.app);
 			}
 		},
-		after(build) {
+		onAfterSetupMiddleware(devServer) {
 			// Redirect to `PUBLIC_URL` or `homepage`/`enact.publicUrl` from `package.json`
 			// if url not match
-			build.use(redirectServedPathMiddleware(publicPath));
+			devServer.app.use(redirectServedPathMiddleware(publicPath));
 		}
 	};
 }
@@ -200,21 +221,14 @@ function serve(config, host, port, open) {
 		const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 		const publicPath = getPublicUrlOrPath(true, app.publicUrl, process.env.PUBLIC_URL);
 		const urls = prepareUrls(protocol, host, resolvedPort, publicPath.slice(0, -1));
-		const devSocket = {
-			// eslint-disable-next-line no-use-before-define
-			warnings: warnings => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-			// eslint-disable-next-line no-use-before-define
-			errors: errors => devServer.sockWrite(devServer.sockets, 'errors', errors)
-		};
+
 		// Create a webpack compiler that is configured with custom messages.
 		const compiler = createCompiler({
 			appName: app.name,
 			config,
-			devSocket,
 			urls,
 			useYarn: false,
 			useTypeScript: fs.existsSync('tsconfig.json'),
-			tscCompileOnError: process.env.TSC_COMPILE_ON_ERROR === 'true',
 			webpack
 		});
 		// Hook into compiler to remove potentially confusing messages
@@ -238,9 +252,9 @@ function serve(config, host, port, open) {
 			config.devServer,
 			devServerConfig(host, protocol, publicPath, proxyConfig, urls.lanUrlForConfig)
 		);
-		const devServer = new WebpackDevServer(compiler, serverConfig);
+		const devServer = new WebpackDevServer(serverConfig, compiler);
 		// Launch WebpackDevServer.
-		devServer.listen(resolvedPort, host, err => {
+		devServer.startCallback(err => {
 			if (err) return console.log(err);
 			if (process.stdout.isTTY) clearConsole();
 			console.log(chalk.cyan('Starting the development server...\n'));

config/babel.config.js

@@ -86,6 +86,8 @@ module.exports = function (api) {
 			// Stage 3
 			require('@babel/plugin-syntax-dynamic-import').default,
 			[require('@babel/plugin-proposal-class-properties').default, {loose: true}],
+			[require('@babel/plugin-proposal-private-methods').default, {loose: true}],
+			[require('@babel/plugin-proposal-private-property-in-object').default, {loose: true}],
 			// '@babel/plugin-syntax-import-meta',
 			// '@babel/plugin-proposal-json-strings'
 

config/createEnvironmentHash.js

@@ -0,0 +1,9 @@
+'use strict';
+const {createHash} = require('crypto');
+
+module.exports = env => {
+	const hash = createHash('md5');
+	hash.update(JSON.stringify(env));
+
+	return hash.digest('hex');
+};

config/jest/babelTransform.js

@@ -10,7 +10,7 @@
  */
 
 const path = require('path');
-const babelJest = require('babel-jest');
+const babelJest = require('babel-jest').default;
 
 module.exports = babelJest.createTransformer({
 	extends: path.join(__dirname, '..', 'babel.config.js'),

config/jest/jest.config.js

@@ -73,7 +73,6 @@ module.exports = {
 	testPathIgnorePatterns: ignorePatterns,
 	testEnvironment: 'jsdom',
 	testEnvironmentOptions: {pretendToBeVisual: true},
-	testRunner: require.resolve('jest-circus/runner'),
 	testURL: 'http://localhost',
 	transform: {
 		'^.+\\.(js|jsx|ts|tsx)$': require.resolve('./babelTransform'),