refactor: Removing unnecessary build outputs (#1499)

* refactor: Removing unnecessary build outputs

* docs: Adding changeset

* fix: Adding fallback for SW when 200.html not present

* test: Correcting SW test

* fix: PR comments

Author: rschristian

.changeset/empty-ladybugs-attend.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+CLI now only conditionally outputs 200.html & preact_prerender_data.json

packages/cli/lib/lib/webpack/render-html-plugin.js

@@ -55,7 +55,7 @@ module.exports = async function (config) {
 		writeFileSync(template, content);
 	}
 
-	const htmlWebpackConfig = (values) => {
+	const htmlWebpackConfig = values => {
 		const { url, title, ...routeData } = values;
 		// Do not create a folder if the url is for a specific file.
 		const filename = url.endsWith('.html')
@@ -151,15 +151,20 @@ module.exports = async function (config) {
 	 * And we dont have to cache every single html file.
 	 * Go easy on network usage of clients.
 	 */
-	!pages.find((page) => page.url === PREACT_FALLBACK_URL) &&
+	!pages.find(page => page.url === PREACT_FALLBACK_URL) &&
+		config.sw &&
 		pages.push({ url: PREACT_FALLBACK_URL });
 
 	const resultPages = pages
 		.map(htmlWebpackConfig)
-		.map((conf) => new HtmlWebpackPlugin(conf))
-		.concat([new HtmlWebpackExcludeAssetsPlugin()])
-		.concat([...pages.map((page) => new PrerenderDataExtractPlugin(page))]);
-	return resultPages;
+		.map(conf => new HtmlWebpackPlugin(conf))
+		.concat([new HtmlWebpackExcludeAssetsPlugin()]);
+
+	return config.prerender
+		? resultPages.concat([
+				...pages.map(page => new PrerenderDataExtractPlugin(page)),
+		  ])
+		: resultPages;
 };
 
 // Adds a preact_prerender_data in every folder so that the data could be fetched separately.
@@ -171,7 +176,7 @@ class PrerenderDataExtractPlugin {
 		this.data_ = JSON.stringify(cliData.preRenderData || {});
 	}
 	apply(compiler) {
-		compiler.hooks.emit.tap('PrerenderDataExtractPlugin', (compilation) => {
+		compiler.hooks.emit.tap('PrerenderDataExtractPlugin', compilation => {
 			if (this.location_ === `${PREACT_FALLBACK_URL}/`) {
 				// We dont build prerender data for `200.html`. It can re-use the one for homepage.
 				return;

packages/cli/sw/index.js

@@ -20,7 +20,9 @@ export function setupRouting() {
 
 	setCatchHandler(({ event }) => {
 		if (isNav(event)) {
-			return caches.match(getCacheKeyForURL('/200.html'));
+			return caches.match(
+				getCacheKeyForURL('/200.html') || getCacheKeyForURL('/index.html')
+			);
 		}
 		return Response.error();
 	});

packages/cli/tests/build.test.js

@@ -42,7 +42,7 @@ function getRegExpFromMarkup(markup) {
 function testMatch(src, tar) {
 	let k, tmp;
 	let keys = Object.keys(tar);
-	expect(keys).toHaveLength(Object.keys(src).length);
+	expect(Object.keys(src)).toHaveLength(keys.length);
 	for (k in src) {
 		expect(hasKey(k, keys)).toBeTruthy();
 		if (!isWithin(src[k], tar[tmp])) return false;

packages/cli/tests/images/build.js

@@ -16,7 +16,6 @@ exports.default = exports.full = Object.assign({}, common, {
 	'bundle.7e56a.css': 901,
 	'favicon.ico': 15086,
 	'index.html': 2034,
-	'200.html': 613,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 	'push-manifest.json': 812,

packages/cli/tests/service-worker.test.js

@@ -9,7 +9,7 @@ async function enableOfflineMode(page, browser) {
 	await sleep(2000); // wait for service worker installation.
 	await page.setOfflineMode(true);
 	const targets = await browser.targets();
-	const serviceWorker = targets.find((t) => t.type() === 'service_worker');
+	const serviceWorker = targets.find(t => t.type() === 'service_worker');
 	const serviceWorkerConnection = await serviceWorker.createCDPSession();
 	await serviceWorkerConnection.send('Network.enable');
 	await serviceWorkerConnection.send('Network.emulateNetworkConditions', {
@@ -57,7 +57,7 @@ describe('preact service worker tests', () => {
 		const offlineContent = await page.content();
 		await page.waitForSelector('h1');
 		expect(
-			await page.$$eval('h1', (nodes) => nodes.map((n) => n.innerText))
+			await page.$$eval('h1', nodes => nodes.map(n => n.innerText))
 		).toEqual(['Preact App', 'Home']);
 		expect(offlineContent).not.toEqual(initialContent);
 	});
@@ -86,13 +86,11 @@ describe('preact service worker tests', () => {
 	});
 
 	it('should respond with 200.html when offline', async () => {
-		const swText = await fetch('http://localhost:3000/sw-esm.js').then((res) =>
+		const swText = await fetch('http://localhost:3000/sw-esm.js').then(res =>
 			res.text()
 		);
 		// eslint-disable-next-line no-useless-escape
-		expect(swText).toContain(
-			'caches.match((t="/200.html",ce().getCacheKeyForURL(t)))'
-		);
+		expect(swText).toContain('caches.match(T("/200.html")||T("/index.html"))');
 		const page = await browser.newPage();
 		await page.setCacheEnabled(false);
 		await page.goto('http://localhost:3000', {
@@ -101,8 +99,8 @@ describe('preact service worker tests', () => {
 		await enableOfflineMode(page, browser);
 		await page.reload({ waitUntil: 'networkidle0' });
 		expect(
-			await page.$$eval('script[type=__PREACT_CLI_DATA__]', (nodes) =>
-				nodes.map((n) => n.innerText)
+			await page.$$eval('script[type=__PREACT_CLI_DATA__]', nodes =>
+				nodes.map(n => n.innerText)
 			)
 		).toEqual(['%7B%22preRenderData%22:%7B%22url%22:%22/200.html%22%7D%7D']);
 	});