From 4b35b8fee011f22850c4b11f799b2029ab31e67c Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Sun, 28 Mar 2021 22:16:18 +0200
Subject: [PATCH] Add support for using .htm instead of .html files

---
 .changeset/gorgeous-badgers-bake.md            |  6 ++++++
 packages/nomodule-plugin/index.js              |  2 +-
 packages/wmr/src/lib/output-utils.js           |  2 +-
 .../wmr/src/plugins/html-entries-plugin.js     |  6 +++---
 .../wmr/src/plugins/optimize-graph-plugin.js   |  2 +-
 packages/wmr/src/plugins/wmr/client.js         |  2 +-
 packages/wmr/test/fixtures.test.js             |  7 +++++++
 .../wmr/test/fixtures/htm-index/public/foo.js  |  1 +
 .../test/fixtures/htm-index/public/index.htm   |  7 +++++++
 .../test/fixtures/htm-index/public/index.js    |  3 +++
 .../test/fixtures/prod-htm-index/public/foo.js |  1 +
 .../fixtures/prod-htm-index/public/index.htm   |  7 +++++++
 .../fixtures/prod-htm-index/public/index.js    |  3 +++
 packages/wmr/test/production.test.js           | 18 ++++++++++++++++++
 14 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/gorgeous-badgers-bake.md
 create mode 100644 packages/wmr/test/fixtures/htm-index/public/foo.js
 create mode 100644 packages/wmr/test/fixtures/htm-index/public/index.htm
 create mode 100644 packages/wmr/test/fixtures/htm-index/public/index.js
 create mode 100644 packages/wmr/test/fixtures/prod-htm-index/public/foo.js
 create mode 100644 packages/wmr/test/fixtures/prod-htm-index/public/index.htm
 create mode 100644 packages/wmr/test/fixtures/prod-htm-index/public/index.js

diff --git a/.changeset/gorgeous-badgers-bake.md b/.changeset/gorgeous-badgers-bake.md
new file mode 100644
index 000000000..61f95a75b
--- /dev/null
+++ b/.changeset/gorgeous-badgers-bake.md
@@ -0,0 +1,6 @@
+---
+'@wmr-plugins/nomodule': minor
+'wmr': minor
+---
+
+Add support for .htm extension for HTML files
diff --git a/packages/nomodule-plugin/index.js b/packages/nomodule-plugin/index.js
index df04883e0..7f9b99da1 100644
--- a/packages/nomodule-plugin/index.js
+++ b/packages/nomodule-plugin/index.js
@@ -32,7 +32,7 @@ function nomodulePlugin({} = {}) {
 			// Update all the HTML files with <script type=module> to add legacy loading via Shimport+Polyfills
 			for (const fileName in bundle) {
 				const asset = bundle[fileName];
-				if (asset.type !== 'asset' || typeof asset.source !== 'string' || !asset.fileName.match(/\.html$/)) continue;
+				if (asset.type !== 'asset' || typeof asset.source !== 'string' || !asset.fileName.match(/\.html?$/)) continue;
 				if (!/<script(?:\s[^>]*)?\s+type=(['"])module\1/.test(asset.source)) continue;
 				// this is gross obviously
 				const POLYFILL = 'https://unpkg.com/@babel/polyfill@7.12.1/browser.js'; // https://unpkg.com/regenerator-runtime
diff --git a/packages/wmr/src/lib/output-utils.js b/packages/wmr/src/lib/output-utils.js
index 855008c32..f11d7d3f7 100644
--- a/packages/wmr/src/lib/output-utils.js
+++ b/packages/wmr/src/lib/output-utils.js
@@ -35,7 +35,7 @@ function scoreAsset(asset) {
 		return asset.isEntry ? 10 : asset.isDynamicEntry ? 8 : 6;
 	}
 	// List HTML files first, sorted by path depth
-	if (/\.html$/.test(asset.fileName)) {
+	if (/\.html?$/.test(asset.fileName)) {
 		return 30 - asset.fileName.split('/').length;
 	}
 	return 1;
diff --git a/packages/wmr/src/plugins/html-entries-plugin.js b/packages/wmr/src/plugins/html-entries-plugin.js
index 81086f63f..5ca23fd8b 100644
--- a/packages/wmr/src/plugins/html-entries-plugin.js
+++ b/packages/wmr/src/plugins/html-entries-plugin.js
@@ -34,7 +34,7 @@ export default function htmlEntriesPlugin({ cwd, publicDir, publicPath } = {}) {
 
 	/** @this {import('rollup').PluginContext} */
 	async function handleHtmlEntry(id) {
-		if (!/\.html$/.test(id)) return id;
+		if (!/\.html?$/.test(id)) return id;
 
 		this.addWatchFile(id);
 		const resolved = await this.resolve(id, undefined, { skipSelf: true });
@@ -131,7 +131,7 @@ export default function htmlEntriesPlugin({ cwd, publicDir, publicPath } = {}) {
 			const scripts = await Promise.all(entries.map(handleHtmlEntry.bind(this)));
 			opts.input = scripts.flat();
 			if (opts.input.length === 0) {
-				const htmlEntries = entries.filter(id => /\.html$/.test(id));
+				const htmlEntries = entries.filter(id => /\.html?$/.test(id));
 
 				let desc = htmlEntries.slice(0, 3).join(', ');
 				if (htmlEntries.length > 3) desc += ` (+${htmlEntries.length - 3} more)`;
@@ -146,7 +146,7 @@ export default function htmlEntriesPlugin({ cwd, publicDir, publicPath } = {}) {
 		async generateBundle(_, bundle) {
 			for (const id in bundle) {
 				const thisAsset = bundle[id];
-				if (thisAsset.type !== 'asset' || !/\.html$/.test(thisAsset.fileName)) continue;
+				if (thisAsset.type !== 'asset' || !/\.html?$/.test(thisAsset.fileName)) continue;
 
 				/** @type {ExtendedAsset} */
 				const htmlAsset = Object.assign(thisAsset, {
diff --git a/packages/wmr/src/plugins/optimize-graph-plugin.js b/packages/wmr/src/plugins/optimize-graph-plugin.js
index 12dfff8c5..5ae1748cc 100644
--- a/packages/wmr/src/plugins/optimize-graph-plugin.js
+++ b/packages/wmr/src/plugins/optimize-graph-plugin.js
@@ -252,7 +252,7 @@ function hoistEntryCss(graph) {
 	for (const fileName in graph.bundle) {
 		/** @type {ExtendedAsset | Chunk} */
 		const asset = graph.bundle[fileName];
-		if (asset.type !== 'asset' || !/\.html$/.test(fileName)) continue;
+		if (asset.type !== 'asset' || !/\.html?$/.test(fileName)) continue;
 
 		const cssImport = asset.referencedFiles && asset.referencedFiles.find(f => f.endsWith('.css'));
 		if (!cssImport || !asset.importedIds) continue;
diff --git a/packages/wmr/src/plugins/wmr/client.js b/packages/wmr/src/plugins/wmr/client.js
index 1aaf22756..98a71d41c 100644
--- a/packages/wmr/src/plugins/wmr/client.js
+++ b/packages/wmr/src/plugins/wmr/client.js
@@ -26,7 +26,7 @@ connect();
 
 let errorCount = 0;
 
-const URL_SUFFIX = /\/(index\.html)?$/;
+const URL_SUFFIX = /\/(index\.html?)?$/;
 
 function handleMessage(e) {
 	const data = JSON.parse(e.data);
diff --git a/packages/wmr/test/fixtures.test.js b/packages/wmr/test/fixtures.test.js
index 44dd1fd17..dcc2fdf29 100644
--- a/packages/wmr/test/fixtures.test.js
+++ b/packages/wmr/test/fixtures.test.js
@@ -69,6 +69,13 @@ describe('fixtures', () => {
 		});
 	});
 
+	it('should work with .htm extension', async () => {
+		await loadFixture('htm-index', env);
+		instance = await runWmrFast(env.tmp.path);
+		await waitForNotMessage(instance.output, `missing an "index.html"`);
+		expect(await getOutput(env, instance)).toMatch(`<h1>foo</h1>`);
+	});
+
 	describe('empty', () => {
 		it('should print warning for missing index.html file in public dir', async () => {
 			await loadFixture('empty', env);
diff --git a/packages/wmr/test/fixtures/htm-index/public/foo.js b/packages/wmr/test/fixtures/htm-index/public/foo.js
new file mode 100644
index 000000000..3329a7d97
--- /dev/null
+++ b/packages/wmr/test/fixtures/htm-index/public/foo.js
@@ -0,0 +1 @@
+export const foo = 'foo';
diff --git a/packages/wmr/test/fixtures/htm-index/public/index.htm b/packages/wmr/test/fixtures/htm-index/public/index.htm
new file mode 100644
index 000000000..82b5f8718
--- /dev/null
+++ b/packages/wmr/test/fixtures/htm-index/public/index.htm
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+	<body>
+		<h1>Hello wmr</h1>
+		<script src="./index.js" type="module"></script>
+	</body>
+</html>
diff --git a/packages/wmr/test/fixtures/htm-index/public/index.js b/packages/wmr/test/fixtures/htm-index/public/index.js
new file mode 100644
index 000000000..eaf8f3ac3
--- /dev/null
+++ b/packages/wmr/test/fixtures/htm-index/public/index.js
@@ -0,0 +1,3 @@
+import { foo } from './foo.js';
+
+document.querySelector('h1').textContent = foo;
diff --git a/packages/wmr/test/fixtures/prod-htm-index/public/foo.js b/packages/wmr/test/fixtures/prod-htm-index/public/foo.js
new file mode 100644
index 000000000..3329a7d97
--- /dev/null
+++ b/packages/wmr/test/fixtures/prod-htm-index/public/foo.js
@@ -0,0 +1 @@
+export const foo = 'foo';
diff --git a/packages/wmr/test/fixtures/prod-htm-index/public/index.htm b/packages/wmr/test/fixtures/prod-htm-index/public/index.htm
new file mode 100644
index 000000000..82b5f8718
--- /dev/null
+++ b/packages/wmr/test/fixtures/prod-htm-index/public/index.htm
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+	<body>
+		<h1>Hello wmr</h1>
+		<script src="./index.js" type="module"></script>
+	</body>
+</html>
diff --git a/packages/wmr/test/fixtures/prod-htm-index/public/index.js b/packages/wmr/test/fixtures/prod-htm-index/public/index.js
new file mode 100644
index 000000000..eaf8f3ac3
--- /dev/null
+++ b/packages/wmr/test/fixtures/prod-htm-index/public/index.js
@@ -0,0 +1,3 @@
+import { foo } from './foo.js';
+
+document.querySelector('h1').textContent = foo;
diff --git a/packages/wmr/test/production.test.js b/packages/wmr/test/production.test.js
index 56786be9c..10e3bb4c1 100644
--- a/packages/wmr/test/production.test.js
+++ b/packages/wmr/test/production.test.js
@@ -24,6 +24,24 @@ describe('production', () => {
 		cleanup.length = 0;
 	});
 
+	it('should build with .htm index file', async () => {
+		await loadFixture('prod-htm-index', env);
+		instance = await runWmr(env.tmp.path, 'build');
+		const code = await instance.done;
+		console.info(instance.output.join('\n'));
+		expect(code).toBe(0);
+
+		const readdir = async f => (await fs.readdir(path.join(env.tmp.path, f))).filter(f => f[0] !== '.');
+		const readfile = async f => await fs.readFile(path.join(env.tmp.path, 'dist', f), 'utf-8');
+
+		const files = await readdir('dist/');
+		const js = files.find(f => f.endsWith('.js'));
+		const html = files.find(f => f.endsWith('.htm'));
+
+		expect(await readfile(js)).toMatch(/['"]foo["']/);
+		expect(await readfile(html)).toMatch(/Hello wmr/);
+	});
+
 	describe('demo app', () => {
 		it('should serve the demo app', async () => {
 			await loadFixture('../../../../examples/demo', env);