preactjs · marvinhagemeister · Mar 28, 2021
diff --git a/.changeset/gorgeous-badgers-bake.md 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
@@ -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/[email protected]/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);