Add support for using .htm instead of .html files

Author: marvinhagemeister

.changeset/gorgeous-badgers-bake.md

@@ -0,0 +1,6 @@
+---
+'@wmr-plugins/nomodule': minor
+'wmr': minor
+---
+
+Add support for .htm extension for HTML files

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

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;

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, {

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;

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);

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);

packages/wmr/test/fixtures/htm-index/public/foo.js

@@ -0,0 +1 @@
+export const foo = 'foo';

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>

packages/wmr/test/fixtures/htm-index/public/index.js

@@ -0,0 +1,3 @@
+import { foo } from './foo.js';
+
+document.querySelector('h1').textContent = foo;