chore: Updating html-webpack-plugin to v4 (#1608)

* chore: Updating webpack-dev-server (#1646) * test: Misc changes to test suite * refactor: Updating prerender-provider * fix: Temp(?) workaround for Critters not deduping styles * test: Updating tests * docs: Adding changeset * fix: Bumping critters * junk: Debugging CI * chore: Bumping critters-webpack * ci: Fixing PnP test action * chore: Bumping critters * test: Updating custom-template tests * test: Updating sourcemap file size comparision * test: Custom assertion as key matching was difficult to debug
preactjs · Jan 31, 2022 · c6e57ca · c6e57ca
1 parent e98994a
commit c6e57ca
Show file tree

Hide file tree

Showing 20 changed files with 494 additions and 1,038 deletions.
diff --git a/.changeset/rude-walls-dress.md b/.changeset/rude-walls-dress.md
@@ -0,0 +1,6 @@
+---
+'preact-cli': minor
+'@preact/prerender-data-provider': patch
+---
+
+Updates to use html-webpack-plugin v4
diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js
@@ -1,7 +1,9 @@
 const { resolve, join } = require('path');
 const os = require('os');
 const { existsSync, readFileSync, writeFileSync, mkdirSync } = require('fs');
-const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
+const {
+	HtmlWebpackSkipAssetsPlugin,
+} = require('html-webpack-skip-assets-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
 const createLoadManifest = require('./create-load-manifest');
@@ -17,8 +19,8 @@ function read(path) {
 	return readFileSync(resolve(__dirname, path), 'utf-8');
 }
 
-module.exports = async function (config) {
-	const { cwd, dest, isProd, src } = config;
+module.exports = async function renderHTMLPlugin(config) {
+	const { cwd, dest, src } = config;
 	const inProjectTemplatePath = resolve(src, 'template.html');
 	let template = defaultTemplate;
 	if (existsSync(inProjectTemplatePath)) {
@@ -34,14 +36,11 @@ module.exports = async function (config) {
 	}
 
 	let content = read(template);
-	if (/preact\.headEnd|preact\.bodyEnd/.test(content)) {
+	if (/preact\.(title|headEnd|bodyEnd)/.test(content)) {
 		const headEnd = read('../../resources/head-end.ejs');
 		const bodyEnd = read('../../resources/body-end.ejs');
 		content = content
-			.replace(
-				/<%[=]?\s+preact\.title\s+%>/,
-				'<%= htmlWebpackPlugin.options.title %>'
-			)
+			.replace(/<%[=]?\s+preact\.title\s+%>/, '<%= cli.title %>')
 			.replace(/<%\s+preact\.headEnd\s+%>/, headEnd)
 			.replace(/<%\s+preact\.bodyEnd\s+%>/, bodyEnd);
 
@@ -56,53 +55,70 @@ module.exports = async function (config) {
 	}
 
 	const htmlWebpackConfig = values => {
-		const { url, title, ...routeData } = values;
+		let { url, title, ...routeData } = values;
+
+		title =
+			title ||
+			config.title ||
+			config.manifest.name ||
+			config.manifest.short_name ||
+			(config.pkg.name || '').replace(/^@[a-z]\//, '') ||
+			'Preact App';
+
 		// Do not create a folder if the url is for a specific file.
 		const filename = url.endsWith('.html')
 			? resolve(dest, url.substring(1))
 			: resolve(dest, url.substring(1), 'index.html');
-		return Object.assign(values, {
+
+		return {
+			title,
 			filename,
 			template: `!!${require.resolve('ejs-loader')}?esModule=false!${template}`,
-			minify: isProd && {
-				collapseWhitespace: true,
-				removeScriptTypeAttributes: true,
-				removeRedundantAttributes: true,
-				removeStyleLinkTypeAttributes: true,
-				removeComments: true,
+			templateParameters: (compilation, assets, assetTags, options) => {
+				let entrypoints = {};
+				compilation.entrypoints.forEach((entrypoint, name) => {
+					let entryFiles = entrypoint.getFiles();
+					entrypoints[name] =
+						assets.publicPath +
+						entryFiles.find(file => /\.(m?js)(\?|$)/.test(file));
+				});
+
+				let loadManifest = compilation.assets['push-manifest.json']
+					? JSON.parse(compilation.assets['push-manifest.json'].source())
+					: createLoadManifest(
+							compilation.assets,
+							config.esm,
+							compilation.namedChunkGroups
+					  );
+
+				return {
+					cli: {
+						title,
+						url,
+						manifest: config.manifest,
+						inlineCss: config['inline-css'],
+						preload: config.preload,
+						config,
+						preRenderData: values,
+						CLI_DATA: { preRenderData: { url, ...routeData } },
+						ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
+						loadManifest,
+						entrypoints,
+					},
+					htmlWebpackPlugin: {
+						tags: assetTags,
+						files: assets,
+						options,
+					},
+				};
 			},
+			inject: true,
+			scriptLoading: 'defer',
 			favicon: existsSync(resolve(src, 'assets/favicon.ico'))
 				? 'assets/favicon.ico'
 				: '',
-			inject: true,
-			compile: true,
-			inlineCss: config['inline-css'],
-			preload: config.preload,
-			manifest: config.manifest,
-			title:
-				title ||
-				config.title ||
-				config.manifest.name ||
-				config.manifest.short_name ||
-				(config.pkg.name || '').replace(/^@[a-z]\//, '') ||
-				'Preact App',
 			excludeAssets: [/(bundle|polyfills)(\..*)?\.js$/],
-			createLoadManifest: (assets, namedChunkGroups) => {
-				if (assets['push-manifest.json']) {
-					return JSON.parse(assets['push-manifest.json'].source());
-				}
-				return createLoadManifest(assets, config.esm, namedChunkGroups);
-			},
-			config,
-			url,
-			ssr() {
-				return config.prerender && url !== PREACT_FALLBACK_URL
-					? prerender({ cwd, dest, src }, values)
-					: '';
-			},
-			scriptLoading: 'defer',
-			CLI_DATA: { preRenderData: { url, ...routeData } },
-		});
+		};
 	};
 
 	let pages = [{ url: '/' }];
@@ -158,7 +174,7 @@ module.exports = async function (config) {
 	const resultPages = pages
 		.map(htmlWebpackConfig)
 		.map(conf => new HtmlWebpackPlugin(conf))
-		.concat([new HtmlWebpackExcludeAssetsPlugin()]);
+		.concat([new HtmlWebpackSkipAssetsPlugin()]);
 
 	return config.prerender
 		? resultPages.concat([
@@ -170,10 +186,9 @@ module.exports = async function (config) {
 // Adds a preact_prerender_data in every folder so that the data could be fetched separately.
 class PrerenderDataExtractPlugin {
 	constructor(page) {
-		const cliData = page.CLI_DATA || {};
-		const { url } = cliData.preRenderData || {};
+		const url = page.url;
 		this.location_ = url.endsWith('/') ? url : url + '/';
-		this.data_ = JSON.stringify(cliData.preRenderData || {});
+		this.data_ = JSON.stringify(page || {});
 	}
 	apply(compiler) {
 		compiler.hooks.emit.tap('PrerenderDataExtractPlugin', compilation => {

diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js
@@ -252,7 +252,7 @@ function isProd(config) {
 				preload: 'media',
 				pruneSource: false,
 				logLevel: 'silent',
-				additionalStylesheets: ['*.css'],
+				additionalStylesheets: ['route-*.css'],
 			})
 		);
 	}

diff --git a/packages/cli/lib/resources/body-end.ejs b/packages/cli/lib/resources/body-end.ejs
@@ -1,18 +1,18 @@
-<%= htmlWebpackPlugin.options.ssr() %>
-<% if (htmlWebpackPlugin.options.config.prerender === true) { %>
+<%= cli.ssr %>
+<% if (cli.config.prerender === true) { %>
 	<script type="__PREACT_CLI_DATA__">
-		<%= encodeURI(JSON.stringify(htmlWebpackPlugin.options.CLI_DATA)) %>
+		<%= encodeURI(JSON.stringify(cli.CLI_DATA)) %>
 	</script>
 <% } %>
-<% if (webpack.assets.filter(entry => entry.name.match(/bundle(\.\w{5})?.esm.js$/)).length > 0) { %>
-	<script crossorigin="anonymous" src="<%= htmlWebpackPlugin.files.publicPath %><%= webpack.assets.filter(entry => entry.name.match(/bundle(\.\w{5})?.esm.js$/))[0].name %>" type="module"></script>
+<% if (htmlWebpackPlugin.files.js.filter(entry => entry.match(/bundle(\.\w{5})?.esm.js$/)).length > 0) { %>
+	<script crossorigin="anonymous" src="<%= htmlWebpackPlugin.files.js.filter(entry => entry.match(/bundle(\.\w{5})?.esm.js$/))[0] %>" type="module"></script>
 	<%
 		/*Fetch and Promise polyfills are not needed for browsers that support type=module
 		Please re-evaluate below line if adding more polyfills.*/
 	%>
-	<script nomodule src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"></script>
-	<script nomodule defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+	<script nomodule src="<%= cli.entrypoints['polyfills'] %>"></script>
+	<script nomodule defer src="<%= cli.entrypoints['bundle'] %>"></script>
 <% } else { %>
-	<script <%= htmlWebpackPlugin.options.scriptLoading %>  src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-	<script nomodule src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"></script>
+	<script <%= htmlWebpackPlugin.options.scriptLoading %>  src="<%= cli.entrypoints['bundle'] %>"></script>
+	<script nomodule src="<%= cli.entrypoints['polyfills'] %>"></script>
 <% } %>
diff --git a/packages/cli/lib/resources/head-end.ejs b/packages/cli/lib/resources/head-end.ejs
@@ -1,11 +1,10 @@
 <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
-<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
-	<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+<% if (cli.manifest.theme_color) { %>
+	<meta name="theme-color" content="<%= cli.manifest.theme_color %>">
 <% } %>
-<% const loadManifest = htmlWebpackPlugin.options.createLoadManifest(compilation.assets, webpack.namedChunkGroups);%>
-<% const filesRegexp = htmlWebpackPlugin.options.inlineCss ? /\.(chunk\.\w{5}\.css|js)$/ : /\.(css|js)$/;%>
-<% for (const file in loadManifest[htmlWebpackPlugin.options.url]) { %>
-	<% if (htmlWebpackPlugin.options.preload && file && file.match(filesRegexp)) { %>
+<% const filesRegexp = cli.inlineCss ? /\.(chunk\.\w{5}\.css|js)$/ : /\.(css|js)$/;%>
+<% for (const file in cli.loadManifest[cli.url]) { %>
+	<% if (cli.preload && file && file.match(filesRegexp)) { %>
 		<% /* crossorigin for main bundle as that is loaded from `<script type=module` tag, other lazy loaded bundles are from webpack so its not needed */ %>
 		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.esm\.js$/)?'crossorigin="anonymous"':'' %>>
 	<% } %>

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -92,7 +92,7 @@
     "compression-webpack-plugin": "^6.0.4",
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^6.2.1",
-    "critters-webpack-plugin": "^2.5.0",
+    "critters-webpack-plugin": "^3.0.2",
     "cross-spawn-promise": "^0.10.1",
     "css-loader": "^5.2.4",
     "ejs-loader": "^0.5.0",
@@ -103,8 +103,8 @@
     "get-port": "^5.0.0",
     "gittar": "^0.1.0",
     "glob": "^7.1.4",
-    "html-webpack-exclude-assets-plugin": "0.0.7",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-skip-assets-plugin": "1.0.3",
     "ip": "^1.1.5",
     "isomorphic-unfetch": "^3.1.0",
     "kleur": "^4.1.4",

diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
@@ -3,11 +3,12 @@ const { existsSync } = require('fs');
 const { readFile } = require('fs').promises;
 const looksLike = require('html-looks-like');
 const { create, build } = require('./lib/cli');
-const { snapshot, hasKey, isWithin } = require('./lib/utils');
+const { snapshot } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
 const { promisify } = require('util');
 const glob = promisify(require('glob').glob);
+const minimatch = require('minimatch');
 
 const prerenderUrlFiles = [
 	'prerender-urls.json',
@@ -35,13 +36,15 @@ function getRegExpFromMarkup(markup) {
 	return new RegExp(minifiedMarkup);
 }
 
-function testMatch(src, tar) {
-	let k, tmp;
-	let keys = Object.keys(tar);
-	expect(Object.keys(src)).toHaveLength(keys.length);
-	for (k in src) {
-		expect(hasKey(k, keys)).toBeTruthy();
-		if (!isWithin(src[k], tar[tmp])) return false;
+function testMatch(received, expected) {
+	let receivedKeys = Object.keys(received);
+	let expectedKeys = Object.keys(expected);
+	expect(receivedKeys).toHaveLength(expectedKeys.length);
+	for (let key in expected) {
+		const receivedKey = receivedKeys.find(k => minimatch(k, key));
+		expect(key).toFindMatchingKey(receivedKey);
+
+		expect(receivedKey).toBeCloseInSize(received[receivedKey], expected[key]);
 	}
 }
 
@@ -184,15 +187,16 @@ describe('preact build', () => {
 		expect(existsSync(file)).toBe(true);
 	});
 
-	it('should use template from the code folder', async () => {
-		// app with custom template set via preact.config.js
+	it('should use custom `template.html`', async () => {
 		let dir = await subject('custom-template');
 		await build(dir);
 
 		let file = join(dir, 'build/index.html');
 		let html = await readFile(file, 'utf-8');
 
-		looksLike(html, images.template);
+		expect(html).toEqual(
+			expect.stringMatching(getRegExpFromMarkup(images.template))
+		);
 	});
 
 	it('should patch global location object', async () => {
@@ -217,28 +221,8 @@ describe('preact build', () => {
 		expect(existsSync(file)).toBe(true);
 	});
 
-	it('should inject preact.* variables into template', async () => {
-		let dir = await subject('custom-template-2');
-		await build(dir);
-
-		let file = join(dir, 'build/index.html');
-		let html = await readFile(file, 'utf-8');
-
-		looksLike(html, images.templateReplaced);
-	});
-
-	it('should replace title with <%= preact.title %>', async () => {
-		let dir = await subject('custom-template-3');
-		await build(dir);
-
-		let file = join(dir, 'build/index.html');
-		let html = await readFile(file, 'utf-8');
-
-		looksLike(html, images.templateReplaced);
-	});
-
 	it('should error out for invalid argument', async () => {
-		let dir = await subject('custom-template-3');
+		let dir = await subject('custom-template');
 		const mockExit = jest.spyOn(process, 'exit').mockImplementation(() => {});
 		expect(build(dir, { 'service-worker': false })).rejects.toEqual(
 			new Error('Invalid argument found.')