WRN-16762: Apply changes from CreactReactApp 5.0

CHANGELOG.md

@@ -1,3 +1,11 @@
+# unreleased
+
+* Updated all dependencies, with webpack peer dependency restricted to >=5.0.0.
+* Updated all webpack plugins to use WeakMap since `compilation.hooks` became frozen.
+* `IlibPlugin`:
+  * Added `ILIB_ADDITIONAL_RESOURCES_PATH` to defined constants if provided.
+  * Added `publicPath` option to specify webpack public path.
+
 # 4.1.4 (February 18, 2022)
 
 * `option-parser`: Added `additionalModulePaths` to specify paths to check when resolving modules.

mixins/isomorphic.js

@@ -39,6 +39,7 @@ module.exports = {
 
 		// Include plugin to prerender the html into the index.html
 		const htmlPluginInstance = helper.getPluginByName(config, 'HtmlWebpackPlugin');
+		const webOSMetaPluginInstance = helper.getPluginByName(config, 'WebOSMetaPlugin');
 		config.plugins.push(
 			new PrerenderPlugin({
 				server: reactDOMServer,
@@ -49,7 +50,8 @@ module.exports = {
 				fontGenerator: app.fontGenerator,
 				externalStartup: app.externalStartup,
 				mapfile: opts.mapfile,
-				htmlPlugin: htmlPluginInstance && htmlPluginInstance.constructor
+				htmlPlugin: htmlPluginInstance && htmlPluginInstance.constructor,
+				webOSMetaPlugin: webOSMetaPluginInstance && webOSMetaPluginInstance.constructor
 			})
 		);
 
@@ -63,7 +65,8 @@ module.exports = {
 			// Include plugin to attempt generation of v8 snapshot binary if V8_MKSNAPSHOT env var is set
 			config.plugins.push(
 				new SnapshotPlugin({
-					target: 'main.js'
+					target: 'main.js',
+					webOSMetaPlugin: webOSMetaPluginInstance && webOSMetaPluginInstance.constructor
 				})
 			);
 		}

mixins/verbose.js

@@ -1,7 +1,16 @@
+const helper = require('../config-helper');
 const VerboseLogPlugin = require('../plugins/VerboseLogPlugin');
 
 module.exports = {
 	apply: function (config) {
-		return config.plugins.push(new VerboseLogPlugin());
+		const prerenderInstance = helper.getPluginByName(config, 'PrerenderPlugin');
+		const snapshotPluginInstance = helper.getPluginByName(config, 'SnapshotPlugin');
+
+		return config.plugins.push(
+			new VerboseLogPlugin({
+				prerenderPlugin: prerenderInstance && prerenderInstance.constructor,
+				snapshotPlugin: snapshotPluginInstance && snapshotPluginInstance.constructor
+			})
+		);
 	}
 };

option-parser.js

@@ -199,7 +199,7 @@ Object.defineProperty(config, 'environment', {
 			} else if (targets.every(b => !b.startsWith('not') && b.includes('node'))) {
 				return 'node';
 			} else {
-				return 'web';
+				return 'browserslist';
 			}
 		} else {
 			return 'web';

package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/enyojs/enact-dev-utils",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=6.4.0"
+    "node": ">=10.13.0"
   },
   "publishConfig": {
     "access": "public"
@@ -31,31 +31,24 @@
     "plugins/SnapshotPlugin/mock-window.js"
   ],
   "dependencies": {
-    "browserslist": "^4.12.0",
-    "chalk": "^4.1.0",
+    "browserslist": "^4.20.2",
+    "chalk": "^4.1.2",
     "console.mute": "^0.3.0",
-    "core-js": "^3.6.5",
-    "electron-to-chromium": "^1.3.474",
-    "enzyme-adapter-utils": "^1.13.0",
-    "fast-glob": "^3.2.0",
-    "fbjs": "^0.8.18",
-    "find-cache-dir": "^3.3.1",
-    "graceful-fs": "^4.2.4",
-    "import-fresh": "^3.2.1",
+    "core-js": "^3.21.1",
+    "fast-glob": "^3.2.11",
+    "fbjs": "^3.0.4",
+    "find-cache-dir": "^3.3.2",
+    "graceful-fs": "^4.2.9",
+    "import-fresh": "^3.3.0",
     "mock-require": "^3.0.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "react-reconciler": "^0.26.1",
-    "react-test-renderer": "^17.0.1",
-    "resolve": "^1.17.0",
-    "tapable": "^1.1.3",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-sources": "^1.4.3"
+    "resolve": "^1.22.0",
+    "tapable": "^2.2.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-sources": "^3.2.3"
   },
   "peerDependencies": {
-    "html-webpack-plugin": ">=4.0.0",
-    "webpack": ">=4.0.0"
+    "html-webpack-plugin": ">=5.0.0",
+    "webpack": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "html-webpack-plugin": {
@@ -67,18 +60,19 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.11.0",
+    "eslint": "^7.30.0",
     "eslint-config-enact": "^3.1.3",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-enact": "^0.2.3",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^4.5.0",
-    "prettier": "^2.0.5",
-    "webpack": "^4.44.2"
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "html-webpack-plugin": "^5.3.2",
+    "prettier": "^2.6.0",
+    "react": "^17.0.2",
+    "webpack": "^5.64.4"
   }
 }

plugins/ILibPlugin/index.js

@@ -28,13 +28,9 @@ function packageSearch(dir, pkg) {
 }
 
 // Determine if it's a NodeJS output filesystem or if it's a foreign/virtual one.
+// The internal webpack5 implementation of outputFileSystem is graceful-fs.
 function isNodeOutputFS(compiler) {
-	return (
-		compiler.outputFileSystem &&
-		compiler.outputFileSystem.constructor &&
-		compiler.outputFileSystem.constructor.name &&
-		compiler.outputFileSystem.constructor.name === 'NodeOutputFileSystem'
-	);
+	return compiler.outputFileSystem && JSON.stringify(compiler.outputFileSystem) === JSON.stringify(fs);
 }
 
 // Normalize a filepath to be relative to the webpack context, using forward-slashes, and
@@ -57,7 +53,7 @@ function bundleConst(name) {
 	);
 }
 
-function resolveBundle(dir, context, symlinks, relative) {
+function resolveBundle({dir, context, symlinks, relative, publicPath}) {
 	const bundle = {resolved: dir, path: dir, emit: true};
 	if (path.isAbsolute(bundle.path)) {
 		bundle.emit = false;
@@ -73,7 +69,7 @@ function resolveBundle(dir, context, symlinks, relative) {
 		if (relative) {
 			bundle.resolved = JSON.stringify(transformPath(context, bundle.path));
 		} else {
-			bundle.resolved = '__webpack_require__.p + ' + JSON.stringify(transformPath(context, bundle.path));
+			bundle.resolved = publicPath + JSON.stringify(transformPath(context, bundle.path));
 		}
 	}
 	return bundle;
@@ -180,6 +176,26 @@ function emitAsset(compilation, name, data) {
 	};
 }
 
+const iLibPluginHooksMap = new WeakMap();
+
+function getILibPluginHooks(compilation) {
+	let hooks = iLibPluginHooksMap.get(compilation);
+
+	// Setup the hooks only once
+	if (hooks === undefined) {
+		hooks = createILibPluginHooks();
+		iLibPluginHooksMap.set(compilation, hooks);
+	}
+
+	return hooks;
+}
+
+function createILibPluginHooks() {
+	return {
+		ilibManifestList: new SyncWaterfallHook(['manifests'])
+	};
+}
+
 class ILibPlugin {
 	constructor(options = {}) {
 		this.options = options;
@@ -239,24 +255,38 @@ class ILibPlugin {
 			}
 
 			// Resolve an accurate basepath for iLib.
-			const ilib = resolveBundle(opts.ilib, opts.context, opts.symlinks);
-			const resources = resolveBundle(
-				opts.resources || 'resources',
-				opts.context,
-				opts.symlinks,
-				Boolean(opts.relativeResources)
-			);
+			const ilib = resolveBundle({
+				dir: opts.ilib,
+				context: opts.context,
+				symlinks: opts.symlinks,
+				publicPath: opts.publicPath
+			});
+			const resources = resolveBundle({
+				dir: opts.resources || 'resources',
+				context: opts.context,
+				symlinks: opts.symlinks,
+				relative: Boolean(opts.relativeResources),
+				publicPath: opts.publicPath
+			});
 			const definedConstants = {
 				ILIB_BASE_PATH: ilib.resolved,
 				ILIB_RESOURCES_PATH: resources.resolved,
 				ILIB_CACHE_ID: '__webpack_require__.ilib_cache_id',
 				// when `emit` is false and `ilib` is not absolute, can delare no assets
 				ILIB_NO_ASSETS: JSON.stringify(!opts.emit && !path.isAbsolute(opts.ilib))
 			};
+			if (opts.ilibAdditionalResourcesPath) {
+				definedConstants.ILIB_ADDITIONAL_RESOURCES_PATH = '"' + opts.ilibAdditionalResourcesPath + '"';
+			}
 			definedConstants[bundleConst(app.name)] = definedConstants.ILIB_RESOURCES_PATH;
 			for (const name in opts.bundles) {
 				if (opts.bundles[name]) {
-					const bundle = resolveBundle(opts.bundles[name], opts.context, opts.symlinks);
+					const bundle = resolveBundle({
+						dir: opts.bundles[name],
+						context: opts.context,
+						symlinks: opts.symlinks,
+						publicPath: opts.publicPath
+					});
 					const bundleManifest = path.join(bundle.path, 'ilibmanifest.json');
 					definedConstants[bundleConst(name)] = bundle.resolved;
 					if (opts.emit && bundle.emit && fs.existsSync(bundleManifest)) {
@@ -273,16 +303,13 @@ class ILibPlugin {
 			new ContextReplacementPlugin(/ilib/, /^$/).apply(compiler);
 
 			compiler.hooks.compilation.tap('ILibPlugin', compilation => {
-				// Define compilation hooks
-				compilation.hooks.ilibManifestList = new SyncWaterfallHook(['manifests']);
-
 				// Add a unique ID value to the webpack require-function, so that the value is correctly updated,
 				// even when hot-reloading and serving.
 				const main = compilation.mainTemplate;
 				main.hooks.requireExtensions.tap('ILibPlugin', source => {
 					const buf = [source];
 					buf.push('');
-					buf.push(main.requireFn + '.ilib_cache_id = ' + JSON.stringify('' + new Date().getTime()) + ';');
+					buf.push('__webpack_require__.ilib_cache_id = ' + JSON.stringify('' + new Date().getTime()) + ';');
 					return Template.asString(buf);
 				});
 			});
@@ -332,11 +359,15 @@ class ILibPlugin {
 						)
 					);
 				}
-				manifests = compilation.hooks.ilibManifestList.call(manifests);
+				manifests = getILibPluginHooks(compilation).ilibManifestList.call(manifests);
 				handleBundles(compilation, manifests, opts, callback);
 			});
 		}
 	}
 }
 
+// A static helper to get the hooks for this plugin
+// Usage: ILibPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... });
+ILibPlugin.getHooks = getILibPluginHooks;
+
 module.exports = ILibPlugin;