Add support for using .htm instead of .html files

marvinhagemeister · marvinhagemeister · commit 18ca2757f0d3 · 2021-03-28T22:16:45.000+02:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ function scoreAsset(asset) {`
`35`	`35`	`return asset.isEntry ? 10 : asset.isDynamicEntry ? 8 : 6;`
`36`	`36`	`}`
`37`	`37`	`// List HTML files first, sorted by path depth`
`38`		`- if (/\.html$/.test(asset.fileName)) {`
	`38`	`+ if (/\.html?$/.test(asset.fileName)) {`
`39`	`39`	`return 30 - asset.fileName.split('/').length;`
`40`	`40`	`}`
`41`	`41`	`return 1;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { foo } from './foo.js';`
	`2`	`+`
	`3`	`+document.querySelector('h1').textContent = foo;`